Free guide for product and engineering leads
Keep the speed, stop the mess
AI-assisted coding gives every team speed. Without a shared standard it also gives you fifty tools with fifty different buttons, accessibility that breaks quietly, and a brand that erodes into something generic. This guide is how to set the standard once, wire it into the places your people and your agents actually build, and keep it alive after launch.
Get the free guideWhat's inside
the guide
We build every AI-assisted tool on top of a design system, and we have set them up for teams who arrived with fifty button styles and no owner. This is the short version, with a few snippets from a real client system so you can see what the words mean.
Speed Without the Mess
What you actually get when every team is told to vibe-code: fifty tools, fifty interfaces, fifty slightly different buttons. The three things that break first are accessibility, adoption and brand.
Start With the Essentials
You do not need a 200-component cathedral on day one. Eight decisions carry most of the trust and usability, with a realistic effort for each. About a week of work, not a quarter.
What It Looks Like
Four corners of a real client system, used as illustrations: a few colour steps with jobs, a few rows of a type scale, one set of button states, one navigation row. A real system is far bigger; this is what the words mean.
Where the Builders Work
Design one real screen, turn it into tokens in the repo, build the essentials as components, write the instructions file the agent reads before any UI, then add the checks that make it mandatory.
The eight essentials
These are the decisions that carry most of the trust and usability in any interface. Decide them properly, write them down, and make them the only way to build. The efforts below assume one person who knows the product and a few hours of honest argument.
Colour
Half a dayRoles, not just swatches: surface, text, action, warning. Check every pair for contrast before anyone falls in love with it.
Type
2 hoursTwo families, five sizes, and a line height nobody argues about again.
Spacing
1 hourOne scale, 4 or 8 based. Every gap and padding comes from it, or it is wrong.
Buttons
2 hoursPrimary, secondary, destructive. With hover, focus, disabled and loading states.
Forms
Half a dayInputs, labels, help text and errors. The state most tools get wrong is the error.
Navigation
2 hoursWhere search lives, how you go back, what the current page looks like.
Empty and error states
2 hoursNothing here yet, something broke, are you sure. Written once, reused everywhere.
Voice
1 hourHow labels, errors and confirmations sound. The way your company actually talks.
What to watch out for
Most design systems do not fail at launch. They fail in the second quarter, quietly, when the people who built them go back to their day jobs. The failures are predictable enough to list.
The first 30 days
If your company is about to mandate AI-built apps at scale, do not start with another pilot. Start with the system those pilots will inherit. One month, in this order.
Audit
Screenshot every button, form and colour in use across the company onto one board. Count the variants. Show people.
Decide
Foundations and the eight essentials, designed on one real screen. Argue now, once, with the week-one board in view.
Wire
Tokens and components in the repo, the instructions file for the agent, the Figma library published. Checks switched on.
Mandate
Every new build starts from the system. Migrate one live tool, so the first changelog has something real in it.
Hold
Quarterly reviews, one owner, a version number. Between those, resist the urge to tinker.
Get your free Design System Guide
Six pages on building a design system and keeping it alive, with snippets from a real client system, based on the systems we run ourselves and the ones we have set up with clients.
Get the free guide
Six pages on building a design system your teams and your AI agents will actually use, with snippets from a real client system.
Common questions
What is a design system?
One source of truth for how software in your company should look and behave. It starts with foundations such as colour, type, spacing and voice, goes one level up into a component library of buttons, forms, navigation, cards and empty states, and then into patterns: how search works, where filters live, what a status colour means. The part most people miss is where it lives. A Figma file is not enough; it has to reach the repo and the agent.
Why does AI-assisted coding need a design system?
Because unconstrained generation defaults to generic patterns and quietly breaks accessibility. Without a shared standard every AI-built tool becomes a new interface to learn, contrast and keyboard paths fail, and the brand erodes into something faintly untrustworthy. A design system encodes the non-negotiables so every new app starts compliant and recognisable, at the speed of generation.
How big does a design system need to be to start?
Small. Colour, type, spacing, buttons, forms, navigation, empty and error states, and voice. That is about a week of decisions for one person who knows the product, and it carries most of the trust and usability. Add components when three teams have built the same thing themselves, not before.
How do you make an AI agent use the design system?
Put the tokens and components in the repo where the agent works, and write a short instructions file it reads before any UI work: which tokens, which components, and what to do when one is missing. Reference it from CLAUDE.md or AGENTS.md. Then add checks: a lint rule against raw hex values, a contrast test, and a review that asks whether the change uses the system or invents a new one.
How do you make a design system stick after launch?
Give it one owner rather than a committee. Open a front door for changes: propose, review, publish, changelog. Version it so tools can pin a release and nothing breaks silently. Set an accessibility floor and treat it as non-negotiable. Measure adoption, meaning the share of screens built on tokens and the number of distinct button styles in the company, rather than checklist compliance. Review quarterly and leave it alone in between.
What accessibility standards should the system enforce?
A contrast ratio of at least 4.5:1 for normal text, visible focus states on every interactive element, a label on every input, and a keyboard path through every form. Those four catch most of what unconstrained generation gets wrong, and they map directly onto WCAG AA and the universal access rules most organisations are already bound by.
How long does it take to build a design system?
Four weeks to a working, mandatory system if you keep it to the essentials. Week one is an audit of everything in use, week two is deciding the foundations and eight components on one real screen, week three is wiring tokens, components and the agent instructions into the repo, and week four is mandating it for new builds and migrating one live tool. After that it is a quarterly habit.
Is the Design System Guide free?
Yes. It is a free six-page PDF and we will not chase you for downloading it. If you would rather we set the system up with your team, that sits under our Product Team as a Service and 10 Day MVP offerings.
Want us to build yours?
We've built 150+ digital products, and every AI-assisted tool we ship starts from a design system. If you want help setting one up, or want us to do it with your team, we're here.