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.
A design system is a repository of repeatable components and standards for how to use those components to design and develop products. Using pre-built, global assets enables teams to build products that provide better user experiences in less time.
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.
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:
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:
Design System Components
Brand Style Guide
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:
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:
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:
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:
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.
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.
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 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.
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 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 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.
Originally published Apr 27, 2022 7:00:00 AM, updated April 27 2022