Design systems

A design system is the shared set of components and rules several products are built on. These notes cover its structure, its governance, the drift, the audit, and what it costs.

14 articles

Start here

Five rows with partly filled score bars on the left, lines crossing and reordering them into a ranked roadmap of five steps on the right, the first one lit

Design

Design system audit: the 5 checks and the repair roadmap

A design system audit scores token usage, component drift, accessibility, governance, and adoption, then returns a ranked fix list and a repair roadmap.

Four tall tubes, each with its own threshold mark at a different height, filled past the mark, lit above it and dark below

Design

When to hire an agency for a design system (and when to wait)

Four thresholds decide it: repeated surfaces, release cadence, who owns it after handover, a fixed date. Below them a design system costs more than it returns.

Five tall day cards joined by a lit line: a component inventory, four scored bars, a focus ring test, paired duplicates, and a ticked list

Design

How to run a design system audit in 5 days: a checklist

A day-by-day checklist to audit a design system: inventory components, score four kinds of drift, test accessibility, and ship a fix list in five days.

Two lines on a chart, a rising one and a flat one, each bright only where it is lower, crossing at a ringed point, a cluster of small tiles and one single tile at their ends

Design

In-house vs agency for a design system: when each wins

A dedicated in-house design system hire runs $145k to $185k a year loaded; an agency retainer $5k to $15k a month. Here is when each one wins.

On a white ground, three rows of monthly bars: one tall block then empty months, twelve equal bars, and twelve bars split in two with the lower part growing

Design

Design system pricing in 2026: project, retainer, or shared ownership

A design system costs $5,000 to $60,000+ to build, then needs upkeep. We compare project, retainer, and shared-ownership pricing, and which fits your stage.

A ledger sheet of quiet rows with one white line item lit, linked to two bars on the right, the lower one about half as long

Business

Design system ROI: measure it as a P&L line item

A design system that cuts build time 47% is a cost with a measurable return, not a brand showcase. Here is how to put it on the P&L in 2026.

A row of six identical white components above, and below it six copies that tilt, shift and fade further each time, each with a dashed outline of the original over it

Design

Component drift: how design systems decay and how to catch it

Only 8% of teams call their design system stable. Component drift is the gap between the system you designed and the UI that ships. Here is how to catch it.

Seven stacked tiers narrowing upward, the lower four lit in white and the upper three in dashed outline, a zigzag line climbing through them in order

Design

Design system structure: the 7 categories and the build order

A design system holds or rots based on the order you build its parts. Here are the seven categories every scalable system needs, and the sequence.

Four groups of lit tile columns growing toward a dashed ceiling, cut back between groups, with dashed outlines where tiles were removed and dark tiles falling below

Design

Why we kill components instead of adding them: the design system diet

Most design systems grow until they break. We treat the component count as a number to keep small. Here is the rule set we use to prune ours every quarter.

Six dark cards in a grid, each a small diagram of one lit tile and dark tiles in a different relationship: handed over, embedded, linked by recurring dots, feeding three, overlapping, orbiting

Design

Design system as a service: 6 agency models compared in 2026

Design system as a service is an ongoing engagement: an agency builds, governs, and evolves your system instead of handing it off. Six models compared.

A lit card at the centre, a cloud of tiny grey chips drifting away and fading to its left, and three clean lines on its right into three stacked white layers

Web

Why we removed Tailwind from production: a CSS-only design system

After years of running Tailwind alongside our own design system, we removed it from production. Here is the architecture that replaced it and what changed.

A central white tile with nine lit tiles on an inner orbit joined by solid lines, and three dark tiles on a wider dashed orbit joined by dashed lines

Design

How to govern a design system across 10+ consumer projects

A practical playbook for governing a design system across many consumer projects: contribution model, versioning, codemods, and adoption tracking.

A grid of identical dark pills with ten that break the pattern in white: wider, taller, square, tilted, shifted or doubled

Design

10 design system mistakes that wreck consistency at scale

Buttons multiply, tokens drift, components fork. The 10 design system mistakes that quietly turn a product into a parts bin, and the fixes.

From a tile on the left, a high white arc studded with small lit tiles reaches a lit tile on the right, while a straight grey line below loops three times and stops short

Design

Third-party component libraries: an expensive shortcut

Third-party component libraries promise speed but lock you into upgrade hell, brand sameness, and rewrites every two years. Here is what actually works.

Back to Field notes