Chinese Color AtlasDESIGN SYSTEM GUIDE
色彩指南 · 中國傳統色圖譜
含義 · 色值 · 配色

文化色彩如何進入設計系統:為什么 Token 命名比 HEX 色值更重要

把中國傳統色這類文化色彩轉成 primitives、語義角色、場景 modes、來源說明和可交付 tokens 的方法框架。

文化色彩不能像普通色階一樣處理。一個中性的 blue scale 可以被改名、替換和抽象,文化損失很小;但朱紅、月白、天水碧這類色名本身攜帶語言、材料記憶和場景語境。目標不是把好看的 HEX 填進組件,而是在保留文化含義的同時,建立可維護的 token 系統。

文化色彩會打破天真的 token 系統

許多設計系統默認顏色名稱可以隨意替換。團隊可以把某個顏色叫 blue-500,再映射成 primary,以後換成另一個色相。這在名稱只是色階位置時成立,但當色名本身就是意義的一部分時就會失效。

中國傳統色是很好的例子。朱紅、月白、青黛、天水碧不只是 red、white、indigo 或 cyan 的標簽,它們指向顏料、織物、月光、墨色、建筑、詩詞或朝代審美。如果所有顏色都被壓平成 primary-100,文化語境會消失;如果每個組件都直接使用 zhu-hong,後期換主題又會很困難。

使用三層結構:primitives、roles、modes

文化色彩系統需要三層。primitive 層保留文化來源,例如 color/chinese/zhu-hong、color/chinese/yue-bai、color/chinese/tian-shui-bi。這些名稱應該穩定,並在文檔中保留中文名、拼音、HEX 和來源狀態。

semantic 層給顏色分配工作,例如 color/brand/primary、color/surface/warm、color/text/default、color/accent/festival、color/border/subtle。組件應使用這一層,而不是直接綁定文化色名。mode 層再把少量角色組合成國潮、宋式、敦煌等場景配色。這樣既保留文化語言,也不會讓每個 UI 元素綁定到單一歷史色塊。

把文化名和語義名分開

命名張力是最難的部分。文化名有價值,是因為它有意義;語義名有價值,是因為它靈活。把其中一種當成另一種使用,會造成維護問題。

按鈕通常應該使用 color/brand/primary,而不是 color/chinese/zhu-hong。文檔裡仍然可以說明 brand primary 當前映射到朱紅這一類朱砂紅。當品牌從節慶國潮配色轉向更安靜的宋式配色時,組件角色可以保持不變,只需要替換映射的 primitive。

記錄來源,而不是聲稱絕對權威

文化可信度來自來源說明。不要聲稱每個傳統色都是 official、處處歷史準確,或適合所有使用場景。有些色名有古籍出處,有些是現代歸屬名,有些存在爭議,有些色值來自測量研究。

設計系統應讓這些差異可見。為來源狀態、引用和使用意圖添加說明。應把中國傳統色視為 source-aware 的設計材料,而不是普遍文化證明。這樣能減少誤用,也更適合公開項目、教育項目或文博相關設計。

建立小型場景 modes,而不是一個巨大色庫

完整文化色庫可以包含數百個名稱,但一個可用的 Figma mode 通常只需要五到十二個角色色。國潮 mode 可以組合朱紅、金、墨、月白和青色強調;宋式 mode 可以使用天水碧、月白、緗色、低飽和綠和墨灰;敦煌 mode 可以組合石青、赭色、朱砂、沙色和墨色。

場景 modes 讓設計師按意圖選擇,而不是在整套數據庫裡瀏覽。它也讓開發交付更清楚,因為每個 mode 都有受控的角色集合,可以映射到 CSS variables、Tailwind theme entries 或 DTCG tokens。

把 Figma 決策連接到代碼 tokens

Figma Variables 是很好的設計表面,但不應是唯一來源。同一套 primitive 和 semantic 命名應該延續到 CSS 自定義屬性、Tailwind theme partial 和 W3C DTCG 風格 JSON。否則設計師和開發者會重復抄 HEX,並發明兩套平行名稱。

用 Figma 呈現映射關系,再為代碼導出或記錄同樣結構。Chinese Color Atlas 的免費樣例展示了一個小版本:Figma Variables 用於設計測試,CSS variables 用於網頁,Tailwind colors 用於 UI 實現,token JSON 用於交付實驗。

相關調色板

国潮品牌

适合国潮品牌视觉,朱砂红为底,辅以描金和墨色,传统而不失力量感

宋代美学

宋代极简美学,天青为魂,素雅淡泊,留白有度

敦煌丝路

适合文化展览、丝巾与茶礼包装,砂绿、石青和赭色形成壁画矿物感

水墨网页

适合国风网站UI,墨色打底,月白为字,朱砂红为CTA,清爽有质感

数据看板

适合现代产品后台和可视化界面,青冥负责信息主色,朱砂只用于告警与关键动作

FAQ

文化色名應該直接用於組件嗎?

通常不建議。文化名應保留在 primitive tokens 中,再映射到 primary、surface、text、border、accent 等語義角色,組件使用語義層。

為什么不能全部叫 primary 或 blue-500?

通用命名靈活,但會抹去文化語境。文化 primitives 保留來源名稱,語義 aliases 保持界面可維護。

一個文化配色 mode 應該包含多少顏色?

實用 mode 通常包含五到十二個角色色。大型色庫適合研究,但小型場景 mode 更容易在 Figma 和代碼中落地。