Colors
Core palettes built on oklch color space, semantic token pairs for light and dark modes, and specialized tokens for surfaces, charts, and sidebar.
Core Palettes
Raw color values from Style Dictionary (Tier 1). Each palette has 11 lightness steps from 50 (lightest) to 950 (darkest). Click any swatch to copy the CSS variable.
Semantic Token Pairs
Mode-aware background/foreground pairs (Tier 2). These adapt between light, dark, and preset themes. Toggle the theme in the sidebar to see them change.
Status Colors
Semantic colors for success, warning, and info states. Always paired with foreground for contrast.
Opacity & Layering
oklch supports native alpha channels for layered surfaces. This enables overlapping elements, scrims, and focus highlights without separate opacity tokens.
Surface Stacking
Nested surfaces create depth through layered backgrounds, not shadows alone.
Popover
Card → Muted
Monochromatic Gradients
Surface gradients simulate light falling across a material. They stay within the same hue — a 4-8% lightness delta that is felt, not seen. The goal is physical curvature, not decoration.
Surface Lighting (top-to-bottom, 4-8% L delta)
Dark surface: L 0.25 → 0.19 (6% delta)
Light surface: L 0.97 → 0.93 (4% delta, neutral)
Primary button: L 0.58 → 0.52 (6% delta + 2° hue bend)
Success: L 0.60 → 0.54 (6% delta + 2° hue bend)
Fade to Background (ambient tint)
primary → background (85% blend)
muted → background (surface depth)
destructive → background (alert tint)
info → background (80% blend)
Adjacent Palette Steps (within the same scale)
zinc-400 → zinc-600
slate-300 → slate-500
blue-400 → blue-600
violet-400 → violet-600
green-400 → green-600
red-400 → red-600
Anti-pattern: cross-hue gradients
Gradients between different hues (purple → blue, red → green) simulate rainbow light, not physical surface lighting. They break the material metaphor and draw attention to the gradient itself rather than the content.
Scrim & Overlay Patterns
Overlays use background-color with alpha to dim content beneath modals, drawers, and popovers.
Surface & Input
Border, input outline, and focus ring colors.
Chart Colors
Five distinct hues for data visualization, chosen for color vision deficiency distinguishability.
Sidebar
Sidebar-specific semantic pairs for navigation chrome.