Building a Design System from Zero to 200+ Components
The honest story of building a design system from scratch.
Why We Needed a Design System
By 2020, WeekndLabs had 6 products, 4 designers, 8 developers, and 1,200+ UI elements that didn't talk to each other. Every new feature started from scratch. Consistency was a myth. We needed a design system.
Phase 1: The Audit
We spent 3 weeks cataloguing every UI element across all 6 products. Color palette: 47 shades of what should have been 6. Button variants: 23 (we needed 4). The audit was painful — but it was the foundation.
Token Architecture
Design tokens are the backbone. We defined 340+ tokens across: color (primitive → semantic → component), typography (scale, families, weights), spacing (4px grid system), border radius, shadow, and animation. Every token had a name, a value, and a documented purpose.
The Component Build Process
Each component followed a spec doc before design: variants needed, states (default, hover, focus, disabled, error), accessibility requirements, and responsive behavior. Then Figma design, then code review together with dev. No more 'it looked different in Figma.'
What Actually Stuck
The components that got adopted: those built *with* developers, not *for* them. The governance model: lightweight pull-request-style contribution process. The thing that almost killed it: perfectionism. Ship v1, iterate. A real v1 beats a perfect v0 every time.
