# Design System

> A Design System is a collection of reusable UI components, guided by clear standards (principles, style guides), that enables teams to design and build digital products in a coherent and efficient manner.

*Tags: ux, concept, ui-design, mid-level, lead*

---


> [!info] Quick Definition
> A Design System is a collection of reusable UI components, guided by clear standards (principles, style guides), that enables teams to design and build digital products in a coherent and efficient manner.


## What is a Design System?

Imagine you're building with LEGO. You don't have to create each brick from scratch every time you build something new. You have a set of standard bricks (2x2, 2x4, etc.) that you can combine to create anything. Plus, you have an instruction manual that tells you how the pieces fit together.

A Design System is that, but for digital products. It's much more than a simple style guide or a component library. It's a **single source of truth** that includes:

- **Foundations:**
    - **[Design Principles](/en/concepts/design-principles/):** The philosophical rules that guide design (e.g., "Simple, Clear, Efficient").
    - **Style Guides:** Rules on how to use visual elements (colors, typography, spacing, iconography).
- **Components:**
    - The collection of reusable UI elements (buttons, forms, cards, menus). Each component is designed, built, and tested.
- **Patterns:**
    - Design solutions for recurring problems that combine multiple components (e.g., a pattern for a login form, a pattern for a data table).
- **Governance and Documentation:**
    - Who owns the system, how changes can be proposed, how it's updated, and how it's used. Documentation is key for adoption.

## Why is it important?

- **Consistency:** Ensures the user experience is coherent across all parts of a product or among multiple products from the same company.
- **Efficiency:** Frees designers and developers from constantly reinventing the wheel. Instead of designing a new button every time, they can take the one that already exists in the system. This dramatically accelerates the development process.
- **Quality:** The system's components are tested (usability, accessibility, performance), which raises the overall product quality.
- **Common Language:** Creates a shared vocabulary between design and development. A "Card" is a "Card" for everyone, with the same specifications.

## How is it created and maintained?

Creating a design system is a product in itself, not a side project.

1.  **Visual Audit:** Review your entire application and inventory all the UI elements you're using. You'll be surprised by the number of variations of the same button you can find.
2.  **Define the Foundations:** Establish your design principles and style guide (colors, typefaces, etc.).
3.  **Build the Basic Components:** Start with the smallest elements (often following Atomic Design methodology: atoms, molecules, organisms). Design and build the most fundamental components like buttons, inputs, etc.
4.  **Document EVERYTHING:** Each component must have clear documentation about when to use it, when not to use it, its variants, and its accessibility specifications.
5.  **Establish a Governance Process:** How is a new component added? How is an existing one updated? Define a clear workflow so the system evolves in an orderly fashion.
6.  **Encourage Adoption:** A design system is only useful if people use it. Make it easy to find, easy to use, and demonstrate its value to the rest of the organization.

## Mentor Tips

- **Start small:** Don't try to build the entire system at once. Start with the most commonly used components and grow from there.
- **Treat it as a product:** A design system needs an owner (Product Owner), a backlog, a roadmap, and users (the designers and developers at your company).
- **Collaboration is mandatory:** A design system cannot be created solely by designers or solely by developers. It requires deep and constant collaboration between both disciplines.
- **Documentation is not optional, it's the key:** A design system without good documentation is just a component library that nobody will know how to use correctly.

## Resources and Tools

- **Documentation Tools:**
    - **[Storybook](https://storybook.js.org/):** The industry standard for building and documenting UI components in code.
    - **[Zeroheight](https://zeroheight.com/):** A tool that syncs with Figma and Storybook to create design system documentation sites easily.
- **Examples of Public Design Systems:**
    - **[Material Design](https://material.io/)** by Google: One of the most famous and complete.
    - **[Carbon Design System](https://carbondesignsystem.com/)** by IBM.
    - **[Polaris](https://polaris.shopify.com/)** by Shopify.
    - **[Atlassian Design System](https://atlassian.design/):** A great example of excellent documentation.
- **Books:**
    - **[Atomic Design](https://atomicdesign.bradfrost.com/table-of-contents/)** by Brad Frost: The book that popularized the modular approach to building design systems.


---

Source: https://www.fernandoux.com/en/wiki/concepts/design-system/