Colors
Semantic color tokens for consistent, accessible interfaces. Each palette runs 50–950 with WCAG-compliant contrast ratios.
Color System
The CompositeVoice color system is built on semantic naming conventions with token-derived palettes. Each palette is generated from a single base color via color-mix(in oklch) — change one token to re-theme its entire scale across light and dark modes.
Every palette spans 11 shades from 50 (lightest) through 950 (darkest). Dark mode inverts the scale automatically. Shades maintain WCAG 2.1 AA contrast ratios when paired appropriately: light backgrounds (50–200) with dark text, and dark backgrounds (600–950) with white or light text.
When choosing colors, prefer semantic tokens over specific shades. Use primary for interactive elements, secondary for supporting content, and status palettes (success, warning, danger, info) exclusively for their intended feedback states.
Primary
Indigo — used for primary actions, links, and focus states.
50
100
200
300
400
500
600
700
800
900
950
Secondary
Slate — used for secondary text, borders, and subtle backgrounds.
50
100
200
300
400
500
600
700
800
900
950
Accent
Violet — used for highlights, badges, and decorative elements.
50
100
200
300
400
500
600
700
800
900
950
Success
Emerald — used for success states, confirmations, and positive indicators.
50
100
200
300
400
500
600
700
800
900
950
Warning
Amber — used for warnings, caution states, and attention indicators.
50
100
200
300
400
500
600
700
800
900
950
Danger
Rose — used for error states, destructive actions, and critical alerts.
50
100
200
300
400
500
600
700
800
900
950
Info
Sky — used for informational states, tips, and neutral highlights.
50
100
200
300
400
500
600
700
800
900
950
Neutral
Zinc — used for text, borders, dividers, and structural UI elements.
50
100
200
300
400
500
600
700
800
900
950
Surface Tokens
Surface tokens define layered backgrounds. Use surface for default backgrounds, surface-raised for cards, and surface-sunken for recessed areas like input fields.
--color-surface
--color-surface-raised
--color-surface-sunken