设计令牌不只是一张颜色清单

设计令牌经常被理解成一组颜色变量，但真正有价值的是它们表达了设计决定。一处背景为什么更安静，一条分隔线为什么在深色模式下仍然清楚，都应该能从变量名称中读出来。

从语义命名开始

直接使用 gray-200 很方便，却没有说明颜色出现在哪里。内容型网站更适合使用语义名称，让组件依赖用途而不是某个固定色值。

:root {
  --background: #f6f8f7;
  --surface: #ffffff;
  --text: #182022;
  --muted: #687679;
  --line: rgba(24, 32, 34, 0.14);
  --accent: #e05a47;
}

当主题切换时，只需重新解释“背景”“正文”和“分隔线”，组件不需要知道当前到底是哪一种灰色。

间距决定页面的呼吸

颜色容易被注意，间距却更直接地影响阅读。相邻信息靠近，不同章节拉开；列表项保持稳定高度，标题和说明之间使用可重复的节奏。

一个简单的间距阶梯已经足够覆盖多数场景：4、8、12、16、24、32、48、64。重要的不是数字本身，而是减少每个组件临时猜测的次数。

字体是一种内容结构

衬线字体适合长文与叙述，无衬线字体适合界面信息，等宽字体用于日期、编号和技术提示。它们不是装饰性的混搭，而是在帮助读者判断当前文字扮演的角色。

判断一枚令牌是否必要

新增变量前，可以问三个问题：

1. 它是否会在多个位置复用？
2. 它是否表达一种稳定语义？
3. 修改它时，是否希望相关界面一起变化？

如果答案都是否定的，一个局部样式通常已经足够。令牌系统的目的不是收集变量，而是保存那些值得长期维持的设计关系。