Design systems
Components and rules your team can reuse.
Short answer. A design system is a shared set of components and rules, such as buttons, forms, spacing and colour, that designers and developers both use. It keeps a product consistent and makes new screens faster to build.
What is included
For product teams whose screens have started to look different from each other.
An audit of what exists
The buttons, colours and patterns already in your product, collected in one place.
Components in design and code
The same button in your design tool and in your front end.
Written rules
When to use each component, and how spacing, colour and type behave.
Accessibility checks
Contrast, focus states and keyboard use built into the components.
How it runs
Listen
Who uses it, what they need and what is in the way.
Sketch
Flows and wireframes, reviewed with you.
Design
Screens, brand and a prototype you can click.
Hand over
Files and notes for developers, ready to build.
Questions we get
What is a design system?
A design system is a shared set of components and rules, such as buttons, forms, spacing and colour, that designers and developers both use. It keeps a product consistent and makes new screens faster to build.
Do we need a design system?
Not always. It pays off when several people build screens, or when the product is growing, and we will say if it does not.
Can it work with our current code?
Yes. We build the system around the framework you already use, in stages, so nothing has to stop.
Who keeps it up to date?
Your team does day to day, with documentation to guide them. We can add a support plan if you want help.
Related services
Often scoped together with this one.
UI and UX design
Flows and screens, tested before they are built.
Website design
Pages designed around one action each.
Branding and identity
Logo, colour, type and a system to use them.
Tell us what you’re building.
- A call about the goalThe budget, the deadline and what success looks like.
- A written scopeWhat we build, in what order, and the quote.
- Work in sprintsA demo at the end of each one.