top of page
Profile picture of Lillian Xiao

1.25.2021

9 min read

13 outstanding design system examples from leading brands

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

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

Illustration by Amit Asulin

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. 

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.


Launch your new design system with a responsive site on Editor X.


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 acco