Case Study · Design System
One System.
Zero Chaos.
How I unified design across three product teams, reduced developer rework, and built a component library that became the foundation of our entire platform.
Two designers, three product teams, and one question: 'What shade of magenta should this button be?'
The company was growing fast, but design inconsistencies were slowing down development and eroding user trust. Each team built components from scratch — duplicated effort, fragmented experiences.
The Challenge
How might we unify design across three product teams while reducing developer rework and accelerating delivery?
Before the System
Without a shared language, every team made its own design decisions. The result? Inconsistent UX, wasted engineering hours, and a product that felt like three different apps stitched together.
Before — Fragmented
After — Unified System
How I Built It
I didn't start with components. I started with the conversations that were slowing us down — then worked backwards to the system that would eliminate them.
Audit & Inventory
Catalogued every existing component across three products — identified 87 unique elements, 40% of which were duplicates with inconsistent styling.
Token Architecture
Defined color, spacing, typography, and radius tokens as the foundational layer — ensuring every value had a single source of truth.
Component Build
Built components with variants, states, and accessibility baked in — from buttons with 8 hierarchy levels to complex data tables.
Adoption & Docs
Wrote usage guidelines, created Storybook stories, and ran workshops to drive adoption across all three product teams.
Design Tokens
A three-layer token architecture — primitives define raw values, semantic tokens map meaning, and core tokens govern spacing and shape. Exported directly from Figma Variables.
Primitive Palette
Premitives.Mode.tokens.jsonRaw hex values — the foundation every semantic token references.
Primary (Magenta)
Purple
Red
Green
Blue
Water
Orange
Grey
Blurey (Dark)
Semantic Tokens
Design Tokens.Light / DarkPurpose-driven aliases that swap between light and dark mode — no hardcoded hex in components.
Background
Text
Domain Tokens
Status
Channels
Tags
Core Tokens
Core.Mode 1.tokens.jsonNumeric values governing spacing, margins, shape, and radius across every component.
Spacer
Margins
Shape
Radius
Typography
Measurable Impact
The system didn't just look better — it made the whole organisation faster, more consistent, and more confident in what they shipped.
Components
Components built across 6 categories — buttons, forms, tables, cards, avatars, and data visualisation.
Reduction in developer handoff time
Reduction in developer handoff time. Engineers went from interpreting screenshots to consuming structured specs with tokens.
Product teams now using a single source
Product teams now using a single source of truth — eliminating duplicated effort and design drift.