The design system

Layers

tokens → themes → tones → base → components → patterns

Cascade layers give an explicit precedence contract, which replaces the usual "do not reorder these imports" comment with something the browser enforces.

Override

Your CSS is unlayered, so it always wins

Because every rule in the package sits in a layer, any unlayered rule you write beats it — no specificity war, and no !important.

/* yours, unlayered — wins by definition */
.btn { border-radius: 0 }

Contrast

Fill and text derived together — AA by construction

Text color is computed from the fill's own luminance, so any tone in any theme — including a brand color added later — meets AA without being audited.

State

From [aria-current] and :user-invalid, never a class

Styling keys off the accessibility state that has to be correct anyway. A tab cannot look selected while telling a screen reader otherwise.

Themes

Six, swapped with one class on the root

A theme overrides token values only, so every component follows automatically — no provider, no runtime, no re-render.

Build

None

Plain CSS files with an import entry point. No compile step, no config, no purge pass, and no build tooling to keep current.