theme.css — one :root override

The whole page is the preview

Picking a theme swaps a real override file onto this page — the same single :root block a consuming product ships as its theme.css. The aurora / vermeil / nocturne brands are fictional examples of the pattern; qazana is the umbrella brand. Hover, focus and switch schemes to judge a brand for real.

Display ·

One foundation, every product — themed by .

Body text rides the theme's --body face. Semantic tokens drive every fill, ring and border below, so one override file re-brands all of it — including this paragraph's link color.

Actions

primary soft danger warning info

Form · focus ring uses --primary-ring

Brand palette

primary bright accent danger warning info

Data · --mono

--primary: ;
--display: ;
0deps
1override

Voice

We override a handful of tokens and the whole library reads as ours.

consuming product
Native controls too?

color-scheme follows the scheme, so scrollbars and form internals match.