// adoptable template
Product design, systemised down to the tokens.
This page is a working demonstration of a fully token-driven CSS3 design system — every color, space, and radius on the page traces back to one :root block.
Work
Onboarding flow
Reduced first-session drop-off through a shorter, clearer setup path.
Design system v2
Rebuilt a component library around exactly this kind of token layer.
Mobile checkout
A friction audit that cut checkout steps from six to three.
How to adopt this template
--color-accent — the one color that carries brand identity
--color-bg / --color-surface — background layers
--color-text / --color-muted — typographic contrast
--font-body / --font-mono — swap for any font pairing
--space-1 … --space-5 — one spacing scale, used everywhere