04 · Service

Design Systems

A design system isn't a Figma library. It's an agreement between design, engineering, and product about how the product should behave. The library is just the artefact. Done well, a system makes the next product cheaper, more consistent, and faster to ship; done poorly, it's a Figma file nobody opens.

04 · Design Systems

How I approach this

The work, one phase at a time.

Audit before you architect. The first phase is ethnographic — three months of inventory across existing products, interviews with engineers about what breaks at handoff, and a catalogue of every variant in the wild before any tokens get written.

Tokens are the contract. Color, typography, spacing, motion, elevation — these get defined first because everything composable depends on them. Engineering gets tokens via a sync pipeline (Tokens Studio → Style Dictionary → CSS variables / Tailwind config) so the source of truth is one file, not two.

Components ship with documentation, accessibility specs, and dos/don'ts. Patterns are scoped to real product workflows — a healthcare system's patient header looks nothing like a commerce platform's product card, and the system has to recognise that.

Governance matters more than aesthetics. Without a contribution process, RFC review, deprecation path, and versioning strategy, the system drifts. The system that lasts is the one with rituals around it.

Process · in practice

What I deliver

Tangible outputs from this engagement.

01
Design tokens (color, type, spacing, motion, radius, elevation)
02
Primitive components (input, button, dialog, card, table, nav, etc.)
03
Pattern libraries scoped to real product workflows
04
Documentation site (Zeroheight, Storybook, or in-house)
05
Governance model — contribution guide, RFC process, deprecation path
06
Token sync pipeline from Figma to engineering

Methods & frameworks

The shoulders I stand on.

Atomic Design (Brad Frost)
The foundational hierarchy for thinking about reusable components and patterns.
Material 3, Polaris, Carbon, Lightning
Major industry systems studied as references for governance, scale, and documentation patterns.
W3C Design Tokens spec (DTCG)
The emerging community standard for token interchange between design tools and code.
Component-Driven Development
Storybook-led workflows where components are built and reviewed in isolation before composition.
Versioning strategy (semver for design)
Treat the system like a package: breaking changes get major bumps, additions get minor, fixes get patch.
RFC process for system contributions
Lightweight written proposals so changes are reviewed in writing, not in a meeting.