top of page

15 outstanding design system examples from leading brands

Design systems help companies scale while maintaining a cohesive brand identity.

Design by Jean Lorenzo

Profile picture of Lillian Xiao

7.10.2024

11 min read

As your clients scale their digital efforts, they need a standardized design language that can scale with it. How can you ensure all of their touchpoints offer similar, on-brand experiences?


That’s where design systems come in. With a well-thought out system in place, your agency can put collaborative design into practice, ensuring designers with varying roles, skills and expertise all create with the same set of guidelines.


Design systems act as a single source of truth, enabling teams across projects and time zones to create products that offer a cohesive user experience. Whether you’re building an app, creating guidelines for using components on your client’s website, or designing assets for use on social media, a well-crafted design system ensures each channel feels like a part of the brand’s bigger picture. 


And with the help of a platform like Wix Studiowhich allows you to save custom site templates, text themes, color palettes and other components for reuseyou can build, share and reuse design systems seamlessly. Check out the full range of Wix Studio design capabilities, as well as other brands’ design systems below for inspiration when building your clients’ design system.





What is a design system?


A design system is a collection of reusable components and assets, guided by clear rules for how to use said elements. It provides resources, guidelines and a shared language for anyone involved in designing and building a product, service or brand.


Within a design system, you can find both a style guide and a pattern library. You might also find a set of shared values and beliefs that define what a well-designed product or brand looks like. It’s a central source of knowledge for teams working across products and platforms to ensure exceptional user experience for their customers. 


Oh, and as for design systems vs style guides? They’re related, but style guides are smaller than design systems. Style guides focus solely on components, design tokens, pattern libraries and guidelines, whereas a design system is more macro, and goes beyond visual design to embody a centralized resource to manage design at scale. Think of it as the difference between designing the UI (style guides) and the UX (design system) of a product.


There are various tools you can use to apply your design system, store its different components and share them across your team. One such web tool is a design library, which allows you to build a reusable collection of typography themes, color palettes and design assets for every web project.



Why are design systems important?


Design systems help teams work in a more unified way, with components, assets, a code repository and guidelines all located in one place. 


With the help of design systems, a designer can quickly mock up a series of prototypes with ready-made UI components. A programmer can copy and paste a pre-tested code snippet to the page they’re working on. A marketer can easily find content guidelines and brand imagery to craft their email. When these efforts are combined, they result in a consistent brand identity and cohesive experience for the end customer.


Design systems also require careful up-front deliberation from programmers, engineers, designers, researchers, writers, product managers and company leadership. By codifying the most important brand values and beliefs, teams can work together more effectively through a shared vocabulary and approach to evaluating their work.


Finally, design systems help companies scale their design and development efforts. They enable companies that are elaborate ecosystems with multiple teams, platforms and products to stay aligned and unified in their work.



What to include in a design system


Design systems typically include the following:


  • Overview. This section provides an overview of the design system, which is particularly important for more complex systems. It can mention the new updates to the system, or a list of principles and shared values that define what good design means for the organization.

  • Foundations. These are visual or style guidelines that cover color, typography, iconography, imagery, sound, motion and more.

  • Components. This is a library of reusable UI elements, expressed both visually and via code. The UI components are typically crafted to work together, through a combination of user research, performance testing, and accessibility evaluation. Components are typically accompanied by a set of guidelines or rationale around how and when they should be used.

  • Patterns. This is a library of reusable component combinations. Patterns represent best practices for arranging the components together to help solve common user needs.

  • Content guidelines. This section covers standards around voice and tone and the mechanics of grammar and style. It might also include a list of words and how they should or should not be used.

  • Brand guidelines. Some design systems include brand guidelines, which outline brand values, personality, a brand promise, or a showcase of the brand out in the world.

  • Resources. This section can include a range of tools, plug-ins, UI kits, articles, and video tutorials that support the entire creation process.



Design system examples


Let’s look at 15 examples of design systems created by the world’s top companies:



01. The Wix Studio Design System 


Wix Studio's Design System offers a comprehensive toolkit for developers and designers to craft beautiful and intuitive product experiences. We use it to create our website pages and Wix Studio applications.


The Wix Studio Design System offers:


  • A library with core UI components

  • Various sets of design patterns for use in different contexts

  • A Figma kit with components, icons, and ready-to-use page templates

  • Detailed component documentation, including demos and props reference

  • A sub-brand for developers with the same DNA but a different vibe

  • An interactive playground for hands-on exploration

  • Gradient usage guidelines

  • Wix Studio color palettes

  • Wix MadeFor font


For developers, the Wix Studio Design System includes a React library of core reusable components. This library streamlines the rapid prototyping and development of Wix-styled applications. For designers, the Wix Studio Design System includes a Figma kit to integrate Wix Studio design assets into their design workflow. This kit fosters enhanced collaboration and iteration throughout the design process, simplifies cooperation with developers, and ensures adherence to Wix Studio's visual standards.





02. Google Material Design


Going on a decade strong, Material Design has inspired many other companies to adopt their own design systems. It builds upon the metaphor of material, meaning that components are created to mimic the physical world and its textures (such as how objects reflect light and cast shadows). The idea is that when components behave like real-world objects, they become more familiar and predictable, which in turn reduces cognitive load for users.

 

Material Design is comprehensive and covers an array of topics ranging from design principles like color, typography, and iconography, to UI components–many of which are available as open source–to code documentation and other resources.

 

