Refract Group2026
Design systems
A design system your engineers can build from.
We audit the interface you have, sort it into reusable parts and build those parts in Figma and in code. It is scoped as product design, from $10,000 a month, with the timeline agreed before we start.
In short
What you get
A design system in Figma and in code. It holds the tokens for type, colour and spacing, the components with their states, the patterns your product repeats and a rule for each part. Your team owns all of it.
What it costs
A design system is scoped as product design, which starts from $10,000 a month, or as one part of a larger product design project. A one-week audit of the components you already have costs $2,500.
How long it takes
We agree the timeline before the work starts. It depends on how many components the product needs, how many screens move onto them and whether mobile is part of the system. The component audit takes one week.
When it’s not a fit
The product is a few screens that still change every week, you want a new look with the components left as they are, or none of your engineers has time to adopt what we build.
How a system gets built
Read how the Keeyu system took shapeAudit what exists
We go through the whole interface before changing any of it and write down every type style, colour, spacing value, icon and component in use.
Sort it into parts
We mark what is duplicated, settle which version of each part stays and agree the list with your designers and engineers.
Design each part
Every component is drawn in Figma on your product’s own content, with its states from the start, so engineering does not have to invent them.
Build it in code
We build the components with your engineers, in the stack they already use, and check each one in staging beside the screens it will sit in.
Hand it over
Your team gets the Figma library, the coded components and the rules for both, in your own accounts. All of it is yours.
Where a design system leads
Questions about design systems
Tokens, components, patterns and the rules for using them. Tokens are the named values for type, colour and spacing. Components are the buttons, inputs, tables and panels made from those values, each with its states. Patterns are the ways components combine for a task. The rules say where each part belongs. We deliver all of it in Figma and in code.
Both. Designers work from the Figma library and engineers build from the coded components, and the two match. For Keeyu, Lumos, Managed and Atrium we designed in Figma and built the system in code beside it. On each of those products the client’s own engineers built the product itself.
It has no fixed price of its own. A design system is scoped as product design, which starts from $10,000 a month, or as one part of a larger product design project. The price depends on how many components the product needs and how much of the existing interface moves onto them. A one-week audit of your current components costs $2,500.
It depends on the size of the product, so we agree the timeline before the work starts. What moves it is the number of components, how many existing screens are brought onto them and whether mobile is included. An audit of the components you have now takes one week.
Yes. Atrium, a CRM, worked as a product and had grown a component at a time. We audited the whole interface before changing any of it, wrote down what was there, marked what was duplicated and sorted it into reusable parts. Then we built shared patterns for the parts people touch every day, each with its interaction states. Mobile was designed as part of the same system.
Your team does. The system is handed over documented and in your accounts, and the files and the code belong to you. If you would like us to keep extending it as the product grows, that runs as an embedded team, which costs from $10,000 to $30,000 a month.
Yes. We build the components in the stack your engineers already use, and we agree with them how each one behaves before it is built. On Keeyu we developed the patterns with Keeyu’s engineers so they could be used as components, and checked the work in their staging environment.
A component library is one part of a design system. The library is the built components. The system also holds the values those components share, the patterns they combine into and the rule for when each one applies. With the library alone, two teams can use the same button and still ship screens that behave differently.
Yes. We are a Sydney studio, and we have built design systems for four software products: Keeyu, Lumos, Managed and Atrium. Two of those companies were at pre-seed when the work began and two at seed. The Lumos system had to run across every module of the product and carry a new brand.
We need access to the product, ideally in staging, and any Figma files you have. We need time with the engineers who will use the components, because each one’s behaviour is agreed with them. We also need one person who can decide which version stays when the same pattern exists in several forms.
A closer look at the work
- Designing clarity for KeeyuKeeyu’s product brings together brands, channels and integrations, and it was not always clear how the pieces fit together. We worked with their product and engineering team to make it easier to navigate and easier to build on.
- Designing complex SaaS workflows: lessons from KeeyuHow relationships, progress and contextual guidance shape a usable product, and how to apply those lessons to your next difficult workflow.
- An AI design system puts your brand to workGive an AI agent the brand assets, examples and working methods it needs to turn a real brief into work your team can review and use.
Does one button behave two ways in your product?
Send us the product and the screens that should match and don’t. We’ll say where we’d start.
Most teams start with a call, then a sprint or an audit.
The people you’d work with, from the first call to launch