A comprehensive guide to design systems

Companies like Airbnb, Uber, and IBM have changed the ways they design digital products by incorporating their own unique design systems. By utilizing a collection of repeatable components and a set of standards guiding the use of those components, each of these companies has been able to change the pace of creation and innovation within their teams.

Many organizations have what they consider to be a design system, but these collections typically amount to no more than a group of elements and code snippets. While a style guide or pattern library can be a starting point for a design system, they are not the only components. Let’s dig into the fundamentals of design systems, plan how you can build and implement one in your organization, and explore several examples of organizations that are using design systems to drive success.

“Design systems provide a convenient, centralized, and evolving map of a brand’s known product territories with directional pointers to help you explore new regions.” —Chris Messina, tech evangelist and former developer experience lead at Uber

The importance of design systems

What is a design system?

A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

What’s the difference between a design system and a style guide or pattern library?

A design system isn’t only a collection of the assets and components you use to build a digital product. According to Emmet Connolly, director of product design at Intercom, “… most Design Systems are really just Pattern Libraries: a big box of UI Lego pieces that can be assembled in near-infinite ways. All the pieces may be consistent, but that doesn’t mean the assembled results will be. Your product is more than just a pile of reusable UI elements. It has structure and meaning. It’s not a generic web page, it’s the embodiment of a system of concepts.”

Marco Suarez, one of our product designers here at InVision, adds that “understanding not only the what, but the why, behind the design of a system is critical to creating an exceptional user experience. Defining and adhering to standards is how we create that understanding.”

More simply put, the difference is in the standards and documentation that accompanies the assets. With a guide on why and how to use them, design components because easier to use and clearer to discern.

“Design systems are always evolving, and the way you share and encourage adoption of new iterations will evolve along the way as well.” –Diana Mounter, design systems manager at GitHub

More resources: Design systems overview

Design Systems, when and how much?
from Diana Mounter, Design Systems Manager at Github

Examples from building design systems at GitHub, how this can improve the design and development workflow, and when you need to start building design systems and how much of a system you might need.

Designing at scale: How industry leaders leverage design systems
from the InVision Blog

In order to quickly iterate with confidence, design teams need access to a single source of truth that allows for a scalable UI language and streamlined UX guidelines. With brand touchpoints reaching over multiple channels and platforms, consistent user experience can be assisted by leveraging a central design language.

Building a library of design patterns, rules, and UX guidelines prevent inconsistencies when shipping products at scale.

Designing Systems
from Brad Frost’s Atomic Design

As the number of devices, browsers, and environments continues to increase at a staggering rate, the need to create thoughtful, deliberate interface design systems is becoming more apparent than ever.

Enter atomic design.

The full stack design system
from Intercom Blog

UI methodologies like Atomic Design bring logic and structure to individual screens. Now it’s time to extend that thinking to every aspect of your product.

On Design Systems: Sell The Output, Not The Workflow
from Smashing Magazine

I’ve yet to encounter a client that would be genuinely, passionately excited about the atomic design methodology or a module naming workshop. However, everyone does get passionately excited about time-saving features and better, faster output that they can engage with … Next time you encounter somebody not seeing the benefits of a modular approach, try to convince them of the tangible benefits and the output, not the workflow you’re using.

On the Current State of Design Systems in UX
from Innovatemap

I’ve been involved in no fewer than three different initiatives to create a design system in my career. 10 years ago, we simply called them pattern libraries. A few years ago, Atomic Design entered the scene and provided a more comprehensive grammar around design systems. Once Google unveiled Material Design in 2014, the concept of design systems had finally matured.

Now, the design system concept seems to spawn an article every day. The theme of these articles typically espouse values of systems as providing consistency, efficiency, and scale. But at what costs? Are design systems a panacea for all that ails UX design?

Design Systems’ Role in the Evolution of Enterprise User Experience
from Projekt202