In 2018, Google introduced Material Theming, which extends Material Design principles to other brands, allowing designers to style components according to their brand’s 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 components can be styled to fit any product, ranging from a finance app to an eCommerce app.



Google Material Design



03. 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 and Wallet.

 

Under each platform, you can find guidance on app architecture, user interaction, system capabilities and visual design. Each section offers in-depth guidance on the intended use of each interface element and the rationale behind it. The goal is to ensure that apps offered 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.


A screenshot of the Apple Human Interface Guidelines design library
Apple Human Interface Guidelines


04. 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 and macOS. Last year, Microsoft announced Fluent 2, touted as the next evolution of the design system which enables 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 that people use throughout their day (like tablet and mobile), plus experiences that are 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.



A screenshot of color pickers on the Microsoft Fluent Design System
Microsoft Fluent Design System


05. Salesforce Lightning Design System


Created nearly ten years ago, the Salesforce Lightning Design System is an excellent example of a design system that’s evolved over time. 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, and flows, and helps developers focus on application logic. 

 

Salesforce also pioneered the use of 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 entire product experience. They allow for a consistent visual system that's also much simpler to scale.



A screenshot of the Salesforce Lightning Design System website
Salesforce Lightning Design System


06. Atlassian Design System


Atlassian recently introduced their new design system, which is a combination of two older sites (Atlassian Design Guidelines and Atlaskit). Prior to 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 together 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 brand promise. It also lays out guidelines for foundations, components, patterns, content and resources to help simplify the creation process.



A screenshot of the Atlassian Design System website
Atlassian Design System



Available to the public since 2019, Spectrum defines 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 all the variants and properties of a given component, with direct access to its documentation. Stay on the lookout for Spectrum 2, the next iteration of Adobe’s design system set to launch some time this year.



Elements from the Adobe Spectrum design system
Adobe Spectrum



The IBM Carbon Design System is an open-source system 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 how to contribute components and patterns, report issues or provide 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 its visual language guidelines.



IBM Carbon Design System



09. GitLab Pajamas


GitLab is a repository manager which lets teams collaborate on code. It’s an open core product (meaning its a software that combines aspects of both open and closed source models), with over 2,000 community contributors. The Pajamas design system ensures GitLab’s contributors are provided with the resources and know-how for contributing 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.



Elements from the GitLab Pajamas design system
GitLab Pajamas


10. Mailchimp


Mailchimp is a marketing automation platform and email marketing service. In 2018, Mailchimp updated their 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 and components. It has an impressive data visualization section, offering detailed guidance on how to tell a clear and compelling data story. The guidelines include color groupings that are optimized for visual harmony, consistency, predictability and 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.



The Mailchimp brand colors on their design system
The Mailchimp design system


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 and resources, with emphasis on design for the web. Each component displays different variations and states, interactive demos, code snippets, and 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 and examples of how writing should be structured within different web elements.



A screenshot of the ETrade Design Language website
ETrade Design Language


12. Uber


Uber’s design system covers nine main elements: logo, color, composition, iconography, illustration, motion, photography, tone of voice and 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’s 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 different ways.



Visual elements from Uber's design system
Uber's design system


13. The Guardian Digital Design System


The Guardian digital design system is a visually stunning set of guidelines that you can scroll through page-by-page. It starts with a high-level overview of what a webpage consists of, followed by more granular elements such as fronts, containers, cards and articles. 

 

Within the card pages, for example, you can see the different options available for card sizes and card types. The design system also demonstrates how the design team treats color, typography, layout, rules and spacing.



A screenshot of the The Guardian Digital Design Style Guide website
The Guardian Digital Design System


14. 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 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 includes visual and style guidelines, as well as diverse guidance around marketing, corporate sounds, motion pictures and dealership branding.



The Audi logo, typography and digital presence from their design system
The Audi design system


15. SAP Fiori for Web


SAP (Systems, Applications and Processing) is an enterprise software applications provider that helps businesses of all sizes run better. The company’s software acts as a centralized system that allows departments to access and share data, and at the heart of these different software is the SAP Fiori for Web design system. 


Built with the company’s SAPUI5 framework, which is a collection of user interfaces for web apps, the company places an emphasis on designing for common components, including navigational elements, tables and user inputs. Big picture, the brand includes guidelines for general principles, using layouts, patterns and controls, as well as concrete guidance to execute a user-centered approach to designing SAP Fiori apps.



SAP Fiori Design System
The SAP Fiori Design System


Lay the groundwork for your clients’ brand with a design system


Through these design systems, we can see companies taking a variety of approaches to ensure exceptional user experience across their digital products and services. 


While design systems are standardized to help companies scale their design and development efforts, they’re also living systems that are ever-evolving. It’s important to ensure room for growth and experimentation as new design tools and approaches are introduced. Especially as new technologies are adopted (such as voice design, AI or off-screen interfaces), design systems will need to keep evolving with the pace of innovation and change.




RELATED ARTICLES

Design systems and style guides are different. Here's how.

NICK BABICH

13 examples of 404 page designs with best practices for creating your own

AARON GELBMAN

How user journey mapping can elevate the user experience

LILLIAN XIAO

Find new ways FWD

Thanks for submitting!

By subscribing, you agree to receive the Wix Studio newsletter and other related content and acknowledge that Wix will treat your personal information in accordance with Wix's Privacy Policy.

Do brilliant work—together

Collaborate and share inspiration with other pros in the Wix Studio community.

Image showing a photo of a young group of professionals on the left and a photo highlighting one professional in a conference setting on the right
bottom of page