Colors
The palette is monochrome: a neutral oklch ramp, no brand hue. Only destructive carries chroma. Colors are authored in oklch (perceptually uniform) to mirror the base-sera tokens; each swatch shows light then dark.
backgroundPage base
oklch(1 0 0)oklch(0.145 0 0)
foregroundBody text on background
oklch(0.145 0 0)oklch(0.985 0 0)
cardRaised surface
oklch(1 0 0)oklch(0.205 0 0)
popoverOverlay surface
oklch(1 0 0)oklch(0.205 0 0)
primarySolid action (button)
oklch(0.205 0 0)oklch(0.922 0 0)
secondaryQuiet fill
oklch(0.97 0 0)oklch(0.269 0 0)
mutedSubtle fill
oklch(0.97 0 0)oklch(0.269 0 0)
muted-foregroundCaption / label text
oklch(0.556 0 0)oklch(0.708 0 0)
accentHover fill
oklch(0.97 0 0)oklch(0.269 0 0)
borderEvery Rule & hairline
oklch(0.922 0 0)oklch(1 0 0 / 10%)
inputField border
oklch(0.922 0 0)oklch(1 0 0 / 15%)
ringFocus ring
oklch(0.708 0 0)oklch(0.556 0 0)
destructiveThe one hue — danger
oklch(0.577 0.245 27.325)oklch(0.704 0.191 22.216)
The chart ramp is theme-independent — the same five grays in light and dark — so a graph reads identically either way. Rank, not palette, encodes importance.
chart-1Series rank 1 (lightest)
oklch(0.87 0 0)oklch(0.87 0 0)
chart-2Series rank 2
oklch(0.556 0 0)oklch(0.556 0 0)
chart-3Series rank 3
oklch(0.439 0 0)oklch(0.439 0 0)
chart-4Series rank 4
oklch(0.371 0 0)oklch(0.371 0 0)
chart-5Series rank 5 (darkest)
oklch(0.269 0 0)oklch(0.269 0 0)
Reach for a role, not a value: bg-primary, text-muted-foreground, border-border. Never hardcode an oklch — if a shade you need isn't a token, it doesn't belong yet.