DNA

Design tokens — the axioms from which everything flows

There are only a handful of axioms (--ax-*): brand, marker, radii, brightness. Everything visible (--wl-*) is derived from them — buttons, cards, charts never read hex, only tokens. The control panel below sets the axioms live, watch how everything follows.

--ax-brandAxiom · the one hex value

→

--wl-accentderived · points to the axiom

→

<wl-button accent>component · reads only the token

live · theme control panel — assigns values to the axioms, everything derives live

Accent (--ax-brand) Marker (--ax-brand-2) Card radius Button radius --wl-accent points to Mode

Reset

Accent

Solid

Marker