Design System & Component Library
A three-tier token system and a headless-primitive component library, documented in the repo, so three product teams build from one source instead of three.
Overview
Every team had its own buttons, its own table, its own idea of spacing. A rebrand would have meant touching hundreds of files.
I set up primitive, semantic and component token tiers as CSS variables wired into Tailwind v4, built the component library on Radix primitives so the keyboard and screen-reader behaviour was correct by default, and put the docs — usage, props, accessibility notes, do and don't — next to the code.
A CI lint fails the build on hardcoded colours and off-scale spacing, so the system stays honest without anyone policing it.
Outcomes
- A rebrand is now an afternoon — swap the semantic token layer, nothing else
- Dark mode and a white-label client theme from the same components
- WCAG 2.1 AA baked into the primitives; axe runs on every component in CI
- Contribution guide and Storybook so the system outlives the people who built it
Tell me about your product
Share a short brief — problem, timeline, and stack — and I'll reply with a candid view on fit, effort, and the fastest path to a shippable milestone.