Colors
All colors in OKLCH. Current palette: neutral, accent: blue. Change via Theme popover.
Palette scales
Gray (active: neutral) has 18 shades. Click any swatch to copy its computed OKLCH value.
Neutral
zinc
stone
slate
mauve
olive
Accent colors
10-shade scales for brand and status. Active accent: blue.
blue
red
green
amber
emerald
violet
Semantic tokens
Purpose-driven tokens mapped from primitives. Flip dark/light with the theme toggle.
Backgrounds
base
Page background
input
Input fields
card
Card surfaces
elevated
Raised elements
popover
Popovers, tooltips
hover
Hover state
selected
Selected items
Text
Primary heading
Secondary body text
Muted helper text
Dimmed placeholder
primary
Headings, labels
secondary
Body text
muted
Helper text
dimmed
Placeholders
inverse
On filled buttons
Status colors
Borders
subtle
Dividers, card borders
default
Input borders
strong
Emphasis borders
accent
Focus, active
Non-changing scales
Fixed-alpha scales that never flip with theme. Palette-aware but theme-independent. 100 = solid.