A design system is a collection of reusable components, standardized for a particular product, website, or web system. Different from a style guide, a design system unifies the language of a product.

What is a Design System?

A design system is a set of standards to manage design at scale by reducing redundancy while creating a shared language and visual consistency across different pages and channels.

Design systems, when implemented well, can provide a lot of benefits to a design team:

  • Design (and development) work can be created and replicated quickly and at scale.
  • It alleviates strain on design resources to focus on larger, more complex problems.
  • It creates a unified language within and between cross-function teams.
  • It creates visual consistency across products, channels, and (potentially solid) departments.
  • It can serve as an educational tool and reference for junior-level designers and content contributors.

There are some potential hurdles and limitations which may prevent a design team from using a design system:

  1. creating and maintaining a system is a time-intensive activity that requires a dedicated team
  2. it takes time to teach others how to use the design system
  3. there may be a perception that projects are static, one-off creations, which generally don’t require reusable components.

There are two important parts to a design system:

  • The design repository: they contain a style guide, a component library, and a pattern library.
  • The people who manage it: for a design system to be effective it needs a team to oversight and ensure that they don’t become outdated, obsolete, or overcrowded with redundant entries or submissions.

The difference between a design system and a style guide or pattern library is in the standards and documentation that accompany the assets. With a guide on how and why to use them, design components become easier to use and clear to discern.

Building a library of design patterns, rules, and UX guidelines prevents inconsistencies when shipping products at scale.

Examples of design systems

  1. Shopify’s design system
  2. Atlassian’s design system
  3. Salesforce’s design system

References

*Design Systems 101A comprehensive guide to design systems*