Colors
An OKLCH color system with perceptually uniform lightness. Every token resolves automatically in light and dark mode. Toggle the theme to see both palettes side by side.
Naming convention
The system ships role-based tokens, never hue names. This is the same convention shadcn, Carbon, Polaris, and Atlassian follow.
Core tokens
The named anchors. Each token swaps automatically between light and dark mode.
Neutral
The page background in each mode. Light and dark are perceptual inversions of the same scale.
Neutral (light)
--color-neutral-100
Page background (light mode)
Neutral (dark)
--color-neutral-950
Page background (dark mode)
Accent
The system's primary interactive color.
Accent
--accent
Links, highlights, focus, selected states
Semantic intent
Destructive
--destructive
Danger & delete actions
Warning
--warning
Caution states
Success
--success
Confirmation & completion
11-step color scales
Primitive scales that semantic tokens derive from. These values are fixed. They don't change between modes.
Neutrals
The surface and text scale. One hue (h=85) across every step.
Neutral
--color-neutral-*
50
100
200
300
400
500
600
700
800
900
950
Accent
The primary interactive color. Buttons, links, focus rings, and selected states use it across every component.
Accent
--color-accent-*
50
100
200
300
400
500
600
700
800
900
950
Semantic intent
Reserved meanings. Use these only when the color carries information: a destructive action, a warning state, a success confirmation.
Destructive
--color-destructive-*
50
100
200
300
400
500
600
700
800
900
950
Warning
--color-warning-*
50
100
200
300
400
500
600
700
800
900
950
Success
--color-success-*
50
100
200
300
400
500
600
700
800
900
950
Surfaces
Background and text pairings. The swatch shows actual contrast between each surface and its text color.
Page
Default page background
--backgroundPage outer
Body background behind the page surface, visible only when page content is narrower than the viewport
--background-outerCard
Elevated cards & panels
--cardPopover
Dropdowns, tooltips, menus
--popoverPrimary
Primary buttons & CTAs
--primarySecondary
Secondary controls
--secondaryMuted
Subdued backgrounds
--mutedText
Three levels of emphasis on the default background. The right-side token names the foreground variable shown.
Primary
Headings, emphasis
--foregroundMuted
Body copy, labels
--muted-foregroundSubtle
Placeholders, hints
--subtle-foregroundTheming
Two ways to override the palette: retone an entire 11-step scale via its hue variable, or pin a specific semantic anchor.
:root {
/* Retone the whole accent scale by changing its hue.
All 11 steps (--color-accent-50 through --color-accent-950)
and the --accent anchor shift together. */
--color-accent-h: 150;
/* Or override just the semantic anchor without touching the scale. */
--accent: oklch(0.65 0.22 150);
}
.dark {
--accent: oklch(0.72 0.19 150);
}