Projekt202 Senior UX Designer Anne Grundhoefer and Solutions Architect Drew Loomer provide an in-depth, informative look at the many ways that design systems have significantly impacted the enterprise user experience.

Your technical approach doesn’t matter as much as creating a living, breathing system that’s flexible, maintainable, stable, scalable, and successful in the long-term. —Katie Sylor-Miller, senior software engineer, design systems team at Etsy

Building a Design System

What are the key steps and benefits to building a design system?

1. Conduct a visual audit
   The first step in building a design system is to do a visual audit of your current design, whether that’s the design of an app, a website, or some other digital product. Taking inventory of the CSS you’re using and the visual qualities of the elements can help you gauge how much of an undertaking this process might be.
2. Create a visual design language
   The visual design language is the core of a design system. It’s made up of the discernible components that you’ll use to construct your digital product. Your visual design language is made up of four main categories, and you should consider the role each of these design elements plays in every component on the screen.
   • Color
     Common colors in a design system include 1–3 primaries that represent your brand. You may want to include a range of tints—a color mixed with white—and shades—a color mixed with black—to give your designers a few more options.
   • Typography
     Most design systems include just 2 fonts: 1 font for both headings and body copy, and a monospace font for code. Keep it simple to avoid overloading and confusing your user. Keep the number of fonts low; it’s not only a best practice of typographic design, and it also prevents performance issues caused by excessive use of web fonts.
   • Sizing and spacing
     The system you use for spacing and sizing looks best when you have rhythm and balance. A 4-based scale is growing in popularity as the recommended scale due to its use in iOS and Android standards, ICO size formats, and even the standard browser font size.
   • Imagery
     The key to success with imagery in your visual design language is having a plan and sticking to it. Set guidelines for illustrations and icons, and use the best image format for the situation.
3. Create a UI/pattern library
   Unlike the visual audit you’ve already conducted (which looked at the visual qualities of your design elements), this step in the process looks at the actual components of your UI. Collect all of the parts and pieces of your UI currently in production. That means every button, form, modal, and image. Merge and remove what you don’t need.
4. Document what each component is and when to use it
   This step is important. Documentation and standards are what separate a pattern library from a true design system.

Before beginning work on your design system, take a moment to think about the team you’ll need to bring it to life. Who needs to be involved? Spoiler alert! You’re going to need more than just designers.
Jina Anne, design systems advocate and former lead designer at Salesforce

For a great guide on getting started is our Design Systems Handbook, which will help you learn how you can create your design system and help your team improve product quality while reducing design debt. In tandem, we also have our Design Systems Manager.

Here’s a preview of what you can do with InVision DSM:

• Create a single source of truth One place to manage brand and UX components,  coded elements, detailed documentation, and more so teams can stay in sync
• Design with ease Integration with Sketch Libraries lets you upload files to DSM in a single click, sync changes, and push and pull design system assets.
• Iterate with confidence Changes sync to the whole team, and users can switch to the latest version or roll back changes at any time
• Manage updates collaboratively Roles and permissions provide complete control over who can view or edit the design system
• Share with external teams An automatically generated and customizable documentation site lets any stakeholder preview and use design and code
• Keep code in sync Spot existing components and styles with InVision Inspect. And get your production-ready code with a built-in Storybook integration.
• Protect your company’s most strategic assets Confidently create new versions knowing visual assets are safe and secure, with role-specific controls and design system-level permissions.

More Resources: Building a Design System

Paul Farino of Pivotal Labs “Design systems: Zero to one”
Paul Farino will discuss the lifecycle and iterative nature of building a design system. He’ll cover creating buy-in with internal stakeholders and tactical ways to scale and maintain a design system.

Promoting a Design System Across Your Products
From A List Apart

Approach a design system as you would a marathon, not a sprint. You’re laying the groundwork for an extensive effort. By understanding your organization through its product portfolio, you’ll strengthen a cornerstone—the design system—that will help you achieve a stronger and more cohesive experience.

