Design systems · From scratch to production

One language
for design and code.

I build design systems the way a product gets built: start with an audit, agree on tokens, design components with every state, document them, and ship them as code developers can install. The goal is a system teams reach for, not one they work around.

Try the live system See the process

A design system is not a Figma library. It is a set of decisions, written once as tokens and components, that designers and developers share all the way to code.

How I build one

Seven steps, from a messy product to a system that scales.

Each step leaves something behind the team can use straight away, so the system is useful long before it is finished.

9 button styles found → 1 component, 4 variants

color.brand.500#2fce65

color.text.primary#EEEAE4

color.text.secondary#8C8984

radius.sm4px

space.624px

Aatype.heading.lg44 / 54

PrimaryButtonButtonButtonButton

SecondaryButtonButtonButtonButton

DangerDeleteDeleteDeleteDelete

DefaultHoverFocusDisabled

PipelinesNew pipeline

Filter…PassedDrift

Empty, loading and error states designed for every pattern

Data table

✓ Do: right-align numeric columns

✕ Don't: wrap text in status cells

densitysortableselectablestickyHeader

// tokens.json → generated, never hand-edited
:root {
  --color-brand-500: #2fce65;
  --color-action-primary: var(--color-brand-500);
  --radius-sm: 4px;
  --space-6: 24px;
}

import { Button } from '@product/ui';
<Button variant="primary" size="md">Run pipeline</Button>

RequestTeam needs a pattern

ReviewFits the system?

BuildDesign + code + docs

ReleaseVersioned, changelog

01 — Audit

Take stock of what already exists.

I screenshot and group every button, input, table, colour and text style across the product. It shows the team how much drift there is, and gives a clear list of what to merge first.

Output Interface inventory, duplication report, priority list

02 — Foundations

Agree on tokens before drawing components.

Colour, type, spacing, radius, elevation and motion become named tokens in three tiers: primitive values, semantic roles, and component-level decisions. Change the brand once and every screen follows.

Output Figma variables, light and dark modes, tokens.json

03 — Components

Design every state, not just the happy one.

Each component ships with its variants, sizes and states: default, hover, focus, pressed, disabled, loading and error. Auto-layout and component properties keep the Figma API close to the coded props.

Output Component library with properties that mirror code

04 — Patterns

Combine components into patterns that solve real tasks.

Filter bars, data tables, forms, empty states and onboarding flows. Patterns are where most product time goes, so this is where a system saves the most.

Output Page templates and patterns for the product's core flows

05 — Documentation

Write the why, not just the what.

Usage guidelines, do and don't examples, accessibility notes and content rules for every component, in a place both designers and developers already look.

Output Living docs site or Storybook with guidelines

06 — Developer handoff

Make the code the source of truth.

Tokens are exported to CSS variables and platform formats, component names and props match between Figma and code, and I pair with engineers on the first builds so nothing gets lost in translation.

Output Token pipeline, matching component API, Code Connect links

07 — Governance

Keep it alive after launch.

A simple way for teams to request, contribute and review new patterns, plus versioning and a changelog, so the system grows with the product instead of forking.

Output Contribution model, release notes, adoption tracking

Elements

The foundations every component is built from.

Six elements, each defined once as tokens and documented with clear rules. Hover any tile to see it working.

Colour

Primitive palettes, semantic roles, light and dark themes, contrast-checked pairs.

Typography

A modular type scale with productive and expressive sets.

AaArchivo / Inter

Spacing

A 4px base scale used for padding, gaps and layout.

2x grid

A 16-column responsive grid with mini units that line everything up.

Motion

Productive and expressive curves with named durations.

Icons

A 16/20/24px icon set on one keyline grid, with one stroke weight.

Token architecture

Three tiers, so a brand change is one edit, not a hundred.

Primitive tokens hold raw values. Semantic tokens give them a job. Component tokens decide how a specific part uses that job. Hover a token to follow it through.

01 · Primitive

02 · Semantic

03 · Component

Result

Pipeline runCompleted in 2m 14sView report

Live playground

Change a token. Watch the whole interface follow.

This is a working example of how I set systems up. Every control below edits a token, every component reads only tokens, and the code panel shows what a developer would receive.

Brand colour

Mode

Corner radius 4px

Density

Button contrast — AA

Data qualityLast run 4 min ago

Rules passed1,284+3.2%

Failed17−8

Coverage92%

RuleDatasetStatus

