Design Tokens 设计令牌
设计令牌像一套调色和排版的开关。你不再每个页面手动改颜色,而是改一个变量,让系统一起变。
关键结构图
上层是按钮和卡片,下层是颜色、字号、间距 token,用线连接。
What
Design Tokens 是把颜色、字号、间距这些设计规则变成可复用变量。
Design Tokens 是设计系统里的基础变量层。它把视觉规则抽象成名称稳定的值,供设计稿、组件和代码共同使用。
StructureDesign Tokens = 设计决策 + 命名变量 + 跨界面复用
When
当一个产品有多个页面、多个组件,而颜色、字号和间距开始不一致时,就需要设计令牌。
How
先定义核心品牌色、文本色、背景色、间距和圆角,再用语义名称管理它们。不要把 token 当颜色表,它应该表达用途。
Examples
把主按钮颜色写成 primary,而不是在每个按钮里写死一个橙色。以后品牌色变化,按钮一起更新。
把图谱节点颜色做成 graph 专用 token,避免每次改图谱都重新挑一组杂乱颜色。
来源
类型:技术文档 / 行业实践
事实线:Design Tokens Community Group 维护设计令牌规格,目标是让团队在设计工具、代码库和平台之间可靠共享视觉语言。
依据:W3C Design Tokens Community Group 与 DTCG technical reports。
边界:设计令牌能表达颜色、字号、间距等设计决策,但它们需要命名、治理和组件实现配合,不能单独保证界面一致。
常见误读:不要把 design tokens 只当颜色变量表,也不要把社区规格误读成所有团队都必须照搬的唯一标准。