Nine interface elements that appear independent are connected by three shared tokens: an action colour, a control radius and a spacing step. When the radius changes, every connected element changes.

The definition 'a design system is a collection of components' is struck out and replaced by a map of eighteen connected concerns across deciding, encoding, building and sustaining. Components are one node. The component library covers primitives, components, states and behaviours; the design system is everything.

A seven-layer stack from brand to product experiences. Five forces — accessibility, content, platform, responsiveness and governance — cut across every layer and change each layer's artifact.

Primitive tokens hold raw values. Semantic tokens hold meaning and point at primitives. Component tokens point at semantic tokens. Switching to dark mode re-routes only the semantic-to-primitive links; component links do not change. Without the semantic layer, dark mode must be patched component by component, and text becomes unreadable.

Seven unrelated interface fragments — navigation, form, table, dialog, date picker, button group and toast — all reference the same tokens. Changing color.action.primary, radius.control or space.base changes every consumer at once. The number of consumers is counted live.

A settings layout built only from spacing tokens. Changing the base rhythm from 4 to 8 pixels expands every gap and inset; at 2 pixels the layout collapses, but minimum target size still holds at 24 pixels.

Five primitives compose into a button. The button is reused inside a toolbar, the toolbar inside an application header, and the header inside a product interface. Hovering any button highlights every instance.

One button moves through nine states — default, hover, focus, active, pressed, selected, disabled, loading and error — and six conditions that multiply them: long content, right-to-left, high contrast, reduced motion, touch input and keyboard focus. A component is not a picture; it is a state machine. At the end the button is live.

One button multiplied by 3 sizes, 4 intents, 5 states, 2 themes and 2 densities becomes 240 combinations; across 3 platforms, 720. Nobody designs 720 buttons. They design 19 rules that produce them.

One shared button is forked by six product teams. Over eighteen months each team makes small local changes. An audit finds 17 buttons, 12 action colours, 8 radii, 6 shadows and 4 focus behaviours. Without governance, systems drift. Shared tokens then consolidate them into one component with sanctioned variants and one documented exception.

A single interface resolves across four axes — brand, mode, density and platform — 36 configurations in all. Each step changes one axis and the whole interface resolves again.

The whole page mutates through five versions of its own design system: v1.0 monochrome with 2px radius and 32px controls; v1.4 adds accessible focus states; v2.0 a brand redesign with no component API changes; v3.0 introduces a mobile platform where some primitives diverge; v4.0 a multi-brand architecture on one semantic layer. The page you have been reading is v4.0.

Button / Legacy is deprecated with eight consumers. An adapter and a replacement are introduced. Consumers migrate in batches across releases v3.2 to v4.3; two are blocked by a custom theme and by having no owning team. In v5.0 the legacy component and the adapter are removed. Systems cannot change instantly.

Who decides? A promo-code field starts as a local need in one product team, repeats in two others, becomes a proposal, and passes through system review, accessibility validation, engineering and release before products adopt it. A one-off countdown button stays local. Each stage changes the component.

Accessibility is not a checklist at the end. High contrast resolves semantic colour tokens from a different map; reduced motion sets every motion duration to zero; larger targets raise the minimum target size. The switches apply to the whole study.

At 1, 3, 10 and 50 products, the number of possible pairwise coordination conversations grows from 0 to 3, 45 and 1,225. A system routes coordination through shared rules — 50 connections instead of 1,225 — but requires documentation, versioning, ownership, governance, migration and automation. Scale does not remove complexity; it organizes it.

The whole study as one dependency network: 46 nodes and 137 edges from primitives through modes, tokens, components and patterns to products — including this page. Selecting a node shows what depends on it. Applying a breaking change shows the affected network and its migration cost.

The network simplifies into a single line: a record. Systems do not remove change; they make change manageable. A design system is a record of decisions. A study by Victor Maragioglio.