Design systems can help teams tackle common challenges like miscommunication and wasted resources. Providing a shared library of design assets and documentation they help teams get on the same page and stay organized throughout the design process. But, creating a design system can take time, and so can learning how to use an existing one. In the meantime, teams can benefit from exploring the best design systems in the industry to uncover valuable insights that can inform their projects. This article will introduce you to the design system tools available today and show how they can help your team.

You’ll also discover how Ion’s design-to-code tool can help you implement your design system faster to achieve your goals sooner.

What is a Design System?

A design system is a set of standards to manage and scale design. It includes reusable components, design principles, and guidelines to achieve consistency and efficiency across a company's digital products. Design systems:

• Streamline workflow
• Enhance collaboration
• Maintain brand identity

Design teams create them for scalable and cohesive digital experiences. Design systems provide consistent styling and interaction guidelines for teams. For example, a design system might have standard elements to use in interfaces. It includes:

• Input boxes
• Dropdown lists
• Menu structures

Design System Guidelines

A list of approved brand colors and fonts. It also guides us on when to use them. Standard buttons and other interactive affordances. Interaction guidelines. The system includes decisions like using a slide-out panel. It also determines if expanding or pinching should resize images. A flexible grid system lays out screens consistently. It comprises things like the styling of cards or content separators—rules about the placement of particular objects. 

For example, always keep the login/log out and profile icons in the top-right corner of the desktop. Lists of icons and what they mean. Content guidelines that specify how and when to use content. For example, decide if all menu items should be verbs or nouns. Or determine if the company refers to the user in the first or second person. 

Design System Guidelines

Rules about when to use icons and when to use text as labels. Visual guidelines for where certain types of call-to-action buttons should be. Rules about using things like auto-save vs explicit save/cancel buttons. There are many other guidelines that a design system might have. 

Beyond Visuals

Google's Material Design is an example of a consistent design system. It consists of different types of elements and guidance on when and how to use each component. Design systems extend beyond visually driven tools; they apply to voice-controlled systems, too. These systems focus on content and behavior. They provide different but equally valuable features. 

Adaptability and Evolution of Design Systems

Effective design systems evolve with time. They adapt as the needs of a product or product suite change.  Ideally, elements of a design system are code pieces developers can use in interfaces. This helps build features or prototypes faster. In other cases, they are design elements in prototyping tools for designers to reuse.  

Related Reading

• Design System Documentation
• Design System vs Style Guide
• Design Handoff

21 Best Design Systems In The Design Industry To Learn From

1. Google Material Design

Material Design by Google has been around for nearly a decade. It is a design system that creates a framework for building intuitive, user-friendly interfaces. Using a visual language that mimics the physical world, Material Design reduces cognitive load for users by creating components that behave like real-world objects. 

The system is extensive, covering everything from design principles (color, typography, iconography) to UI components (many available as open source), code documentation, and more. In 2018, Google introduced Material Theming, which allows designers to customize Material Design components to fit their brand’s needs better. 

A series of hypothetical case studies, Material Studies, demonstrate how components can be styled to fit any product, ranging from a finance app to an eCommerce app.  

2. Audi

Audi’s design guidelines include a set of UX principles, or paradigms, and a collection of UI components with interactive demos and expandable code snippets. A unique element within each component page is a set of images demonstrating the correct and incorrect implementation of each one. 

The site also includes guidelines for UI animation, which can help walk users through a process, improve orientation, or provide feedback. The site includes:

• Visual and style guidelines
• Diverse guidance around marketing
• Corporate sounds
• Motion pictures
• Dealership branding  

3. Apple Human Interface Guidelines  

Apple’s Human Interface Guidelines are for those who design, develop and distribute apps through Apple’s platforms (macOS, iOS, watchOS, tvOS and visionOS). The brand has additional guidelines organized by tech vertical, covering 28 additional branded elements such as:

• CarPlay
• HomeKit
• Augmented Reality
• iCloud
• Wallet

Under each platform, you can find guidance on app architecture, user interaction, system capabilities, and visual design. Each section offers in-depth advice on each interface element's intended use and rationale. The goal is to ensure that apps provided through Apple’s platforms feel familiar and consistent to people who use them. 

