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 also12
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 & Interface16 connections
Utility-First CSS
Composing styles from many small single-purpose classes rather than authoring semantic rules.
Design & Interface15 connections
Container Query
Styling based on the size of an element's container rather than the viewport.
Design & Interface13 connections
Design Token
Named design decisions — color, spacing, radius, type — stored as data so they can be shared and re-themed.
Design & Interface21 connections
Naming
Choosing identifiers so the code states its own meaning without commentary.
Method59 connections
Taxonomy
A controlled vocabulary for classifying things, and the choice between hierarchy, facets, and free tagging.
Meaning & Society34 connections
Typographic Scale
A constrained set of type sizes and their paired line heights and spacing.
Design & Interface17 connections
Plain Language
Writing so that the intended reader can find, understand, and use the information the first time.
Meaning & Society28 connections
Empty State
What an interface shows when there is nothing to show yet, a screen often designed last that is many people's first impression.
Design & Interface11 connections
Iconography
The design and use of small symbolic images in interfaces and signage, which are quick to recognize when familiar and surprisingly ambiguous when not.
Design & Interface14 connections
Focus Indicator
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
Design & Interface12 connections
Linked from21
- 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.
- Empty StateDesign & Interface
What an interface shows when there is nothing to show yet, a screen often designed last that is many people's first impression.
- Focus IndicatorDesign & Interface
The visible outline or highlight showing which element on a screen will receive keyboard input, essential for anyone who doesn't use a mouse, and for years routinely removed by designers who found it unattractive.
- 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.
- IconographyDesign & Interface
The design and use of small symbolic images in interfaces and signage, which are quick to recognize when familiar and surprisingly ambiguous when not.
- 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.
- Text TruncationDesign & Interface
Cutting text that doesn't fit and marking the cut with an ellipsis, a layout convenience that hides information, breaks in other languages, and needs care to stay accessible.
- 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.
- Visual HierarchyDesign & Interface
Arranging elements so their visual weight matches their importance, telling the eye where to look first, second, and last.
- Web ComponentsWeb Platform
A set of browser-native APIs for building reusable, encapsulated HTML elements without a framework.