Design tokens

Style

Three token tiers, six cascade layers, OKLCH throughout. Theme by overriding custom properties — never by editing source.

Cascade layers

User CSS belongs in a layer after these, or unlayered. Either way it wins without !important.

resetbox model, margins

tokensprimitives → semantic → state

atomstags themselves

molecules.stack, .card, hs-card

organismsheader, hero, grids

templates.page-layout, .sidebar-layout

OKLCH and one hue

:root {
  --p-brand-hue: 260; /* OKLCH angle, not HSL */
}

Copy

Lightness and chroma stay fixed per ramp step. Hue 58 is the burnt orange this ships with; 260 is royal blue; violet sits near 290.

Brand hue 58

One custom property. Surfaces, borders, and text pick up a trace of the same hue. Nothing to rebuild.

Token tiers

/* Primitives (--p- prefix) */
--p-brand-hue: 58;
--p-brand-600: oklch(0.55 0.18 var(--p-brand-hue));

/* Semantic */
--color-action-primary: light-dark(var(--p-brand-600), oklch(0.7 0.2 var(--p-brand-hue)));

/* State, derived */
--color-action-hover: oklch(from var(--color-action-primary) calc(l + 0.1) c h);

Copy

Layout atoms

Intrinsically responsive: they care about their container, not the viewport.

.stack

.cluster

Also .center, .grid, .switcher (two-up until the container is too narrow), .card-grid.

Dark mode

color-scheme: light dark and light-dark(). No JavaScript required. <hs-theme-toggle> writes a preference; without it, the system preference is enough.

See the elements that drink these tokens →