Design system setup
A design system your team will actually use
Tokens, core components and simple guidelines in Figma, set up to match your code, so new pages and features stay consistent and ship faster.
Example: a small product screen built from design tokens. Changing the radius, accent colour or density updates every component at once.
Proven design experience with brands of all sizes
Signs you need one
Twelve versions of the same button.
Every page was designed on its own, and it shows.
New features take longer than they should.
Each one starts from a blank screen.
Design and code don't match.
Developers guess at spacing, colours and states.
You're about to grow the team or the product.
Easier to set the rules now than untangle them later.
Example: twelve buttons from different pages, each styled differently, becoming one consistent button component.
What you get
Design tokens
Colour, type, spacing and radius, named the way your code names them.
Core components
Buttons, inputs, cards, navigation, modals and the states they need.
Usage guidelines
Short and practical, so anyone can build a new page that fits.
Developer handover
Specs that map to your codebase (React and Tailwind teams especially).
Design systems that hold up in production
System work across CommBank's insurance and investing products, plus the token-based system this site is built on.
- −25%Form fields
CommBank Home & Car Insurance: designed inside CBA's design system, one standard across two companies.
- WCAG 2.2 AAInvesting Hub, CommBank
Migrated the Learn tab to a new design system.
- This siteIts own design system
Built on a token-based design system with a live design library you can browse.
Design system case studies
How each one was designed, from the first problem to the result.
How it works
Small enough to use from day one, built to grow with the product.
- 01
Audit what exists
Every screen and component, and what's actually repeated.
- 02
Define the foundations
Tokens first, agreed with your developers.
- 03
Build the core components
In Figma, with real states and variants.
- 04
Hand over and maintain
Guidelines and handover, then optional upkeep on a retainer.
Design system FAQs
Stop redesigning the same button.
Send me a link to your product. You'll get a fixed quote after a short look, before anything starts.