Have any questions:

Call Us Today +1-843-592-9768

Email to info@coastalmediabrand.com

In: Web Design, Website Development

Design systems are the talk of the town lately! A design system is centralized documentation of all the different user interface components for designers and developers to reuse in their designs. It looks like an exhaustive library consisting of documentation, your brand’s style guide, and design components such as banners, buttons, headers, icons, and imagery.

A simple overview of what a design system might entail, by Adam Muflihun.

A design system can exist on a website or prototyping tool document (such as Figma or Sketch). If you are part of a large team at a corporation, having a design system can significantly reduce redundancy and save time spent designing.

Similar to a style guide, all designers can pick and pull components and patterns from the design system as needed. This can be quite handy when redesigning your brand, adding new products to your ecommerce site, or launching a new campaign across multiple channels. Even if you work solo or at a small startup, design systems can greatly boost both productivity and efficiency while solidifying your brand and design consistency. We’ll break down the essentials of a design system and how it benefits your business. Stick around for several examples of the best design systems!

A Deeper Dive

A meme from the movie Zoolander with text saying “Design systems, so hot right now.”
For many reasons, design systems are all the rage now, via Zoolander.

Why do I need a design system?

Design systems take significant amounts of money, resources, and time to build.

You might have to persuade stakeholders or other members at your organization why it’s necessary: they can greatly improve the user experience of your product or service, which will keep your visitors happy.

Having a design system is a great way to get multiple teams aligned on the same page. Designers, developers, and engineers can refer to the design system for guidelines for app and web elements. These guidelines consist of illustrations, images, sizing information across multiple devices, and templates.

At the core of any design system are design languages. These provide documentation on brand language and tone as well as any visuals. They guide users on how to use the design system and implement elements contained within it. A highly effective design system provides content and branding guidelines for marketing and social media teams. It can be used as a collaborative tool and create a unified language across all teams to communicate and work with.

Additionally, design systems prevent silos from happening, which is when individual teams create their own work without input from other teams. This will strongly impact brand consistency across all channels, products, and services. A design system can help boost the collaboration and productivity of an entire organization, improving workflows.

When and where to use a design system

If you’re concerned that your product or service looks and feels inconsistent, implementing a design system will streamline the product experience across all platforms.

Imagine you are in charge of developing a brand new neighborhood. Think about how it might accommodate all types of families and residents. You might create templates for homes of various sizes: a 2-bedroom home will have different accommodations than a 4-bedroom one.

Consider designing the homes to resemble each other to establish a common resemblance or design language. All homes would have similar appliances and bathrooms. Having organized housing templates for the neighborhood based on needs while retaining a shared language would greatly speed up the homebuilding process compared to designing and constructing each house individually.

A design system works the same way. If your team is struggling to quickly create new designs on a large-scale project, having a design system will swiftly speed up the process due to the ability to rapidly produce designs at a high scale. Training new designers? Onboard and familiarize new employees with your business brand and design guidelines within its design system.

Screenshot of a design system template for use in Figma.
Example of a design system template for use in Figma, via Dribbble.

Design systems take a lot of time to create and maintain. If you are working on a one-off project or small design, it might not be beneficial to implement one. For larger businesses and projects, however, the initial time invested will pay off dividends in the future. Invest time in the creation of a design system to save substantial time later on for all teams.

Who should be using them?

Honestly, everyone within your organization should be using and referencing its design system, including designers, developers, engineers, marketers, new employees, and anyone else across all teams. It can serve as documentation for your brand, products, and services. Anyone who is involved with your business’s offerings should have access to the company design system.

The Design System Checklist

What does a design system consist of?

 Sample design system checklist from a Figma template.
Sample design system checklist from a Figma template, via Figma Community.

Before getting started on a design system, determine what are your goals for it. Are you trying to streamline the design process across multiple products and services? Will the design system serve as a centralized place for all branding assets and documentation for all teams? Who will use it? Will this design system cover one project or multiple? Once you have the answers to these questions, you’ll be ready to create a design system. And as you work on it, remember to frequently discuss what will be included with stakeholders and other teams.

Here’s a design system checklist, by section, of what should be included within your design system:

Branding and Design Language

 Atlassian’s design system offers detailed guidelines for their tone and writing style.
Atlassian’s design system offers detailed guidelines for their tone and writing style, via Atlassian.

Your business’s design system should detail the language and tone of your brand. Let’s say you run an online makeup store. Documentation for your design language will provide clear instructions on which fonts, logos, and tone of voice to use on your website, mobile application, social media, and any other content.

In turn, this would bolster your brand’s consistency across platforms, which builds user trust and makes for a seamless user experience: ultimately making your cosmetics brand more appealing to potential customers.

Include guidelines for the following in this part of your design system:
  • Design philosophy and values—what’s your organization’s design process?
  • Language and tone guidelines
  • Terminology exclusive to your organization
  • Typography, covering fonts, readability, sizing, and spacing
  • Color palette, ensuring it passes accessibility standards
  • Logos, including when and where to use them, monochrome versions, and variety of file formats

Layout and Navigation