There’s also an extensive resource library with Sketch, Photoshop and Adobe XD files, which house a range of UI elements and specifications. You can also watch video sessions and tutorials on how to build intuitive, user-friendly experiences.  

4. Microsoft Fluent Design System

First developed in 2017, Fluent is a collection of UX frameworks and UI components that share code, a unified design approach, and a consistent set of interaction behaviors. The design system helps build coherent experiences across platforms, including:

• Web
• Windows
• iOS
• Android
• macOS

Last year, Microsoft announced Fluent 2, touted as the design system's next evolution, enabling more seamless collaboration and creativity. Fluent 2 highlights five sensory elements (light, depth, motion, material and scale) using the physical world as its vocabulary. By taking inspiration from the physical world, Fluent guides the creation of experiences that feel as natural as possible. 

This can extend across devices people use throughout their day (like tablets and mobile), plus experiences designed beyond a flat screen (such as mixed reality interfaces). Fluent is an open-source design system. It’s connected to a LinkedIn group where customers, partners, and a community of designers and developers can submit feedback to help improve the system.  

5. Salesforce Lightning Design System

Created nearly ten years ago, the Salesforce Lightning Design System is an excellent example of an evolved design system. SLDS establishes principles and best practices for designing enterprise applications across the Salesforce ecosystem. Rather than focusing on pixels, it allows designers to focus on:

• User experience
• Interactions
• Flows
• Helps developers concentrate on application logic 

Salesforce also pioneered design tokens, which store visual design attributes (e.g., color, font size, spacing) that can be applied and updated across components and platforms. Rather than hard-coding individual values as visual designs evolve, design tokens ensure that changes are reflected across the product experience. They allow for a consistent visual system that's also much simpler to scale.  

6. Atlassian Design System

Atlassian recently introduced its new design system, combining two older sites (Atlassian Design Guidelines and Atlaskit). Before introducing the new system, Atlassian’s design guidelines and code documentation were hosted on separate sites, which led to growing inconsistencies that reflected a design and code split. 

With the new design system, Atlassian weaves content and code from both sites so that designers, developers, and content designers have a unified destination to update, contribute to, and build upon. The new design system includes a section on brand mission, personality, values, and promise. 

It also lays out guidelines for foundations, components, patterns, content, and resources to help simplify the creation process.  

7. Adobe Spectrum

Having been available to the public since 2019, Spectrum has defined a common experience across Adobe’s family of applications. A driving force for Spectrum is that once you learn one Adobe tool, you can easily pick up a second one and know how to navigate its UI to get things done. The system also helps ensure a consistent experience across platforms, such that if you begin a project on your iPad, you can finish it on your desktop or phone. 

Adobe’s design system also has a plugin for XD that provides instant access to Spectrum, which draws components dynamically based on a design token system. The plugin lets you explore a given component's variants and properties with direct access to its documentation. Stay on the lookout for Spectrum 2, the next iteration of Adobe’s design system to launch sometime this year.  

8. IBM Carbon Design System

The IBM Carbon Design System is open-source for all of IBM’s digital products. The system consists of human interface guidelines, working code, and design resources and is connected to a community of contributors. It aims to improve UI consistency and quality through clear, discoverable guidance around design and development best practices. 

The design system emphasizes its open-source nature by providing standards and documentation on contributing components and patterns, reporting issues, or providing general feedback through its GitHub community. 

The Carbon design system has a counterpart, the IBM Design Language, which focuses on the company’s design philosophy, design principles, and visual language guidelines.  

9. GitLab Pajamas

GitLab is a repository manager that lets teams collaborate on code. It’s an open-core product (software that combines aspects of both open and closed-source models) with over 2,000 community contributors. The Pajamas design system ensures that GitLab’s contributors have the resources and know-how to contribute to the system. 

It includes detailed documentation on how to submit UX proposals, feature proposals, and enhanced code implementations. There’s even a section on community-based UX research contributions, accompanied by a UX Research Handbook and training resources for those who want to contribute. 

