Design Systems
Shared components and standards that keep design and code in sync.
A design system is only useful if people actually use it. We build design systems and component libraries that are documented clearly enough for designers, developers and content editors to work from the same source of truth, rather than a design file that quietly drifts from the live site.
Working with Nick is an absolute dream. He's friendly, helpful, a great listener - and somehow manages to turn our long list of user requirements, and very little to no direction into beautiful designs. Last year we didn't have anything remotely like a design system to consolidate and consistently apply to our new ETNA site. Working together with Lauren our Product Manager, Nick has managed to create a brilliant design system and page templates using Figma which have formed the foundations and basics for our website development build.
Expertise
-
Component libraries & design tokens
A shared vocabulary for colour, type and spacing across design and code.
-
Wagtail StreamField pattern libraries
Editor-facing components that map directly onto the design system.
-
Documentation & governance
Clear guidance on when and how each component should be used.
-
Accessibility built into components
So accessible patterns are the default, not an extra step.
-
Design-to-code workflows
Reducing the gap between what's designed and what's shipped.
How we'd work together
-
Audit existing patterns
Understanding what already exists, and where inconsistency is causing problems.
-
Define tokens & principles
Agreeing the underlying rules for colour, type, spacing and behaviour.
-
Build core components
Building a working set of the most-used patterns first.
-
Document & govern
Making the system easy to adopt and hard to drift away from.
-
Roll out
Introducing the system into live products incrementally.
The design system is something discussed at TNA for a long time but never started. Providing us with a foundation and framework which can be evolved over time has already proven so valuable to the department. It has provided a central source of truth for design decisions, as well as history and documentation. It has also helped support developers making their work more accurate and efficient. The design system will certainly have wider use than just our team and website and other TNA digital teams have already requested to use it.
Featured work
Frequently asked questions
Yes — we typically work from and alongside your existing design files, keeping tokens and components in sync between design and code.
Yes, and in most cases that's the more realistic approach — introducing it component by component as pages are rebuilt, rather than a single big-bang rollout.
Ideally your team, with documentation and governance set up to make that straightforward — we can also stay involved on a retainer basis if that's useful.
Let's work together
Nick Lee