Source: Best Design System Examples | Muzli – Design Inspiration
Design System Examples
Design systems are structured on three key points: design, code, and documentation. This article compiles documentation-related examples.
Design systems are becoming increasingly prevalent every day. As a designer who has focused on design system development processes in recent years and enjoys working in-depth on this topic, I have come across various open-source design systems while conducting research. I had the opportunity to examine how these systems approach and solve problems. You are already researching other design systems if you are an active participant in design system development processes, especially if you add a new component to the system based on requirements or attempt to develop a systematic solution to an existing problem. Researching, analyzing, and learning how these systems approach similar problems to become daily tasks.
Every design system is developed in a structured manner to ensure the integrity of the rules. It is possible to learn alternative sustainability practices by looking at the system and comprehending the underlying causes of the systematic approach. You can incorporate these practices into your own development procedures. So you can gain access to priceless solution awareness! That’s why every “Aha!” is so profound. You can consider yourself fortunate. Yes, you are fortunate, as it also indicates that you are gaining new knowledge. The design systems that I have compiled in this article through a process of “digital curation,” as well as a significant number of others that I have not yet seen examined, have thankfully taken their places as open source on the internet. Salute to open source!
You can experience solution practices in full transparency with publicly accessible design systems. However, some design systems may limit access for privacy and business reasons. On the other hand, some design systems have a strict user-access policy.
While developing a design system, you should systematically adopt ready to use solutions with all the assets that are based on the design methodologies approaches. While the infrastructure work on how to code these solutions and how to offer them as a service progresses, there is also the production of “documentation” on how this information can be consumed by the designer, developer, and all other stakeholders — namely the users — who will use the system in the production cycle. Nevertheless, this calls for more work.
In terms of documentation, you can get ideas from the examples I’ve given. Each of them has a structure that combines its own target users, production technologies, and products.
I hope you find it helpful and stimulating!
If you wish to gain a thorough understanding of what the design system entails, I suggest you read the following article…
Design System
What is a design system? Why do investments in design systems rapidly increase? Let’s have a look at these questions…
Content-related design systems are those that I’ve had the opportunity to examine. I will revise this article accordingly as I evaluate new systems over time. So, stay tuned… If you wish to include a design system in this article, I would appreciate it if you would share it with me.
1. Material Design
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system-backed by open-source code-that helps…
Google’s Material design system is the first thing that comes to mind when discussing design systems. This long-standing design system has been in our lives for years as an open source to develop Google’s own ecosystem. It has set a precedent for many frameworks, particularly with its overall design philosophy. Currently, the Material You (V3) transition is ongoing.
2. The Guardian
The Guardian digital design style guide
Edit description
The design system documentation style of The Guardian, a British daily newspaper, is also notable.
3. Momentum Design System
Momentum Design
The design system for Cisco Collaboration products including Cisco Webex
It creates a shared design language for all Webex products using the Cisco Momentum design system.
4. Grommet
Grommet
Build responsive and accessible mobile-first projects for the web with an easy to use component library.
You can streamline app development and create responsive, accessible mobile-oriented web projects with a simple component library by using the Grommet design system.
5. Solar Design System
Solar design system
Making sure all our products work in a similar way, whether it’s the Bulb app and website, or internal tools. At Bulb…
Bulb, an energy supply company with a solar design system, offers consistent experiences.
6. Carbon Design System
Carbon Design System
Carbon is IBM’s open source design system for products and digital experiences. With the IBM Design Language as its…
The Carbon design system, the sole building block of the IBM ecosystem, is a design system emerged from its design philosophy. It distinguishes itself from other examples with its 2x grid structure and unique infrastructure.
7. Fish Tank Design System
Fish Tank Design System
Fish Tank is an open source design system used by Bloomberg Law, Bloomberg Tax, and Bloomberg Government.
Fish Tank, Bloomberg BNA’s design system, is a collection of essential styles and reusable components that power the digital product family.
8. Help Scout Brand Guidelines
Help Scout Brand Guidelines
Everything at Help Scout starts with values. These brand values make their way into everything we design, write, code…
Help Scout, a help desk software provider, stands out by its design system documentation style.
9. BBC GEL
Homepage
Understanding the approaches, processes and tools we use to create a positive team culture. Understanding the…
The BBC’s design system, Global Experience Language, bridges the gap between users and technology. It stands out as a design system with particularly abundant cultural resources.
10. Goldman Sachs Design
Home — Goldman Sachs Design
The Goldman Sachs Design System is customized for institutional finance and allows teams to create digital products…
The design system of Goldman Sachs, which is a multinational investment institution, tailor-made for corporate finance, and enables teams to develop digital products.
11. Fluent Design System
Microsoft Design
Fluent Design System
It is Microsoft’s open-source design system for creating consistent cross-platform product experiences. The Fluent design system simplifies the lives of designers and developers who work in the Microsoft ecosystem.
12. Clarity Design System
Clarity Design System
Clarity Design System. UX guidelines, HTML/CSS framework, and Angular components working together to craft exceptional…
The Clarity design system, which enables rapid prototyping-to-product development, gives the VMware product line a solid foundation and attracts attention with its Angular infrastructure.
13. Ant Design
Ant Design — The world’s second most popular React UI framework
This is Ant Design’s internal standard for evaluating design quality. Based on the assumption that “everyone is…
Ant Design allows you make effective corporate interfaces, especially for desktop software. This opens the door to creating an efficient and enjoyable work experience.
14. Cookbook
Cookbook
Cookbook is Yelp’s design system for digital experiences, and follows Brad Frost’s Atomic Design methodology. Our…
The ecosystem of Yelp’ is dependent on the Cookbook design system.
15. MongoDB
LeafyGreen — MongoDB Design System
Combobox now available as React and Figma components New Forms guidelines now available Segmented Control now available…
It is MongoDB’s design system.
16. Blocks Design System
Blocks by CBRE Build
Shared approach, language, and communication between design, engineering, and product teams Documentation describing…
It is the design system of CBRE, a commercial real estate services and investment company.
17. Atlassian Design System
Atlassian Design System
Design, develop, deliver. Use Atlassian’s end-to-end design language to create simple, intuitive, and beautiful…
Atlassian, as one example that always comes to mind when discussing design systems, offers its users perfect consistency and experience across applications as a result of the design system developed for its own product line.
18. Biings Design System
Biings Design System
A series of assets and guidelines for building consistent user experiences across Biings products.
The Biings design system is a set of assets and rules for creating uniform user experiences across its products.
19. Lexicon
Liferay Lexicon | An Experience Language for Crafting Beautiful UI
Lexicon is a design language that provides a common framework for building interfaces within the Liferay product…
The Lexicon design system is the design language that provides a common interface framework for the entire Liferay product ecosystem components.
20. Lightning Design System
Lightning Design System
Start of content Ready-to-use HTML and CSS UI elements provide the foundation for Salesforce experience development Go…
Salesforce’s Lightning design system, a classic among design system examples, attracts attention with its comprehensive design philosophy and approach documentation. I highly recommend that you investigate the motion system Kinetik.
21. Repsol Digital System
Repsol Digital System
© REPSOL, S.A. 2019. All rights reserved. This work is the exclusive property of REPSOL, S.A. and its total or partial…
The design system of the Spanish oil and gas company Repsol.
22. Pajamas Design System
Pajamas Design System
Skip to main content GitLab is an open core product and has over 3000 community contributors. When everyone can…
The Pajamas design system of GitLab, a DevOps platform, contains all materials and guidelines for its ecosystem’s requirements.
23. The Beeline Design System
The Beeline Design System
The Beeline Design System is a library of design standards and patterns that can be used to design and build any number…
The Beeline design system sets design standards that can be applied to the creation of Beeline products.
24. The QuickBooks Design System
QuickBooks Design System — Design success starts here
Customers inspire us. The QuickBooks Design System helps us turn that inspiration into delight.
QuickBooks’s design system, which is part of the Intuit product line, builds intelligent online accounting software for small businesses on a foundation of sustainability.
25. Infor Design
Infor Design
Guidelines and resources to create meaningful experiences for Infor’s products, brand, and customers.
With the help of tools, components, and rules, Infor Design, which is part of Infor, a company that makes enterprise resource planning (ERP) solutions, makes it possible to create great brand experiences.
26. Rivet Design System
Rivet Design System — Indiana University
Built with plain HTML, CSS, and JavaScript, Rivet helps teams create familiar and accessible experiences across…
Indiana University offers its users sustainable and consistent experiences with the Rivet design system, which is one of the good examples of how the design system can be extended to other institutions or organizations.
27. Fiori Design Guidelines
SAP Fiori Design Guidelines
SAP Fiori is the design language that brings great user experiences to enterprise applications. Based on user roles and…
SAP, an application used for years, creates a system that brings great user experience to its corporate applications with Fiori design system.
28. Giffgaff Design
giffgaff design
Our design system. This is a set of standards that define the universal design language and content composition at…
The design system of giffgaff, a GSM company, attracts attention in the world of design systems, particularly for its interface design characteristics.
29. Audi Design System
Redefining Progress
The Audi CI Portal is a direct, uncomplicated way for the creative handling of our brand. It offers many examples that…
The Audi CI Portal provides guidelines for developing brand-consistent interactions.
30. Shopify Polaris
Shopify Polaris
Components are reusable building blocks made of interface elements and styles, packaged through code. Piece them…
Shopify offers complete solutions for an online store. It gives its customers the tools, assets, and infrastructure they need to make their own stores using the Polaris design system in a simple way. The information in the application design guidelines section is particularly impressive.
31. Human Interface Guidelines
Human Interface Guidelines
Human Interface Guidelines
Human Interface Guidelinesdeveloper.apple.com
The Human Interface Guidelines, the design system that ensures perfect compatibility across all platforms in Apple’s ecosystem, offer simple and easily implementable infrastructure solutions with their assets and primitive components. It has a long history that sets it apart from its competitors, and its structure is always being updated as technology changes.
32. Primer Design System
Primer Design System
The design system that powers GitHub
The Primer design system is an excellent good fit for GitHub’s ecosystem, given its user base.
33. Spectrum
Spectrum, Adobe’s design system
Spectrum provides interface components, resources, and tools to help teams work more efficiently and to make…
Spectrum is an Adobe design system that has parts and tools that will help product teams work more efficiently and make Adobe applications more compatible with each other.
34. U.S. Web Design System (USWDS)
USWDS: The United States Web Design System
Official websites use .gov A.gov website belongs to an official government organization in the United States. Secure…
The USWDS design system, which is one of the best examples of design systems created for government-run services, ensures consistency in digital services through its instructions and components.
35. Solid
WTF is Solid?
Solid is BuzzFeed’s CSS style guide. Influenced by frameworks like Basscss, Solid uses immutable, atomic CSS classes to…
BuzFeed’s solid design system provides a solid foundation for the user experience.
36. Pulse
.pulse
Helping us build great products for our customers
Pulse, the design system of Heartbeat Agency, is distinguished by its documentation style.
37. AXA Design System
AXA Design System Website
Edit description
AXA is a multinational company that focuses on investments, pensions, and insurance. Its design system offers users an international experience that fits with what it does.
38. Canvas
Canvas Design System
HubSpot Canvas is the design system we use to build products. We created this design system to create a more usable…
HubSpot, a company that develops software products for marketing, sales, and customer service, utilizes the Canvas design system to ensure the consistency of its services.
39. Evergreen
Evergreen
Evergreen is a React UI Framework for building ambitious products on the web. Made by Segment in San Francisco, CA.
Evergreen is the design system that develops Segment’s product experiences.
40. Heroku Design
Heroku Design
When building out interfaces make use of our atomic CSS libraries, shibori3 for marketing and purple3 for products. Our…
Heroku, a cloud-based platform service, employs Purple3 for its product design frameworks and Shibori3 for its marketing design frameworks.
41. Latitude Design
Latitude Design System
Flexport is a technology and data-driven freight forwarder and customs broker. We provide visibility and control over…
Flexport’s Latitude design system focuses on supply chain management and logistics, including design guidelines, component documentation, and all other interfacing resources.
42. Luna
Luna
Our core set of components are accessible and themeable across the Sainsbury’s brands. How to write for digital…
luna-website.ext.prd.jspaas.uk
The Luna design system combines guidelines, tools, and documentation to facilitate the development of immersive experiences for any Sainsbury’s brand.
43. Marvel
Styleguide — Marvel
Central location for a live inventory of UI components, brand guidelines, brand assets, code snippets and developer…
Marvel Style guide is the design system for rapid prototyping, testing, and handoff management for design teams utilized by the Marvel application. It stands out for its minimal design.
44. PatternFly
PatternFly 4
Skip to content PatternFly is an open source design system built to drive consistency and unify teams. We think quality…
PatternFly is an open-source design system created to promote uniformity and teamwork.
45. Mozilla Protocol
Mozilla Protocol
Protocol is a design system for Mozilla and Firefox websites. It establishes a common design language, provides…
The Mozilla Protocol is a design system for Firefox and Mozilla websites. It develops a standardized design language and provides reusable coded components. It includes high-level content and accessibility guidelines.
46. Swarm Design System
Swarm Design System
Instead of rethinking the foundation of each new Meetup experience, the Swarm Design System allows teams to focus on…
Meetup, a social networking application that facilitates in-person group gatherings, utilizes the Swarm design system.
47. Thumbprint
Thumbprint
Assets for building high-quality, consistent user experiences at Thumbtack.
Thumbprint is the design system of the American home services company Thumbtack.
48. Hudl Design
Hudl Design
The foundation of Hudl’s products and brand. From our design system, to how we communicate through words and…
Unique documentation structure attracts attention to Hudl’s design system, which offers analysis tools to improve the performance of athletes.
49. Workday Canvas Design System
Home
Canvas is an open source design system that consists of reusable UI elements, resources, and guidelines that enable…
Workday is a company that develops solutions for the management of finances, human resources, planning, and expenditures. It provides the infrastructure of the Canvas design system to its clients.
50. Zendesk Garden
Zendesk Garden
The source of truth for tools, standards, and best practices when building products at Zendesk. This site is an…
Garden becomes a source of tools and standards when creating Zendesk products.
51. GOV.UK Design System
Home
Use this design system to make your service consistent with GOV.UK. Learn from the research and experience of other…
The United Kingdom is aligning its government services with the GOV.UK design system. Another excellent example of design systems developed for government services.
52. Cedar Design System
Cedar Design System | REI Co-op
The Cedar Design System provides digital teams with reusable UI components based on REI’s visual language.
The design system of REI provides outdoor brands, equipment, apparel, and products.
53. Digital.NSW
Home | Digital.NSW
Practical ways to help you adopt a human-centred design approach. Discover a collection of agile methodologies, tools…
It is the design system of the NSW government.
54. Orbit Design System
Orbit design system
An open source design system for your next travel project.
It is the KIWI design system, a provider of online travel technology.
55. Stacks
Stacks
Stacks provides everything you need to quickly design, build, and ship coherent experiences across all of Stack…
Stacks provide users with all the tools they require to quickly design and develop standardized experiences across Stack Overflow.
56. Wanda Design System
Wanda Design System
Wanda is a complete design system made to provide complete and enojoyable experience while using Wonderflow’s digital…
Wanda is a design system developed to make using Wonderflow’s digital products a complete and enjoyable experience.
57. Finastra Design System
Finastra design system
From prototype to product, create ready to use financial applications faster and better with our component library…
Finastra is a financial software company. It accelerates the development of financial applications by providing its users with open-source application templates and sample applications.
58. Duet Design System
Duet Design System
Duet provides a set of organized tools, patterns and practices that work as the foundation for LocalTapiola and Turva…
The Duet design system provides an organized set of tools, models, and applications that serve as the foundation for the digital products LocalTapiola and Turva.
59. Seeds
Seeds
Seeds This creative hub is home to all the tools and resources needed to understand the Sprout brand, express it…
The Seeds design system houses all the tools and resources necessary to comprehend the Sprout brand, express it creatively, and inspire meaningful customer experiences.
60. Mixpanel Design System
Mixpanel Design System
Mixpanel Design System is Mixpanel’s standard toolkit for design and development. It contains the style guide and an…
It is the design system of Mixpanel, a business analytics service.
61. Barista
Barista — the Dynatrace design system.
Barista Design System offers a collection of ready to use Angular components. Together with design guidelines and use…
As a coffee enthusiast, the Barista design system, which bases documentation on a beautiful concept, is the design system of the global technology company Dynatrace.
62. Blackpack
Backpack — Skyscanner’s Design System
Backpack is a collection of design resources, reusable components and guidelines for creating Skyscanner products.
Blackpack is a design system composed of design resources, reusable components, and construction guidelines for Skyscanner products.
63. It Design System
Home
Il Piano triennale per l’informatica nella Pubblica Amministrazione 2020–2022 indica le linee di azione per promuovere…
It is the official design system of Italy, and it includes sustainable solutions for official national and government institutions.
64. Mailchimp Pattern Library
Color
Our pattern library used to build the Mailchimp application.
The design system of the marketing automation platform and email marketing service Mailchimp comes to mind as an example of a design system.
Having reached the conclusion of the examples, I would like to add a few design system-related remarks:
Dear developer friends;
The design system is not just for designers. It exists to make your life easier during the production cycle and to assist you in writing code that is simpler and more efficient. Not only is it necessary to code the designs presented in the product development processes, but also to internalize the flow designs and comprehend the underlying cause-and-effect relationship…
Dear designer friends;
A design system is more than just a collection of user interface styles. It is insufficient to learn the function of each component while applying only interface designs. It is necessary to comprehend the anatomical properties of the components as well as the micro and macro methods of systematic use in order to design experiences that are more systematic.
Other stakeholders who will use the design system;
The design system is an investment in your product! You will understand it better as time passes and as you utilize it. Start thinking about your design system immediately, especially if you’re developing products in multiple teams without a design system. As demonstrated by numerous examples, the vast majority of those are already available as open source. Don’t forget that as your product evolves and expands, the design system will make every stage of your development processes more sustainable, consistent, scalable, and effective.
If you enjoyed this article, applause or sharing may help it reach a wider audience; thank you for your support!
As a person eager to learn constantly and likes to share knowledge, you can check out my other articles here. Also, you can reach me out via LinkedIn.
