A design system is the ultimate tool to bring consistency and uniformity to designs. Many successful companies use design systems for their digital products to improve efficiency and speed of development and enhance the user experience. They maintain the design systems as a reference for how things should be done for a particular product. Exploring the ins and outs of best design systems from top companies will provide a good understanding of product design practices and implementation and help you gain inspiration for your ventures.
In this article, we share our take on the 14 best design systems (in no particular order), which we found inspiring and informational. If you would like to understand more about design systems before looking at the examples, give our complete guide to design systems a read.
Table of Contents
- 1.Atlassian Design System
- 2.Shopify Design System – Polaris
- 3.Salesforce Design System – Lightning
- 4.Mailchimp Design System
- 5.Adobe Design System – Spectrum
- 6.Firefox Design System – Photon
- 7.Airbnb Design System
- 8.Audi Design System
- 9.Uber Design System
- 10.Guardian Design Style Guide
- 11.Hubspot Design System – Canvas
- 12.Gitlab Design System – Pajamas
- 13.Buzzfeed Design System – Solid
- 14.BBC Design System – GEL
- 15.Closing Remarks
Atlassian Design System
An enterprise software company based in Australia, Atlassian is known for its project management tools like Jira and Trello. The Atlassian design system is very detailed and provides end to end guidance on all aspects required to create a simple and intuitive design experience. It has six key sections – Brand, Foundations, Content, Components, Patterns, and Resources.
Brand: What drives Atlassian? How do they express, operate, and deliver on their mission of unleashing the potential in every team? The answer to all these is given in the brand section of the design system. It shares Atlassian’s mission, values, promise and personality and gives an insight into how to apply each of these attributes in your work.
Foundations: The visual elements that are used to create a delightful user experience are recorded in this section. Guidance on brand color, layout, iconography, typography, illustrations, logo usage and accessibility criteria are described here. Each aspect is explained in length covering the different types, usage and best practices.
Content: The style of the conversational language, the voice and the tone of the brand – these are provided in the content guidance. The section provides writing guidance and Atlassian voice and tone principles for everyone who works with customer-facing communications to follow. Moreover, it emphasizes the usage of inclusive language in the organization and briefs about the Atlassian writing style.
Components: The building blocks of the Atlassian design system, from navigation to button, empty state, menu, popup, toggle and so on, are recorded in this section. The components cover the different UI requirements and are grouped together to create patterns.
Patterns: The combinations of components which can be used to solve common user problems are recorded as patterns. Patterns for forms, messages, new experiences, etc. are covered in this section. The use of reusable patterns helps to ensure consistency in designs.
Resources: The Atlassian design system has a complete section dedicated to resources, that is, the tools, kits and plugins that will help the creation. It contains a Figma library, an illustration library, a logo library, and so on that will help designers simplify the design process.
Shopify Design System – Polaris
The global eCommerce platform Shopify has one of the best design systems, Polaris. It’s created with the aim to build a great shopping experience for Shopify merchants. It is a great guide for anyone wanting a reference for eCommerce UX design. Polaris contains practical guides that make designing for Shopify simple. There are six key sections in Polaris – Foundations, Content, Design, Tokens, Components and Patterns.
Foundations: The foundations section begins by describing Shopify’s set of values such as trustworthiness, empowerment, familiarity and so on. It provides guidance on key considerations like accessibility, internationalization, information architecture and mobile experience. Principles of building Shopify apps and designing onboarding flows are also shared in Polaris. Since Shopify is used by merchants to sell globally, Polaris provides a currency formatting framework to format localized currency.
Content: To sound like Shopify and choose the right tone to apply, the content section provides detailed guidance. From voice guidelines to recommended contextual messages, inclusive language, grammar, naming conventions and product content preparation, Polaris provides well-defined information.
Design: In-depth guidance on design elements like colors, typography, illustrations, icons and interaction states are provided in this section. These principles define all experiences across the Shopify admin. Information on spacing and data visualization principles are also outlined here.
Tokens: To ship design decisions like colors, typography, etc. with consistency and scale, design tokens are used. Along with giving information about the benefits of tokens, the design systems also record all the available tokens in development and designs for Polaris projects.
Components: The reusable interface elements that can be used across Shopify systems are collected under the components section. The component library allows Shopify merchants to quickly develop the best experience. Lists and tables, navigation, forms, images and icons, feedback indicators – all this and more are described here.
Patterns: Patterns section include mobile patterns to help design Shopify’s Android and iOS apps, home cards to give merchants actionable feedback based on their store data, error message guidelines to make errors notable and easy to understand, and page layouts to create a common way to arrange content on a screen.
Salesforce Design System – Lightning
Salesforce is a renowned company that offers customer relationship management (CRM) software and apps focused on sales, customer service, marketing automation, analytics, and application development. Their design system Lightning is an in-depth guide to creating the best enterprise app experiences. Salesforce lightning design system focuses on flexibility, scalability, efficiency and accessibility.
Eight key sections in the Lightning design system are – Design guidelines, accessibility, component blueprints, utilities, design tokens, icons, tools and resources.
Design guidelines: It gives an overview of the design principles followed when making design decisions at Salesforce. It also provides detailed guidance on features like Empty states, builders, layout, navigation, messaging, search and brand voice and tone.
Accessibility: The Lightning design system gives utmost importance to accessibility and has a section dedicated to the same. It provides accessible markup which will serve as the foundation for app development. Keyboard navigation, appropriate use of colors, alternatives for images, etc. are all covered in this section. Detailed guidelines on web design, mobile design, keyboard interaction, global focus and background texts are also given. Principle patterns called accessibility patterns are provided to make accessible web app development simple.
Component blueprints: Framework agnostic, accessible HTML and CSS which are used to create components in alignment with implementation guidelines are documented in this section. From breadcrumbs to buttons, checkboxes, cards, color pickers, notifications, progress bars and many other components are recorded in detail.
Utilities: Utilities provide guidance on the usage of grids, description list, horizontal list, vertical list, position, scrolling, margin, etc.
Design tokens: Named entities are used to store visual design attributes instead of hard-coded values to maintain scalability and consistency in UI development. Attributes like colors, sizing, spacing and so on are manipulated as design tokens. With design tokens, it is easy to reflect changes across products when there is an update.
Icons: Detailed iconography design guidelines are provided in this section. Icons are categorized into separate types like utility icons, doctype icons, standard and custom icons, and actions icons. The icons can be downloaded directly from the design system as SVG and png file types, Sketch plugin and Figma UI kit.
Tools: Everything you need to learn about the Salesforce design system and work with it is available in the design tools section. It contains the lightning design system plugin for Sketch, SLDS validator for CS code and SLDS scope customizer. For each of these tools, a comprehensive walkthrough is shared.
Resources: The resources section contains articles to learn more about the Lightning design system, downloads for icons, design tokens and swatches, and a comprehensive FAQ section.
Mailchimp Design System
Mailchimp started as an email marketing service and grew to become an all-in-one marketing automation platform for small businesses. As they grew in size and the number of creative people with unique perspectives became part of the team, they devised a design system to maintain a consistent structure to their design language and avoid any discrepancies.
The Mailchimp design system has two key sections, Foundations and Components.
Foundations: Attributes like color, typography, data visualization and grid system are recorded in detail under foundations. Under colors, you can find all about the colors used by Mailchimp including main color, functional colors, feedback colors, accent colors and neutral colors. The typography section describes the brand typeface, supporting font and type scale. Data visualization informs about the standards that Mailchimp has set for telling visual data stories.
Components: The different components that build the Mailchimp UI, such as buttons, lists, navigation, tables, dialogues and so on are documented in this section. It also lays down the standards for icons, feedback elements, form elements, etc.
Adobe Design System – Spectrum
Adobe’s design system Spectrum aims to introduce a cohesive experience among Adobe’s family of applications. The design system makes possible a consistent experience across platforms enabling users to work on projects from tablets, phones or desktops without any disparity. One of the best design systems in terms of detailing, it has six key sections – Spectrum, Foundation, Components, Content, Patterns and Tools and Resources.
Spectrum: The design principles that drive Spectrum are defined here along with descriptions of the principles in action. The section also gives a chronological list of all the items that have been added or updated in the design system.
Foundation: The foundation covers design tokens, data visualization fundamentals, bidirectionality, inclusive design and international design guidelines. It also provides in-depth guidance on color fundamentals, color system, usage and color palette. Moreover, typography, iconography, illustrations, motion, etc. are also included in this section.
Content: The voice and tone of Adobe, their microcopy instructions and inclusivity in the language are documented under the content section. Guidance on in-product writing, writing for errors and onboarding are also provided.
Components: The components required to design actions, feedback, navigation, inputs, typography and so on are documented in the components section. For each of the aspects, detailed documentation of usage guidelines, behaviors and design checklists are given.
Patterns: Guidelines on cards, headers and tables are provided under patterns. For each pattern, their anatomy, components included, behaviors, layout, usage guidelines, content standards and keyboard interactions are documented.
Tools and resources: It contains downloadable resources to increase the speed of the design process. An Adobe XD plugin that allows you to use Spectrum components in XD projects make it easy and fast to design Adobe interfaces.
Firefox Design System – Photon
The photon design system is built with an aim to serve the best Firefox experience across all platforms and for every situation. A design system was their best answer to working with a remote team spread across the globe. The design system has seven key sections – Photon design, visuals, motion, copy, patterns, components and resources.
Photon design: The principles that guide the design of Firefox products are shared in this section. It also provides guidelines on how to design for scale, performance and inclusivity.
Visuals: The directions for using visual elements like color, typography, iconography, illustration, grid and product identity assets (like logo) are documented under visuals.
Motion: Clear guidelines on motion principles, animation attributes, duration and easing are provided in this section. Standards for icon animation are also shared separately.
Copy: All content related information, from voice and tone to punctuation, capitalization and directions for writing for users can be understood from the copy section.
Patterns: Patterns for scenarios like errors and warnings are recorded here. It also gives guidance on the usage of shadows and inactive states.
Components: All information regarding components from their usage to styles, behaviors and content rules for each are described at length. Buttons, checkboxes, message bars, tabs, and links are some of the prominent components.
Resources: The standard set of Photon icons, fonts, colors and design tokens are shared under resources.
Airbnb Design System
As the design department at Airbnb grew big, they realized that a systematic approach is required to guide the collective efforts. To give users a cohesive experience and the Airbnb team a common language to work with, Airbnb developed the Design Language System. Their goal was to create well-defined and reusable components to make designs unified and efficient.
Two key elements of Airbnb’s design system are Foundations and Components.
Foundations: The basic style guide is covered under Foundations and it defines colors, typography, icons, information architecture and spacing.
Components: Rather than defining the components as atoms, they are considered as elements of a living entity and have a function, personality and properties. This is done to eliminate any disjoint experiences from occurring which happen when atomic components are used to create molecules. Every component has required elements (title, text, icons, etc.) and is defined in Sketch and code.
Audi Design System
Audi’s design system reflects the brand’s attitude toward the progressive premium. It is structured straightforwardly and has two main sections – Fundamentals and Guides.
Fundamentals: The brand values such as flexibility, confidence and clearness are described in detail in this section. It also covers the basics such as colors, typography, icons, imagery, illustrations, brand claim and so on.
Guides: From the user interface to corporate branding, communication media, dealer facility and more, the design system provides guides on various aspects. The user interface guide includes several sub-topics ranging from responsive design guidelines to icon library, components, themes, UI animation, etc. Moreover, layout, structuring, spacing, buttons, cards, transitions, response effects – everything is described in detail under the UI guide.
Uber Design System
Uber, popular for its ride-hailing services has one of the best design systems that reflect its philosophy – movement ignites opportunity. Apart from ride-hailing, Uber also has food delivery services, peer-to-peer ridesharing, and micro-mobility services with electric bikes and scooters. The design system helps them maintain brand consistency across all their products and the sub-brands.
Uber’s design system has nine key sections – logo, color, composition, iconography, illustration, motion, photography, tone of voice and typography. Along with this visual guideline, they also provide an open-source library of UI components, Base Web, that gives guidance on UI building blocks such as buttons, menu, date picker, navigation bar, and so on. The components in Base Web are also customizable as per individual needs.
Guardian Design Style Guide
The Guardian design style guide is a visually amazing guide that reflects the identity of the brand. The Guardian website is made up of a combination of fronts and articles. Fronts are made up of containers which are composed of modular story cards. Articles follow the design language of the specific cards. There are five key sections in the design style guide – Grids & spacing, Brand use, Typography, Color palette and Graphic elements.
Grids & spacing: It provides guidelines on how to arrange the information on all of Guardian’s digital platforms. Desktop grid rules, mobile grid rules and spacing guidelines are shared in this section.
Brand use: Brand use provides instructions on using Guardian’s logo and roundel, which are the two major expressions of the brand.
Typography: From the different typefaces used to the usage context – which typeface to use for headlines, for section tiles etc, for meta-information – everything related to typography is documented here.
Color palette: Information regarding colors that reflects the brand identity to its usage in navigation assistance and information categorization is described under color palette.
Graphic elements: Different button types, layout styles and highlighting guidelines that are used to help readers navigate easily are specified here.
Hubspot Design System – Canvas
Hubspot created their design system Canvas to reflect their brand identity in products and eliminate the UI inconsistencies. Five design principles guide the design system. These are Clear, Human, Inbound, Integrated and Collaborative. Canvas design system has an icon library, and data visualization guidelines and provides detailed instructions on components like buttons, colors, forms, text styles, and more. Each component is stored in a Sketch kit and also as a React component. Further, documentation is used to cultivate co-ownership between designers and developers.
Gitlab Design System – Pajamas
Gitlab is an open core product with over 3000 community contributors. The Pajama design system is built to ensure that every contributor can confidently contribute to Gitlab with the right resources and know-how. It acts as the single source of truth for contributors to know about Gitlab’s principles, components, usage guidelines, branding, research methodologies, and more. There are key four sections in the Pajama design system – Brand, Research, Accessibility and Product.
Brand: The guidelines for upholding Gitlab’s brand image, such as the brand principles and tone of voice are shared under this section. It also provides directions on the logo and brand design-related aspects like color, typography, photography and marketing illustrations.
Product: The major elements of the design system such as foundations, components, regions, objects, content, usability and design resources are documented under product. Guidelines for data visualization and layout are also included here. Foundations cover the less tangible aspects like color, iconography, typography, illustrations, etc. Components contain small reusable design blocks like buttons, tabs, and forms. All documentation related to writing style comes under content and usability guidelines including inclusivity and internationalization are covered in usability.
Research: The pajama design system also accepts community contributions to UX research, the details of which are given in this section.
Accessibility: With a commitment to maintaining an accessible product, Gitlab provides a statement of compliance. Inclusive design principles and best practices are also provided to create an accessible experience for all users.
Buzzfeed Design System – Solid
Buzzfeed has a CSS style guide called Solid built to improve the speed of prototyping and development and maintain consistent styling in designs. It has a comprehensive CSS library that covers typography, colors, buttons, forms, tables, layouts, and so on. Additionally, it provides components for button groups, cards, messaging, modals, tags, etc. A sketch template is available for download in the design system to incorporate Solid styles into your mockups.
BBC Design System – GEL
Global experience language (GEL) is BBC’s design framework that enables them to create consistent and efficient digital experiences. Three key sections in the design system are – Foundations, Design patterns and How-tos.
Foundations: The design basics on which BBC online is built, such as iconography, motion design principles, typography, spacing and grids are documented under foundations. For each of them, a detailed guideline on how to use them in designs is provided.
Design patterns: Reusable elements that can be used to solve common design problems easily are chronicled under design patterns. Patterns for web and app are separately catalogued. For each pattern, an overview, its working, rules, accessibility guidelines and examples are provided.
How-tos: Comprehensive guides for designing different experiences such as accessible email newsletters, voice experiences, interactive TV experiences and so on are shared in the how-to section.
Many companies are leveraging design systems to improve their operational efficiency and enhance user experience across digital products. “A design system acts as the connective tissue that holds together your entire platform”, says Drew Bridewell, Head of Design and Product at Growthday and a UX coach.
In this article, we covered some of the best design systems implemented by top companies around the world. These design systems help the companies standardize their design practices and processes. Moreover, they are excellent learning tools and sources of information for those who are looking to build their own design system or wanting to become better at product design. We hope this article gave you interesting takeaways and you enjoyed reading it.