Colors
The semantic color tokens, rendered live from globals.css. Each theme-scoped group is shown in both light and dark so you see the real value in its own context.
Primary Brand Colors
Brand Primary
--brand
…
Brand Hover
--brand-hover
…
Brand Foreground
--brand-foreground
…
Brand Sky
--brand-sky
…
Brand Violet
--brand-violet
…
Status (Shared Core)
Semantic status colors from the shared design-tokens/core.css, mapped onto the product palette so every Shift Scan surface signals state the same way.
Success
--success
…
Warning
--warning
…
Error
--error
…
Info
--info
…
AA-safe text tokens — use these (not --success / --warning) when status color is text sitting on its matching /10 tint. They darken in light mode and lighten in dark so contrast meets WCAG AA in both.
Success Foreground
--success-foreground
…
Warning Foreground
--warning-foreground
…
Light Mode — Semantic Colors
UI Backgrounds
Background
--background
…
Surface Subtle
--surface-subtle
…
Surface Elevated
--surface-elevated
…
Text Colors
Foreground
--foreground
…
Primary
--primary
…
Muted Text
--muted-foreground
…
Interactive States
Border
--border
…
Input Background
--input
…
Focus Ring
--ring
…
Brand
Brand
--brand
…
Brand Hover
--brand-hover
…
Brand Foreground
--brand-foreground
…
Brand Sky
--brand-sky
…
Brand Violet
--brand-violet
…
Nav & Footer
Nav Background
--nav-bg
…
Nav Text
--nav-text
…
Nav Active
--nav-active-bg
…
Dark Mode — Semantic Colors
UI Backgrounds
Background
--background
…
Surface Subtle
--surface-subtle
…
Surface Elevated
--surface-elevated
…
Text Colors
Foreground
--foreground
…
Primary
--primary
…
Muted Text
--muted-foreground
…
Interactive States
Border
--border
…
Input Background
--input
…
Focus Ring
--ring
…
Brand
Brand
--brand
…
Brand Hover
--brand-hover
…
Brand Foreground
--brand-foreground
…
Brand Sky
--brand-sky
…
Brand Violet
--brand-violet
…
Nav & Footer
Nav Background
--nav-bg
…
Nav Text
--nav-text
…
Nav Active
--nav-active-bg
…
App Gradients
Light Mode App Gradient
Dark Mode App Gradient
Color Usage Guidelines
Primary Brand Color
Use for primary actions, links, and key UI elements that require user attention.
Semantic Colors
Use status colors to communicate states: success (green), warning (orange), error (red), and info (blue).
Dark Mode Support
All semantic tokens adapt to the theme automatically. Test components in both light and dark before deployment.
Accessibility
Ensure text contrast meets WCAG AA (4.5:1 for normal text, 3:1 for large). Don't rely on color alone to convey information.