foundations
Color
One accent, five ramps, and a set of semantic roles that re-point when the theme flips.
neutral ramp
Warm-shifted graphite. It reaches pure black and pure white at both ends, because the contrast between an absolutely white plane and an absolutely black rule is what the system is built on. Click any swatch to copy its token.
signal hues
Orange is the accent and marks the active thing. Ultramarine is the only color permitted to fight it, and only for category coding. The remaining three report state and nothing else.
orange
blue
green
amber
red
semantic roles
Consumers only ever use these. They re-point when the theme flips, so no component knows which theme is active — toggle the theme in the header and watch both the values and the measured ratios change.
| token | role | value | ratio · min | |
|---|---|---|---|---|
--canvas | page background | — | — | |
--surface-1 | panel fill | — | — | |
--surface-2 | inset / secondary panel | — | — | |
--text-1 | primary text | — | — | |
--text-2 | prose | — | — | |
--text-3 | labels and captions | — | — | |
--text-muted | hints and dimmed values | — | — | |
--border-1 | decorative hairline | — | — | |
--border-interactive | control edge | — | — | |
--border-3 | emphasis rule | — | — | |
--accent | the one accent (a fill) | — | — | |
--accent-mark | the accent as a thin mark | — | — | |
--ok | state: ok | — | — | |
--warn | state: warn | — | — | |
--error | state: error | — | — | |
--info | state: info | — | — |
Ratios are measured against --surface-3 at render time, not recorded in a table that can go stale. Not against --surface-1: a role has to hold on the darkest surface it may sit on, and --surface-3 is the hover and selected step. Text roles are held at 4.5:1. Roles that carry meaning without being text are held at 3:1. Surfaces and the decorative hairline show no ratio.