Prototypr
Published in

Prototypr

50 Design Systems examples to learn from (for your next project)

Pattern libraries that you can use as a source of inspiration

Today every company I talk to wants to implement a design system from scratch. Unfortunately, design systems are an underutilized resource and a learning tool for creating new user experiences. Upcoming designers can study every design pattern described to discover the best practices and make informed design judgments on their creations. Beginner-advanced designers and front-end developers can learn from the following 100+ design systems during every product design sprint.

But first, let’s understand the basics of design systems —

What are design systems, exactly?

A design system is a set of guidelines for managing design at scale by avoiding redundancy and establishing a common language and aesthetic across several pages and channels.

Read more about the basics of Design Systems (by NN Group) below 👇 .

What can be learned from design systems?

Although design systems adhere to standard UI best practices, they contain a vital collection of user patterns like typography, color, forms, banners, documentation fundamentals, and so on. Someone new to design systems might benefit from the start.

The Original Gangsters (OG) of Design Systems

The OG’s design systems are material design and human interface guidelines. These were, in many ways, the beginning of what design systems looked like earlier when digital mobile OSes arrived on smartphones for the first time. Designers looked at these, learned many helpful design practices, and are still the gold standard of design systems.

Material You by Google

#1 Google’s Material Design

Google’s Material Design 3.0 and 2.0 are a unified design system that combines theory, resources, and tools for crafting digital experiences.

Human Interface Guidelines by Apple

#2 Apple’s Human Interface Guidelines

Get in-depth information and UI resources for designing great apps that integrate seamlessly with Apple platforms. Human Interface Guidelines walk you through essential app structural components like app architecture, system capabilities, visual design, icons, and more.

Notably famous Design Systems

Design System by Atlassian

#3 Atlassian’s Design Language

Create stunning enterprise experiences using Atlassian’s end-to-end design language and strategically planned components. The best feature is that each section includes a code sample that developers may examine and analyze.

GitLab’s Pajamas Design System

#4 GitLab’s Pajamas Design System

GitLab is a community-driven open-source project with over 3000 contributors. GitLab thinks that when everyone contributes, consumers become contributors, and the rate of human progress accelerates considerably.

Mozilla Firefox’s Photon Design System

#5 Mozilla Firefox’s Photon Design System

Photon is a Firefox design language that allows you to create modern, straightforward, and engaging experiences for goods on all platforms, from mobile to desktop and TV to the next big thing.

Mailchimp’s Patterns

#6 Mailchimp’s Patterns

The MailChimp Pattern Library results from the company’s transition to a more responsive, sleek, and user-friendly software.

HUDL’s Uniform Design System

#7 HUDL’s Uniform Design System

Design and coding created the system to bring Hudl’s products together.

Thumbtack Thumbprint

#8 Thumbtack Thumbprint

Thumbprint is a living system that uses consolidation, standardization, and documentation to streamline the design and development.

Lonely Planet’s Rizzo Styleguide

#9 Lonely Planet’s Rizzo Style

Rizzo got created focused on reducing complexity and increasing reusability.

IBM’s Carbon Design Language

#10 IBM’s Carbon Design Language

Carbon is IBM’s open-source product and experience design system. Working code, design tools and resources, human interface principles, and a thriving community of contributors make up the system built on the IBM Design Language.

Stack Overflow’s Stacks

#11 Stack Overflow’s Stacks

Stacks gives you everything you need to offer consistent, coherent experiences across Stack Overflow, including the product and emails.

Audi’s UI

#12 Audi’s UI

The goal of Audi UI is to develop a variety of solutions and a well-balanced, system-wide user experience, from the app to the vehicle.

BBC’s Global Experience Language (GEL)

#13 BBC’s Global Experience Language (GEL)

The BBC’s shared design framework, GEL, allows us to create consistent and enjoyable user experiences across all of our Digital Services.

HubSpot’s Canvas Design System

#14 HubSpot’s Canvas Design System

This collection illustrates the components of Hubspot’s design system, from colors and typography to React-based features and data visualization tools.

Ant Finances’ Ant Design

#15 Ant Finances’ Ant Design

For a better user experience of enterprise applications, a design system with values of certainty, meaningfulness, growth, and naturalness was created.

Shopify’s Polaris

#16 Shopify’s Polaris

Polaris’ design system aids in the collaboration of all Shopify merchants to create an outstanding experience.

Hewlett Packard’s Grommet Design System

#17 Hewlett Packard’s Grommet Design System

Grommet delivers all the support, components, and design resources you’ll need to turn your ideas into reality.

Marvel’s Styleguide

#18 Marvel’s Styleguide

This style guide was intended to serve as a centralized repository for UI components, brand guidelines, brand assets, code snippets, developer guidelines, and more.

Zendesk’s Garden

#19 Zendesk's Garden

Zendesk Garden is the company’s selected collection of user interface beauty. Zendesk usually grows user interface components for Zen products in the Garden.

Salesforce’s Lightning Design System

#20 Salesforce’s Lightning Design System

The Lightning Design System allows you to create successful business experiences and custom applications using Salesforce’s native patterns and best practices.

Well done, Design Systems

#21 Gojek’s Asphalt

#22 Kiwi’s Orbit

#23 Microsoft’s Office UI Fabric

#24 Redhat’s PatternFly

#25 PegaSystem’s Pega Cosmos

#26 Australian Government’s Design System

#27 Mozilla’s Protocol

#28 Quickbooks’ Design System

#29 Ubuntu’s Vanilla

#30 Workday’s Canvas

#31 Yelp’s Styleguide

#32 Airbnb’s Design System

#33 Adobe’s Spectrum

#34 Liferay’s Lexicon

#35 Microsoft’s Fluent

#36 BuzzFeed’s Solid

#37 Buffer Styleguide

#38 Uber’s Base Web

https://baseweb.design/components/

Worth mentioning

I hope you found the design system examples posted above exciting and thought-provoking. Please let me know if you have any further intriguing design systems examples to add to the list, and I will do so.

Here is a great reading resource to dig deeper into learning from design systems as a topic.

Thanks for reading 🥳. Before you go,

👨🏻‍💻 Join my metaverse on LinkedIn, Twitter, and Substack.
💭 Comment
your thoughts, feedback, or start a conversation!
👋 Alternatively, you can also book a design mentorship session by sending a request on RookieUp. Or chat about your next burning design project :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Dhananjay Garg

Product Designer who narrates stories. Love designing products that are accessible & usable. Connect on https://www.linkedin.com/in/djgarg/