Skip to content
APDD
My library
ESEN
See my library

Artifact

Design system

A set of reusable components, rules, and criteria that a team shares to design and build consistent interfaces.

In Spanish
Sistema de diseño
Origin
Widespread practice that grew out of style guides and pattern libraries; atomic design, Frost (2016)

What it’s for

It keeps each screen from reinventing buttons and styles, and the product from ending up inconsistent and expensive to maintain.

Key elements

  • Components

    The reusable pieces, from the smallest to the largest, for example with atomic design.

  • Tokens

    Colors, typography and spacing stored as data.

  • Rules and documentation

    When and how each piece is used.

  • Owners

    Who maintains it and decides on changes.

How it’s done

  1. Take inventory of what already exists in the product.

  2. Define the pieces and their rules, from smallest to largest.

  3. Keep it alive: document it, use it, and update it.

Applications in design

  • When to use it

    When several teams or products repeat the same pieces and start to look different.

  • Avoid

    Creating a system no one uses because it does not meet the team’s needs.

  • Don’t fall for it

    Start with the pieces that repeat most, and remember that a design system is a product: it needs owners and maintenance.

Connections

Builds on

Related to

Authors and works

  1. 2016

    Brad Frost

    Proposed building interfaces as a system of pieces, from atoms to pages.

  2. 2017

    Alla Kholmatova

    Described a design system as patterns (the repeatable pieces of the interface) and practices (how the team creates, shares and uses them); a component library is only one part.

  3. 2025

    Design Tokens Community Group

    Published the first stable version of a common format for design tokens: colors, typography and spacing stored as data shared by design and code. It is a W3C community group, not an official standard.

Sources

Original sources

Last reviewed: