Colour architecture

Foregrounds are transparent. Backgrounds are solid.

Foreground colours (text, icons, strokes, fills) are opacities of black in light mode and white in dark. Background colours are three solid elevation levels.

This is not a stylistic choice. A solid foreground looks correct on one background and wrong on the next — a grey tag reads as prominent on white and recedes into a grey panel. Dark mode has three background levels, so a solid fill is wrong on at least two of them. A transparent foreground mixes with whatever is beneath it and keeps a consistent prominence everywhere.

It also removes tokens rather than adding them: hover and press become transparent layers reused across every component and both modes.

Three elevation levels, consistent across modes: base (page), raised (cards, panels), overlay (dialogs, dropdowns).

• Light mode: shadows carry elevation, plus lighter-on-darker — a white card on an off-white page reads as raised without a shadow at all.
• Dark mode: shadows are nearly invisible. Depth comes from the background colour, so --shadow-raised resolves to none and the raised background does the work.

Brand and each system colour take the same four variations: 100% text, 80% stroke-strong, 20% stroke-weak, 5% fill.

Neutral or monochromatic. The default is neutral (pure black/white opacities), which works with any brand colour. For a monochromatic palette, tint the dark-mode backgrounds with the brand hue and, in light mode, replace the black opacities with a heavily saturated brand hue at low lightness. Change --brand-h and --brand-s; nothing else moves.