13 Design System Examples

In this article are thirteen design system examples you can use to inspire you, and to help you learn more about the methodology behind creating one.

What is a design system?

A design system is a single source of truth — an organized resource where reusable UI components, code snippets and clear guidelines come together. Some companies create their digital systems as websites, while others use platforms such as Invision or Figma.

So why are design systems important?

Back in the day, websites were these easy breezy user interfaces anyone could build. All you had to know was a bit of HTML code and voila — website up and running!

Now, websites are complex digital experiences. If your website takes even 1 second too long to load (yes — 1 second!), research shows you can expect to incur these costs:

  • 16% decrease in customer satisfaction
  • 11% fewer page views
  • 7% loss in conversions

Amazon says it would lose $1.6 billion in sales in a year if its website took even one second too long to load!

With the increasing complexity of websites, companies are having to instill formal ways of keeping everything organized so that their teams can more efficiently and consistently build high-quality user interfaces.

What are the benefits of having a design system?

Imagine a filing cabinet full of documents. None of them are in a manila folder. They’re all tossed in there just loosy goosy with no level of organization. Notes are hand scribbled everywhere. There are even some sticky notes thrown in, just to add to the chaos. How long would it take you to find the information you need?

Now imagine a filing cabinet where everything is perfectly filed away. Documents are in manila folders, neatly labeled with one of those Dymo labels, everything is typed and someone even took the time to color code certain pages with sticky notes. Hello, efficiency!

Design systems are that beautiful OCD filing cabinet scenario. Not only are they totally satisfying because who doesn’t like things that are color coded, they are great because they save teams time and money while maintaining brand consistency.

According to Figma, designers that have access to a design system can crank through projects 34% faster than those without a design system. That amount of time savings is super valuable, especially when you consider that as designers, we continuously live on deadlines.

Now that we know a bit more about design systems and what makes them important, let’s take a look at some examples to learn more about them. If you’re interested in learning more about design systems from the pros, check-out this video from UX Speakeasy. This panel of UX and product designers from companies such as IBM, Roku, and Intuit offers some really good insight about design systems.

A collection of thirteen design system examples

Following are the two design systems I reference the most. Their usage guidance is detailed, thorough, and rich with component and pattern documentation.

Carbon Design System by IBM

IBM’s open-source design system is massive. If you haven’t seen it yet, I urge you to do so immediately! This is one of the most comprehensive design systems with loads of documentation and best practices. Based on the UX Speakeasy video which I shared with you earlier, you’ll come to learn that the team that is currently building this system is comprised of around 30 designers. That’s amazing!

Bonus: One major bonus about the Carbon Design System is that they generously share their Sketch library. Having access to all of their building blocks in Sketch without having to create everything from scratch is huge. Thank you team at IBM!

Material Design by Google

Along with Carbon Design System, Material Design is equally as unparalleled. Basically, it has everything. In the components section, there are tons of nice graphics that help illustrate information in a very clear manner. This is really a go-to design system when you’re looking for one to reference.

This next set of design systems is also a great source of information. Any design system that can provide rationale and examples is super helpful. The government related design systems tend to have more information with regards to accessibility, which is nice. This can come in handy if you need help creating guidelines with that in mind.

BBC Gel

BBC design system example

Cedar by REI

Uber

Nasa

Solid by Buzzfeed

GOV.UK

Quickbooks by Intuit

Atlassian

Polaris by Shopify

Fluent by Microsoft

Protocol for Mozilla and Firefox

And if you need even more inspiration or points of reference, check-out this website I stumbled upon recently from Design Systems Repo. It’s a comprehensive and curated list of design systems.

Wrapping Up

Creating a design system requires some thought and strategy. Read more about the process on how Airbnb and Figma created theirs. If you do decide to create a design system, the payoff will be tremendous. Your team will be able to build applications and websites faster and more consistently by using design components and code.

http://gph.is/2aWoV48

Share this post