文化色彩不能像普通色階一樣處理。一個中性的 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 用於交付實驗。
相關調色板
FAQ
文化色名應該直接用於組件嗎?
通常不建議。文化名應保留在 primitive tokens 中,再映射到 primary、surface、text、border、accent 等語義角色,組件使用語義層。
為什么不能全部叫 primary 或 blue-500?
通用命名靈活,但會抹去文化語境。文化 primitives 保留來源名稱,語義 aliases 保持界面可維護。
一個文化配色 mode 應該包含多少顏色?
實用 mode 通常包含五到十二個角色色。大型色庫適合研究,但小型場景 mode 更容易在 Figma 和代碼中落地。