Design Systems That Ship Real Products

Most design systems are collections of components that look great in Storybook and create friction in production. The gap between 'design system exists' and 'design system accelerates delivery' is where most teams live.

The token layer is the foundation

Design tokens — colours, spacing, typography, motion — are the primitive layer. Everything derives from them. When tokens are wrong, everything is wrong. When tokens are right, everything is consistent. The investment in a robust token architecture pays dividends every time the brand refreshes or a new theme is needed.

Components should encode decisions, not possibilities

A component with 40 props is a problem, not a feature. It means designers and engineers are making layout and variant decisions at usage time, not system time. Good components encode the design decisions — the variants that are actually needed, the spacing that's actually correct — and prevent decisions that shouldn't exist.

The content system connection

A design system disconnected from the content system creates the 'lorem ipsum problem': components designed around placeholder content that breaks when real content arrives. We model real content — actual titles, actual description lengths, actual image aspect ratios — in the component spec from day one.

Governance without gatekeeping

Design systems die when they become gatekeeping mechanisms rather than acceleration tools. The healthiest systems we've seen have a small stewardship team (2–3 people), a lightweight contribution process with clear criteria, and a culture where using the system is demonstrably faster than not using it.

Measuring system health

Track adoption rate (% of production components using system tokens), contribution velocity (time from proposal to published component), and divergence rate (% of production code that deviates from system). These three numbers tell you if your design system is helping or hurting.