Design systems
Design systems your designers and engineers both use
We build the shared set of tokens, components and guidelines that lets your team ship consistent interfaces faster, in Figma and in code.
Who it's for
- Every screen uses a slightly different button, and nobody knows which one is right.
- Design and code have drifted apart, so every handoff starts with a debate.
- Each new feature is designed and built from scratch, so it takes longer than it should.
- You're adding a second product or platform and want both to feel like one family.
What we do
Audit
An inventory of the components, colours and patterns already in use, and where they conflict.
Design tokens
Colour, type, spacing and motion defined once and shared by Figma and code, light and dark themes included.
Figma library
Components with variants and auto layout, organised so designers find what they need.
Coded components
Accessible React components styled with Tailwind CSS that match the Figma library one to one.
Documentation
Usage guidelines and examples, so the system gets adopted rather than admired.
Adoption
Migration of existing screens and support for your team as they start building with it.
How the work runs
Audit
We catalogue what exists across design files and code and find the inconsistencies.
You get: An audit report and a prioritised component list.
Typically 1–2 weeks
Foundations
We define tokens for colour, type, spacing and motion, and agree on naming.
You get: A token set shared by design and code.
Typically 1–2 weeks
Components
We design and build components in order of how often your product uses them.
You get: A Figma library and matching coded components.
Typically 3–8 weeks
Document
We write usage guidelines and examples alongside each component.
You get: A documentation site your team can search.
Alongside the components
Adopt
We migrate key screens and help your team through the first features built with the system.
You get: A system in use, not just in a file.
Typically 2–4 weeks
Deliverables and stack
What you receive
- UI audit
- Design tokens, light and dark
- Figma component library
- React component library
- Documentation site
- Contribution and versioning guidelines
Tools we use
- Figma
- Tokens Studio
- React
- TypeScript
- Tailwind CSS
- shadcn/ui
- Radix UI
- Storybook
How we work together
A defined project
We scope it and send you a fixed quote.
Hourly, USD 50/h
Our team works through your backlog, week by week.
Questions
Should we build a design system from scratch or start from an existing one?
Usually neither extreme. We often start from an accessible foundation such as Radix UI or shadcn/ui and shape it to your brand, which saves weeks without locking you into someone else's look.
Can you work with the components we already have?
Yes. We audit what exists, keep what works and consolidate the rest, so your team doesn't have to rewrite the product at once.
Do you build the components in code or only in Figma?
Both, or either. The most value comes when the Figma library and the coded components match, which is how we build them by default.
How do you keep the system accessible?
Components are built on semantic HTML and checked for keyboard use, focus handling and colour contrast against WCAG 2.2 AA.
How is a project priced?
We quote a fixed price for a defined project once we understand the scope, or work hourly at USD 50/h. Tell us about your project and we'll reply with a proposal within 48 hours.