Design system (Wikipedia)
An encyclopedia article on design systems: the definition, what a design system typically bundles, the distinction between a pattern language, a design language, and a bare UI kit, the connection to design tokens, and the practice’s own history. See Design System.
License: CC BY-SA 4.0 — https://creativecommons.org/licenses/by-sa/4.0/
Key points
- Defines a design system as “a comprehensive framework of standards, reusable components, and documentation that guides the consistent development of digital products within an organization,” serving as a shared reference between design, engineering, and product teams.
- Distinguishes three related but different things: a pattern language lets its patterns take many visual shapes (a login form is the same pattern whether its buttons are green or purple) because what matters is the relationship between patterns, not their exact appearance; a design language fixes specific visual guidelines (colors, typography) every pattern must follow; a UI kit is a bare set of components with no usage rules attached at all.
- A design token is a named variable storing one design decision (a color, a type setting, a spacing value) as a single source of truth across an entire system — see Design Tokens for the fuller treatment.
- Traces the practice’s lineage: Christopher Alexander’s 1960s–70s architectural pattern-language work, a 1980s–90s software-design-pattern movement (during which the first wiki was invented specifically to support collaborative pattern-editing), Yahoo’s 2006 Design Pattern Library, Google’s 2014 Material Design as the first to call itself a “design language,” and Brad Frost’s 2016 Atomic Design, credited with popularizing the term “design system” itself.
- Lists documented advantages: a streamlined design-to-production workflow, a unified cross-team language, faster builds through reusable components, more cohesive products, reduced design/technical debt, and freeing product teams to focus on user needs rather than re-solving common problems.
- Cautions that a design system not actively implemented and maintained tends toward disorganization, making the design process it was meant to speed up slower instead.
- Names real-world examples: Salesforce’s Lightning Design System, Google’s Material Design, IBM’s Carbon Design System, and Microsoft’s Fluent Design System.