A design system is the ultimate instrument for ensuring design consistency and uniformity. Many successful organizations employ design systems for their digital goods to increase development efficiency and speed, also to improve user experience. They keep design systems as a reference for how things should be done for a certain product. Exploring the intricacies of top organizations’ successful design systems can provide you with a solid grasp of product design methods and execution. Besides that, this will also give you inspiration for your own initiatives.
In this post, we give our thoughts on the 10 most innovative design systems that we found inspirational and informative (in no particular order). If you want to learn more about design systems before diving into the examples, check out our comprehensive design systems guide on Revamping your product.
Atlassian Design System
Atlassian, an enterprise software firm located in Australia, is well-known for its project management tools such as Jira and Trello. The Atlassian design system is extremely extensive, providing end-to-end assistance with all components necessary to build a simple and intuitive design experience. It is divided into six major sections: Brand, Content, Foundations, Components, Resources, and Patterns.
Brand: What inspires Atlassian? How do they explain, carry out, and deliver on their purpose of bringing out the top performance in every team? All of these questions are answered in the design system’s brand section. It explains Atlassian’s values, goal, promise, and personality, as well as how to use each of these characteristics in your work.
Content: The content advice specifies the style of conversational language, the tone, and the voice of the brand. The section contains writing guidelines as well as Atlassian voice and tone rules for anybody who works with customer-facing communications. Furthermore, it stresses the use of inclusive language in the organization and provides information on the Atlassian writing style.
Foundations: This section documents the visual aspects that are employed to provide a superior user experience. This section describes layout, brand color, iconography, illustrations, typography, logo usage, and accessibility guidelines. Each component is thoroughly covered, including the many types, applications, and best practices.
Components: This section documents the Atlassian design system’s building components, such as buttons, navigation, empty states, pop ups, menus, toggles, and so on. Further more, the components address many UI needs and are bundled together to form patterns.
Resources: The Atlassian design system features a section dedicated to resources, which are the tools, kits, and plugins that will aid in the development process. It includes a Figma library, an illustration library, a logo library, and other tools to assist designers streamline the creative process.
Patterns: Patterns are combinations of components that can address common user concerns. This section discusses patterns for forms, enhancing experiences, messaging, and so on. The use of reusable patterns aids in design consistency.
Salesforce Design System – Lightning
Salesforce is a well-known corporation that provides CRM software and tools for customer support, sales, analytics, marketing automation, and application development. Lightning, their design methodology, is a comprehensive guide to producing the most effective corporate user experiences. Salesforce’s Lightning design methodology prioritizes scalability, flexibility, usability, and efficiency.
The Lightning design system has eight major parts. – Design guidelines, component blueprints, accessibility, utilities, icons, design tokens, resources, and tools.
Design guidelines: It provides an overview of the design concepts used by Salesforce when making design decisions. It also includes thorough instructions on elements such as empty states, builders, layout, navigation, message, search, and brand voice and tone.
Component blueprints: This section documents framework-agnostic, accessible HTML and CSS that are used to develop components that adhere to implementation criteria. Breadcrumbs, buttons, checkboxes, cards, color pickers, alerts, progress bars, and many more components are all meticulously preserved.
Accessibility: The Lightning design system prioritizes accessibility and features a section dedicated to it. It provides usable markup that will act as the basis for app development. This section covers keyboard navigation, suitable color usage, picture replacements, and so forth. There are also detailed recommendations on online design, mobile design, keyboard interface, global focus, and background texts. Accessibility patterns are offered to simplify the creation of accessible web apps.
Utilities: Utilities explain how to use grids, descriptive lists, horizontal lists, vertical lists, position, scrolling, margins, and other features.
Icons: This section contains detailed iconography design principles. Icons are divided into several categories, including utility icons, document icons, standard and custom icons, and action icons. The icons are available for download straight from the design system in SVG and PNG file formats, as well as a Sketch plugin and Figma UI kit.
Design tokens: To preserve scalability and consistency in UI development, named entities are utilized to hold visual design attributes rather than hard-coded values. Colors, size, spacing, and other attributes are used as design tokens. When there is an update, it is simple to reflect changes across products using design tokens.
Resources: The resources area includes information about the Lightning design system, downloads of icons, design tokens, and swatches, and an extensive FAQ section.
Tools: The design tools area contains everything you need to learn about and operate with the Salesforce design system. It includes the Lightning design system Sketch plugin, the SLDS validator for CS code, and the SLDS scope customizer. A detailed tutorial is provided for each of these tools.
Shopify Design System – Polaris
Polaris is one of the top design systems available on the worldwide eCommerce platform Shopify. It was designed with the goal of providing a superior shopping experience for Shopify retailers. It is an excellent resource for anybody looking for information on eCommerce UX design. Polaris includes helpful tips that make designing for Shopify a breeze. Polaris is divided into six sections: Content, Foundations, Design, Components, Tokens, and Patterns.
Content: The content section gives thorough information on how to sound like Shopify and determine the appropriate tone to use. Polaris delivers well-defined information ranging from voice rules to recommended inclusive language, contextual messaging, naming conventions, grammar, and product content preparation.
Foundations: The foundations part starts by explaining Shopify’s core principles, such as empowerment, trustworthiness, and familiarity. It offers advice on critical issues like internationalization, accessibility, mobile experience, and the information architecture. Polaris also shares principles for developing Shopify applications and structuring onboarding flows. Polaris provides a currency formatting framework to format localized currencies because businesses use Shopify to sell internationally.
Design: This section contains detailed instructions on design aspects such as typography, colors, icons, graphics, and interaction states. These guidelines govern all Shopify admin experiences. Here is additional information on spacing and data display concepts.
Components: The components area collects reusable interface pieces that may be utilized across Shopify platforms. The component library enables Shopify retailers to easily create the most engaging user experience. Tables and lists, navigation, graphics, forms, and symbols, feedback indicators, and more are all covered in this section.
Tokens: Design tokens are used to ship design decisions like colors, fonts, and so on with consistency and scalability. Along with providing information about the advantages of tokens, the design systems also keep track of all the tokens that are currently in development or concepts for Polaris projects.
Patterns: Mobile patterns to aid in the design of Shopify’s Android and iOS apps, home cards to provide merchants with actionable feedback based on store data, error message guidelines to make errors visible and easy to understand, and page layouts to create a consistent way to arrange content on a screen are all included in the Patterns section.
Mailchimp Design System
Mailchimp began as an email marketing service but has now evolved into an all-in-one marketing automation platform for small businesses. They established a design system to keep a consistent structure to their design language. This helped minimize any disparities when the team increased in size and the number of creative people with distinct views became part of the team.
IMAGE
The Mailchimp design system is divided into two parts: Components and Foundations.
Components: This section documents the many components that comprise the Mailchimp UI, such as buttons, lists, navigation, tables, dialogues, and so on. It also specifies standards for icons, feedback components, form elements, and so forth.
Foundations: Color, typography, data presentation, and the grid system are all detailed under Foundations. Mailchimp’s colors are listed under colors, and they include the primary color, functional colors, feedback colors, accent colors, and neutral colors. The typography section includes information on the brand typeface, accompanying fonts, and type scale. Data visualization teaches Mailchimp’s standards for creating visual data storytelling.
Firefox Design System – Photon
The Photon design system was created with the goal of providing the greatest Firefox experience possible across all devices and in all situations. A design system was their most effective solution for working with a global remote workforce. Visuals, photon design, motion, patterns, copy, resources, and components are the seven major aspects of the design system.
Visuals: Visual aspects such as color, typography, iconography, artwork, grid, and product identification assets (such as logos) are recorded under visuals.
Photon design: This section discusses the design concepts that govern the development of Firefox products. It also includes recommendations for designing for scalability, performance, and diversity.
Motion: This section contains detailed recommendations on motion principles, animation properties, duration, and easing. Icon animation standards are also provided individually.
Patterns: Here, patterns for circumstances such as faults and warnings are documented. It also explains how to use shadows and inactive states.
Copy: The copy section contains all content-related information, from voice and tone to punctuation, capitalization, and writing instructions for users.
Resources: Under resources, you may find the standard collection of Photon icons, fonts, colors, and design tokens.
Components: All information about components, from their usage to styles, behaviors, and content standards, is well defined. Some of the major components include checkboxes, buttons, tabs, message bars, and links.
Adobe Design System – Spectrum
Spectrum, Adobe’s design framework, strives to create a consistent user experience throughout the company’s apps. The design system enables a uniform experience across platforms, allowing users to work on projects from tablets, phones, or desktop computers without interruption. It comprises six core areas – Spectrum, Foundation, Components, Content, Patterns, and Tools and Resources – and is one of the greatest design systems in terms of detailing.
Foundation: The foundation includes design tokens, the basics of data visualization, bidirectionality, inclusive design, and international design guidelines. It also covers color systems, color basics, color palettes, and color use in depth. This area also includes iconography, typography, motion, images, and so forth.
Spectrum: Spectrum’s design principles are stated here, along with examples of the concepts in action. The section also includes a chronological listing of all the elements added or changed in the design system.
Content: Adobe’s voice and tone, microcopy directions, and linguistic inclusiveness are all described in the content area. There is additional advice on writing for products, writing for mistakes, and onboarding.
Patterns: Patterns include guidelines for cards, headings, and tables. The anatomy, components contained, layout, behaviors, usage guidelines, keyboard interfaces and content standards for each pattern are all specified.
Components: The components section documents the components necessary to develop feedback, actions, navigation, typography, inputs, and so on. There is detailed documentation of usage guidelines, actions, and design checklists for each part.
Tools and resources: It includes downloadable materials to help speed up the design process. An Adobe XD plugin that integrates Spectrum components into XD projects makes designing Adobe interfaces simple and quick.
Uber Design System
As we know Uber, which is well-known for its ride-hailing services, has one of the top design systems that reflects its concept – mobility sparks opportunity. Uber offers food delivery, peer-to-peer ridesharing, and micro-mobility services using electric bikes and scooters in addition to ride-hailing. The design system aids in maintaining brand consistency across all goods and sub-brands.
Uber’s design system is divided into nine distinct sections: color, logo, composition, illustration, iconography, motion, tone of voice, photography, and typography. Along with this aesthetic guideline, they provide an open-source library of UI components called Base Web, which provides advice on designing pieces including buttons, menus, date pickers, navigation bars, and so on. Base Web’s components can also be customized to meet unique requirements.
Gitlab Design System – Pajamas
Gitlab is an open source project with approximately 3000 community members. The Pajama design system was created to guarantee that any contributor has the resources and know-how to comfortably contribute to Gitlab. It serves as the single source of truth for Gitlab’s concepts, components, usage rules, branding, research methodology, and more for contributors. The Pajama design system is divided into four sections: Brand, Research, Accessibility, and Product.
Product: Product documents the key parts of the design system such as components, foundations, regions, content, objects, design resources, and usability. Data visualization and formatting guidelines are also offered. Color, iconography, typography, images, and other less physical qualities are covered by the foundations. Components are reusable design blocks such as buttons, tabs, and forms. Content rules address all documents relating to writing style, whereas usability requirements cover inclusiveness and internationalization.
Brand: This section contains the standards for maintaining Gitlab’s brand image, such as brand principles and tone of voice. It also includes guidelines for logo and brand design elements such as typography, photography, color, and marketing graphics.
Accessibility: Gitlab publishes a declaration of compliance as part of its commitment to providing an accessible product. To build an accessible experience for all users, best practices and inclusive design principles are also presented.
Research: The pajama design system also welcomes community contributions to UX research, which are detailed in this section.
Hubspot Design System – Canvas
Canvas was built by Hubspot to express their brand identity in products and prevent UI discrepancies. The design system is guided by five design principles. They are as follows: human, clear, inbound, collaborative, and integrated. Canvas design system includes an icon collection, data visualization rules, and detailed instructions for components like colors, buttons, text styles, forms, and more. Each component is saved as both a Sketch kit and a React component. Furthermore, documentation is used to foster co-ownership among designers and developers.
BBC Design System – GEL
GEL (Global experience language) is the BBC’s design foundation for creating uniform and efficient digital experiences. The design system is divided into three sections: Design Patterns, Foundations, and How-tos.
Design patterns: Design patterns are reusable pieces that may be utilized to efficiently address common design challenges. Web and app patterns are cataloged individually. An overview, its operation, rules, accessibility requirements, and examples are provided for each pattern.
Foundations: Foundations define the design fundamentals upon which BBC Online is based, including motion design principles, iconography, space, typography, and grids. Full instructions on how to utilize each of them in designs are provided for each of them.
How-tos: The how-to section contains comprehensive guidance for building various experiences, such as accessible voice experiences, email newsletters, interactive TV experiences, and so on.
Conclusion
Many businesses are utilizing design systems to increase operational efficiency and user experience across digital goods. “A design system functions as the connective tissue that ties your entire platform together,” explains Drew Bridewell, Growth Day’s Head of Design and Product and a UX coach.
In this post, we discussed some of the greatest design methods used by leading firms throughout the world. These design systems assist businesses in standardizing their design techniques and procedures. Furthermore, they are wonderful learning tools and information sources for people trying to construct their own design system or improve their product design skills. We hope you find this post informative and enjoyable to read.