Ant Design 是由螞蟻集團所推出的用來建構後台系統用的 UI Library，提供完善的設計指引、最佳實踐、設計資源和設計工具，來幫助設計者快速產出高質量產品原型。
 
色彩模型
Ant Design 的設計團隊傾向於採用HSB 色彩模型進行設計，該模型更便於設計師在調整色彩時對於顏色有明確的心理預期，同時也方便團隊間的溝通。
 
系統級色彩體系
Ant Design 系統級色彩體系同樣源於「自然」的設計價值觀。設計師通過對自然場景的抽象捕捉，結合螞蟻的技術基因，形成了特有的12 色。進一步又通過大量的觀察，捕捉不同色彩在自然光下的變化規律，借助美術中素描的思路，對12 個顏色進行了衍生。在中性色板的定義上，則是平衡了可讀性、美感以及可用性得出的。
 
基礎色板
Ant Design 的基礎色板共計120 個顏色，包含12 個主色以及衍生色。這些顏色基本可以滿足中後台設計中對於顏色的需求。
 
統一畫板
為了盡可能減少溝通與理解的成本，有必要在組織內部統一設計板的尺寸。螞蟻中台設計團隊統一的畫板尺寸為1440。
 
適配
在設計過程中，設計師還需要建立適配的概念，根據具體情況判斷系統是否需要進行適配，以及哪些區塊需要考慮動態佈局。據統計，使用中台系統的用戶的主流分辨率主要為1920、1440 和1366，個別系統還存在1280 的顯示設備。
 
網格單位
Ant Design 通過網格體係來實現視覺體系的秩序。網格的基數為8，不僅符合偶數的思路同時能夠匹配多數主流的顯示設備。通過建立網格的思考方式，還能幫助設計者快速實現佈局空間的設計決策同時也能簡化設計到開發的溝通損耗。
 
關於柵格
Ant Design 採用24 柵格體系。以上下佈局的結構為例，對內容區域進行24 柵格的劃分設置，如下圖所示。我們為頁面中柵格的Gutter 設定了定值，即瀏覽器在一定範圍擴大或縮小，柵格的Column 寬度會隨之擴大或縮小，但Gutter 的寬度值固定不變。
 
常用模度
螞蟻中後台涵蓋了大量的不同類型和量級的產品，為了幫助不同設計能力的設計者們在界面佈局上的一致性和韻律感，統一設計到開發的佈局語言，減少還原損耗，Ant Design 提出了UI 模度的概念。在大量的實踐中，我們提取了一組可以用於UI 佈局空間決策的數組，他們都保持了8 倍數的原則、具備動態的韻律感。經過驗證，可以在一定程度上幫助我們更快更好的實現佈局空間上的設計決策。
 
字體家族
優秀的字體系統首先是要選擇合適的字體家族。Ant Design 的字體家族中優先使用系統默認的界面字體，同時提供了一套利於屏顯的備用字體庫，來維護在不同平台以及瀏覽器的顯示下，字體始終保持良好的易讀性和可讀性，體現了友好、穩定和專業的特性。
 
主字體
我們基於電腦顯示器閱讀距離（50 cm）以及最佳閱讀角度（0.3）對Ant Design 的主字體進行了一次升級，從原先的12 上升至14，以保證在多數常用顯示器上的用戶閱讀效率最佳。
 
字階與行高
字階和行高決定著一套字體系統的動態與秩序之美。字階是指一系列有規律的不同尺寸的字體。行高可以理解為一個包裹在字體外面的無形的盒子。
 
圖標設計指引
根據"確定性"和"自然"的價值觀，當構圖含義明確之後，圖標設計所追求的便是秩序之美。Ant Design 的圖標主要通過四方面去實現"秩序美"，分別是：形式、韻律、平衡以及辨識。
 
色彩
顏色的應用上，我們基於12 套基礎色板，並結合透明度規則處理，來讓色彩在不同的環境色下可以更好融合。
 
折疊面板（Collapse）
折疊面板通過對訊息的分組和收納，指引用戶遞進式的獲取訊息，使界面保持整潔的同時增加空間的有效利用率。
 
卡片（Card）
卡片是一種承載訊息的容器，對可承載的內容類型無過多限制，它讓一類訊息集中化，增強區塊感的同時更易於操作；卡片通常以網格或矩陣的方式排列，傳達相互之間的層級關係。適合較為輕量級和個性化較強的信息區塊展示。
 
設計目標
讓用戶明確知曉當前所處產品中的位置，並方便快捷地帶用戶到他想去的地方。
 
Ant Motion
Ant Motion是Ant Design 中提煉出來的動效語言。他不僅僅是動效語言，同時也是一套React 框架動效解決方案，可以幫助開發者，更容易在項目中使用動效。我們提供了單項，組合動畫，以及整套解決方案。
界面動效能加強用戶認知且增加活力。