Design systems: One system across every product.
A design system that serves several products at once — like our own. Tokens, ~40 components in every state, Storybook and Figma Variables. Design and engineering stop arguing and start shipping faster.
Where it usually hurts
Ten different buttons
Each product has its own buttons, colours and spacing. Users feel they are dealing with different companies, and the brand drifts from screen to screen.
Every screen from scratch
The designer redraws what already exists and the developer rebuilds it. The team's time goes on repeats rather than on anything new.
Mock-up says one thing, code another
Values in the designs and in the code don't match. Every handover turns into a thread about how it should look, and releases slip.
A small change takes a week
To change the brand colour, someone hunts for it by hand across every product. Something always gets missed and the mismatch stays.
What the business gains
One style everywhere
A single source of truth for the landing page, the app and the customer account. Products stop drifting apart in the details and the brand holds across screens.
Faster releases
A designer assembles a screen from ready components; a developer takes the code from Storybook. New features ship several times faster.
One language with engineering
Tokens in Figma Variables = variables in code. Design and frontend work with the same entities, and value mismatches disappear.
Less technical debt
Change a token and it changes across every product. No copy-pasted styles and no ten different buttons nobody can fix later.
A working system: tokens, components in every state, and a deployed Storybook people write code from.
Tokens are the foundation
Colour, typography, spacing, radii, shadows and motion live as tokens, not magic numbers. Figma Variables and code variables stay in sync: one change rolls out across every product.
- Tokens: color, type, space, radius, shadow
- Figma Variables = variables in code
- Light / dark theme on request
- No magic numbers in the mockups
Components and states
Around 40 components in every state: hover, active, focus, error, loading, disabled. A full behavioural specification for development, not just appearance.
- ~40 components: forms, navigation, cards, modals
- Every state, edge cases included
- Motion spec: easing, duration
- Composition rules and the grid
Storybook and handover
Every component lives in Storybook with all its states and its code. A developer opens the page, sees the component and copies the implementation — no back-and-forth about how it should work.
- Storybook with every component and state
- Documentation on using the components
- Code in your repository, no contractor lock-in
- An introduction to the system for designers and developers
Adoption and evolution
A system only lives while someone tends it. We help roll it into your current products, agree the contribution rules, and can run its development on a monthly retainer.
- Rollout into existing products
- Contribution rules and versioning
- Design review of changes in code
- Maintenance and new components (monthly)
From brief to launch
- Week 0Product audit, component inventorydesigner + tech lead
- Week 1Tokens: colour, typography, spacing, motiondesigner
- Weeks 2–4Components in every statedesigner + frontend
- Weeks 5–6Storybook, documentation, token-to-code syncfrontend
- Week 7Rollout into the product, training, contribution rulesthe team
- + 30 daysSupport through adoption, design reviewincluded
Pick the scope
Tokens and a base set of components in Figma. No Storybook, no code.
- Tokens: colour, type, spacing
- ~20 base components
- The main states
- A Figma library
- Storybook — not included
- Sync with code — not included
The full system: tokens, ~40 components, Storybook, sync with code.
- Tokens in Figma Variables
- ~40 components in every state
- Motion specification
- Storybook with every component
- Token-to-code sync
- Code in your repository
A system across several products, plus evolution and review on a monthly retainer.
- Full design system
- Several products / themes
- Rollout into current products
- Design review of changes in code
- New components from the backlog
- Versioning and changelog
Package prices are in the price list. We put an exact number on it after a free review of the task.
Price PDF