What is a Design System? A 2024 Guide With Best Practice Examples

As UI design and development has evolved over the last few decades, so too has the complexity and scale of websites and digital products. It's not uncommon for applications to have thousands of different pages, design patterns, and individual design components and visual elements.

But how do world-class companies like Apple, Google, and Spotify build and scale their digital experiences efficiently with thousands of employees worldwide?

In this short guide, we'll define design systems and user interface kits (UI kits), explain the benefits of using and creating a design system, review its pros and cons, and discuss the essential differences between UI kits and design systems.

Let's start by exploring what a design system is.

What is a design system?

A design system is a collection of reusable UI elements that product teams use and build on to create a consistent user experience across digital products.

A design system keeps the visual design and visual language of digital products consistent, acting as a "single source of truth" for product teams, designers, and developers.

A great way to think about design systems is as the "design language" and "design philosophy" of a product or company:

• Various UI components
• Code components and code snippets
• Design files and design elements
• Style guides (typography styles, color palettes etc.)
• Design guidelines (design patterns, visual styles, and best practices)
• Design process and visual design guidelines
• Content guidelines and style guides
• Other design resources (documentation, articles, design principles, and design philosophy guidelines)

A design system is more than just the building blocks of a product; it acts as a design philosophy and the visual language of a product and brand. As a single source of truth, an effective design system keeps entire product and design teams on track and consistent while reducing design debt along the way. When design teams have clear best practices to reference, it's easy to create great user experiences.

How are design systems used?

Design systems act as a powerful North Star that can be referenced by a company's UX designers, UI designers, developers, and even marketers and content writers simultaneously, giving them instructions on developing a product's design consistently.

For example, suppose a developer needs to create a dropdown menu within a new feature in a product. While small design components like dropdowns and input fields may seem simple on the surface, they contain dozens of small design decisions. The developer will quickly run into a few questions:

• What does this component look like?
• How big is this component?
• What is the color palette for each UI element?
• How are the UI elements in the component spaced and sized?
• How does it open?
• What is the hover transition?
• What icons, typography, and colors should I use?
• What should the copy say? Are there content guidelines?
• What does the empty state look like?
• Do I need a designer to create one from scratch?
• Where can I find design files for this component?

These are incredibly important questions, but chances are a designer has already thought about these and designed a dropdown component for another page. With an existing design system in place, the developer can simply copy the code snippet of an existing dropdown component, and ensure that every aspect of it — spacing, typography, UX, hover states, etc. — behave exactly how the designer intended.

Similarly, if product designers or design team members want to make a change to a dropdown component, they can make these changes in one place and ensure the code components are updated so the change is reflected everywhere that component is used.

While working from a design system with existing design components may sound like a constraint, it actually removes decision fatigue and allows product teams to work faster and design and build better. Without a defined design system, you end up with messy and inconsistent visual styles and designs. Coming back to the example above; if a simple dropdown component looks and behaves differently across a product, it creates a confusing and poor user experience.

Do you need a design system?

Building and maintaining a design system can be a lot of work. Some design systems are simple and easy to maintain. Some are large enough that companies hire dedicated design system designers and developers who focus on simply maintaining them. You may be wondering whether or not you actually need a design system...

The answer, for the most part, is to avoid design debt. In simple terms, design debt is the accumulation of all the inconsistencies, imperfections, poor user experiences, and design processes that were skipped in order to reach short-term goals. Design debt is all the shortcuts a team has taken along the way that need to be addressed.

Accumulating design debt over time is natural and happens to every product. It’s a side effect of development. The important thing is that it is understood and managed before the cost, time, and resources required to go back and "fix" these problems are too high. Thousands of companies simply ignore it for too long and get flanked by competitors with far superior design and user experience and are unencumbered by design debt.

Building and maintaining a design system, even a simple one, from the start of your development process allows product teams to monitor and address design debt issues as they arise by keeping the design process consistent. We'll get into the benefits of using a design system a little more later.

It's important to note that you don't have to build a design system from scratch. Using a resourceful and high-quality design system is often a great way to start because they come with a large portion of already existing UI components, design guidelines, design files, and even code components and code snippets. 

With an effective design system in place, UI designers and product designers will be able to focus on finishing up their prototypes and improving their usability and functionality, rather than painstakingly recreating the same components over and over. On the other hand, developers won't need to spend hours on recreating existing code components — they'll already be available as part of the design system. 

Lastly, product managers will spend less time putting out fires and fixing design debt problems, so they can focus more resources on improving the products and new features.

If your product and design team is not using a design system to speed up your design and development workflow, chances are a competitor is and these small efficiencies compound over time until they're too much work to fix.

Pros and cons of using a design system

Read on to learn more about a design system's positive and negative aspects. 

Pros 

