Imagine you're part of a product team in charge of building a web application. As the designer, you have been working on the design for a few weeks and are finally ready to hand off the files to the developers. But as you prepare your files, you realize the design is not simple. The more you look, the more you see that the design is full of inconsistencies, and it will take a lot of work to make it developer-friendly. What’s worse is that you are unsure if the design follows the existing style guide the team has been using. A design system enhances team collaboration, improves designs, and streamlines handoffs. This article covers what a design system tools is, gives examples, and shows how to create one.

One valuable tool that can help you learn about design systems and create one for your next project is Ion's design-to-code tool. Ion can help you automate tedious tasks like generating documentation and coding components to help you build a design system quickly and efficiently.

What is a Design System?

Design systems contain a collection of reusable components and standards, which help teams create cohesive digital products. Identify your designs' existing elements and patterns to build a design system. 

Then, make a living documentation that catalogs these assets for easy access and future reference. As you iterate on your product and designs, this documentation will evolve, helping your team maintain consistency and streamline their workflow.

Why You Need A Design System?

When implemented well, design systems can provide many benefits to a design team. Design (and development) work can be created and replicated quickly and at scale. The primary benefit of design systems is their ability to reproduce designs quickly by utilizing premade UI components and elements. Teams can continue to use the same elements repeatedly, reducing the need to reinvent the wheel and thus risking unintended inconsistency.

Frees Up Design Resources to Focus on Complex Problems

It alleviates strain on design resources to focus on more significant, complex problems. Since more straightforward UI elements are created already and are reusable, design resources can concentrate less on tweaking visual appearance and more on complex issues like: 

• Information prioritization
• Workflow optimization
• Journey management

While this payoff might seem small when you create only a small number of screens, it becomes substantial when you coordinate efforts across dozens of teams and thousands of screens.

Creates a Shared Language Between Cross-Functional Teams

It creates a unified language within and between cross-functional teams. Especially when design responsibilities shift, or teams become geographically dispersed, a unified language reduces wasted design or development time around miscommunications. 

For example, the functionality or appearance of a dropdown menu would not be debated since that term is reserved for a specifically defined element within the design system.

Ensures Visual Consistency Across Products and Teams

It creates visual consistency across products, channels, and (potentially siloed) departments. Mainly when teams work in silos, where each product or channel operates independently of the others, the absence of an organization-wide design system can lead to inconsistent visual appearance and experiences that seem fragmented or unrelated to the brand. 

Design systems provide a single source of components, patterns, and styles and unify disjointed experiences to be visually cohesive and appear part of the same ecosystem. As a bonus, the design system can manage any major visual rebrands or redesigns at scale.

Serves as an Educational Reference for New Team Members

It can be an educational tool and reference for junior-level designers and content contributors. Explicitly written usage guidelines and style guides help onboard individual contributors new to UI design or content creation and also serve as a reminder for the rest of the contributors.

Building a design system isn’t easy, but the payoff is undeniable.

ion: Figma to Production Code

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
• 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
• 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 Documentation
• Design System vs Style Guide
• Design Handoff

15 Best Design System Examples to Learn From

1. Google Material Design

Material Design is a design system developed by Google to create visual, motion, and interaction design guidelines for native and web apps. Launched in 2014, Material Design is now on version 3, offering a more flexible approach to building interfaces. Aimed at helping developers create intuitive, attractive, and user-friendly applications, Google’s Material Design has become one of the most popular design systems. It has inspired many organizations to create their design systems. 

Material Design is grounded in the concept of physical surfaces and how they interact, which makes it easy to create digital interfaces that feel familiar to users. The more components of a digital interface mimic the behaviors of real-world objects, the more predictable and intuitive they become. For example, Material Design includes interactive components that “react” when a user hovers over or clicks on them. 

These design elements may change:

• Color
• Ripple
• Animate 

To provide visual feedback about the user’s action. Material Design also supports accessibility by outlining how to create understandable, usable interfaces for people with disabilities. 

A key feature of Material Design is its extensive component library, which includes:

• UI components
• Layouts
• Motions