The design elements in this system are very clearly organized and follow an atomic design approach, as they’re labeled components, regions and objects. This method, developed by Brad Frost in his book Atomic Design, emphasizes a modular approach in combining elements such as basic UI components to create increasingly more complex objects, such as an entire page. 

10. Mailchimp

Mailchimp is a marketing automation platform and email marketing service. In 2018, Mailchimp updated its brand to feel bolder and more expressive through winking humor and playful illustrations. Their design system also takes on this colorful identity. Their design system consists of two sections:

• Foundations
• Components 

It has an impressive data visualization section, offering detailed guidance on telling a clear and compelling data story. The guidelines include color groupings optimized for:

• Visual harmony
• Consistency
• Predictability
• Accessibility

It also provides guidance on how color, shapes, and spacing can be used to communicate data in a way that’s clear and on-brand.  

11. ETrade Design Language

ETrade is an online brokerage firm that also offers a range of financial services. The ETrade design language aims to create an excellent user experience by ensuring front-end consistency and accessibility across ETrade’s websites and applications. The system comprises:

• Foundations
• Components
• Patterns
• Resources emphasizing web design 

Each component displays variations and states, interactive demos, code snippets, and usage guidelines that include correct and incorrect usage examples. The design system also has an extensive set of UX writing guidelines, which aim to keep voice, tone, and messaging standards in check while maintaining brand personality. 

This section includes principles, accessibility guidelines, grammar, punctuation and examples of how writing should be structured within different web elements.  

12. Uber

Uber’s design system covers nine main elements:

• Logo
• Color
• Composition
• Iconography
• Illustration
• Motion
• Photography
• Tone of voice
• Typography

The company takes pride in the system’s flexibility and ease of use, maintaining brand consistency across various sub-brands, applications, and assets. 

In addition to their visual and style guidelines, Uber has also created Base Web, an open-source library of UI components that focus on the basics (hence the name, “Base”), such as typography, color, grid, and iconography, as well as essential elements like buttons, lists and controls. While these components are designed as basic building blocks, they’re also highly customizable through style overrides and can be configured in many ways.  

13. The Guardian Digital Design System

The Guardian digital design system is a visually stunning set of guidelines you can scroll through page by page. It starts with a high-level webpage overview, followed by more granular elements such as:

• Fronts
• Containers
• Cards
• Articles 

For example, the card sizes and types options are available within the card pages. The design system also demonstrates how the design team treats color, typography, layout, rules, and spacing.  

14. BBC Global Experience Language

Media Giant BBC shares its design system via its Global Experience Language. Its design system includes foundations — such as how to design with motion to establish a connection with a product — to create patterns, including information about accordions that offer a vertical list of headers that users can interact with to reveal or hide their content. 

The media giant said that BBC’s Global Experience Language shares how-to information, such as tailoring UX research to provide insights for effective website copy.

15. Cisco Momentum Design

Cisco wants to share its Momentum Design System with those upgrading their websites with Webex products. It offers ways to create a shared design language, serving as building blocks for all of Webex’s products with:

• Tokens
• Components
• Icons
• Personality

Under its tokens, for example, Cisco notes Webex’s typography uses type to establish a visual hierarchy through style, layout, and color to support communication efforts.  

16. Shopify Polaris: Best for Intuitive eCommerce Websites

The Shopify Polaris Design System is purpose-built for creating intuitive, efficient, and stylish 

eCommerce websites. Designed with the needs of online merchants in mind, Polaris simplifies shop management through components and patterns that streamline workflows and improve the merchant experience. 

Polaris also excels in internationalization, offering guidelines for designing and building globally adaptable products. This ensures merchants can easily cater to international audiences, improving accessibility and usability across regions. 

Key Features

• Focus on Merchant Needs: Tailored for online merchants, providing workflows and admin experiences that enhance shop management and streamline operations. 
• Internationalization: Offers guidelines for building globally adaptable products, supporting diverse audiences and expanding commerce reach worldwide. 
• Pro-Design Language: Balances efficiency, intuition, and style, delivering dynamic, data-rich views and action-driven interfaces that support decision-making. 
• Comprehensive Business Icons: Over 400 icons designed for eCommerce businesses and entrepreneurs enrich the platform's visual language. 

