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.