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. Oh, and a design system is different than a style guide.
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.
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:
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.
Apple’s Human Interface Guidelines are for those who design, develop, and distribute apps through Apple’s platforms (macOS, iOS, watchOS, and tvOS). These are supplemented by additional guidelines organized by technology area, which cover anything from augmented reality to CaryPlay to HomeKit.
Under each platform, you can find guidance on app architecture, user interaction, system capabilities, visual design, and more. 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.
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.
Fluent 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 (from tablet to phone), to 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.
Created in 2015, the Salesforce Lightning Design System 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 to 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.
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 weaved content and code together from both sites so that designers, developers, and content designers had 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.
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.
The IBM Carbon Design System is an open-source system for all IBM 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.
GitLab is a repository manager which lets teams collaborate on code. It’s an open core product, 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, enhanced code implementations, and more.
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 according to an atomic design approach, as they’re labelled 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.
9. 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.
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.
11. Uber
Uber’s design system covers 9 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.
The Guardian digital design style guide 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 style guide also demonstrates how the design team treats color, typography, layout, rules, and spacing.
13. 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 also includes visual and style guidelines, as well as diverse guidance around marketing, corporate sounds, motion pictures, and dealership branding.
Final thoughts
Through these design systems, we can see companies taking a variety of approaches to ensure exceptional user experience across its 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.
.jpg)
