The Problem We Were Solving
Seven different button border-radius values across our portfolio. Eleven shades of “primary blue.” Onboarding a new designer took three weeks just to understand which conventions applied to which project.
Layer 1: Design Tokens
Atomic values defined as structured JSON. Style Dictionary compiles them to CSS custom properties, iOS Swift constants, Android XML, and Figma variable collections simultaneously. Change one token, it propagates to every platform automatically.
Layer 2: Base Component Library
80 components built in React with TypeScript, published to a private npm registry. Every component is WCAG AA compliant, keyboard navigable, and accepts design tokens as configuration rather than hardcoded values. A Button component does not know what colour it is — it knows which token to use for its background.
Layer 3: Product Themes
Each client maintains a small JSON file — typically 20–40 token overrides — that defines how their product differs from the base system. A fintech client sets a conservative colour palette and larger touch targets. An edtech client sets a playful palette and rounded corners. The component library is unchanged between them.
The Payoff
6–8 weeks of saved development time per new client project. 70% reduction in cross-product design inconsistency bugs reported. New component themes take 2 hours to create.