Colors
Six OKLCH ramps sharing one lightness/chroma spine — only the hue changes. Primary 257.4°, danger 25°, warning 85°, success 145°, info 210°; neutral is the primary hue with chroma flattened.
primary
--color-primary-*
50
100
200
300
400
500
600
700
800
900
950
danger
--color-danger-*
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
info
--color-info-*
50
100
200
300
400
500
600
700
800
900
950
neutral
--color-neutral-*
50
100
200
300
400
500
600
700
800
900
950
Semantic tokens
flip with dark mode--color-canvas
--color-surface
--color-surface-sunken
--color-border
--color-border-strong
--color-accent
--color-accent-hover
--color-accent-subtle
--color-text
--color-text-muted
--color-text-subtle
--color-focus-ring
Components reference these, never the ramps directly. Toggle dark mode in the topbar and watch this page re-skin itself without a single component change.