Each screen isn’t a special snowflake: Brad Frost on design systems
from the InVision Blog

Maintaining the system over time is extremely challenging. What happens when the horizontal tabs component gets a bug fix? What happens when that card pattern gets a visual design overhaul? What happens if the data table pattern gets a team 90% there, but needs tweaks in order to fully meet their needs? Establishing these processes before the system is complete is critical to its ongoing success.

Selling a Design System at Your Company
from UXDesign.cc

Selling is a process, probably more than a single meeting. Look for teaching moments. Use your storytelling skills. Show your team that a better way is possible. Come up with a memorable name and say it a lot. Get people excited with a splashy presentation. Channel your inner Don Draper or 2007 Steve Jobs.

Designing a Design System | Jina Anne, Design Systems team at Salesforce UX
From ‘You Gotta Love Frontend’ Conference 2016

Topics covered in this talk include strategies for how to approach, design and build an effective design system, how to successfully maintain the system to ensure ongoing usefulness, and elements that design systems need to be sustainable that are critical for success.

Examples of design systems (Who’s doing design systems right)

Atlassian’s design system

Atlassian’s design system is about using personality to connect tools with people—or as they describe it, “practical with a wink.” It’s personal, peppy, and all about making a bold brand statement. “Dragon’s blood,” “cheezy blasters,” “hairy fairy,” “herky jerky,” and “sodium explosion” are all names of colors referenced in their secondary brand palette.

Accessibility is important to Atlassian and their design adheres to standard contrast ratios that ensure users with low vision can see and use their products. In essence, the Atlassian brand is optimistic and focused on being “human” over “humorous”.

Salesforce’s Lightning design system

Learn how the Salesforce UX team took it further with a living design system to help maintain brand alignment and quality.

Shopify’s design system

Shopify’s design system is called Polaris. It’s a system that reflects Shopify’s global, immense presence. It’s about scalability and ease of use. With precision in their copy and design, Shopify is solely focused on the experience of their merchants.

It’s easy to see how Shopify helps businesses manage global complexity, with an experience that gives “even the most inexperienced entrepreneur the best chance to succeed.”

Accessibility and intentional design are paramount in Polaris. Scaling a business is like climbing a mountain, so their design decisions seek to make any user feel like they’re up the challenge.

For more examples, check out our previous post on design systems from some of the world’s leading brands.

There are also some repositories of design systems, style guides, and pattern libraries at StyleGuides.io and collected in Alex Pate’s repository on GitHub.

More resources: Design system examples

Creating a design language that’s uniquely IBM
from the InVision Blog

The overall structure of IBM’s corporate design program is “People + Practice + Places.” The motto represents the idea that “careful attention to those 3 things will bring the culture change we seek with respect to design in the company.”

Practice, the middle pillar, is a crucial part of the equation and the charge of the IBM Design Practices team. The team knew they wanted to build out 3 distinct Practices at first: Research, Language, and Thinking.

They started with the IBM Design Language.

Building a Visual Language
from Airbnb Design

While this was a monumental task that ended up requiring efforts from many of our product teams, we found that creating our Design Language System was worth the investment and a huge leap forward.

“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.” —Alex Schleifer, VP of Design at Airbnb

An in-depth chat on design systems with Jina Anne, Brad Frost, Marco Suarez + Aarron Walter
from InVision

Unlike cobbling together design components like pattern libraries and style guides, a design system functions as “the official story of how an organization designs and builds products.” It includes ingredients, as design system expert and Atomic Design author Brad Frost says, like design principles, UI components, UX guidelines, code standards, processes, design toolkits, code repositories, resources, and more.

Design systems have the power to transform a typical organization into a powerful product design force. So we recently hosted a cozy fireside chat with design systems experts Brad Frost, Jina Anne, Marco Suarez, and Aarron Walter to unpack key insights—and answers to all your burning questions.