Xavier — Design System

Color Tokens

38+ CSS custom properties for Xavier operations dashboards, workflow management, team governance, and product UI.

Accents

#4F46E5

Xavier Indigo

--xv-accent-indigo

Primary actions, system navigation, main metrics

#A3E635

Xavier Volt

--xv-accent-volt

CTA, progress, success highlights, active operations

#7C3AED

Xavier Violet

--xv-accent-violet

Secondary charts, intelligence blocks, advanced settings

#06B6D4

Xavier Cyan

--xv-accent-cyan

Links, info chips, automation states

#172554

Xavier Navy

--xv-accent-navy

Dark accents, headers, command center emphasis

Content

#111827

Content Primary

--xv-content-primary

Light: #111827Dark: #F1F5F9

Headings, body text

#4B5563

Content Secondary

--xv-content-secondary

Light: #4B5563Dark: #CBD5E1

Labels, captions, secondary text

#9CA3AF

Content Tertiary

--xv-content-tertiary

Light: #9CA3AFDark: #94A3B8

Muted/decorative text only

#4F46E5

Content Link

--xv-content-link

Light: #4F46E5Dark: #818CF8

Links and link icons

Interactive

#4F46E5

Interactive Primary

--xv-interactive-primary

Light: #4F46E5Dark: #818CF8

Buttons, focus rings, active items

#A3E635

Interactive Accent

--xv-interactive-accent

Light: #A3E635Dark: #A3E635

High-energy CTA, progress fills

#D1D5DB

Interactive Secondary

--xv-interactive-secondary

Light: #D1D5DBDark: #4B5563

Input borders, dividers

#1F2A05

Interactive Control

--xv-interactive-control

Light: #1F2A05Dark: #1F2A05

Text/icons ON Volt accent

Background

#F8FAFC

Background Screen

--xv-bg-screen

Light: #F8FAFCDark: #0C1222

Page background

#FFFFFF

Background Elevated

--xv-bg-elevated

Light: #FFFDark: #162032

Cards, modals, elevated surfaces

#EEF2F7

Background Neutral

--xv-bg-neutral

Light: #EEF2F7Dark: rgba(255,255,255,.08)

Panels, table headers, inner areas

#EEF2FF

Background Soft Indigo

--xv-bg-soft-indigo

Indigo-tinted panels, highlights

Support

#E0E7FF

Indigo Light

--xv-support-indigo-light

Indigo badge/chip backgrounds

#ECFCCB

Volt Light

--xv-support-volt-light

Volt badge/chip backgrounds

#CFFAFE

Cyan Light

--xv-support-cyan-light

Info badge/link backgrounds

#EDE9FE

Violet Light

--xv-support-violet-light

Violet badge/hover backgrounds

#F1F5F9

Slate Light

--xv-support-slate-light

Neutral surface backgrounds

Sentiment / Feedback

#DC2626

Sentiment Negative

--xv-sentiment-negative

Light: #DC2626Dark: #FCA5A5

Errors, destructive actions, blockers

#16A34A

Sentiment Positive

--xv-sentiment-positive

Light: #16A34ADark: #86EFAC

Success, approvals, completed tasks

#F59E0B

Sentiment Warning

--xv-sentiment-warning

Light: #F59E0BDark: #FDE68A

Warnings, pending reviews

#2563EB

Feedback Info

--xv-feedback-info

Informational messages, system notices

Chart Palette

#4F46E5

Chart 1

--xv-chart-1

#A3E635

Chart 2

--xv-chart-2

#06B6D4

Chart 3

--xv-chart-3

#7C3AED

Chart 4

--xv-chart-4

#F59E0B

Chart 5

--xv-chart-5

#16A34A

Chart 6

--xv-chart-6

#172554

Chart 7

--xv-chart-7

#94A3B8

Chart 8

--xv-chart-8

Typography

Inter for product UI. Display styles for executive dashboards and operational reports.

Display Styles

Display Large

96px / Bold / 85% line-height / 2% tracking

Display Medium

64px / Bold / 85% line-height / 1.5% tracking

Display Small

40px / Bold / 85% line-height / 1.5% tracking

Product Styles (Inter)

Title Screen

30px / Semi Bold / 34px line-height / -2.5%

Title Section

26px / Semi Bold / 32px / -1.5%

Title Subsection

22px / Semi Bold / 28px / -1.5%

Title Body

18px / Semi Bold / 24px / -1%

Body Large — Monitor team performance across departments with real-time operational intelligence.

16px / Regular / 24px / -0.5%

Body Default — 3 pending approval requests detected. Review recommended actions below.

