The way companies are developing products is changing. That’s because more people are using more products and accessing them in more ways than ever before. To create and innovate at a faster pace, companies are using design systems.

You may have heard of this term before, and even browsed some examples of design systems. But it can be used incorrectly to refer to a single resource like a brand style guide or components library, when in reality it’s a lot more comprehensive.

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.

Free Download: 77 Examples of Brilliant Web Design 

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.

Atlassian Design system homepage features links to components and patterns

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:

Atlassian Design System's explanation of primary color palette

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:

It’s important to note that every design system is unique. For example, in a survey of designers by Material, most respondents reported that their design system had an icon library, UI kit, style guide, design guidelines or principles, component code library, and documentation site. A smaller percentage reported that their design system had accessibility guidelines, design tokens, and content guidelines. Here’s the breakdown:

graph showing that an icon library, UI kit, and style guide are most commonly mentioned design system components in a survey by Material

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 that launched in 2019:

design system component 1: Component library of Uber's Base Web 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:

design system component 2: Pattern library of Segment's design system Evergreen

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:

design system component 3: Brand style guide for Microsoft's Fluent design system

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.

design system component 4: Brand Values of Help Scout's 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.

design system component 5: Design principles of US web design system

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.

design system component 6: Icon Library of IBM's Carbon design system

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.

design system component 7: Content guidelines for writing and designing onboarding experiences in Adobe's design system Spectrum

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.

design system component 8: Accessibility guideliens of IBM's Carbon design system details different user groups with disabilities and how designers should think about creating products for them

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:

design system component 9: Design Tokens of 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.

examples of brilliant homepage, blog, and landing page design

 New Call-to-action

Originally published Apr 27, 2022 7:00:00 AM, updated April 27 2022

Topics:

Website Design