从零搭一套设计令牌系统

设计令牌（Design Tokens）是把「颜色、间距、圆角、字号」从散落的字面量，收拢成一层可命名的变量。

为什么要令牌化

没有令牌时，薄荷绿可能在 20 个文件里写成 6 种写法；一旦要换肤，改到崩溃。令牌化后：

:root{
  --mint:#1d9e75; --mint-soft:#e1f5ee;
  --ink:#2c2c2a; --line:#eceae6;
  --radius:14px; --gap:20px;
}

建议的分层

1. 基础令牌：原始色值、字阶；
2. 语义令牌：--color-primary 指向基础令牌，组件只认语义；
3. 组件令牌：--card-border 之类，局部微调。

令牌的价值不在「写变量」，而在「建立唯一真相源」。

当你把品牌色收敛到一个文件，换主题、出暗色模式，都只是改一层映射，而不是满山遍野地搜 #1d9e75。