Alaska Airlines’ Auro Design System covers grids and layout.
Alaska Airlines’ Auro Design System covers grids and layout, via Alaska Airlines.

Be sure to incorporate rules for how users will navigate your website and mobile app. This is a great way to guarantee your navigation is consistent across different devices and platforms. You may also add layout and usability guidelines.

Add information pertaining to the following:
  • Units—how are your layouts measured?
  • Grids and breakpoints to establish hierarchy and organize navigation
  • Interaction—how are users interacting with elements?
  • Navigation and usability standards
  • Specifications for different devices and screens, such as desktops, smartphones, and tablets
  • Specifications for non-standardized devices, if applicable (legacy systems or peripherals)

Components and Patterns

Goldman Sachs’ design system includes robust documentation for many design components.
Goldman Sachs’ design system includes robust documentation for many design components, via Goldman Sachs.

Modular components cover interactive elements, including different styles for various use cases across your designs.

For example, let’s say you want to implement a dark mode theme to your website. Your design system can include dark-themed components which change the theme without affecting content, sizing, or other elements. It is imperative the details and documentation for this section are clear and thorough, as it will be the most used aspect of the design system. Here contains the instructions for how to design containers, dropdowns, menus, and many other elements.

All of these may be plucked and pasted into new designs, allowing for vast scalability and rapidly iterating numerous designs. Elements within a design system may be easily adapted and customized to fit unique pages or products without sacrificing consistency while adhering to your formatting rules.

Design these components to be modular and scalable to maximize efficiency:
  • Pattern libraries consisting of UI patterns, including buttons, icons and labels
  • Different states for buttons and links, such as hover, selected, disabled, etc.
  • Cards, forms, menus, dropdowns, and modals
  • Headers, containers, and footers
  • Charts, graphs, and any kind of visual data
  • Iconography, illustration, imagery, and video guidelines, including file formats and sizing
  • Interactive elements such as loading, scrolling, swiping

How to Implement Your Design System

Render of a brand guide covering the grid system guidelines of a product.
Now that you understand what a design system entails, it’s time to implement it, by Hugo Maja.

As mentioned earlier, the first step to implementing a design system is to persuade your organization and stakeholders why you need one. Determine how you will be making your design system. Will it exist in Figma, Zeplin, or another tool your organization uses? If your business uses Figma for wireframing and prototyping, stick to the same tool to create your design system.

On the other hand, if your business wants to switch design tools, it would be wise to do so before getting started on a design system. This saves tons of time from transplanting lots of information from one tool onto another. Once that is done, compile your business’s branding elements, including colors, logos, tone, and typography. After your components and patterns are created, provide documentation for each component so others know how to use them.

 Screenshot of Shopify’s instructions for its components section of its design system, Polaris.
Shopify has clear instructions across its Polaris design system, via Shopify.

Maintaining a Design System

Icon of a color wheel with an eye in the middle.
Always keep an eye on your design system, by Clicky.

When it comes to creating and implementing a design system, there are no exact guidelines or processes to follow. Every design system should be tailored specifically to business needs or organizational goals. Your design system will evolve as your brand evolves.

Therefore, it is imperative to create an adaptable, robust, yet scalable design system. You can do this by defining multiple styles, providing design guidelines for multiple devices, and allowing users to mix and match components. BMW offers many different types of cars: compacts, sport sedans, large luxury sedans, convertibles, crossovers, and SUVs. Each car is designed for different uses but all of them share a unified design language. Almost all BMWs are identifiable thanks to their kidney-style grilles and the Hofmeister Kink. Just like BMW’s model offerings, ensure your design system is flexible and expandable.

Keeping a design system up to date is an enormous task, but routine maintenance may be done at scheduled intervals to add new components and clean up outdated elements. You may also keep previous versions of your design system for future reference. This is called versioning. Components and patterns should be easily adjusted or updated without impacting the rest of the design system. It should also support variables of individual components. And most importantly, a design system should be robust: it should not falter when elements are added, changed, or removed.

Inspirational Design Systems

Looking for some inspirational design systems? These design system examples, which are free to explore, will give you a better idea of how design systems work. You might even generate some ideas for your own! Here are some of the best design systems out there.

The Guardian’s G Source Design System

British news source The Guardian has its own design system, G Source. It is clean, organized, and easy to sift through. The language is clear, yet conversational. The design system starts off with a list of The Guardian’s design and user experience principles and a quick start guide for designers. Branding guidelines, such as colors, logos, and typography, are also available.

 A list of The Guardian’s design principles from their G Source design system.
The Guardian’s design system, G Source, starts off with its design principles, via The Guardian.

G Source states “the contrast ratio of all text and interactive elements featured in our digital outputs must meet level AA of the Web Content Accessibility Guidelines (WCAG 2.1).” This is a huge plus to remind designers to test their work for accessibility.

Animated GIF of a hover interaction on G Source.
The G Source provides examples and instructions for various interactive states, via The Guardian.

The level of detail and thorough documentation makes this design system a real winner. It teaches designers how to implement their interaction states, covering buttons, hover interactions, and highlights for news articles.

