The colour roles every component is written against — canvas, surfaces, lines, ink, emphasis, focus, data, scrim and washes — with their value in light and dark, followed by the twelve-step neutral ramp they draw from and the four state hues. Every value on this page is read from tokens.css when the site builds, so the page cannot drift from the source.
Components use these names, never a ramp step, so dark mode is a swap of values rather than a second set of styles. The swatch is live in the current theme; the two columns are read from tokens.css.
| Token | Light | Dark | Use it for | |
|---|---|---|---|---|
| Surfaces | ||||
--canvas → --n-01 · dark → --n-00 | #fbfaf7 | #141414 | The page behind everything. Text never sits on it directly. | |
--surface → --n-00 · dark → --n-01 | #ffffff | #1b1c1d | Cards, tables, drawers, the sidebar — where text sits. | |
--surface-2 → --n-02 | #f4f3f0 | #222426 | Inputs, table headers, the segmented trough, loading blocks. | |
--surface-3 → --n-03 | #eeede8 | #2b2d31 | Hovered and selected rows, highlighted menu items, avatars, counts. | |
| Lines | ||||
--hairline → --n-04 | #e1e0da | #37393d | Card borders, row rules, dividers. | |
--hairline-strong → --n-05 | #c6c4be | #494c50 | Between drawer sections, tag outlines, a chart's baseline. | |
--border-control → --n-06 | #85837e | #73767b | The edge of an input, a select, a checkbox, a radio. | |
| Ink | ||||
--text-1 → --n-11 | #1a1918 | #f1f2f3 | Titles, values, the first column of a table, and the ink series of a chart. | |
--text-2 → --n-09 | #4e4d49 | #b7b9bc | Body copy and the other table columns. | |
--text-3 → --n-08 | #64635e | #9fa2a6 | Labels and captions. | |
--text-4 → --n-07 | #76746f | #85888d | Hints, placeholders, caps labels, icons at rest. | |
| Emphasis and focus | ||||
--emphasis → --text-1 | #1a1918 | #f1f2f3 | Primary buttons, a chosen pill, a checked box: emphasis is ink, never a hue. | |
--emphasis-on → --n-00 | #ffffff | #141414 | Text and icons on --emphasis. | |
--emphasis-quiet → --surface-3 | #eeede8 | #2b2d31 | The current sidebar item and the active letter of an A–Z strip. | |
--focus-ring → --text-1 | #1a1918 | #f1f2f3 | The keyboard focus outline, at --focus-w. | |
| Data | ||||
--series-1 → --text-2 | #4e4d49 | #b7b9bc | InlineMeter's fill, in the body-copy ink so a stack of bars stays quiet. | |
--series-track → --n-03 | #eeede8 | #2b2d31 | The unfilled track behind meters, progress bars and sliders. | |
--delta-up → --teal-700 · dark → --teal-300 | #1e6860 | #77c9be | A rise against the last period, beside its glyph. | |
--delta-down → --red-700 · dark → --red-300 | #8f3d3a | #fa9991 | A fall against the last period, beside its glyph. | |
| Overlay and washes | ||||
--scrim | #1a191899 | #000000b8 | Behind drawers and dialogs. | |
--wash-warm | #e0a96b24 | #e0a96b14 | A faint warm tint over a large empty area, such as a landing hero. Never behind data. | |
--wash-cool | #40a1961f | #40a19612 | The cool counterpart of --wash-warm. | |
12 steps from paper to ink. Light runs warm; dark is its own ramp, not an inversion. The roles above point into it.
Four ramps of ten steps: teal settled, blue in flight, amber attention, red critical. They are the same in both themes; Chip picks the 050, 100 and 700 steps in light and 900, 800 and 300 in dark.
Only the state components may use them.