One component library for four product teams
Consolidating a decade of divergent UI into a token-driven system nobody wants to fork.
- Engagement
- 14 weeks
- Team
- 1 systems lead, 2 engineers
- Stack
- React, TypeScript, CSS custom properties
- Year
- 2024
Results
- Components replacing 140 variants
- 31
- CSS shipped to the browser
- −34%
- Teams migrated in two quarters
- 4/4
Four product teams, four button components, and an internal joke about which blue was the real blue. Northbeam had tried a design system twice before; both attempts died because they were built as a side project by whoever had capacity.
Adoption is a distribution problem
The technical work was straightforward. The hard part was making the system the path of least resistance. We audited every existing component, found the 31 that covered 94% of real usage, and wrote codemods so a team could migrate a surface in an afternoon rather than a sprint.
- Token layer in CSS custom properties, themeable at runtime
- Codemods for the twelve most common legacy components
- Docs site with live examples and copyable code
- A contribution path with a named owner and a weekly review
We had four teams building four different button components. Now we have one, it is documented, and nobody argues about it any more.
All four teams migrated within two quarters without a mandate from leadership. The library now has eleven external contributors inside Northbeam and no full-time maintainer from us.