Design systems
We build component libraries in code, documented and tested, so your products look and behave the same.
We spent three years with BP's fleet team, building their React design system and then the products that use it, and built Mitsubishi Electric's component libraries in Svelte and then Lit.
A design system is the shared set of buttons, forms, tables and layouts your products are built from, with the rules for using them. When it lives in code as well as in a design file, every team gets the same tested components and nobody rebuilds a date picker from scratch.
It suits organisations with several products or teams that have drifted apart, and product teams who want to stop solving the same interface problems twice. We build the code side, working from your designers' files. If you need design help too, we bring in designers we've worked with before.
What you get
-
Components in the right framework
We've built libraries in React for BP, in Svelte and then Lit for Mitsubishi Electric, and in Stencil for another client. Web components built with Lit or Stencil work in any framework, which mattered for a team building in .NET.
-
Design tokens
Colours, type, spacing and the rest are defined once as tokens and shared by every product, so a brand change is made in one place.
-
Documentation
Every component gets a live example and usage notes, in Storybook or a docs site, so designers, developers and testers are all looking at the same thing.
-
Accessibility checks on every change
Automated accessibility tests run in the pipeline, so a change that breaks keyboard use or contrast is caught before it reaches a product.
-
Versioned releases
The library is packaged and versioned, with a changelog, so product teams can upgrade when they're ready.
Design systems we've built
-
BP
Fleet design system
Three years with BP's fleet team, from 2022 to 2024. We built the React component library and design tokens, then moved into the product team and led the front end through launch in Europe and then Australia and New Zealand.
-
Mitsubishi Electric
MELCloud components
Interface components for the MELCloud platform since 2022, first in Svelte with Chromatic visual tests, now a Lit web component library documented in Storybook, with accessibility checks in CI, used by a team building in Blazor.
“We worked together at BP where he delivered exceptional work in one of our largest global portfolios.”
How it runs
- Start from what exists
- We look at your designs and the products you've already shipped, and agree the tokens and the first set of components that would make the biggest difference.
- Release early, then grow
- The first components go out as a usable release as soon as they're ready, rather than waiting for a complete library. More follow as product teams need them.
- Work alongside product teams
- A library only helps if it's used, so we work with the teams adopting it, answer their questions and fix what gets in their way. At BP that meant joining the product team itself.
A design system keeps growing, so there isn't a natural end date. We usually agree a first release that covers the components your products use most, quote for that, and carry on from there by the day or by phase.
When you don't need one
If you've got one website and one team, a full design system is probably more than you need. A tidy set of components inside the site itself will do the job, and that's how we build every Statamic site anyway.
If you're an agency with a client who needs a component library, we can work under your name. There's more on how we work with agencies.
Your next project deserves better. Hi.
Tell us what you’re building and we’ll come back with some questions, a rough idea of cost and how we’d approach it.