• Design (and develop) products faster: By using a design system, your team won't need to redesign and rebuild design components repeatedly and can move much faster than competitors.
• Save time and focus on important details: Save time rebuilding components and figuring out tiny details and instead focus resources on meaningful design decisions and improving other aspects of the product.
• Improved consistency: Keep everything consistent, organized, and maintainable right from the start, so everyone involved in the design process can stay on the same page.
• Quickly and easily make changes: Making changes to specific design components doesn't have to be complicated, with an efficient design system, product teams can make changes in one place and cascade these changes everywhere across the product.
• Create a unified and polished brand: By using a design system, you'll be able to unify a product's branding faster and speed up the product's development.
• Simplify quality control: With a design system in place, designers and developers can reference a single source of truth to simplify design reviews and spot inconsistencies, drastically simplifying the design and development process.
• Decrease in development expenses: Product development is expensive and time-consuming. Working from an existing design system saves time and money usually wasted on inefficient web development and fixing design debt.
• Develop a consistent outlook: By keeping everything consistent for everyone on the team, a design system helps leaders develop a clear brand and vision, which helps to create a long-term brand recognition strategy.
• Multi-functional participation: Everyone involved in the product design process can participate and collaborate without missing any part of the project — all the product teams will be up to date. 

Cons

• Take time to maintain: Design systems, like companies, are always evolving and changing. As such, product teams need to dedicate time and resources to maintaining and improving design systems.
• Decrease in creativity: As products scale, so too does their design system. With already established rules, content guidelines, and reusable design components, design systems can sometimes feel like they are limiting creativity.
• Less exploration and research: Similarly, when large teams use a design system, designers and developers can feel less inclined to research alternatives or explore alternative ideas and approaches.
• Takes time to learn: When implementing a design system or adapting an existing design system, some of your team members may have a difficult time adopting the new approach. This may lead to decreased efficiency and slow your design's progress rate. Thankfully, this is usually only short-term!

Examples of design systems

Many companies decide to make their design systems publicly available and even open source. These are great design resources for exploring how world-class companies think about design and approach design systems and their design and development processes. Here are some great public design systems:

Google Material Design 3

Google Material Design 3

The Material Design System by Google is a unified system that combines theory, resources, and tools for crafting digital experiences. Material 3 is the latest version of Google’s open-source design system and contains a huge library of UI components, icons, styles, source files, starter kits, code components, etc.

Apple Human Interface Guidelines

Apple Human Interface Guidelines

In-depth guidelines and UI resources for designing great apps that integrate seamlessly with Apple platforms. This design system consists of various templates, UI components, and design guidelines for iOS, macOS, vOS, and watchOS. You can easily download a large number of UI design tools, features, or style guides to improve your design workflow.

Microsoft Fluent Design System

Microsoft Fluent Design System

Microsoft Fluent is an open-source, cross-platform design system that gives designers and developers the frameworks they need to create engaging product experiences. It includes hundreds of free design elements (colors, layouts, motion, iconography, typography, etc.) that you can use on various platforms, such as Windows, Android, and iOS.

Atlassian Design System

Atlassian Design System

Atlassian offers a compilation of design tools, features, and guidelines that can help you develop your project management strategy and team collaboration methods, as well as improve your collection of product design tools.

Untitled UI Figma UI Kit and Design System

Untitled UI Figma UI Kit and Design System

Untitled UI is the largest UI kit and design system for Figma in the world. It's meticulously crafted with 100% Auto Layout 5.0, super-smart variants, Figma's newest variables features, and with accessibility in mind.

It's a great example of Figma design system best practices and is the most popular and highest-rated Figma UI kit on the internet with 2,150+ 5-star reviews!

Untitled UI was designed to be the "ultimate" UI kit and the perfect starting point for any kind of project — from beautiful marketing landing pages, all the way to complex dashboards and web apps — Untitled UI has thought of absolutely everything so you don't have to.

The team behind Untitled UI are constantly making updates and improvements to the UI kit and recently announced they've completely refactored Untitled UI to take advantage of Figma's latest features released at Config 2023, Framework 2024, and Config 2024. This includes all the latest Figma features such as color variables (dark mode), spacing, radius, typography, and effects variables, Auto Layout 5.0, min/max widths, Auto Layout wrapping, and much more.

They've also released Untitled UI PRO LITE, which is a premium and lightweight version of the full Untitled UI PRO STYLES kit and have included it for free. It's 55% lighter, faster, and is designed to include everything you need and nothing you don't. It's perfect for moving fast and for smaller projects!

You can check out a full preview of the design kit, or check out the 100% free UI kit here (which is more advanced than most UI kits in its own right!).

More examples of design systems

Here are a few more great publicly-available design systems:

• Polaris by Shopify
• Garden by Zendesk
• Pajamas by GitLab
• Evergreen by Segment
• Primer by GitHub
• Protocol by Mozilla
• Vercel Design System by Vercel
• Quickbooks Design System by Quickbooks
• Swarm by Meetup

