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 Studio—which allows you to save custom site templates, text themes, color palettes and other components for reuse—you 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.
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.
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.
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.
07. Adobe Spectrum
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.
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.
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.
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.
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.
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.
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.
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.
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.
.png)
.jpg)
