Design Systems at Scale: How We Unified 4 Products in 6 Weeks

The Problem: Four Products, Four Realities

By 2025, Geek Labs was maintaining four separate products. Each had evolved its own component library, colour palette, and typography choices. A button looked different in every app. Users were confused. Engineers were duplicating effort.

The Audit Phase (Week 1–2)

We started with a thorough UI audit. Using a spreadsheet to catalogue every unique component across all four products, we found:

• 23 different button variants (we needed 5)
• 8 shades of blue used as “our brand blue”
• 14 different form input styles

This gave us a clear scope for what to standardise.

Building the Foundation (Week 3–4)

We chose Figma as our single source of truth. Key decisions:

• Design tokens first — colours, spacing, typography defined as tokens, then consumed by components
• Atomic design — atoms (colours, type) → molecules (buttons, inputs) → organisms (cards, modals)
• Accessibility baked in — WCAG AA contrast ratios enforced at the token level

The Rollout (Week 5–6)

We published the system as a shared npm package and Figma library simultaneously. To drive adoption:

• Ran migration workshops with each product team
• Created a Slack channel for questions and contributions
• Set up a contribution guide so teams could propose additions

One Year Later

The design system is now maintained as a first-class product with its own roadmap. Engineering velocity increased significantly — new features ship in half the time because the building blocks already exist.