One source of truth, not six Figma files.
You know the situation: three slightly different buttons, two shades of the same blue, a spacing scale that's really just whatever felt right at 2am. A design system fixes that — not by adding rules for the sake of it, but by giving everyone, designer and developer, one place to check instead of guessing.
I build these token-first — colour, spacing, type, motion defined once and referenced everywhere, so a rebrand or a dark mode isn't a six-week project touching four hundred files.
The part most systems skip is documenting the edge cases — what happens when the button text is too long, what an empty state looks like, how a component behaves on a slow connection. That's usually where the real time gets saved.
- Product teams01
- Growing startups02
- Multi-product companies03
- Figma
- Design tokens
- HTML & CSS
- JavaScript
Built to be
actually used.
-
01
Audit
I go through the existing product and catalogue what's already there — every button, every spacing value, every inconsistency. You'd be surprised how much this alone clears up.
-
02
Foundations
Colour, type, spacing and motion, defined as tokens rather than hard-coded values, so changing one thing doesn't mean hunting through every file.
-
03
Component library
Built in Figma with real variants and states — not just the happy path. Buttons, forms, cards, navigation, documented well enough that a new designer can pick them up without asking.
-
04
Code handoff
Tokens and components shipped in a format your developers can actually use, with naming that matches between Figma and the codebase.
-
05
Adoption
A system nobody uses is just documentation. I make sure the first few real screens get built with it, so it proves itself instead of sitting in a drawer.
Got a project
you're sitting on?
Let's talk it through.
The best briefs come in early — even half-formed. Send me what you've got and I'll come back inside a day with honest thoughts and, if it's a fit, a small plan.
Email me a brief