14px / Regular / 22px / 1%

Link LargeLink Default

Links: Semi Bold + Underline

Spacing Scale

18 base values from 4px to 128px. 8px grid base.

--space-4

--space-8

--space-12

--space-16

--space-24

--space-32

--space-40

--space-48

--space-64

--space-80

--space-96

--space-128

Padding Tokens

8px

16px

24px

32px

Radius Tokens

Adaptive per platform. Mobile radius values must be applied via breakpoint.

Desktop

16pxsmall

20pxmedium

30pxlarge

40pxx-large

60px2x-large

Mobile

10pxsmall

16pxmedium

24pxlarge

32pxx-large

48px2x-large

Buttons

Primary uses --xv-interactive-accent bg + --xv-interactive-control text. Height: 48px (large). Focus: 2px outline, 2px offset.

Priorities

Sizes

States

Focus Ring Spec

2px / 2px offset / interactive-primary

2px / 2px offset / sentiment-negative

Inputs

Border: --xv-interactive-secondary. Focus: 3px solid --xv-interactive-primary. Error: --xv-sentiment-negative. Use label + description, never placeholder alone.

Team name

Identifies this team across operations

Default state

Team name (focused)

Identifies this team across operations

Focus: 3px solid interactive-primary

Headcount limit

Maximum team size allowed

Headcount must be a positive number

Department

Assigned organizational unit

Disabled state

Metric Input

Budget threshold

BRL ▾

Search Input

Cards

Small (88-300px), Large (300px+). Uses radius-medium and official spacing.

Team Overview

Team Health

Productivity score: 92 — Excellent

Department Performance Chart

Department Performance

Compare OKR completion, headcount, and budget utilization across Engineering, Product, and Operations.

Workflow Preview

Approval Queue

Click to review pending items

System Status

Last sync 1 min ago — All services operational

List Items

7 variants documented. Navigation, Switch, Checkbox, Radio, No Action.

Navigation

E

Engineering

24 members

›

P

Product

12 members

›

+

Add department

›

Switch

Approval notifications

Notify when items need review

Monthly report

Receive operations summary

Checkbox

✓

Include archived teams

Show external contractors

Radio

All departments

Engineering only

No Action

✓

Onboarding complete

12 new members across 3 teams

Feedback Components

Action prompts, snackbars, progress, spinners, and state screens.

Action Prompts

Workflow sync failed

We couldn't connect to the HR integration API. Please check your credentials and try again.

Budget threshold reached

Engineering department has consumed 92% of Q2 budget. Review allocation and consider adjustment.

Quarterly review complete

All 8 departments have submitted reviews. 3 new action items and 2 escalations are available.

Snackbar

Team configuration saved successfullyUndo

Permission update failed. Try again.

Progress

Step 1 of 4 — Selecting departments

Step 3 of 4 — Review

Complete

Spinner

Processing organizational data...

State Screens

📋

No teams found

Create your first team to start managing operations and tracking performance.

!

Something went wrong

We're having trouble loading this page. Please check your connection and try again.

✓

Onboarding complete!

All new team members have been assigned roles and permissions.

Overlays

Modal desktop: 540px width, max-height 800px, 80px safe zone. Bottom sheet: mobile full width.

Modal

Max: 540px x 800px | Safe zone: 80px from viewport edges

Bottom Sheet

Select department

E

Engineering

P

Product

O

Operations

Popover

Navigation Components

Tabs, chips, and segmented controls.

Tabs

Overview Teams Workflows Reports

Chips

All Departments Engineering Product Operations Finance

Segmented Control

7 days 14 days 30 days 90 days

Badges xavier_extension

Status indicators, counts, and labels. Used for team states, approval statuses, and operational health.

Variants

Active New Warning Critical Info Success Neutral Admin

Sizes

Small Default Large

With Count

5 8 pending 3 teams

Xavier Usage

Team states: active (green), paused (yellow), archived (red), draft (neutral)
Approval status: approved (green), pending (indigo), rejected (red), review (yellow)
Departments: Engineering (indigo), Product (volt), Operations (violet), Finance (cyan)

Avatar xavier_extension

User and entity representation. Used for team members, managers, and department branding.

Variants

RS

JD

Sizes

S

M

L

XL

Group

A

B

C

+5

Tooltip xavier_extension

Contextual help on hover or focus. Used for metric explanations, truncated text, and icon-only buttons.

Placements

Tooltip top

Tooltip bottom

Tokens

      background: var(--xv-color-dark) → #111827

      color: var(--xv-interactive-contrast) → #FFFFFF

      border-radius: 6px

      padding: 6px 12px

      font-size: 12px

      max-width: 280px

      z-index: 1000

