2. Design System Basics

2.1 What is a design system?

Design System Basics · Section 2.1

A design system is a set of standards, reusable assets, components, rules, and processes used to create consistent product experiences at scale.

A strong design system provides a shared answer to questions such as:

  • Which color should represent danger?
  • What spacing should exist between a label and an input?
  • How should a modal trap keyboard focus?
  • What is the standard empty state?
  • Which button is primary?
  • What is the correct radius for cards?
  • How do we support dark mode?
  • How do designers and engineers refer to the same component?
  • When should a component be deprecated?
  • How are breaking changes released?

The key idea is shared decisions.

Without a system, every product team repeatedly makes the same decisions.

With a system, many of those decisions are made once and reused.