Colour, proven.

The signature

One hue, two brand moments. A filled button inverts the polarity of the page it sits on, so step 9 differs by mode — and --brand-ink follows it. The two cards below are on the same page: one forced light, one forced dark, with no token redeclared.

The assertion nobody else ships

The four status solids, as four different readers see them. Where two chips become one colour the palette says so out loud, and proveStatusChannels() fails the build unless those components carry a glyph as well as a hue. Every badge and note below has one, and that is why.

The solved scales

1 page · 2 subtle · 3–5 component rest/hover/active · 6–8 border subtle/normal/hover · 9–10 solid/hover · 11–12 text. Radix's role model, with the roles as contracts a solver satisfies rather than labels on chosen swatches.

Buttons

Disabled uses legible tokens rather than opacity, which fades the label below 4.5:1.

Forms

Status

Every glyph is required, not decorative — see the simulation above.

Overlays

Native throughout. <dialog> for the modal — focus trap, Esc and an inert background with no library. The menu and tooltip are the Popover API plus CSS anchor positioning, which reached Baseline in 2026: the popover anchors itself to the button that opened it, so there is no Floating UI and no JS.

Disclosure and tabs

<details name> makes the accordion exclusive with no state to manage.

Table

Loading

Four, because they answer four different questions. Prefer the skeleton wherever the shape is predictable — a spinner tells the reader nothing about what is arriving. Under prefers-reduced-motion these keep animating on opacity alone: a frozen spinner reads as a hung app, not as reduced motion.