{"id":4411,"date":"2022-01-23T16:52:32","date_gmt":"2022-01-23T08:52:32","guid":{"rendered":"https:\/\/designcompass.org\/?p=4411"},"modified":"2025-06-10T17:38:54","modified_gmt":"2025-06-10T08:38:54","slug":"top-10-design-system","status":"publish","type":"post","link":"https:\/\/designcompass.org\/en\/2022\/01\/23\/top-10-design-system\/","title":{"rendered":"Best Design Systems to Inspire"},"content":{"rendered":"<p>10 contexts, 10 design languages<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>A design system is a set of rules that are used to ensure that consistent principles are always applied so that users can have the same experience. With consistent principles, you can give the same impression with the same voice, and it is efficient by eliminating unnecessary communication. Depending on the scope of application of this system, the definition of design language and design system is different. It applies to various areas depending on the company, including guidelines for visual appearance, code used for development, specific ux patterns, and all experiences in the associated ecosystem. We&#039;ve researched the best design systems to get you inspired to create a better design language.<\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2F5FS3u_h1W_zo-r--N8bILvTK9Ww.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"apple-human-interface-guideline\"><strong>Apple Human Interface Guidelines<\/strong><\/h2>\n\n\n\n<p>These are Apple&#039;s design guidelines, which are called the textbook for a smooth user experience. We provide detailed guidelines for not only design but also development. It provides design principles to provide a consistent experience appropriate for platform characteristics and UI Kits for various devices provided by Apple.<\/p>\n\n\n\n<p><a href=\"https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/overview\/themes\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/developer.apple.com\/design\/human-interface-guidelines\/ios\/overview\/themes\/<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Themes, Interface Essentials<\/li><li>App Architecture<\/li><li>User Interaction<\/li><li>System Capabilities<\/li><li>Visual Design<\/li><li>Icons and Images<\/li><li>Bars<\/li><li>Views<\/li><li>Controls<\/li><li>Extensions<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FFZtGwXfBNjl_aS0p7BRLEz7U5uE.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"google-material-design\"><strong>Google Material Design<\/strong><\/h2>\n\n\n\n<p>Material Design was a sign that Google could set the future as a true standard in design. After this design system was released, everyone in the world became aware of the basics of the design system. It is a design system that is the foundation of a solid foundation that allows various services and brands around the world to express themselves in a variety of ways based on this language. Currently, version 3 has been released and a more advanced design language called Material You is proposed.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/material.io\/\" target=\"_blank\">https:\/\/material.io\/<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Foundation: Design Tokens, Adaptive Design\u2026<\/li><li>Style: Color, Typography<\/li><li>Components: Buttons, Cards, Chips\u2026<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FZ94yhqjjzc_sjwlODhF6u5b4mAI.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"microsoft-fluent\"><strong>Microsoft Fluent<\/strong><\/h2>\n\n\n\n<p>This is Microsoft&#039;s design system. Aiming at persuasive design systems for a complex world. It is the successor to Microsoft&#039;s Metro Design, which played a major role in moving from skeuomorphism to flat design. Fluent built a system around the components of light, depth, movement, material, and scale.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/www.microsoft.com\/design\/fluent\/#\/\" target=\"_blank\">https:\/\/www.microsoft.com\/design\/fluent\/#\/<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Provide guidelines for each platform<\/li><li>Controls and Patterns<\/li><li>Layout<\/li><li>Style<\/li><li>Controls<\/li><li>Resources<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FRM4Fch6ea_-Zm8VRmrfeJW1s9Sw.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ibm-carbon-design-language\"><strong>IBM Carbon Design Language<\/strong><\/h2>\n\n\n\n<p>This is the design language of IBM, a global dinosaur company. All components comply with the accessibility checklist. It is categorized by the user&#039;s vision, hearing, physical, and cognitive disabilities, and also explains how it relates to general users. As we are a large company with a significant impact on various areas around the world, we propose a design language for a wide range of people.<\/p>\n\n\n\n<p><a href=\"\/\/www.ibm.com\/design\/language\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.ibm.com\/design\/language\/<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Philosophy<\/li><li>Typography<\/li><li>Color<\/li><li>Grid<\/li><li>Logos<\/li><li>Iconography<\/li><li>Illustration<\/li><li>Photography<\/li><li>Data Visualization<\/li><li>Layout<\/li><li>Animation<\/li><li>Resource<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FfDjr25VhsueELd4Ay2INGAXRwyk.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"ant-design\"><strong>Ant Design<\/strong><\/h2>\n\n\n\n<p>This is Alibaba Group\u2019s design system. Since there are many large corporate products, we provide a design system to encompass them. It provides various web components like Bootstrap provided by Twitter.<\/p>\n\n\n\n<p><a href=\"https:\/\/ant.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/ant.design\/<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Global Styles<\/li><li>Design Patterns<\/li><li>Visualization<\/li><li>Motion<\/li><li>Illustrations<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FveucWKrzrZDYygOkbombaOcYmVk.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"atlassian-s-design-language\"><strong>Atlassian&#039;s Design Language<\/strong><\/h2>\n\n\n\n<p>It is the design language of Atlassian, an Australian enterprise software company. Jira, an issue tracking app, is famous for its collaborative wiki confluence. Provides design patterns, code structure, and UI resources.<\/p>\n\n\n\n<p><a target=\"_blank\" href=\"https:\/\/atlassian.design\/\" rel=\"noreferrer noopener\">Atlassian Design System<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Brand<\/li><li>Foundations<\/li><li>Content<\/li><li>Resource<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FOgRGm1dDmX8kI9Pq5eouDRM5VsU.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"salesforce-lightning-design-system\"><strong>SalesForce Lightning Design System<\/strong><\/h2>\n\n\n\n<p>This is the design language of Salesforce. The context is similar to Shopify, and they provide guidance on the platform that isn&#039;t available elsewhere, including visualforce and heroku. It provides a significant number of component guidelines.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.lightningdesignsystem.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.lightningdesignsystem.com\/<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Platforms<\/li><li>Design Guidelines<\/li><li>Accessibility<\/li><li>Component Blueprints<\/li><li>Utilities<\/li><li>Design Tokens<\/li><li>Icons<\/li><li>Tools<\/li><li>Resource<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2Fed2Hodz1xDA0bHTvhQvXcBjv4Gc.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"airbnb-design\"><strong>Airbnb Design<\/strong><\/h2>\n\n\n\n<p>Airbnb\u2019s design is leading the industry\u2019s design culture. We built a story about a design culture that goes beyond design for implementation. Based on various topics related to design, Airbnb&#039;s unique problem-solving method was explained in blog format.&nbsp;<\/p>\n\n\n\n<p><a href=\"https:\/\/airbnb.design\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/airbnb.design\/<\/a><\/p>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FzKkUTb9rjA9Yy3SED6_HRUOiDYc.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"adobe-spectrum\"><strong>Adobe Spectrum<\/strong><\/h2>\n\n\n\n<p>It is Adobe&#039;s design language that services Photoshop, Premiere, etc. We aim to be a design system that grows with communities for various platforms. Definitions and explanations of the foundations of the design system, such as design tokens, are detailed. Additionally, the guidelines for the writing used in the content have been carefully laid out.<\/p>\n\n\n\n<p><a href=\"https:\/\/spectrum.adobe.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/spectrum.adobe.com\/<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Foundation<\/li><li>Content<\/li><li>Components<\/li><li>Patterns<\/li><li>Tools and Resources<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FXpkKecSwAy4IWvJuOYrzcUM3pVE.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"uber-design-system\"><strong>Uber Design system<\/strong><\/h2>\n\n\n\n<p>This is Uber\u2019s design system. Uber&#039;s design system announcement has always created a stir. It contains the Uber brand designed by Wolff Olins. It is famous for its bold and solid design language. The detailed guidelines for motion are especially impressive.<\/p>\n\n\n\n<p><a href=\"https:\/\/brand.uber.com\">http<\/a><a href=\"https:\/\/brand.uber.com\" target=\"_blank\" rel=\"noreferrer noopener\">s:\/\/brand.uber.com<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>logo<\/li><li>color<\/li><li>composition<\/li><li>iconography<\/li><li>illustration<\/li><li>motion<\/li><li>photography<\/li><li>Tone of Voice<\/li><li>Typography<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/img1.daumcdn.net\/thumb\/R1280x0\/?fname=http%3A%2F%2Ft1.daumcdn.net%2Fbrunch%2Fservice%2Fuser%2FTZu%2Fimage%2FQpKSUK_8qZCk8-OcJpTl-NAxrgA.png\" alt=\"\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"audi-design-system\"><strong>Audi Design System<\/strong><\/h2>\n\n\n\n<p>This is the design system of Audi, which produces world-class luxury cars. We focus on how the brand identity of Audi should be communicated. The goal is to deliver a consistent user experience at every touchpoint with Audi, from cars to applications.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.audi.com\/ci\/en\/renewed-brand.html\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.audi.com\/ci\/en\/renewed-brand.html<\/a><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Brand Appearance<\/li><li>Basics<\/li><li>User Interface<\/li><li>Communication Media<\/li><li>Corporate Branding<\/li><li>Corporate Sound<\/li><li>Motion Pictures<\/li><li>Brand in Space<\/li><li>Audi Motorsport<\/li><li>Dealer Facility<\/li><\/ul>\n\n\n\n<div style=\"height:100px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"\ub514\uc790\uc778-\ub098\uce68\ubc18\"><strong>design compass &nbsp;<\/strong><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Blog:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/designcompass.org\/en\/\" target=\"_blank\">https:\/\/designcompass.org\/<\/a><\/li><li>Facebook:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.facebook.com\/designcompasskr\/\" target=\"_blank\">https:\/\/www.facebook.com\/designcompasskr\/<\/a><\/li><li>Instagram:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/www.instagram.com\/designcompass\/\" target=\"_blank\">https:\/\/www.instagram.com\/designcompass\/<\/a><\/li><li>Newsletter:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/maily.so\/designcompass\/embed?src=\" target=\"_blank\">https:\/\/maily.so\/designcompass\/embed?src=notion<\/a><\/li><li>KakaoTalk:&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/open.kakao.com\/o\/g6wKtndc\" target=\"_blank\">https:\/\/open.kakao.com\/o\/g6wKtndc<\/a><\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>10 contexts, 10 design languages<\/p>","protected":false},"author":1,"featured_media":5007,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[407,1798],"tags":[76,88],"class_list":["post-4411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-archive","category-resource-archive","tag-76","tag-88"],"acf":[],"jetpack_featured_media_url":"https:\/\/designcompass.org\/wp-content\/uploads\/2022\/01\/img-designsystem-10-1-1-e1647655855473.png","publishpress_future_action":{"enabled":false,"date":"2026-05-12 07:40:10","action":"change-status","newStatus":"draft","terms":[],"taxonomy":"category","extraData":[]},"publishpress_future_workflow_manual_trigger":{"enabledWorkflows":[]},"_links":{"self":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/4411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/comments?post=4411"}],"version-history":[{"count":0,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/posts\/4411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media\/5007"}],"wp:attachment":[{"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/media?parent=4411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/categories?post=4411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/designcompass.org\/en\/wp-json\/wp\/v2\/tags?post=4411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}