Null check · customer_idcrm.accountsPassed

Row count variancesales.ordersDrift

Schema matchfinance.ledgerFailed

Notify me on failureView all rules →

Motion

Two kinds of motion, chosen on purpose.

Productive motion is quick and quiet, for everyday tasks like opening a menu. Expressive motion is slower and more noticeable, for moments that matter, like a pipeline finishing. Press play to compare.

Productivecubic-bezier(0.2, 0, 0.38, 0.9) · 110ms

Expressivecubic-bezier(0.4, 0.14, 0.3, 1) · 400ms

Durations: fast-01 70ms · fast-02 110ms · moderate-01 150ms · moderate-02 240ms · slow-01 400ms · slow-02 700ms

2x grid

Layouts that line up, at every breakpoint.

A 16-column grid with 8px mini units. Components, type and imagery all snap to the same lines, so screens built by different teams still look like one product. Turn on the overlay to see it.

Show grid

Pipelines

Component anatomy

Every part named, every state designed.

Developers get the same anatomy, names and states in Figma as in code, so a review comment like "the focus ring is off" points at one exact thing.

Run pipeline

1Container 2Leading icon 3Label 4Focus ring

Height: 40px · space.10
Padding: 0 20px · space.5
Gap: 8px · space.2
Radius: radius.control
Label: Inter 15 / 500
Focus: 2px ring, 3:1 min contrast

Documentation

Every component documented four ways.

Designers, developers, writers and QA each need different answers about the same component. Each one gets a page with four tabs, so nobody has to dig.

Stable · v2.4

Button

Component catalog

A catalog teams can search before they design.

Each component shows its status, so teams know what is ready to build with, what is in beta and what is coming next.

Type scale

DisplayAa144 / 137

Heading LAa44 / 54

Heading MAa24 / 30

BodyAa18 / 29

CaptionAa14 / 22

Spacing scale · 4px base

space.14

space.28

space.312

space.416

space.624

space.1040

space.1456

space.2496

space.40160

What a team gets

A system built for the people who use it every day.

Designers

Faster, consistent screens

A Figma library with variables, modes and component properties, so new screens start from finished parts instead of copies of old ones.

Developers

Tokens and components in code

Generated CSS variables and platform tokens, a component API that matches Figma, and Code Connect links from design to the real component.

Product

Less rework, quicker releases

Shared patterns for tables, filters, forms and empty states mean fewer design debates per feature and fewer UI bugs in QA.

Accessibility

WCAG built in, not bolted on

Contrast-checked colour pairs, visible focus states, keyboard behaviour and screen-reader notes are part of each component's spec.

Brand

Theming without forks

Light and dark modes, and white-label or sub-brand themes, all switch through semantic tokens rather than duplicated components.

Leadership

A system that keeps up

A contribution model, versioning, release notes and adoption tracking, so the system stays current as teams and products grow.

Get started

Two ways in, one system.

For designers

Open the library, start from tokens.

Enable the core library and theme variables in Figma
Pick a page template for the flow you are designing
Build with components; detach nothing
Check contrast and focus states with the a11y annotations kit

For developers

Install the package, theme with tokens.

$ npm install @product/ui @product/tokens

import '@product/tokens/css/dark.css';
import { Button } from '@product/ui';

Components match Figma names and props one to one
Override semantic tokens, never raw hex values

See it in practice

Global AI for DataOps

How a shared component set kept Datagaps' AI features consistent across Dataflows, Data Quality and Pipelines.

One languagefor design and code.

Seven steps, from a messy product to a system that scales.

Take stock of what already exists.

Agree on tokens before drawing components.

Design every state, not just the happy one.

Combine components into patterns that solve real tasks.

Write the why, not just the what.

Make the code the source of truth.

Keep it alive after launch.

The foundations every component is built from.

Colour

Typography

Spacing

2x grid

Motion

Icons

Three tiers, so a brand change is one edit, not a hundred.

Change a token. Watch the whole interface follow.

Two kinds of motion, chosen on purpose.

Layouts that line up, at every breakpoint.

Every part named, every state designed.

Every component documented four ways.

Button

A catalog teams can search before they design.

A system built for the people who use it every day.

Faster, consistent screens

Tokens and components in code

Less rework, quicker releases

WCAG built in, not bolted on

Theming without forks

A system that keeps up

Two ways in, one system.

Open the library, start from tokens.

Install the package, theme with tokens.

Let's build something people love to use.

One language
for design and code.