Design systems & interface

Design that ships

We design in the medium the work is delivered in. Figma is where exploration happens; the system itself lives in code, as a versioned package with real releases — the argument made at length in your design system is an npm package.

What that includes

• Tokens: colour, type scale, spacing, radii and motion defined once and derived everywhere, with themes that redefine values rather than redeclare them.
• Components: typed APIs, every state enumerated — empty, loading, error, long string, disabled, focused.
• Storybook as a test target: accessibility checks and visual diffs run across the catalogue in CI.
• Motion with intent: transitions that explain what changed, and that respect prefers-reduced-motion.

Accessibility is not a phase

WCAG 2.2 AA is a build gate here, checked per component and per route. It is the same standard we hold our own site to — see our accessibility statement — and it is considerably cheaper to enforce continuously than to retrofit under deadline.

How an engagement runs

We audit what exists first — the components in the product, not the ones in the design file — and usually find the same thing: several near-duplicate versions of the same button. That inventory becomes the scope. We then define tokens, rebuild the core set in code with the states enumerated, and migrate the product surface by surface rather than in one high-risk cutover.

You end up with a versioned package, a Storybook that doubles as the test suite, and a written policy for what counts as a breaking change — so the system stays trustworthy after we hand it over.

Common questions

We already have a Figma library. Is that not a design system?

It is the design half. A Figma library describes intent; a design system enforces it. Until the components are installable, versioned and checked in CI, drift between what was designed and what ships is inevitable — and that drift is usually what prompts the call.

Can you work with our existing designers?

Yes, and that is often the best arrangement. Your designers know the product and the brand; we make their decisions enforceable in code. We work in the same files and review in the same place.

How do you handle accessibility?

WCAG 2.2 AA checked per component and per route as a build gate — keyboard paths, roles, focus order and contrast. It is the same standard we hold our own site to, and enforcing it continuously costs a fraction of retrofitting it later.