Design System
A scalable, accessible component library used by 200+ engineers across 4 product teams.
The Problem
Four product teams. Four codebases. Zero shared UI language.
The inconsistency wasn’t just visual — it was expensive. Buttons that looked slightly different across products. Three separate date picker implementations, each with different keyboard behavior. Designers rebuilding the same components from scratch every sprint. Engineers interpreting handoffs differently depending on which team they were on.
The real cost was velocity. Every new feature required re-solving solved problems. Bug fixes landed in one codebase but not another. As the company scaled toward its Series B, the teams were drifting further apart.
Before: 4 teams, 4 codebases, zero shared language
Click any component to see the inconsistency.
The Approach
I’d seen the failure mode before: a team locks themselves away, emerges six months later with a “system,” and wonders why nobody uses it. We went the other direction.
We started with a real audit — not a Figma audit, a deployed one. We scraped every UI across all four products, catalogued every component variant, and made the divergence visible to engineers and designers together. That shared picture was the foundation.
From there, three principles shaped everything: predictable over clever, accessible by default, and engineer-first documentation. We built in the open from day one. Storybook was our source of truth, published internally at every merge. Weekly office hours, no agenda — any team could bring a problem and we’d work it out together.
Token-based theming meant colors, spacing, and type sizes lived as design tokens, not hardcoded values. Three themes shipped — default, dark, high-contrast — without touching component code. Every component existed in both Figma and React, with matching props, kept in sync by an automated token pipeline.
The Outcome
Eighteen months after we started:
- 40% reduction in design-to-dev handoff time across all four teams
- 200+ engineers actively using the system, 94% satisfaction
- Three themes in production
- Zero accessibility regressions in the six months after full adoption
The system became a shared language. Designers stopped writing spec docs and started linking to components. Engineers stopped asking “what does hover state look like?” and started asking “should we add a new token for this?”