Colors
Perceptually uniform OKLCH color palettes, semantic tokens, and contrast standards for the VOXFM interface.
Color Philosophy
By using OKLCH instead of legacy sRGB/HSL, lightness (L) is perceived identically across all hues, eliminating unexpected contrast drops. A disciplined, low-saturation cool slate spectrum (h ≈ 248°) creates a quiet baseline, letting content and audio telemetry take center stage. Components strictly consume semantic tokens (bg-card) rather than primitive values, guaranteeing seamless light and dark mode adaptation.
Primitive Palette (OKLCH Slate & Status)
The 11-step cool slate scale forming the structural foundation of all surfaces, borders, and typography, alongside calibrated status primitives.
oklch(97.22% 0.003 247.86)oklch(95.07% 0.005 247.88)oklch(90.63% 0.008 236.57)oklch(82.56% 0.013 244.29)oklch(69.66% 0.018 242.54)oklch(57.41% 0.021 248.20)oklch(48.80% 0.018 248.20)oklch(41.32% 0.016 251.74)oklch(31.82% 0.011 248.18)oklch(25.05% 0.009 255.59)oklch(18.54% 0.005 248.11)oklch(45% 0.15 145)oklch(0.72 0.17 145)oklch(42% 0.16 27.325)oklch(0.704 0.191 22.216)oklch(55% 0.15 75)oklch(76% 0.16 75)oklch(45% 0.14 240)oklch(72% 0.14 240)Semantic Theme Tokens
Semantic mappings consumed directly by components via Tailwind utility classes.
bg-backgroundMain viewport and document background
bg-cardElevated card and dialog panel surface
bg-popoverFloating menus, dropdowns, and tooltips
text-foregroundPrimary text, headers, and essential icons
text-card-foregroundPrimary copy rendered inside card containers
text-muted-foregroundSecondary labels, captions, and helper descriptions
bg-primary / text-primary-foregroundPrimary call-to-action buttons and active states
bg-secondary / text-secondary-foregroundSecondary interactive buttons and subtle pills
bg-accent / text-accent-foregroundHover states and list item highlights
bg-success / text-success-foregroundPositive feedback, validation checkmarks, active status badges
bg-info / text-info-foregroundSystem guides, informative hints, sync indicators
bg-warning / text-warning-foregroundCaution alerts, non-blocking limits, buffer warnings
bg-destructive / text-destructive-foregroundCritical warnings, delete actions, error alerts
border-borderComponent perimeters and dividing rules
border-input / bg-inputForm field bounds and unfilled track states
ring-ring / outline-ringFocus rings for keyboard navigation
bg-sidebarSidebar container background
text-sidebar-foregroundSidebar navigation links and labels
bg-sidebar-primaryActive navigational item indicator
bg-sidebar-accentSidebar hover and selection highlight
WCAG 2.2 Contrast Compliance
Mathematical contrast ratios for core surface-to-content pairings across both theme modes.
| Surface | Foreground Token | Light Mode | Dark Mode | WCAG Level |
|---|---|---|---|---|
| background | foreground | 18.5:1 | 17.8:1 | AAA |
| card | card-foreground | 17.2:1 | 17.8:1 | AAA |
| card | muted-foreground | 10.1:1 | 9.4:1 | AAA |
| primary | primary-foreground | 16.4:1 | 15.2:1 | AAA |
| success | success-foreground | 7.4:1 | 7.6:1 | AAA |
| warning | warning-foreground | 8.1:1 | 8.3:1 | AAA |
| info | info-foreground | 7.3:1 | 7.5:1 | AAA |
| destructive | destructive-foreground | 7.2:1 | 7.1:1 | AAA |
Implementation Guidelines
Do
- Use semantic classes exclusively (
bg-card,text-foreground). - Use
text-muted-foregroundfor all secondary and helper captions. - Use
bg-successandtext-successfor positive feedback states. - Use
color-mix(in oklab, ...)when creating custom translucent alpha borders.
Don't
- Don't consume primitive tokens directly in components (
text-slate-500). - Don't use hardcoded status utility classes (
text-green-500,bg-red-600). - Don't use hardcoded hex or RGB strings in component markup.