A design system makes your product consistent and efficient to build on, with components, tokens and documentation that improve the experience and carry your brand.
Duration: Typically 20–40 days for a first release
As products scale, inconsistency creeps in. Spacing drifts, colors fork and the same component gets rebuilt three times. We develop design systems (component libraries, design tokens and documentation) that turn those decisions into defaults. You end up with a system that unmistakably carries your brand, where a new screen starts from parts that are already right instead of from a blank canvas. We set the design principles with your team too. Useful ones are opinionated and occasionally uncomfortable, because they tell you what to give up. "Clarity over density" settles arguments; "user-friendly" settles nothing. We document why a design works the way it does, specify the components and define the interactions. Above all, we write down the edge cases: empty, loading, error, too much content, no permission. Those states are where handovers break down. And we write it so the AI agents your developers use can read it as well: the same rules for what they generate as for your team.
- Component library
- Design tokens
- Design principles
- Documentation people and AI agents can read
- Edge cases
AI writes the first components, tokens and documentation; we decide what becomes the default and keep your brand in it.
Audit
We inventory every button, input and spacing value in the product as it is today, and find the patterns underneath.
- What we do
- Find the patterns underneath and decide what becomes the default.
- How AI helps us
- Inventories every component, color and spacing value across your screens.
Translate the brand
Your brand translated into tokens: color, type, spacing, radius, motion. Components are built on those, so the system feels like your product rather than a template, and a change in one place lands everywhere.
- What we do
- Judge whether the system still feels like your brand.
- How AI helps us
- Tries your tokens on real screens in many variations.
Develop
A Figma library and, where relevant, the coded components, kept in sync rather than drifting apart.
- What we do
- Keep design and code in step and decide what goes in.
- How AI helps us
- Writes the first components in Figma and in code.
Document
What a component looks like, and when to use it and when not to. That second part is what makes a system stick.
- What we do
- Write when to use each component and when not to.
- How AI helps us
- Drafts the documentation for every component.
- Both, ideally. A library only designers use drifts from production within months.
- Sometimes. If the foundations hold, we build on them. If they are what causes the inconsistency, starting over is often faster. The audit tells us which it is.
- Often your own team takes it from there. We write down the decision rules for that, so the system does not depend on us. Or we stay on to maintain, refine and extend the design system and the flows built on it.
- About five. Any more and nobody remembers them without looking them up, and a principle you have to look up settles nothing in the moment it matters.
- Usually in Figma itself, next to the designs. But we fit just as well into the way your team already works, in Confluence or Storybook, for example.
Is your question not here?Jasper is happy to answer it.
Designing the next features on your roadmap
Your roadmap is outgrowing your design team.
Setting up a design system for your product
Your screens have started to drift apart.
Getting design and UX right in what your team builds with AI
Your team already builds with AI, but design and UX lag behind.