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.
#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.
#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
#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.
#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.
#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.
#6 Mailchimp’s Patterns
The MailChimp Pattern Library results from the company’s transition to a more responsive, sleek, and user-friendly software.
#7 HUDL’s Uniform Design System
Design and coding created the system to bring Hudl’s products together.
#8 Thumbtack Thumbprint
Thumbprint is a living system that uses consolidation, standardization, and documentation to streamline the design and development.
#9 Lonely Planet’s Rizzo Style
Rizzo got created focused on reducing complexity and increasing reusability.
#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.
#11 Stack Overflow’s Stacks
Stacks gives you everything you need to offer consistent, coherent experiences across Stack Overflow, including the product and emails.
#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.
#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.
#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.
#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.
#16 Shopify’s Polaris
Polaris’ design system aids in the collaboration of all Shopify merchants to create an outstanding experience.
#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.
#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.
#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.
#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
- #39 MongoDB’s Design System
- #40 Mixpanel’s Design System
- #41 Bulb’s Solar Design System
- #42 ServiceNow’s Design System
- #43 Oracle’s Alta
- #44 General Electric’s Predix Design System
- #45 Flexport’s Latitude
- #46 SAP’s Fiori
- #47 SAP’s Fiori Fundamentals
- #48 Segment’s Evergreen
- #49 Elastic’s UI Design System
- #50 VMWARE’s Clarity Design System
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.
