What's a Design System & What Components Is it Made Up of? [Examples]

In the rapidly evolving digital landscape, a cohesive approach to designing products has become imperative. Enter the "design system." More than just a buzzword, a design system is integral to streamlining processes and creating a consistent user experience.

If you're still unsure about what constitutes a design system or why you need one, you're not alone. Many get it mixed up with component libraries or brand style guides.

In this post, we’ll go over what a design system is and what it’s made up of so you can create your own and accelerate product development at your company.

A design system is more than a style guide or pattern library, although these are part of the system. It is also made up of documentation and guidelines that explains how and why the company designs in this way.

Atlassian’s design system, for example, is made up of a component library, pattern library, brand guidelines, logo library, illustration library, presentation kit, visual elements including colors, iconography, and typography, and content guidelines covering language and grammar, vocabulary, and writing style.

Image Source

Each part of this design system contains guidelines for how to use a specific component and why. Atlassian doesn’t simply provide the color palette, for example. Instead, it details how they use color to distinguish their brand and create accessible, consistent experiences across products. Here’s an explanation for its primary color palette specifically:

Image Source

Components and documentation explaining how a company uses them — and why — makes up a design system. Without these guidelines, it’s just a library of components and code snippets. With these guidelines, it’s a design system that can be adopted by teams across product design, engineering, customer experience, and other parts of your organization.

Now that we have a better understanding of what a design system is, let’s take a closer look at what it’s made up of.

For a quick overview of what a design system is made up of and what benefits it provides a company, check out this video first:

The components we’ll discuss below are some of the most common in design systems, but not required. The exact ingredients included in your organization’s design system will depend on your unique needs, teams, and products.

1. Component Library

A component library — also known as a UI kit — contains reusable user interface (UI) components. Each component in a design system meets a specific interaction or UI need, and has been created to work together to provide intuitive user experiences. An avatar, badge, dropdown menu, icon, logo, page layout, spinner, and tag are all examples of components.

Below is a look at the component library of Base Web, Uber’s design system: 

Image Source

2. Pattern Library

Components can be used in particular combinations to provide intuitive and consistent user experiences. These combinations are called patterns. For example, a vertical dropdown menu is a web design pattern that solves the challenge that many larger websites face of fitting links to multiple site sections on a single page, without cluttering it.

These patterns are usually contained in a separate library from components. As an example, check out the pattern library of Segment’s design system, Evergreen, below:

Image Source

3. Brand Style Guide

A brand style guide governs the general look-and-feel of a company's branding. It dictates what colors, fonts, font sizes, logo variations, and types of images to use.

Microsoft’s brand style guide, for example, how to use the Microsoft brand assets — and how not to — to manage and protect the value of the brand and the trust it represents. Here’s a section detailing appropriate usage of Microsoft’s wordmarks and names of software, products, or services:

Image Source

4. Brand Values

An essential part of a brand's identity, brand values are overarching ideals for aligning teams and their designs across a company. They are meant to guide every design and content decision and help teams stick to the brand objectives. Brand values not only define how teams should create products and content but also define how users should feel when interacting with the brand.

Help Scout’s brand values are helpful, trustworthy, human and organic, energetic, and curious. Since these values are intended to inform everything Help Scout designs, writes, codes, and otherwise creates, readers are encouraged to explore them first before browsing other parts of the design system.

Image Source

5. Design Principles

Most design systems will include a set of design principles. These are intended to help teams across an organization align on common goals, use the design system, and make meaningful design decisions, no matter how they build. While brand values are focused on the overall brand, design principles are more focused on products and what they should look like.

For example, the U.S. Web Design System (USWDS) has five design principles. One is “Earn trust,” and includes key considerations and practical actions teams can take to understand and meet or exceed expectations in order to gain users’ trust. Some of the recommended actions are to clearly identify the site as a federal government site, use the proper government domain, and fix broken links.

Image Source

6. Icon Library

An icon library contains the visual symbols of a design system. These symbols are used to represent ideas, objects, or actions and to guide the user to take a particular action or draw their attention to important information on the page.

IBM’s design system Carbon contains an icon library as well as usage guidelines. These detail what sizes, colors, and alignment to use when designing with icons.

Image Source

7. Content Guidelines

Design systems are intended to ensure all products not only look and act consistently — but speak consistently.

That’s what Adobe’s design system Spectrum intends at least. Its content guidelines cover voice and tone, grammar and mechanics, and language and inclusivity, which is common in most design systems. Spectrum also details what words to use in Adobe’s in-product experiences and when, how to write error messages, and how to write and design user onboarding experiences.

Image Source

8. Accessibility Guidelines

Many design systems today include accessibility guidelines that underscore why accessible design is important and define what an accessible product means or does.

For example, IBMs’s Carbon design system states that an accessible product should “give all users the same quality of experience and adapt to users and situations.” It also goes through different groups of users with disabilities and what designers should think about when designing accessible products for these and all groups of users.

Image Source

9. Design Tokens

Design tokens are names used to represent hard-coded values for spacing, color, typography, and other parts of a design system. For example, a design token might be a color, typeface, opacity level, border radius, icon, or animation ease. These tokens can be transformed and formatted to meet the needs of any platform, from Android to iOS to Web. By taking the place of absolute values like hex codes, RGB values, and Bezier coordinates, design tokens ensure consistency and flexibility across a company’s brand assets and products.

In some design systems like Spectrum, design tokens are directly integrated into the component library. In other systems, design tokens are contained in a separate library.

Here’s a look at some of the design tokens in ENGIE’s Fluid design system:

Image Source

Creating a Design System for Your Company

Design systems are composed of many libraries, style guides, and guidelines, which are all designed to optimize your design efforts. While a challenge to maintain and drive adoption across a company, design systems can help you create products that provide better user experiences. Consider creating one for your own company.

Editor's note: This post was originally published in April 2022 and has been updated for comprehensiveness.