Colors

All color tokens are defined in registry.json as CSS custom properties in OKLCH color space , which provides perceptually uniform transitions between light and dark mode. Tokens are consumed as CSS variables and mapped to Tailwind utility classes via theme.generated.css.

Source of truth: apps/apollo-vertex/registry.json → auto-generates app/theme.generated.css. Do not edit theme.generated.css directly.

Usage


/* CSS */
background: var(--primary);
color: var(--primary-foreground);


/* Tailwind */
<div className="bg-primary text-primary-foreground" />

Backgrounds & Surfaces

Background--backgroundPage backgroundoklch(1 0 89.88)dark: oklch(0.21 0.03 258.5)

Card--cardCard surfaceoklch(1 0 89.88)dark: oklch(0.233 0.036 254.7)

Card Foreground--card-foregroundText on cardoklch(0.2394 0.0455 252.45)dark: oklch(0.9525 0.011 225.98)

Popover--popoverPopover/dropdown surfaceoklch(1 0 89.88)dark: oklch(0.21 0.03 258.5)

Popover Foreground--popover-foregroundText in popoversoklch(0.2394 0.0455 252.45)dark: oklch(0.985 0 0)

Muted--mutedMuted/subdued surfaceoklch(0.963 0.0062 255.48)dark: oklch(0.2648 0.0329 254.38)

Muted Foreground--muted-foregroundSubdued textoklch(0.4594 0.028 264.25)dark: oklch(0.72 0.03 254.38)

Foreground & Text

Foreground--foregroundPrimary text coloroklch(0.2394 0.0455 252.45)dark: oklch(0.985 0 0)

Primary Foreground--primary-foregroundText on primaryoklch(1 0 89.88)dark: oklch(0.166 0.0283 203.34)

Secondary Foreground--secondary-foregroundText on secondaryoklch(0.2394 0.0455 252.45)dark: oklch(0.9416 0.0145 244.72)

Accent Foreground--accent-foregroundText on accentoklch(0.2394 0.0455 252.45)dark: oklch(0.9416 0.0145 244.72)

Brand & Interactive

Primary--primaryPrimary brand coloroklch(0.64 0.115 208)dark: oklch(0.69 0.112 207)

Primary 50--primary-50Lightest tintoklch(0.95 0.035 218)

Primary 100--primary-100oklch(0.92 0.045 216)

Primary 200--primary-200oklch(0.86 0.060 214)

Primary 300--primary-300oklch(0.80 0.080 212)

Primary 400--primary-400oklch(0.75 0.100 210)

Primary 500--primary-500Mid-pointoklch(0.69 0.112 207)

Primary 600--primary-600Default primaryoklch(0.64 0.115 208)

Primary 700--primary-700oklch(0.60 0.125 210)

Primary 800--primary-800oklch(0.53 0.110 214)

Primary 900--primary-900Darkest shadeoklch(0.46 0.095 220)

Secondary--secondarySecondary interactive surfaceoklch(0.9593 0.0069 247.9)dark: oklch(0.3927 0.0289 240.86)

Accent--accentHover/focus accent surfaceoklch(0.9593 0.0069 247.9 / 0.75)dark: oklch(0.3927 0.0289 240.86 / 0.75)

Brand Orange--brand-orangeUiPath brand orange#fa4616

Insight

Insight 50--insight-50Lightest tintoklch(0.96 0.03 277)

Insight 100--insight-100oklch(0.92 0.05 277)

Insight 200--insight-200oklch(0.86 0.09 277)

Insight 300--insight-300oklch(0.78 0.14 277)

Insight 400--insight-400oklch(0.70 0.19 277)

Insight 500--insight-500Mid-pointoklch(0.62 0.22 277)

Insight 600--insight-600Default insightoklch(0.56 0.20 277)

Insight 700--insight-700oklch(0.48 0.17 277)

Insight 800--insight-800oklch(0.38 0.13 278)

Insight 900--insight-900Darkest shadeoklch(0.30 0.10 278)

Status

Destructive--destructiveError/danger actionsoklch(0.62 0.150 18)dark: oklch(0.68 0.155 18)

