---
description: >-
  A design system is a comprehensive recipe of the user-facing elements that
  will make up a product.
---

# What are Design Systems?

## What are Design Systems?

A **design system** is a comprehensive recipe of the user-facing elements that will make up a product.

You can think of a design system as a **single source of truth** for all the design-related things that go into designing and building a product.

At the core, a design system will contain **definitions of components** (technical documentation) and information on **how those components will be used** (functional documentation).

A design system can include a one or more design languages, style guides, and pattern libraries.

It can also include things like:

* brand/identity standards
* values
* objectives
* best practices for accessibility

Why use design systems? Glad you asked! Read on to find out 🙂

## Why Use Design Systems?

Design systems are used to make sure there's one set of standard elements used everywhere, and everyone knows how to use them.

### Benefits of Design Systems

Here are some big benefits of using a design system for your product.

#### Quality

The team alignment around design practices and the consistent use of elements and interactions across your product often leads to **better products**. That's because design systems themselves incorporate the unity principle of design, and allow us to define approaches to consistently leveraging the other principles of design throughout our product.

#### Speed

Once you've assembled the framework of a design system, it's often **faster to build your product**. That's because the team has:

* a library of modular, reusable components to draw from and deploy.
* a shared understanding of design decisions, so it's easy to understand how to implement components in context.

#### Scalability

A clear, consistent, and well-documented design system means there's less technical debt in your product's codebase. This often makes products **easier to maintain and scale**.

#### Iteration

Not having to focus as much time on building, quality assurance, and maintenance means your team can **focus on building new features** for your product. In many contexts, rapid iteration is a critical contributor to market success.

### Industry Example: Shopify

Check out [Shopify's design system (Links to an external site.)](https://polaris.shopify.com) for an example from the industry.

## Design Languages

### What's a Design Language?

A **design language** is a **definition of a style** to drive design for a product or brand. It sets a standard for how to adhere to the style in things like the use of fonts, colors, and patterns.

Establishing a design language aligns a team on **how to use components and style those components** to achieve product goals in a consistent way, and it usually motivates **why design decisions were made**.

Design languages often include style guides and documentation.

### Industry Example: IBM

Check out [IBM's design language (Links to an external site.)](https://www.ibm.com/design/language/) for an example from the industry. It contains everything from the use of typography and color, to data visualization and layout, to the [philosophy (Links to an external site.)](https://www.ibm.com/design/language/philosophy/pov) behind [the decisions they made (Links to an external site.)](https://www.ibm.com/design/language/philosophy/principles).

* [\
  Modules](https://lambdaschool.instructure.com/courses/1562/modules)
* [Grades](https://lambdaschool.instructure.com/courses/1562/grades)

## Pattern Libraries

### What's a Pattern Library?

A **pattern library** or (**component library**) is a collection of components and design patterns that lay out how to implement the design language **specifically for a user interface**. These can be symbols and assets themselves, along with descriptions of when and how to use them.

A pattern library might include code snippets for components and documentation related to each. For example, an entry for a button component in React might describe what props are available to be passed in, such as color and values for button states.

### Industry Example: Ant Design

Check out [Ant Design's pattern library (Links to an external site.)](https://ant.design/docs/spec/overview) for an example from the industry. Notice how the pattern library fits in with the rest of their design documentation. Getting very familiar with the Ant Design docs will pay off in Labs!

![](https://197560121-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MkP23pBP3MWkIzJcreW%2Fuploads%2Fgit-blob-350298cb8c77c96e6b620d0615d028ca087eed89%2Fscreencapture-lambdaschool-instructure-courses-1562-quizzes-42315-2021-10-20-03_50_51.png?alt=media)
