A style guide describes how things should look. A design system decides how they do look, because production reads from it. The difference is not vocabulary; it is whether a value can be overridden by someone in a hurry without anyone noticing.
The failure mode
The typical system is a set of components in a design file and a separate set of components in code, connected by a person. That person leaves, or gets busy, and the two drift. Six months later the button in production has a different border radius from the button in the file, and nobody can say which one is correct, because neither is authoritative.
Two layers, one source
The structural fix is to separate primitives from semantics. Primitives are the raw decisions: a colour ramp, a spacing rhythm, a type scale, three easing curves. Semantic tokens name the roles those primitives play: surface, line, ink, signal, focus. Components are only ever allowed to read the semantic layer.
The payoff is that identity becomes data. Changing a brand means changing the values behind the semantic names, not editing components. A system built this way can carry two very different identities without a single component being rewritten.
States are the system
The thing that makes a build feel unfinished is almost never the default state. It is the missing ones. Every component in a real system ships with the full set:
- Default — how it looks at rest.
- Hover and focus-visible — separate, because a keyboard user is not a mouse user.
- Active — a physical response to a press, or the interface feels dead.
- Loading — shaped like the content it will become, not a spinner.
- Empty — the state a new account sees first, and the one most systems forget.
- Error — specific, in place, and written in the voice of the interface.
Accessibility belongs in the primitives
If contrast is checked at the end, fixing it changes the design, which means the design was never finished. Define ink and surface as pairs, with the ratio each pair must hold, and a failing theme becomes impossible to introduce rather than expensive to discover.
The same applies to motion. One rule — only transform and opacity animate, everything collapses when motion is reduced — is worth more than a page of animation guidance, because it can be enforced.
How to tell if yours is infrastructure
One question settles it: can someone add a new page without making a single new design decision? If yes, you have a system. If the answer involves opening a file and copying values, you have a style guide with extra steps.