语义设计令牌架构：全局、语义和组件令牌

三层

Material Design 描述了三类令牌：引用、系统和组件。许多团队将它们称为全局的、语义的和组件的。名称不同，但想法是相同的：将原始值与其使用方式的决策分开。

• Global（参考）：系统中的每个原始值，例如blue-600、space-4、font-size-16、spring-gentle。
• 语义（系统）：值的用途，例如 color.text.primary、color.action.primary、motion.enter。
• 组件：一个组件如何使用系统，例如button.background或dialog.motion.open。

为什么语义标记很重要

如果按钮直接使用blue-600，则每次主题更改都意味着编辑每个组件。如果它使用 color.action.primary、深色模式、高对比度或新品牌，则只会更改 color.action.primary 指向的内容。 Material 指出，令牌使得应用高对比度调色板或以这种方式更改系统范围内的字体比例成为可能。

主题和多个品牌

对于多品牌或白标产品，每个品牌保留一组语义和组件标记以及一个全局调色板。每个主题都是从语义标记到全局值的映射。 W3C 设计令牌规范 (2025.10) 的第一个稳定版本于 2025 年 10 月发布，添加了主题和多品牌支持、现代色彩空间（例如 Display P3 和 OKLCH）以及别名和组件级引用。

运动令牌也属于这里

持续时间、缓和曲线和弹簧遵循相同的等级。全局代币可能因其刚度和阻尼而具有弹性；语义标记motion.enter指向它；组件令牌sheet.motion.open指向motion.enter。添加减少运动主题，将运动标记重新映射为短淡入淡出。

将代币运送到每个平台

将令牌作为 DTCG JSON 保存在存储库中，这是单一事实来源。 Style Dictionary 等构建工具将它们转换为 CSS 变量、Swift、Kotlin、Flutter 或其他格式。读取相同格式的设计工具可以保持同步，AI编码工具可以直接读取JSON。

• 事实来源：Git 中的 DTCG JSON，像代码一样进行审查
• 构建：在每次更改时转换到每个平台
• 设计工具同步：导入或插件，绝不手动复制值
• Linting：禁止组件中的原始值