設計系統一般包括：品牌規范、顏色、文字、圖片、圖案以及其他有助于傳達品牌理念的視覺元素。把它們作為靈感和學習材料去幫助你為自己的公司和品牌創造一個有凝聚力的設計系統。

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/

歡迎關注微信公眾號“菠蘿方舟”