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

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 Gradient

A special two-stop gradient used for AI-adjacent UI surfaces.

Light—ai-gradient

Dark—ai-gradient (dark)