Material Design: Open-Source Flexibility

These components are open-source to help designers and developers build better products. The design system also offers detailed documentation and resources to help teams get started. In 2018, Google introduced Material Theming, which extends Material Design principles to other brands, allowing designers to style components according to their needs. 

It added much-needed flexibility to the system by offering ways to customize a single set of components. A series of hypothetical case studies, called Material Studies, demonstrate how elements 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
• Paradigms
• 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. Finally, the site consists of:

• Visual and style guidelines and 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, such as:

• macOS
• iOS
• watchOS
• tvOS
• visionOS)

The brand has additional guidelines organized by tech vertical, covering 28 additional branded elements such as:

• CarPlay
• HomeKit
• Augmented Reality
• iCloud
• Wallet, etc. 

Under each platform, you can find guidance on:

• App Architecture
• User interaction
• System capabilities
• 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
• 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 such as:

• Light
• Depth
• Motion
• Material
• 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
• It helps developers focus 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, a combination of two older sites:

• Atlassian Design Guidelines
• Atlaskit

Before introducing the new system, Atlassian’s design guidelines and code documentation were hosted on separate sites, leading to 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
• Promise

It also lays out guidelines for: 

• Foundations
• Components
• Patterns
• Content
• 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
• Design resources

It is connected to a community of contributors. It aims to improve:

• UI consistency and quality through clear,
• Discoverable guidance around design
• 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
• 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
• 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 essential 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 consists of:

• Foundations
• Components
• Patterns
• Resources

With an emphasis on design for the web. Each component displays:

• Different variations and states
• Interactive demos
• Code snippets
• Usage guidelines that include examples of correct and incorrect usage. 

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
• 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
• Iconography

As well as essential elements like:

• Buttons
• Lists
• 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 overview of a webpage, followed by more granular elements such as:

• Fronts
• Containers
• Cards
• Articles

For example, you can see the options available for card sizes and types within the card pages. The design system also demonstrates how the design team treats:

• Color
• Typography
• Layout
• Rules
• 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 also shares how-to information, such as tailoring UX research to provide insights for compelling 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.

Related Reading

• Design System Governance
  
• Design System vs Component Library

How To Create and Implement a Design System for Your Company

Evaluate the Current UI Inventory and Note Inconsistencies

Before creating a design system, evaluate your UI inventory and note inconsistencies. Take stock of every digital asset, including pre-existing reference materials. Aim to create a universal guidebook and resource library to include everything possible, so be thorough in your review. 

Specifically, look for inconsistencies in the following areas:

• Color schemes and how each color is used
• Stylistic text choices
• Icon libraries 
• Photo libraries
• Other graphics (especially logos)
• UI patterns
• Page templates

If you’re a new startup and don’t have any finalized design elements to review, think critically about each of these areas to determine the choices that best fit your brand. Later, you’ll have to create a master list, so it’s never too soon to start deciding on these.

Get the Entire Team on Board

Get the entire team on board with creating a design system. True, you could do this step first. Even so, evaluating existing UI inventory first gives your argument leverage if you’re met with resistance—nothing like a laundry list of design inconsistencies to get naysayers on board. 

Regardless of how many errors you collect, highlight to the team the efficiency bonuses of using a centralized design system. 

Repeat everything mentioned above in the introduction, and accent the amount of time and work a design system saves by streamlining the entire design process from beginning to end. A common complaint about design systems is that the company doesn’t have time to set aside for a side project. The truth is design systems make up that time — and much, much more — in the long run.

Color Palette

Now we get into the nitty-gritty of design systems: creating a master list of all your design choices, whether choosing among existing elements or creating them from scratch. You should rectify the inconsistencies from the first step before adding them to the master. Your color palette is a good place to start. Maybe you’ve noticed the company uses over a hundred shades of gray. 

How much easier would it be if everyone just used one shade, and that one could be grabbed in a readily available design system? Identify your chosen shades and hues for every color you use repeatedly, and write definitive guidelines. Of course, this includes your primary branding colors, but pay attention to your secondary colors. 

For example:

• What color is your text?
• Your links? 
• Special buttons? 
• Backgrounds? 

To be precise, remember to include HEX, RGBA, or HSL codes.

Typographic Elements Guide

Next, review and finalize your typographic choices. If you already have a style guide, most of the work is done for you. If not, this free style guide eBook will tell you what you need. Design systems can be more technical than static style guides, so take advantage of this. Note your preferred text sizes, spaces, fonts, etc., and any rules on where and when to use them. 

For example:

• How big are section headings in your blog articles? 
• What font do you use for on-site calls-to-action? 
• Don’t neglect the fine details, likesome text
  • Font weights
  • Line heights
  • Custom kerning rules, if applicable

Graphic Design Assets

A well-made design system allows you to drag and drop visual components into your new prototype. The more graphic design assets you collect in a design system, the faster your workflow for future projects will be. Don’t forget to include the proper code snippets or any other documentation developers may need. This slight inclusion is an enormous help during the development stage. Among your graphic design assets, you’ll need libraries for: 

• Icons :  All the icons your products, apps, or sites use. Having a standardized icon library ensures consistency across your entire brand. 
• Photography : A single go-to reference for all your company photography, custom, and purchased stock photos. Pulling these from a design system is easier, allowing workers to browse the selection for ideas and inspiration.
• Illustrations : Compile all your commissioned custom illustrations, including page flourishes or border designs. 
• Branding images : This is a place for your standardized logos and other branding images, like mascots. 

Rules for logo usage can get strict, so it’s better to pull pre-approved images to ensure compliance. Moreover, you may want to include a list of design principles for everyone to follow when creating a new graphic asset. Sizes, colors, compatibilities, preferred file formats — having a rulebook helps ensure your company’s style remains intact in the future.

Pattern Library

Finally, include a pattern library of all your common design elements, especially interactive ones. There may be some overlap between UI patterns and graphic assets, but overall, your UI patterns are more advanced than stagnant visuals. To be clear, UI patterns are any design elements you use consistently for the interface of your site, app, or product. 

For example, you treat your search function as a UI pattern, including how the magnifying glass icon looks, whether the input window expands or remains open, where it’s located on the screen, and whether you include placeholder text. Don’t forget, once again, to include code snippets and other development documentation. This is even more significant for UI patterns, as they tend to be more technical. 

Organizing UI Patterns Effectively

When organizing your UI patterns, include usage notes to clarify how to use them. It also helps to use screenshots or visual cues to make searching for them more manageable. It also helps to organize your pattern library into subsections. Try categorizing them by function, such as “navigation,” or by type, such as “drop-down menus.

Upload the Selected UI Elements in a Design System Document

Lastly, you need to house your design system somewhere that’s convenient and easily accessible. There are Design Systems platforms created for this in particular, with template-like formats where all you have to do is input your components in the appropriate space or upload them. 

You can also drag and drop your elements into the prototyping software, which means easy, DIY designing and a fully-coded handoff to developers with complete documentation (full markup, information about imports, and names of javascript components, etc.). 

Implement Design System Governance

Design systems are rarely static. As your brand or product develops:

• New components must be added
• Style guides updated
• Guidance refreshed

To keep up with these changes, regular reviews of the design system will help ensure it remains a valuable asset for your team. This could be quarterly or annual, depending on how complex your design system is. Regular refresher training on the design system as you update your design system also ensures new and existing team members are kept up to date.

Monitor and Improve Your Process

It’s unlikely that any design system will be perfect right away. Ensure you get feedback from the designers and developers who use it to see what improvements can be made. As part of your governance structure, team surveys and feedback sessions can be incorporated into any updates plans you make during regular design system reviews.

Start Building Your Application for Free Today

Ion is a tool that automates design system implementation with design-to-code functionality. The platform transforms your Figma designs into production-ready code that is aligned with your:

• Existing codebase
• Business needs
• Design system. 

This process helps bridge the gap between design and development by automatically generating functional code that matches your specific components, styles, and existing design system. 

Ion empowers non-technical teams to implement visual changes without engineering intervention. 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.

Related Reading

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