Table xavier_extension

Data tables for team lists, approval workflows, budget tracking, and audit logs.

Default Table

Team	Department	Members	Health	Status
Core Platform	Engineering	12	Strong	Active
Growth Squad	Product	8	Watch	Active
Finance Ops	Finance	6	Poor	Paused

Breadcrumb xavier_extension

Hierarchical navigation path. Used in team detail, department settings, and approval workflows.

Dashboard / Teams / Core Platform

Pagination xavier_extension

Navigate through large data sets. Used in team rosters, approval logs, and audit trails.

…

Showing 1–20 of 168 results

Skeleton xavier_extension

Loading placeholders. Used while fetching team data, approval queues, and operational metrics.

Card Skeleton

Text Skeleton

Empty State xavier_extension

Shown when no data exists. Every data-driven screen must have an empty state.

📋

No approvals pending

All workflow items have been reviewed. New requests will appear here automatically.

🔍

No results

Your search didn't match any teams. Try adjusting your filters or search terms.

Alert / Banner xavier_extension

Contextual messages at page or section level. Used for system notices, data freshness, and action results.

Data refreshed successfully

All team metrics are current as of 2 minutes ago.

Data may be stale

Last sync was 6 hours ago. Some metrics may be outdated.

Integration error

Unable to reach the HR data source. Please try again in a few minutes.

Pro tip

Enable Smart Alerts to get notified when team health changes.

Dropdown Menu xavier_extension

Contextual menu triggered by button click. Used for bulk actions, export options, and settings menus.

Actions

Export as CSV

Export as PDF

Archive selected

Dialog xavier_extension

Confirmation dialogs for destructive actions. Requires explicit user decision before proceeding.

Accordion xavier_extension

Collapsible content sections. Used for FAQ, department details, and metric breakdowns.

Team Performance ▼

Detailed breakdown of OKR completion, velocity, and collaboration index across all active sprints and projects.

Budget Allocation ▶

Headcount Planning ▶

Divider xavier_extension

Visual separator between content sections.

Variants

Full width

With label

or

Inset

Metric Card xavier_extension

KPI display card for dashboards. Shows value, trend, and optional sparkline.

Active Teams

24

↑ 3 vs last quarter

Total Headcount

186

↓ 2% vs last quarter

Org Health

92

Excellent — no action needed

Pending Approvals

8

Across 3 departments

Product Patterns

Common product flow patterns using Xavier components and tokens.

Operations Summary

Active Teams24

Open Requests18

Completion Rate94.2%

Org Health92

Department Comparison

Department A

ENG ▾

vs

Department B

OPS ▾

Engineering leads by 37% in budget · Q2 2026

Form Validation

Email address Please enter a valid email address

Password Password must be at least 8 characters

Empty State

📋

No workflows configured

Set up your first approval workflow to start managing operations.

Success Screen

✓

Report generated!

24 teams analyzed across 8 departments

Download ready · PDF · 1.8 MB

Error Screen

!

Data sync failed

Unable to connect to the HR integration. Please check your credentials and try again.

Progress Screen

Processing organizational data...

Generating department intelligence

This usually takes less than a minute.

Dashboard Layout xavier_extension

Standard layout pattern for data-heavy pages in Xavier.

Structure

☰ Page Header — Title + Breadcrumb + Actions

KPI 1

KPI 2

KPI 3

KPI 4

Filter Bar — Department · Date Range · Status · Search

Main Content Area
(Table / Grid / Charts)

Sidebar Panel
(Details / Actions)

Form Layout xavier_extension

Standard form patterns for settings, onboarding, and configuration pages.

Rules

Max width: 560px for single-column forms
Section spacing: var(--space-32) between groups
Field spacing: var(--space-16) between fields
Labels: Always above input, never floating
Errors: Inline below field, use --xv-sentiment-negative
Submit: Full-width primary button at bottom

Filter Pattern xavier_extension

Data filtering for team lists, approval queues, and operational reports.

All Departments Engineering Product Operations

Loading Strategy xavier_extension

Progressive data loading patterns used across the platform.

Strategy

1. Shell first: Render sidebar + header + skeleton immediately
2. KPIs second: Load summary metrics (fast endpoint)
3. Main data third: Load table/grid data (may be slower)
4. Charts last: Load visualization data progressively
5. Error recovery: Retry button per section, never full-page error

Dark Mode Preview

All components using dark mode token values.

Components in Dark Mode

Buttons

Input

Team name

Card

Image

Dark Card

Card in dark mode with elevated background.

Snackbar

