Design System
The shared toolkit and rules a team designs and builds with.
Definition
A shared set of tokens, components, patterns and guidance, together with the governance that keeps them coherent.
Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.
On this plate
In plain language
The shared toolkit and rules a team designs and builds with.
Example
Tokens, a component library, documentation and a contribution process, maintained together.
Commonly confused with
Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.
Component Library
TermThe implemented set of reusable components, one part of a system.
Key difference
A component library is the built components. A design system is that plus the tokens, the guidance and the governance that keeps them coherent. Shipping forty components and calling it a system is the most common way the work stalls.
Use Design System when
- The question includes documentation, adoption or who decides.
- The problem is consistency across teams, not missing components.
- You are arguing for the ongoing investment, not a one-off build.
Use Component Library when
- You mean the package that teams install and import.
- The subject is code: versioning, props, releases.
- There is no guidance or governance attached, and saying so is honest.
Local chart
TERM·084 · Region X · Grid D5
This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.
Continue from here
Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.
Deeper reading
The full entry behind this definition.
- Design System DocumentationSYS·003 · Design system
- Design System GovernanceSYS·004 · Design system
- Design TokensSYS·001 · Design system
Nearby in the Atlas
Adjacent territory, found through shared tags rather than a stated link.