Semantic tokens map primitive colors to meaningful purposes. These tokens are theme-aware and switch between light/dark modes automatically.
Theme: Light
Surface Tokens
Background colors for different elevation levels. Use with
bg-surface-*
surface-0
--surface-0
Main background, page canvas
surface-1
--surface-1
Elevated surfaces, cards
surface-2
--surface-2
Higher elevation, hover states
surface-3
--surface-3
Pressed states, borders
surface-4
--surface-4
Maximum elevation, dividers
Text Tokens
Semantic text colors for content hierarchy. Use with
text-text-*
Aa
text-primary
--text-primary
Headings, primary content
Aa
text-secondary
--text-secondary
Body text, descriptions
Aa
text-muted
--text-muted
Placeholders, hints, disabled
Aa
text-inverse
--text-inverse
Text on colored backgrounds
Border Tokens
Border colors for separation and definition. Use with
border-border-*
border-default
--border-default
Standard borders, inputs
border-subtle
--border-subtle
Dividers, separators