Design System
Multiple designers working without a shared component library had created deep inconsistencies across the product. The breaking point: new features were being built directly over screenshots. We needed a common language — fast.
The Problem
Multiple designers, no shared language.
When I joined, the team had scattered style guides and no clear source of truth. Multiple designers were working from different files, and consistency was fragmenting faster than anyone had noticed.
The moment that forced the decision
New features were being developed directly over screenshots. Engineers were eyeballing pixel values from static images instead of components. It was working — more or less — and that made it worse.
The Approach
Audit first, then choose the right foundation.
We audited all existing screens — product, marketing, and brand. The gap was immediate: the product wasn't keeping pace with the brand, and inconsistencies ran deep. We took the findings to Engineering. Building from scratch wasn't viable. The right move: adopt an existing system and make it ours.
Why IBM Carbon won
We scored the most popular systems across design and engineering. Carbon won on two dimensions: accessibility depth and data visualisation focus. The name was a happy coincidence — we were calculating carbon emissions.
Design System Audit
Implementation
Principles first, then Molecule.
Three principles
Before building, we defined three principles to govern every decision: FAST — saves time building the product. SIMPLE — easy to use, recognise, and not overcomplicate. SHARED KNOWLEDGE — easy to access, easy to document. These mapped directly to our goals: increase velocity, standardise components, and eliminate duplicate work.
Design System Principles Mind Map
Molecule
We named our design system Molecule. Starting from Carbon's Figma file, we updated colours and text styles to match our brand — instantly producing a production-ready system. We rolled out in phases: most-used components first. In parallel, Engineering adapted Carbon's codebase in Storybook. Both tracks moved together from day one.
Implementation Roadmap
Advocacy in a startup
Selling a design system in a startup is hard. Foundational work competes directly with features, and no one sees the benefit until adoption is complete — so it's easy to cut. I led the initiative end to end. It started on volunteered time and was regularly questioned by PMs and stakeholders, so the job was to win buy-in one group at a time — first the designers, then engineering, then the wider business. I had no mandate to make anyone adopt it; getting there meant advocating consistently until the goals were shared. That's also what kept it alive: I set up and ran the recurring reviews that turned a design project into a cross-disciplinary ritual the whole team owned.
Maintenance: no design system is ever finished
Once live, Molecule surfaced new problems. Carbon's Figma components were outdated — Auto Layout and Variants weren't yet supported. We had to manually update anything we needed. I established rituals: regular reviews to surface issues and fixes. Engineering joined before long — they'd found gaps in the code docs. What started as a design project became a cross-disciplinary ceremony. That's when we knew it was working.
The Outcome
A shared language that design and engineering both trust.
Learnings
What building a design system for the first time actually teaches you.
This is not a side project
It will require real time from everyone involved. Make it visible, get it on the roadmap, and make sure no one is surprised by the commitment before you start. If it's treated as a side project, it stays a side project.
Advocate always
Never stop promoting the benefits. A design system is not easy to keep alive — as soon as it grows, it demands more maintenance and more buy-in. The moment you stop advocating, adoption slips and the system quietly becomes irrelevant.
Involve Engineering from day one
This is a collaboration project where both sides must move in parallel. A design system that lives only in Figma is not a design system — it's a mood board. Make sure Engineering has a champion from their side.
Do deep research before committing
Double-check the system you're adopting before it's too late. Review documentation on both design and engineering sides in full. Post-adoption surprises are expensive — in time, credibility, and team trust.