13 outstanding design system examples from leading brands

Profile picture of Lillian Xiao

{date}

{#hash1}

{#hash2}

Illustrations by {name}

Through a collection of components and guidelines, design systems help companies scale while maintaining a cohesive brand identity.

9 min read

An array of design elements, including a logo, typography, photography and color gradients, taken from the Editor X design system.

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Design systems are changing the way we build products and services.


As companies scale their digital efforts, they need a standardized design language that can scale with it. That’s where design systems come in.


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. With a design system in place, companies can deliver well-designed products and services to their customers faster.



What is a design system?


A design system is a collection of reusable components and assets, guided by clear standards of use. It provides resources, guidelines, and a shared language for anyone involved in designing and building a product 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.


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 Editor X’s design libraries, which allow you to build a reusable collection of typography themes, color palettes and design assets for every web project.



The importance of design systems


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 13 examples of design systems created by the world’s top companies:



1. Google Material Design


Introduced in 2014, Material Design has since 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 e-commerce app.