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.
--color-neutral-100Neutral (light)
Page background (light mode)
--color-neutral-950Neutral (dark)
Page background (dark mode)
Accent
The system's primary interactive color.
--accentAccent
Links, highlights, focus, selected states
Semantic intent
Meaning-bearing states, used only when color carries information.
--destructiveDestructive
Danger & delete actions
--warningWarning
Caution states
--successSuccess
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.
--color-neutral-*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.
--color-accent-*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.
--color-destructive-*Destructive
50
100
200
300
400
500
600
700
800
900
950
--color-warning-*Warning
50
100
200
300
400
500
600
700
800
900
950
--color-success-*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);
}