Design tokens
Three-tier OKLCH dual-theme token reference. Use the toggle above to flip light / dark / system; the semantic layer swaps via [data-theme].
Semantic surfaces
surface
raised
overlay
sunken
Accent tokens
accent-soft
Button
accent / on-accentLink text
accent-linkText tiers
Primary — --text-primary
Secondary — --text-secondary
Tertiary — --text-tertiary
Borders
border-subtle
border-strong
Radius ladder
xs
sm
md
lg
full
Shadows
shadow-raised
shadow-overlay
Severity ramp (icon + label + position, not color alone)
Critical--sev-critical-rail
High--sev-high-rail
Medium--sev-medium-rail
Low--sev-low-rail
Info--sev-info-rail
Success--sev-success-rail
Neutral--sev-neutral-rail
Dismissed--sev-dismissed-rail