Destructive Foreground--destructive-foregroundText on destructiveoklch(1 0 89.88)dark: oklch(0.166 0.0283 203.34)

Success--successSuccess stateoklch(0.57 0.105 152)dark: oklch(0.70 0.120 152)

Success Foreground--success-foregroundText on successoklch(1 0 89.88)dark: oklch(0.166 0.0283 203.34)

Info--infoInformational stateoklch(0.60 0.125 210)dark: oklch(0.69 0.112 207)

Info Foreground--info-foregroundText on infooklch(1 0 89.88)dark: oklch(0.166 0.0283 203.34)

Warning--warningWarning stateoklch(0.80 0.1401 80.82)dark: oklch(0.6889 0.1401 80.82)

Warning Foreground--warning-foregroundText on warningoklch(0.166 0.0283 203.34)

Badge

Badge--badgeBadge backgroundoklch(0.5995 0.0199 253.42)dark: oklch(0.7196 0.0135 255.53)

Badge Foreground--badge-foregroundBadge textoklch(1 0 89.88)dark: oklch(0.166 0.0283 203.34)

Borders & Inputs

Border--borderDefault border coloroklch(0.9229 0.0065 252.13)dark: oklch(0.3068 0.0426 258.29)

Input--inputInput border coloroklch(0.9229 0.0065 252.13)dark: oklch(0.3068 0.0426 258.29)

Ring--ringFocus ring coloroklch(0.64 0.115 208)dark: oklch(0.69 0.112 207)

Charts

Chart 1--chart-1Primary chart coloroklch(0.64 0.115 208)dark: oklch(0.69 0.112 207)

Chart 2--chart-2Secondary chart coloroklch(0.61 0.145 285.3)

Chart 3--chart-3Tertiary chart coloroklch(0.83 0.155 75.2)

Chart 4--chart-4Quaternary chart coloroklch(0.72 0.18 320.8)

Chart 5--chart-5Quinary chart coloroklch(0.68 0.15 245.5)

Sidebar

Sidebar--sidebarSidebar backgroundoklch(0.9723 0.0074 260.73)dark: oklch(0.162 0.031 257.7)

Sidebar Foreground--sidebar-foregroundSidebar textoklch(0.2394 0.0455 252.445)dark: oklch(0.9525 0.011 225.983)

Sidebar Primary--sidebar-primaryActive nav itemoklch(0.64 0.115 208)dark: oklch(0.69 0.112 207)

Sidebar Primary Foreground--sidebar-primary-foregroundActive nav textoklch(0.166 0.0283 203.338)

Sidebar Accent--sidebar-accentHover surface in sidebaroklch(0.9593 0.0069 247.9)dark: oklch(0.3927 0.0289 240.86)

Sidebar Accent Foreground--sidebar-accent-foregroundText on sidebar hoveroklch(0.166 0.0283 203.338)dark: oklch(0.9525 0.011 225.983)

Sidebar Border--sidebar-borderSidebar dividersoklch(0.9237 0.0133 262.378)dark: oklch(0.9525 0.011 225.983)

Sidebar Ring--sidebar-ringFocus ring in sidebaroklch(0.64 0.115 208)dark: oklch(0.69 0.112 207)

Shadows

Shadow tokens use a consistent structure: a diffuse ambient layer plus an offset layer. Shadow color adapts between modes automatically via --shadow-color.

Shadow 2XS--shadow-2xs

Shadow XS--shadow-xs

Shadow SM--shadow-sm

Shadow (default)--shadow

Shadow MD--shadow-md

Shadow LG--shadow-lg

Shadow XL--shadow-xl

Shadow 2XL--shadow-2xl

AI Gradients

Gradient tokens for the AI expression. Each swatch resolves the live token, so it reflects the current theme. The fill and strong gradients are the same in light and dark; the text and subtle gradients shift ramp steps per theme. See the AI Toolkit for usage and contrast guidance.

Fill—ai-gradient-fillSolid fill behind white text (passes AA).

Text—ai-gradient-textGradient-clipped text; lifts to lighter steps in dark.

Strong—ai-gradient-strongDecorative marks, icon fills, and glows.

Subtle—ai-gradientSoft surface tint and inset glow; deeper steps in dark.