Design Tokens：设计与代码的共同语言

先理解这个概念

基础 token 保存色板和尺寸，语义 token 描述用途，组件 token 处理局部契约。并非每个值都必须经过三层映射；复杂度应随主题、品牌与平台需求增长。命名应让使用者理解意图。

Token 把设计意图转换成可引用的值。原始值如蓝色色阶，语义值如主操作背景，组件值如按钮默认背景，处于不同抽象层。语义层能让主题变化不影响业务代码，但过度细分又会让每个属性都变成孤立配置。应以真实复用和变化需求决定层级。

记住这三个原则

1. 01

   先抽取重复且需要统一变化的值。

2. 02

   语义命名说明用途，避免把颜色写进业务角色。

3. 03

   给主题与平台覆盖定义明确优先级。

实际设计时，分三步做

1. STEP 01

   从高频颜色、文字和间距提取原始值，再为稳定用途建立语义别名，避免组件直接依赖某个色号。

2. STEP 02

   定义主题与状态映射，成对审查文字和背景；区分全局语义与确实只属于某个组件的特殊值。

3. STEP 03

   用两个不同页面验证复用，修改一个语义值观察影响范围，检查是否有业务模块偷偷覆盖造成不一致。

一个容易理解的例子

设计意图被编码为可维护的契约。

:root {
  --green-900: #263d22;
  --action-primary-bg: var(--green-900);
}
.button-primary { background: var(--action-primary-bg); }

适用边界与取舍

并非所有值都要做全局 Token。只用一次的特殊插图尺寸可以局部管理；把每个边距都公开会增加系统维护成本。