Design System
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
A design system is the combination of a token set, a component library, and the conventions governing their use — the shared vocabulary that lets many people build interfaces that look and behave as one thing.
Its purpose is to close drift vectors. Every place where a value can be typed freely is a place two people will choose differently, so a system works by replacing free values with enumerated ones: not any color but a named role, not any spacing but a scale step, not any markup but a typed primitive. Where an escape hatch remains — an arbitrary class name, an inline style, a raw element with hand-written styling — drift reappears there, and it reappears fastest under the pressure of shipping.
That is why the strictest systems ban the escape hatches outright rather than discouraging them. Removing a free-form styling prop is unpopular and effective: the styling then has to be expressible through typed properties, which means the system has to grow to accommodate real needs rather than being routed around.
The maintenance question is not whether the system covers everything but whether extending it is easier than bypassing it. When it is not, people bypass it, and the bypass is invisible to any check that only inspects the sanctioned path.
See also8
Design Token
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface17 connections
UI Primitive
The small set of typed components through which all interface markup is expressed.
Design & Interface12 connections
Headless Component
A component supplying behavior and accessibility with no styling of its own.
Design & Interface13 connections
Naming
Choosing identifiers so the code states its own meaning without commentary.
Method55 connections
Taxonomy
A controlled vocabulary for classifying things, and the choice between hierarchy, facets, and free tagging.
Meaning & Society33 connections
Utility-First CSS
Composing styles from many small single-purpose classes rather than authoring semantic rules.
Design & Interface11 connections
Container Query
Styling based on the size of an element's container rather than the viewport.
Design & Interface9 connections
Typographic Scale
A constrained set of type sizes and their paired line heights and spacing.
Design & Interface15 connections
Related1
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from16
- Container QueryDesign & Interface
Styling based on the size of an element's container rather than the viewport.
- Design TokenDesign & Interface
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
- Gestalt PrinciplesDesign & Interface
A set of perceptual rules describing how the eye groups discrete elements into wholes before conscious analysis begins.
- Grid SystemDesign & Interface
A shared set of columns, gutters, and alignment lines that constrains where content can sit, so unrelated layouts still read as one system.
- Headless ComponentDesign & Interface
A component supplying behavior and accessibility with no styling of its own.
- Hick's LawDesign & Interface
Decision time rises with the number and complexity of choices offered, roughly logarithmically — fewer options decided faster.
- NamingMethod
Choosing identifiers so the code states its own meaning without commentary.
- Not Invented HereMethod
The bias against adopting an outside solution simply because it wasn't built by your own team.
- Postel's LawMethod
Be conservative in what you produce, liberal in what you accept — a design rule for interoperating systems.
- Progressive DisclosureDesign & Interface
Show only what most users need now, and defer the rest behind an explicit action, instead of exposing everything at once.
- SkeuomorphismDesign & Interface
Designing a digital object to visually mimic its physical predecessor, borrowing familiarity at the cost of extra visual weight.
- TaxonomyMeaning & Society
A controlled vocabulary for classifying things, and the choice between hierarchy, facets, and free tagging.
- Typographic ScaleDesign & Interface
A constrained set of type sizes and their paired line heights and spacing.
- UI PrimitiveDesign & Interface
The small set of typed components through which all interface markup is expressed.
- Utility-First CSSDesign & Interface
Composing styles from many small single-purpose classes rather than authoring semantic rules.
- Web ComponentsWeb Platform
A set of browser-native APIs for building reusable, encapsulated HTML elements without a framework.