A design system consist of different parts:
- The design kit (Also known as UI Kit, is a set of patterns and components existing in design tools like Figma or Sketch.)
- The component library
- The pattern library
- UX rules and governance
- Documentation aka reference site, a website that aggregates all items (UI kit, component library, pattern library, UX rules) of the design system
The purpose of the design system is to solve inconsistencies in most importantly the behavior (UX) but also in look and feel of the interface (UI). Because of the reusability and governance a design system increases productivity, can reduce cost and increase efficiency.
Design systems are essential for building better, faster, and more cohesive digital products and experiences at scale, with respect to accessibility and brand identity.
Other design system related terms that might need clarification.
Documents a company or brand's visual identity and how it is used e.g. Spotify. It defines rules about typography, colors, logo's, iconography, paddings, margins etc. Style guides were already used in the 70's in print before they were used for the web platform. One of the first style guides used for print was NASA's graphics standards manual from 1976.
A library of UI patterns or reusable design solutions to solve reoccurring design problems. A Navbar solves the problem of navigating to different sections on the website. As a designer you can just reapply the navbar pattern without having to rethink this again and again. A pattern is always linked to a component.
A component library is the set of reusable components which turn the design language and UI Kit into living, breathing code.
A design token is an abstraction of a visual property such as color, font, spacing, animation, etc. Design tokens are shared across Design/UI Kits and component libraries for a cohesive experience. Design tokens originated at Salesforce where Jina Anne coined the term. In the most basic form these are just css variables in the component library. Other ways to structure design tokens Open props or System UI. A W3C community group is currently working on a specification for design tokens
Design assets are part of the design language and can be more static reusable elements like logo's, icons, illustrations, photography and videos.
Design is a form of communication. Graphical user interfaces use dozens of individual elements to speak to their users. Colors, typography, shapes, patterns, all of these front-end styling options have a direct impact on how users will comprehend the product and their emotions. A design language embodies the design principles. Every component and pattern that is created should be evaluated against the design principles.
Design principles are the grounding values and principles which drive the creation of your products. Design principles must support the global vision of your product and express its identity. What do you want your users to feel when using your product? Sample principles from Firefox photon design language: adaptable, quick, aware, approachable, supportive and whimsical.
There is no industry wide definition for this and people use the terms design system and design language system interchangeably. But you can't call just a component library a language or a system. A design language system sets expectations therefor when calling it a DLS, expectations are: pattern library, component library + rules + semantics + UX guidelines
- styleguides.io
- design sytem questionaire
- design.systems
- atomic design
- Emma Bostian's beginner guide
- design systems repo
- backlight
- spotify design
- component pattern gallery
- Group UI (Volkswagen)
- Material You (Google)
- Fast Fluent UI (Microsoft)
- Fast Frame (Microsoft)
- Spectrum (Adobe)
- Carbon (IBM)
- Vaadin design system (Vaadin)
- Clarity (VMware)
- Formilk (Open source)
- Nord (Nordhealth)
- Backlight sample design systems (Backlight)
- Astro (United States Space Force and Missile System Center)
- Atlassian design system (Atlassian)
- Primer (Github)
- Vitamin (Decathlon)
- Paste (Twillio)
- HPE design system (Hewlett Packard)
- Fluid (Engie)
- Photon (Firefox)
- Baseweb (Uber)
- Polaris (Polaris)
- Hawkins (Netflix)
- GEL (BBC)
- Auro (Alaskan Airlines)
- Shoelace (Open source)
- Zooplus web components (Zooplus)
- Lion white label web components (ING bank)
- Patternfly elements (Redhat)
- Lightning web components (Salesforce)
- Ionic (Ionic)
- Elix (Elix)
- Clever components (Clever Cloud)
| Component library | Lit | Stencil | Vanillajs | Fast | Atomico | Haunted | Hybrids |
|---|---|---|---|---|---|---|---|
| Shoelace | ✅ | ||||||
| Zooplus web components | ✅ | ||||||
| Lion white label | ✅ | ||||||
| Patternfly elements | ✅ | ||||||
| Lightning web components | ✅ | ||||||
| Group UI | ✅ | ||||||
| Formilk | ✅ | ||||||
| Fast Fluent UI | ✅ | ||||||
| Fast Frame | ✅ | ||||||
| Spectrum | ✅ | ||||||
| Carbon | ✅ | ||||||
| Vaadin | ✅ | ||||||
| Clarity | ✅ | ||||||
| Ionic | ✅ | ||||||
| Material web | ✅ | ||||||
| Elix | ✅ | ||||||
| Clever components | ✅ | ||||||
| Auro | ✅ | ||||||
| Nord | ✅ | ||||||
| Astro | ✅ |