Overview
Four product teams were building the same components independently, with no shared language between design and engineering. I led the effort to build a unified design system that actually got adopted, not just documented.
Previous attempts at a design system had failed because they were built in isolation and handed off without buy-in. Teams had their own Figma files, their own component names, and their own interpretations of the brand. Inconsistency was visible to users and painful for designers.
How it came together
Audit and alignment
I started by auditing what already existed across all four teams. We found 47 button variants and 12 different modal patterns. That audit became the shared starting point for conversations about what to consolidate.
Building with teams, not for them
Rather than designing the system alone and presenting it, I ran working sessions with each team. Their feedback shaped the component API, the naming conventions, and the documentation format.
Tokens and Figma library
We built a token layer first, covering color, spacing, and typography. The Figma library was connected to the token system so updates propagated automatically. Engineers got a matching set of CSS variables.
Documentation and contribution
Every component shipped with usage guidelines, do and don't examples, and accessibility notes. We also wrote a contribution guide so teams could propose additions without going through a bottleneck.
All four teams migrated their core components within six months. New engineers now onboard to the design system in their first week.