G Source gives rules for marketing emails as well, covering grids, font sizes, spacing, and more. Components may be marked as “in development,” “beta phase,” or “stable.” The process section illustrates their criteria in further detail. Best of all, this design system allows users to contribute in multiple ways: design, development, and documentation.

Kiwi’s Orbit Design System

Many travelers use Kiwi to plan their next vacation. Kiwi has its own design system called Orbit, which is wholly interactive and uses a welcoming tone.

Orbit, Kiwi’s design system, covers a vast array of components, patterns, and content.
Orbit, Kiwi’s design system, covers a vast array of components, patterns, and content, via Kiwi.

This design system is more detailed than G Source, especially when it comes to their components and design patterns sections. It is quite user-centric, always keeping their users’ goals in mind. Orbit offers in-depth directions for creating and writing content on their social media platforms. There is plenty of information for developers as well, including support for right-to-left languages. Pictured above is a screenshot of their Figma library where you can see many different designs for modals across different platforms. It may seem intense, but the best design systems cover every possible design scenario.

Screenshot of Orbit’s landing page where visitors can report bugs, gain access to its Figma library, and view their react components.
Orbit offers many ways for users to add, maintain, and interact with their design system, via Kiwi.

W3C Design System

The World Wide Web Consortium, known as W3C, establishes web standards. Their design system, which might be a bit dry for some, provides plenty of information for both designers and developers. It uses simple language, giving digestible definitions for web design terms such as containers, breadcrumbs, and pagination.

The World Wide Web Consortium (W3C)’s design system gives the HTML code for its design elements, like the code for a web table displayed here.
The World Wide Web Consortium (W3C) has a design system that gives the HTML code for its design elements, via W3C.

And for developers, there are plenty of code examples to work with. W3C includes the HTML code required to implement design elements, such as buttons and forms. This alone makes it a great resource to learn from, especially if you are a designer looking to learn more about web development for your business.

Microsoft Fluent UI

Microsoft’s Fluent UI design system integrates components, elements, and patterns which makes it seamless to design for multiple platforms: Windows, macOS, web, mobile including Android and iOS, and even cross-platform.

Landing page of Microsoft’s Fluent UI design system, which makes it easy to seamlessly design across multiple platforms.
Microsoft’s Fluent UI design system makes it easy to seamlessly design across multiple platforms, via Microsoft.

Fluent UI harnesses three traits that make up any successful design system: modular, robust, and highly scalable. This is the design system that powers the Microsoft Office suite and Microsoft Teams. Because Fluent UI is highly complex, it serves as an umbrella for many smaller libraries such as Windows UI Library, Fluent UI Apple, Fluent UI Android, and others.

A large-scale corporation such as Microsoft has the bandwidth and resources necessary to create such an exhaustive system, which can be readily adapted to multiple platforms, applications, and devices. Smaller organizations will not need such a vast design system.

Screenshot of the menu section of Fluent UI web components, showing the code and what the menu looks like side by side.
Fluent UI gives detailed information on designing and coding menus, via Microsoft.

Fluent UI adheres to the guidelines set by the W3C and provides side-by-side examples of designs with their code. Because of Microsoft’s ubiquitous nature, there are so many communication channels, resources, and support streams for Fluent UI. Though it may seem daunting, the sections are well-organized and relevant documentation is always readily available.

Lastly, this design system does a wonderful job breaking apart different platforms while maintaining a cohesive design language. That’s astounding, given the mammoth footprint Microsoft has across multiple industries.

Aurora Design System by Government of Canada

The Government of Canada has an open-source design system, Aurora, which is used by the Canadian government for many mobile and desktop experiences. It has resources for designers, developers, writers, and data scientists. The landing page clearly dictates its philosophy. Under the resources section, designers can snag a UI kit for use in Adobe Illustrator and XD. Developers can download CSS and Javascript packages.

Landing page of Aurora, the Government of Canada’s open-source design system.
The Government of Canada has its own open-source design system, Aurora, via Government of Canada.

Like W3C, Aurora gives HTML code for design elements. This makes it a cinch to implement on a website, saving development time. The design system mentions small tips to maximize the performance of your application, such as only loading necessary elements. It even has a glossary of common words so designers, developers, and writers have an understanding of the design system’s offerings. Aurora invites everyone to collaborate and submit feedback.

Design System Resources

Craving to learn more? The following resources take you for an in-depth ride through the world of design systems.

At home with design systems

We all want to keep our customers and visitors happy, but it is significantly important to keep your designers and developers content too. A design system could collaboratively speed up their productivity.

Despite it being a big time commitment, creating a design system will pay off huge dividends for the organization’s entire team in the same manner as constructing predefined homes in a neighborhood based on adaptable, scalable templates. Your products and services will lead to better, more enjoyable user experiences. After all, if your employees, customers, and visitors are satisfied, this will create a higher level of cohesive harmony across your business and its products and services.

Though creating a design system might seem like a daunting task, it offers plenty of thrilling opportunities to really highlight what your business is all about! Aren’t you excited to get started?

Need help defining your brand aesthetic?
Our designers can innovate any style.