Design Systems

A design system is the point at which design stops being a series of decisions and becomes a set of constraints, and the tooling in this subcategory exists to make that transition survivable. The launches here cover token management, component documentation, design-to-code pipelines, visual regression testing, and the various attempts to keep a design file and a codebase describing the same thing.

The token problem is the foundational one. A design system that lives as a set of styles in a design tool and a separate set of variables in code will diverge, and it will diverge quietly. Tools that define tokens once and generate both sides — the design tool's variables and the codebase's CSS or theme file — are addressing the actual failure mode. The good ones handle the awkward parts too: semantic aliases that point at primitives, mode switching for light and dark, and the fact that a token's value differs by platform.

Component documentation is the second pillar and is judged on whether people read it. Documentation that lives beside the code and renders the real component stays honest, because a broken example is a broken build. Documentation maintained separately becomes fiction within two quarters. This is the entire argument for the workshop-style tools in this subcategory, and it is a good argument.

Visual regression testing is the least glamorous and most valuable thing here. It catches the change nobody intended: a padding token adjustment that quietly broke a dense table three screens away. The costs to weigh are how many screenshots you are storing, how noisy the diffs are, and whether the tool is smart enough to ignore anti-aliasing and animation. A regression suite that cries wolf gets muted, which is worse than not having one.

Adoption is the part no tool solves. A system that is harder to use than not using it will lose to a one-off component every time, so the practical measure of any tool here is whether it makes the correct path the fast one. Systems that ship a working component you can drop in beat systems that ship a specification you must implement.

Start smaller than you think. Colour, spacing, and type scale as tokens, plus five components that are genuinely reused, will deliver most of the benefit. See [colour](/categories/colour) and [typography](/categories/typography) for the foundations.