Shopify Polaris goes beyond a typical design system by profoundly understanding the eCommerce landscape. It's a powerful toolkit that not only streamlines the creation of intuitive online stores but also considers the global nature of today's businesses, allowing Polaris to lead as a powerful design system for modern eCommerce today.  

17. Hewlett Packard’s Grommet

Hewlett Packard’s Grommet is a reach-based framework providing accessibility, modularity, responsiveness, and theming for app development. Its attention to accessibility and responsiveness is particularly noteworthy.

18. Indiana University’s Rivet

Indiana University’s Rivet helps the university's team work together more effectively, creating a seamless, consistent user experience. Rivet includes well-made tutorials and allows users to explore past versions to understand its evolution.  

19. Buzzfeed’s Solid

“Wtf is Solid” is the opening line on Buzzfeed’s design system site. Solid uses immutable, atomic CSS classes for rapid prototyping and feature development, providing consistent styling options and flexibility.  

20. U.S. Web Design System

The U.S. Web Design System features:

• An open-source community of engineers
• Content creators
• Designers
• Contributors

It supports numerous U.S. government agencies and nearly 200 sites.  

21. Duolingo Brand Guidelines

Duolingo’s Brand Guidelines is an excellent example of a design system focused on branding and content creation. It focuses on creating a common design language across all its communication mediums. In terms of visual design, the system includes extensive guidelines on its:

• Brand identity
• Illustration
• Use of color
• Other marketing resources 

Design Lead at Duolingo, Jack Morgan, explained to Dribbble, “Duolingo Design System was our first ever attempt at creating a shared library for Duolingo’s visual language. I combined my branding expertise with my love of detailed systems design to create the Duolingo Design System with the initial goal of allowing designers at Duolingo to build in 60 seconds screens that would’ve taken 10 minutes before, all without restricting creativity.”

How To Create a Design System and Implement It for Your Company

Take Inventory of Your Current UI Components

Before you create a design system, assess the state of your current user interface. Take stock of every page, template, and component your business uses. What works well? What doesn’t? Are there glaring inconsistencies across your pages or products? Examine the following:

• Color schemes
• Typography
• Icons
• Photos
• Logos
• Templates
• UI patterns

This inventory provides a clear picture of your current landscape and helps you identify what needs improvement or standardization. If you’re starting fresh as a new business, think critically about these elements; you’ll be creating them soon enough.

Get Stakeholders on Board with the Changes

Change can be challenging, especially when it involves something as fundamental as how your design team operates. Starting a design system will affect how your designers, developers, and other stakeholders work and communicate. 

So, show your team the benefits: faster workflows, fewer inconsistencies, and easier collaboration between designers and developers. If anyone hesitates, your findings from step one can prove why a design system is necessary.

Define Your Color Palette

Tackle the colors. Simplify and standardize your palette. Instead of dozens of grays, pick one or two. Define precise HEX, RGBA, or HSL codes for each color, from primary branding hues to link and button colors. Clear guidelines on when and where to use these colors will keep your designs harmonious.

Nail Down Typography

Your text choices are just as crucial as your colors. What fonts do you use? How big are the headers? What about line spacing or bold weights? Whether you already have a style guide or are starting from scratch, include detailed instructions for typography. Define everything from font sizes to custom kerning rules, ensuring consistency across all platforms.

Gather Graphic Assets

This step is like building a treasure chest for your team. Collect every graphic asset your company uses:

• Logos
• Icons
• Photos
• Illustrations
• Branding imagery

Include rules for their use, like minimum logo sizes or preferred file formats, and provide documentation or code snippets to make it easy for developers to integrate them.

Build a Pattern Library

UI patterns are the reusable design elements that give your site or app its distinct personality. Think of dropdown menus, navigation bars, or search functions. Standardize how these components look and behave, and include code snippets or usage guidelines to help developers implement them correctly. Organizing them into categories, like “navigation” or “forms,” makes them easier to find.

Centralize Everything in One Document