Team configuration saved View

Action Prompt

All departments synced

Organizational data is current across all connected integrations.

AI Agent Rules

Non-negotiable rules for any AI agent generating UI for Xavier.

⚠ Use only documented tokens. Never hardcode colors or spacing.

⚠ Use only documented components. Never invent new ones.

🎨 Never invent colors. Only use the 38+ official CSS custom properties.

📏 Never invent spacing. Only use space-4 through space-128.

⏳ Always include loading, error, and empty states for every screen.

♿ Always include accessibility: ARIA, keyboard nav, focus rings, contrast.

❓ Mark unknowns as validation_needed. Never guess token values.

Mandatory Output Format (JSON)

{
  "screen_name": "",
  "components_used": [],
  "tokens_used": [],
  "patterns_used": [],
  "states_covered": [],
  "accessibility_notes": [],
  "validation_needed": []
}

Component Selection Logic

Need	Use	Never Use
Primary action	Button Primary	Link styled as button
Cancel/dismiss	Button Secondary or Tertiary	Red button (unless destructive)
Destructive action	Button Negative	Primary button
Navigate	List Item Navigation	Custom link row
Toggle setting	List Item Switch	Checkbox for on/off
Brief feedback	Snackbar	Alert/Modal
Blocking prompt	Action Prompt or Modal	Snackbar
Budget/metric entry	Metric Input	Plain text input

Benchmark & Gap Analysis

Component coverage compared to enterprise design systems. Updated 2026-06-04.

Our Coverage Summary

Category	Total Components	Coverage
Foundations (Color, Typography, Spacing, Radius)	4	Complete
Form Controls (Button, Input, Checkbox, Radio, Switch, Select)	6	Complete
Data Display (Card, Table, Badge, Avatar, Metric Card)	5	Complete
Feedback (Alert, Snackbar, Progress, Spinner, Empty State, Skeleton)	6	Complete
Overlay (Modal, Dialog, Bottom Sheet, Popover, Tooltip, Dropdown)	6	Complete
Navigation (Tabs, Chips, Segmented Control, Breadcrumb, Pagination)	5	Complete
Layout (Accordion, Divider, Dashboard Layout)	3	Complete
Patterns (7 product patterns + 4 layout patterns)	11	Complete

Backlog (P2/P3)

Component	Priority	Reason
Slider / Range	P2	Budget sliders and capacity planning
Date Picker	P2	Period selection in reports
Tag / Tag Group	P2	Team labels and department tags
ComboBox	P2	Team member search with autocomplete
Toast	P2	Non-blocking success/error notifications

Pending Items

Items requiring validation, export, or access before full completion.

Item	Impact	Priority	How to Resolve
Motion timing values [NEEDS_VALIDATION]	No ms durations or cubic-bezier curves confirmed	P1	Export from Figma motion specs
Elevation / shadow tokens [NEEDS_VALIDATION]	Box-shadow values are estimated	P1	Export from Figma or inspect production
HR Integration specs	Exact API contract for team data sync	P0	Request integration documentation
Illustration guidelines	Brand illustrations for empty states	P1	Request access from Brand team
Custom display font [NEEDS_VALIDATION]	Display typography uses Inter as default	P3	Evaluate custom brand font if needed

Xavier Design System

Color Tokens

Accents

Content

Interactive

Background

Support

Sentiment / Feedback

Chart Palette

Typography

Display Styles

Product Styles (Inter)

Spacing Scale

Padding Tokens

Radius Tokens

Desktop

Mobile

Buttons

Priorities

Sizes

States

Focus Ring Spec

Inputs

Metric Input

Search Input

Cards

List Items

Navigation

Switch

Checkbox

Radio

No Action

Feedback Components

Action Prompts

Snackbar

Progress

Spinner

State Screens

Overlays

Modal

Confirm team restructuring

Bottom Sheet

Popover

Navigation Components

Tabs

Chips

Segmented Control

Badges xavier_extension

Variants

Sizes

With Count

Xavier Usage

Avatar xavier_extension

Variants

Sizes

Group

Tooltip xavier_extension

Placements

Tokens

Table xavier_extension

Default Table

Breadcrumb xavier_extension

Pagination xavier_extension

Skeleton xavier_extension

Card Skeleton

Text Skeleton

Empty State xavier_extension

Alert / Banner xavier_extension

Dropdown Menu xavier_extension

Dialog xavier_extension

Archive Department?

Accordion xavier_extension

Divider xavier_extension

Variants

Metric Card xavier_extension

Product Patterns

Dashboard Layout xavier_extension

Structure

Form Layout xavier_extension

Rules