A design system is the sum of all codified design decisions for the appearance and functionality of a user interface or a set of related user interfaces. For teams and organizations which explicitly architect their design systems, the goal is generally to provide a single, centralized source of truth for the design language, and to make its adoption as easy as possible so that teams can build consistent interfaces without duplicating work or creating spurious one-off designs.
In practice, design systems consist of any or all of the following:
- Tokens, which enumerate the allowed values for design properties such as the color palette, font sizes, spacing, and more
- Imagery and iconography
- Typography
- Documentation outlining the system’s features and guidelines
- UI kits, specs, and mockups in design tools such as Figma
- Code artifacts such as component libraries or CSS frameworks, which make it easy to consume the system in a dev project and to automatically propagate changes
- Processes and procedures for updating any of the above
A communication tip
If you ask five people what a design system is, you’ll get seven different answers. That said, people will often use the term “design system” to refer to just the parts they interact with — so a developer might refer to a component library as “the design system,” where a designer might use “the design system” to refer to the UI kit from their design tool of choice.
External Resources
- Design systems for humans, by Amy Hupe
- What is a design system?, by Dan Mall