Did you know governments often have their own design systems? These are used to help keep hundreds of different government departments consistent and unified. Here are a few more great publicly-available government design systems:

• U.S. Web Design Standards
• USPTO UI Design Library
• USA Jobs Design System
• State of California
• Bristol City Council
• City of Philadelphia
• Australian Government

How to create a design system

Whether you're starting a new project or midway through an existing project, you're probably considering the long-term benefits of using a design system if you aren't using one already. From here, there are three approaches to using a design system:

1. Adopting an existing design system that is already available.
2. Adapting an existing design system that exists and modifying it to suit your needs.
3. Creating your own custom design system from scratch.

Obviously, creating a design system from scratch involves considerably more time and money, but can be an important decision if your product is incredibly unique or if you have something specific in mind. Generally speaking though, it's much easier to adopt and adapt an existing design system like Untitled UI and customize it to your needs. Existing design systems have been well-thought-out and improved over time with best practices, so they can save you hundreds of hours of building and fixing mistakes.

However, if you're interested in creating your design system from scratch, there are four essential steps that you need to take: 

• Inventory audit. The first thing you need to do is audit an already existing product. By reviewing each design feature, you'll be able to create a library of all the visual features and reusable components that should be included in the design system. 
• Design language. The second step involves defining a specific visual language by creating design tasks and principles about particular digital products. During this process, you'll need to devise a plan for how to brand digital products and what visual elements you'd like to include (typography, color palettes, images, HTML/CSS, etc. — the building blocks).
• Pattern library. The third thing you'll need to do is create a pattern library. Pattern libraries contain various reusable design components that you'll want to include in the design system. The design patterns can be either perceptual (focused on visual style and aesthetics, such as typography, color palettes, etc.) or functional (focused on the design's structure). 
• Archive guidelines. The last step is archiving and documenting guidelines about each design element and when and how to utilize it properly. Anyone using the design system should have access to guidelines, so they'll be able to understand its purpose. These guidelines can also include advice on best practices.

What is a UI kit?

A UI kit is a large compilation of reusable and easy-to-use UI components, templates, styles, resources, and other useful digital assets that can be used to create user interface designs and websites.

UI kits are also referred to as user interface kits and UI design kits. UI kits generally consist of various user interface components and visual elements, notably:

• Icons
• Buttons
• Badges
• Inputs
• Checkboxes
• Toggles
• Avatars
• Tooltips
• Progress bars
• Text styles
• Color styles (color palettes)
• Effects styles
• Design elements (images and graphics)
• Widgets and other visual elements
• Templates and layouts
• Code components

By using a UI kit, designers can finish their projects in a shorter time since they won't need to recreate existing features that they can reuse from their UI kit.

Instead of spending hours creating new social media buttons or icons for your unique project, you'll be able to apply them from your already downloaded UI kit and spend more time focusing on other aspects of your project.

Like design systems, UI kits vary in size and style and are often platform-specific, which means they're designed for a specific tool (like Figma) or for a specific framework (like React). Similarly, many UI kits are built for designers specifically and don't include code components (e.g. HTML/CSS, React, Tailwind). A design system, on the other hand, often includes matching code components.

If you want to learn more, here are some of the most popular high-quality UI kits for Figma.

What is the difference between a UI kit and a design system?

The first and most obvious difference between a design system and a UI kit is that a design system contains a lot more additional documentation and design resources than a UI kit. As a matter of fact, a design system usually contains a UI kit, as well as everything else that makes up the entire visual language of a project or company.

Design systems include clear documentation — guidelines, examples, and frameworks for how to use the UI kit and reusable components correctly — so product teams can design and develop faster and consistently.

Here are a few key distinctions between design systems and UI kits:

• Versatility and usability: Unlike UI kits that are mostly used only by UI and product designers, design systems encompass everything else non-designers in the team require to do their job (i.e., developer documentation and guidelines). 
• Library updates and adjustments: A UI kit can be easily modified, especially in Figma. If the UI kit is constructed effectively, a simple modification to a single component or style will instantly update the whole library. Modifications to design systems typically require more manual modifications since they frequently consist of updating the documentation and other code components, depending on the complexity of the change.
• Project duration: UI kits are ideal for short-term projects that don't need further instructions and documentation. On the other hand, a design system can assist team members in organizing the whole development process of a long-term project and maintaining the consistency of all the modifications made by each team member. A fully developed design system will invariably become a necessity for designers, development teams, and project managers to collaborate effectively and consistently on long-term, more complicated products. 

Recap 

Whether you're a small startup or a large company with hundreds of employees, building and maintaining a design system is crucial for avoiding design debt and ensuring a polished and consistent user experience and consistent visual style and design principles.

Design systems are more than simply a compilation of reusable components, design patterns, style guides, and design guidelines to help operationalize and optimize your design efforts, they're a living and breathing representation of your design philosophy that anyone in your team can reference and improve over time.