设计系统一般包括：品牌规范、颜色、文字、图片、图案以及其他有助于传达品牌理念的视觉元素。把它们作为灵感和学习材料去帮助你为自己的公司和品牌创造一个有凝聚力的设计系统。

1. Material

Material 是由谷歌开发的现代设计系统，这个设计系统本身就是一个宝库，里面有很多有用的指南和工具，程序开发人员可以使用它们来设计一个既符合Material风格又符合现代潮流的应用程序。在Material中，可以找到色板选择器、文字样式、图标应用、以及如何创造黑暗模式等等。 

地址：https://material.io/

2. Fluent

Fluent是由微软开发的设计系统，旨在通过跨平台的共享、开放式设计系统来创造一个简单化、集成化的平台。它将设计原则、技术革新、用户需求整合在一起。这个系统基于5个关键元素：（light)光感、（depth)深度、(motion)动效、(material)材质、(scale)比例，它还列出了为windows、android、ios设备开发应用程序的指南。

地址：https://www.microsoft.com/design/fluent/#/

3. Shopify Polaris

Shopify Polaris的开发使所有Shopify 商家都能享受极佳的体验，并从精美的商店设计中获益。该设计系统有制定shopify体验的各个部分的指南，从管理屏幕到产品体验和shopify的各个应用程序。你还可以找到第三方工具的有用链接，这些工具可以作为灵感或帮助你学习如何有效的使用shopify设计。

地址：https://polaris.shopify.com/

4. Mailchimp

Mailchimp一直被认为是一个拥有详细品牌调性的最佳例子之一。但却不知道他们也拥有一个非常详细样式库的设计系统。在这个设计系统中，你可以找到关于颜色、按钮、提示消息和其他营销平台的设计指南，更重要的是，指南中有大量的例子和关于重要概念的解说 。

地址：https://ux.mailchimp.com/patterns/color

5. Atlassian

Atlassian 是澳大利亚一家以其问题跟踪程序jira而闻名的软件公司。他们的设计系统描述的不仅仅是如何使用他们的标识、品牌色、字体和其他的设计原理，而且还讲述了如何使他们的品牌更加个性闪耀，例如颜色以龙血、牛肉干这样的词去命名。同样也很容易理解他们为何能快速的将自己的风格定义为：大胆、乐观和实用。

地址：https://www.atlassian.design/

6. Apple

Apple的设计系统旨在促进应用程序设计和Apple产品组件的设计，但是他们的风格指南中有很多值得学习和欣赏的地方。对于初学者来说，可以下载SF图标以补充Apple设备的系统字体。还可以找到关于用户体验设计的指南和说明，使应用程序更加易用。

地址：https://developer.apple.com/design/

7. IBM Design Language

IBM设计系统背后的指导原则是建立联系，他们的设计系统除了风格指南和品牌元素如何使用之外还分享了他们的设计原理以及很多实用的案例。设计系统本身包括颜色、文字、标志、图标、图表、图片、动效等。

地址：https://www.ibm.com/design/language/

8. AirBnB

AirBnB通过一系列文章全面概述了他们的设计系统，这些文章深入探讨了每个设计选择背后是如何决策的以及从实际案例中学到的经验教训。他们设计语言主要的特征是：每个组件都可以独立存在甚至进一步发展，同时也是一个更大凝聚力单元的一部分，他们的设计系统就像是生活中一个生机勃勃的有机体。

地址：https://airbnb.design/building-a-visual-language/ 

9. Uber

Uber将他们的品牌描述为一个大胆的新品牌，他们的设计系统很好的诠释了这些原则。设计系统涵盖了整个品牌视觉，从标识到颜色的使用、布局、图片以及动效。Uber的设计系统以优雅、简洁为核心。

地址：https://brand.uber.com/

10. Lightning Design System

Lightning设计系统是由Salesforce开发的，它可以保证所有东西的统一，并且对于任何为该平台设计的人来说都很容易访问。设计系统不是只关注像素、而是关注应用程序的逻辑、用户体验、交互流程。你可以在Lightning设计系统中找到详细的指南和案例，不仅仅是设计指南还包括可访问性问题和组件模版。

地址：https://www.lightningdesignsystem.com/

欢迎关注微信公众号“菠萝方舟”