设计令牌不是颜色字典

从 blue-500 到 action-primary #

颜色值描述了它是什么，语义令牌解释了它为什么存在。前者会随着品牌升级而失效，后者仍然保持意图。

:root {
  --color-action-primary: var(--blue-500);
  --color-surface-editor: var(--slate-950);
}

一套健康的令牌系统通常有三层：原子值、语义角色、组件决策。不要让组件直接引用原子色，也不要把每一个像素都抽象成令牌。

判断标准 #

• 是否表达了产品意图？
• 是否会被多个组件复用？
• 主题切换时是否需要改变？
• 名称是否能跨越视觉改版？

令牌的价值不在数量，而在减少含糊。好的系统让设计与代码讨论同一种语言。