Nucleus Design System
How we built a unified component library that connected 4 product teams and reduced design-to-dev handoff time by 55%.
Fragmented by Design
Four product teams. Four component libraries. No shared language. Every feature shipped meant duplicated effort, inconsistent patterns, and weeks lost to alignment. We had 3,000+ components across Figma files with no single source of truth — and it was slowing the entire organisation down.
Mapping the Chaos
Before designing anything new, we audited every existing UI pattern across all products. We catalogued over 340 unique component variants, identified 12 core interaction patterns, and ran workshops with all product teams to align on principles and priorities.
"Having one shared library changed everything — we stopped rebuilding the same button for the fourth time."
Nucleus
We designed and documented a token-first system built on semantic naming, with components organised by atomic design principles. Every component shipped with usage guidelines, accessibility specs, and Storybook documentation. The system launched with 120 production-ready components.
One Source of Truth
Within 6 months of launch, all 4 product teams had migrated to Nucleus. Design handoff time dropped significantly and new features could be designed and shipped faster than ever before.
Nucleus became the foundation for a new brand refresh that rolled out across web, iOS, and Android simultaneously — a first for the company.