achroma 0.2.0 — token reference
Achromatic.
Black, white and greys, with hue reserved for meaning. Every value on this page comes from a token. Use the switch above to compare both modes — and zoom to 200%, which is the only place a badly tiled grain shows its seams.
The ramp — 16 steps, chroma exactly 0
Aliases — what dark mode re-points
Semantics — status, plus one affordance
--ok-text on --ok-bg.--warn-text on
--warn-bg.
--danger-text on --danger-bg.
--accent-text on --accent-bg.
--info-text on --info-bg. The three states that
ask you to act get a colour; the one that says nothing is wrong does not.
Elevation — black at alpha, and 23× heavier in dark
These three boxes have no border. --bg-raised on
--bg is 1.044:1 in light mode, so the shadow is the only
reason you can see them — switch to dark and the tonal step takes over.
Resting lift — button, input.
Card, popover, dropdown.
Modal, command palette.
A dialog over
--scrim.
Type — huge and thin against tiny and wide
Surfaces, controls, structure
Raised surface
Hairline border, 4px radius, depth from tone rather than shadow. The border is what defines the edge — the tonal step is deliberately slight.
Sunken surface
Tab focus through these to see the ring, which is a token so it can invert.
Hairline list
Headings
h1
h2
h3
Body copy at weight 300, with strong emphasis and a
--font-mono inline code run.
Grain
Active on this page at . It is what makes an
achromatic surface read as material rather than flat. If you cannot see
it, that is the finding.