Layer 1 · contract
The token contract
Every semantic token the components reference, each with a neutral fallback. Brand-agnostic by design — the interface between the base and any pack.
Neutral base · no brand loaded
The system renders with no brand loaded.
This page is drawn entirely from the token contract and a neutral pack: a plain greyscale, one accent blue, the system font stack. Swap the pack for a company's and the same components re-skin, with no markup touched.
01System check
Every component, from tokens alone.
Components read only the semantic contract — no literals, no primitives. If a token is left undefined, the contract's neutral fallback keeps the page coherent. These three layers are exactly what a company build re-skins.
Layer 2 · client pack
The neutral pack
Primitives bound to the contract slots: greyscale, one blue, system fonts. A company pack is a clone of this one file with its own values.
Layer 3 · components
Brand-agnostic components
Buttons, cards, chrome and surfaces, all token-only. They render the same under any pack — this base, or a live brand.
02The swap
Swap one file. Full re-skin.
One line in the head
Change tokens.neutral.css to tokens.<company>.css and the whole site adopts the new brand.
Nothing else moves
Markup, components and copy stay exactly where they are. The pack carries every brand decision on its own.