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 和代码中落地。