8 Best Design System Examples
Many companies, such as Airbnb and Uber, have already switched to using a unique design system of their own.
Constant innovation within the industry is an essential aspect of setting a brand apart from the competition and improving the user experience, especially for brands that operate on a global scale.
Thanks to making the most out of repeatable and reusable components, brands who have created a design system in their workflow can increase speed, inspiration and efficacy among teams.
We prepared for you a list of 8 design systems that you can learn from a lot. Those and other design systems can be found in our design system repository called Adele – get inspired!
Boost design system adoption and governance with UXPin Merge. Bring all interactive components from your design system to the editor, build fully interactive prototypes, and keep your designs consistent. Read more about UXPin Merge.
Google Material Design System
One of the Big Four technology companies, together with Microsoft, Apple and Amazon, Google is a well-known tech giant that focuses on Web services and products, from online advertising and search engine to cloud computing and software.
Google created and publicly shared their Material Design System that goes into the tiniest details regarding everything there is to know about the design and design principles. Every UXPin user can easily use the Material Design components as they are one of the UXPin libraries.
Thanks to this system, users can get valuable information that perfectly unifies UI and UX across different devices, platforms and input methods.
Furthermore, Material Design allows other brands and individuals to have a strong foundation for building upon when it comes to their own approach to atomic design, industry innovation and unique brand expression.
The main features of the Google Material Design System include:
- Starter Kits
- Design Source Files
- Material Theming
- Mobile Guidelines
Google’s Material Design System looks very mature. It has a lot of design guidelines, but it also contains documentation about UI components that are used in development. Did you know that such components can be used in design? Bring your developers’ components to design with UXPin’s Merge technology. Request access to UXPin Merge.
Apple Human Interface Guidelines
Apple Human Interface Guidelines present a vast and rather valuable design system resource for the web design essentials and pattern libraries but downloadable templates. The iOS UI kit library is also available with a UXPin account.
The system follows Steve Job’s design principles:
- Craft with great precision and attention to detail
- Emphasize user experience and connection with the users
- Focus on what’s truly important on a larger scale
- Generate wanted user reactions thanks to the specific design language and practices
- Utilize the friendly aspect of high tech for both novice and advanced users
- Simplify everything
Apple Human Interface Guidelines consist of practical resources, visual guidelines and style guides for both designers and developers for iOS, macOS, vOS and watchOS.
Its main features include:
- Visual Design
- Visual Index
- App Architecture
- System Capabilities
- User Interaction
- Icons and Images
- Fields and Labels
- Window and View
- Touch Bar
Atlassian Design System
Atlassian Design System focuses on providing valuable assistance to teams from all over the world by making their collaboration seamless and easy. Atlassian Design Guidelines are also a part of UXPin’s library collection.
Atlassian design philosophy is all about utilizing the digital experience to improve the productivity and overall potential of teams and individual team members, perfectly reflected in their globally used collaboration tools Trello and Jira.
That said, Atlassian Design System features agile practices and efficient tracking of every single step within a project that ultimately yields valuable results in terms of product delivery and development:
- Design Principles
- Brand Guidelines
Uber Design System
According to Uber, movement ignites opportunity.
After all, Uber service bases on movement with ride-hailing, peer-to-peer ridesharing, food delivery and micro-mobility involving scooters and electric bikes.
For this type of service to work impeccably, from sub-brands to internal ones and products to programs, Uber requires an effective design system that the company shares with the rest of the world.
Main features of Uber Design System:
- Brand Architecture
- Tone of Voice
Shopify Design System Polaris
Shopify is a global eCommerce platform that provides everything a brand may need to run and grow its business in one place.
It’s no wonder that their design principles focus on creating a better and more accessible commerce experience.
Shopify’s public design system called Polaris encompasses the company’s core values:
- Be caring and considerate to the users
- Provide people with the right tools to accomplish whatever they set out to do
- Enjoy the top level of craftsmanship that matches the brand image
- Minimize the hustle by providing accurate and quick solutions
- Always build upon users’ trust
- Make the users feel comfortable with using the products
Polaris Design System provides an easy-to-follow and practical style guide for designing for the Shopify platform. It offers a vast knowledge base on utilizing UI components, visual elements, content, and design language for creating a better user experience and product in general.
Shopify Design System Polaris includes main features that follow the practices mentioned above to a tee:
- Data Visualization
- Interaction States
IBM Carbon Design System
IBM operates on a global scale by meeting large enterprise IT needs.
Their services range from business consulting and financing, software development and IT hosting/management to software-to-hardware products.
IBM’s core belief revolves around making constant progress, be that human condition, society or a brand, by utilizing science, reason and intelligence.
According to IBM, a good design is not only a mere requirement but an actual responsibility to the users.
This is where their Carbon Design System shines with its main features, offering plenty of tools and visual resources for Adobe, Axure and Sketch designers as well as developers:
- Data Visualization
UXPin users can conveniently find everything they need from Carbon in their account as well.
Mailchimp Design System
Mailchimp has come a long way from being a renowned email marketing leader to providing an all-in-one marketing platform that goes beyond email only.
Mailchimp has one clear goal: to help small businesses grow while remaining true to their brand identity and image.
That is also one of the many reasons behind creating the Mailchimp Design System and its main features that focus on creative expression, better user experience and top quality:
- Data Visualization
- Grid System
Salesforce Lightning Design System
Salesforce goes above and beyond to deliver a personalized experience to its users through the integrated cloud-based CRM software.
The purpose of the Salesforce CRM is to improve marketing, commerce, IT, service and sales efforts – and allows their users to do the same with their users.
Their design philosophy is reflected in the Hawaiian word for intentional family, Ohana, with four core values that drive their company actions and overall culture:
- Customer Success
That said, Salesforce has put out their own Lightning Design System that allows everyone working with content management systems to learn and benefit from its main features:
- Design Guidelines
- Components (and a lot of them)
Lightning components are a part of the UXPin account libraries as well.
What Exactly is a Design Dystem?
A design system presents a collection of all design resources that a product team may use to build user interface of their app, website, eCommerce store or any other UI design they need to develop.
Design systems aren’t only for designers. They are also for developers, as they contain all code snippets and development resources with necessary front-end code together with documentation as well as design guidelines, relevant plugins, design patterns, style guides, reusable components, rules plus guidelines, and all other building blocks useful for web design and development workflow.
These design systems are then hosted as websites online and can be publicly available (they are open-source design systems) or internal, whatever the brand decides.
We can think of a design system as a vast data library that acts as a valuable document with applicable instructions and examples, product design and coding guidelines, and a part of the UI kit all at the same time.
As you can see, there are many product design concepts related to design systems. If you want to learn to differentiate design systems from pattern libraries, component libraries, and UI kits, read our previous article on the topic: The difference between design system, pattern libraries, style guides, and component libraries.
Why do companies create design systems?
Everyone who’s part of the company product team, such as developers, designers, product managers, etc., gets together to discuss and map out everything that’s currently an existing part of their digital product assets, from fonts and color palettes to UX writing rules and CSS code. Then they collaborate on creating this ultimate master plan that explains how exactly things should be presented (designed and coded).
That way, all teams have one full-proof source (there’s a reason why a design system is referred to as a single source of truth in the industry) of visual references, tools, articles, patterns and data libraries. It allows them to keep their work consistent and uniform, and have every single member on the same page – the ultimate goal of design systems.
On adopting design systems
When it comes to implementing and developing design systems, developers don’t have to waste time on repeated code snippets when everything they need is right there to copy from reusable components and/or libraries.
Similarly, designers don’t have to create a new landing page from scratch when they have a library of standard design and UI elements such as colors, logos, headers, footers and other essential symbols to speed up the design process.
Also, web marketers don’t have to work out the tone and template of the newsletters repeatedly when they have everything they need within the system.
What is There to Learn from Design Systems?
The majority of design systems follow rather general setup patterns.
The system often features its top navigation with the main categories: Design, Code, Language, Components, etc.
Each of these main categories has its subcategories that discuss things in more detail, making the most out of the atomic design structure. For instance, these subcategories could be something like Typography, Color, Forms, Banners, etc.
Following this intuitive navigation can get you valuable information about best practices in terms of design.
What’s in it for other people and brands?
A great thing about design systems that many companies host online publicly is that other people can also learn from them and even use them as examples for their own atomic design.
Let’s refer to Shopify for a moment; their shopping design system is publicly displayed on the Web. It means anyone trying to design an eCommerce website can use their set of standards, design components and design language and pattern library for every single design element and be 100% sure that they’re doing a great job.
That said, let’s take a look at some of the best design system examples that you can learn a lot from (and steal from if you want to).
The Benefits of Creating a Design System
With a well-built design system in place, businesses can considerably improve their teamwork and streamline decision-making process, but that’s not all that you can get from creating a design system.
Such collection of guidelines, elements, and data minimizes communication issues between designers and developers and minimizes the room for potential UX design bugs or acquiring UX debt.
What’s more, having such a reference-rich library significantly reduces the necessary time to go from a prototype to an actual product.
For example, PayPal uses Fluent UI together with Merge technology. This allows them to incorporate the interactive components to the UXPin library. That way, both designers and product team members alike can easily access these components and design with them over and over again.
Design systems are a great way to minimize the disconnect between designers and developers but are still not the ideal solution on their own. Thanks to the Merge technology revolution, product team members can easily use the same tools and improve their DesignOps workflow processes. This means that both developers and designers can access and use the same UI elements from one single source.
Design System Challenges and Solution
Even when companies try to create their design system, specific issues and consistency disconnects can still happen, especially when maintaining all the elements, documentation and code.
Learn more about design system challenges and solutions from one of the top design leaders – Johnson & Johnson. During our webinar, the J&J team shared all their best practices.
Make the Most of Design System: the UXPin Merge Way
Merge tech is created as an adequate solution to common challenges that often happen when there’s a communication gap between design and development teams. So, various UI components, coding and documentation inconsistencies can arise, affecting the product’s efficiency and maintenance.
With the design system that organizes all of the necessary components as a first step in the right direction, Merge will then take all those UI elements right to the design editor.
You’ll save time and money by avoiding inconsistencies, not to mention the joy of seeing an end product that’s exactly the same as what you originally envisioned!
Merge tech focuses on design with code components, that is converting a code component into the design. In that respect, designers don’t simply create prototypes based solely on the visual aspect of the final product (while only faking the necessary interactions); instead, designers use already coded components to design the prototype image.
There’s no need to go back and forth between the design and dev team since the design team can take the already existing coded components, synchronize them with UXPin’s editor, and drag and drop the components they need to create new designs.
Essentially, designers don’t have to create fake interactions, add them or search for the right colors.
On the other end, developers get the prototype preview and continue to work with the available production-ready elements.
Which Design System Example is Your Favorite?
Design systems consist of tons of UI components and guidelines that are meant to optimize and improve the design efforts and promote consistency among the teams.
However, if the design system is poorly maintained and implemented, the said system can turn into nothing more than many clunky and confusing code snippets, libraries and components.
A design system can quickly help team members to promote consistency while also allowing designers to deal with more complex UX issues. And when you add revolutionary Merge tech to the mix, you can truly take your design system organization to the next level. Learn more about UXPin Merge.