Design system

What it includes

• Design tokens: the basic decisions stored as variables (colors, sizes, radii, shadows, typefaces) so design and code use exactly the same values.
• Components: reusable interface pieces such as buttons, inputs, cards, menus or tables, with their states (default, hover, error, disabled).
• Patterns: common combinations of components, such as a sign-up form or a filterable table.
• Usage guidelines: when to use each component, accessibility and the tone of interface copy.
• Documentation, public or internal, that everyone refers to.

How it differs from related terms

• Brand guidelines: define logo, colors and tone of voice; a design system applies them to the interface and carries them into code.
• UI kit: a component library in Figma or a similar tool, with no rules or code attached.
• Component library: the code for the components; it's one part of a design system, not all of it.

Public examples

• Material Design (Google, 2014).
• Carbon (IBM).
• Polaris (Shopify).
• Lightning Design System (Salesforce), which popularized the concept of design tokens.

When it's worth it

A small B2B tech company doesn't need a full design system from day one. It usually pays off when several people design or build at the same time, when the product and the website start to drift apart visually, or when every new screen is designed from scratch. The usual approach is to start with tokens and a dozen basic components, then grow.

Common mistakes

• Building it before there is a product: you end up designing components nobody uses.
• Keeping design and code separate, so they fall out of sync.
• Not assigning anyone to maintain it: it goes stale within months.

Related terms

• Design as a Service
• Landing page

Sources

• Material Design, Carbon Design System and Shopify Polaris.
• Brad Frost, Atomic Design (2016).