Once you’ve figured out your elements, you need a single, accessible place to house your design system. Use a dedicated design system platform or a shared workspace to upload your assets, documentation, and guidelines. Make it intuitive so team members can easily find what they need.

Implement Governance for Long-Term Success

Your design system isn’t a “set it and forget it” deal. It’s a living document that grows and evolves with your brand. Schedule regular reviews (quarterly, annually, or as needed) to update components and refresh guidelines. Offer training sessions to keep your team up to speed on any changes.

Monitor and Iterate

Perfection doesn’t happen overnight. Gather feedback from designers and developers who use the system and adjust accordingly. Regular team surveys or feedback meetings can highlight areas for improvement, helping you fine-tune your system over time.

Ion transforms your Figma designs into production-ready code, perfectly aligned with your existing codebase and business needs. Our platform bridges the gap between design and development by automatically generating functional code that matches your specific components, styles, and design system. 

We've created a unique solution that empowers non-technical team members to implement visual changes without engineering intervention. Our tool understands your CI/CD pipelines, testing requirements, and component architecture, ensuring that generated code fits seamlessly into your workflow. 

Whether you're updating design elements or creating new features, ion helps unlock engineering resources by letting designers and product teams contribute directly to the codebase in a safe, controlled way. Start building your application for free today with our design-to-code tool.

Related Reading

• Design System Governance
  
• What is a Design System
• Design System vs Component Library

Why Do You Need A Design System?

Design systems are essential in today's digital environment. In fact, 65% of companies reported using design systems in 2020, which is expected to rise. Studies have also shown that design systems can reduce development time by up to 37%. Why are they so impactful? Let’s explore the benefits.  

Consistency: The Ultimate Goal of a Design System

A design system is a single source of truth, ensuring a consistent look and feel across all platforms and touchpoints. This strengthens brand identity and improves user recognition by providing a familiar and predictable experience.  

Efficiency: The Time-Saving Power of Design Systems

Design systems streamline the design process by providing reusable components and patterns. This saves time and resources, allowing teams to focus on innovation and problem-solving instead of reinventing the wheel.  

Scalability: Design Systems Support Growth

With a design system in place, scaling products and features becomes significantly more efficient. Consistency is maintained even as the product or company grows, preventing design fragmentation and ensuring a unified user experience.  

Improved Collaboration: How Design Systems Foster Teamwork

Design systems foster better communication and collaboration between designers, developers, and stakeholders. They provide a shared language and understanding, facilitating smoother workflows and reducing misunderstandings.  

Enhanced Brand Identity: The Marketing Benefits of Design Systems

Design systems reinforce brand identity across all platforms by ensuring a consistent visual language and user experience. This creates a strong brand presence and fosters user trust.  

Reduced Maintenance: The Long-Term Benefits of Design Systems

Design systems can reduce long-term maintenance efforts by providing a centralized source of truth for design and code. This minimizes inconsistencies, redundancies, and the need for constant updates across various platforms.

Related Reading

• Benefits of a Design System
• Best Design Systems
• How to Create a Design System

Start Building Your Application for Free Today

Ion is a tool that helps designers move faster by transforming Figma designs into production-ready code. The first step in most projects is to create a visual representation of the final product. Figma is one of the most popular tools for this task. 

Ion accelerates the handoff from design to development by automatically generating functional code from Figma designs. Better yet, the code it produces is aligned with your existing:

• Codebase
• Business needs
• Design system 

Bridge the Gap Between Design and Development

Designers and developers speak different languages. This difference in communication creates silos that slow down product development. Ion reduces this friction by automatically generating code that matches your:

• Specific components
• Styles
• Design system

Our tool understands your CI/CD pipelines, testing requirements, and component architecture, ensuring that generated code fits seamlessly into your workflow. 

Empower Non-Technical Team Members

Visual changes are often small, but getting them into production can be lengthy. Engineering teams may have to drop what they do to implement the changes and update the codebase. Ion helps unlock engineering resources by letting designers and product teams contribute directly to the codebase in a safe, controlled way. 

Our platform bridges the gap between design and development by automatically generating functional code that matches your specific components, styles, and design system.

‍