CSS 设计令牌实战：从变量到体系

CSS 设计令牌不是什么新概念，但多数项目把它做成了「把颜色提取成变量」就止步。真正的体系要回答三个问题：令牌分几层、语义怎么命名、主题怎么切换。

两层令牌：原始值与语义值

这个站点只有两层。第一层是原始值——纸色、墨色、朱砂红这些具体颜色；第二层是语义值——--ink、--muted、--accent 这些组件真正引用的名字：

:root {
  --paper: #faf8f2;  /* 原始值 */
  --ink: #211f1a;
  --accent: #b23a30;
}

组件只允许引用语义值。想换一种「墨色」，改一个地方；想整体换一套视觉，重定义语义层的映射即可。

暗色模式是一次变量覆盖

浅色深色两套主题，全部工作量是 [data-theme="dark"] 选择器下的一次重定义：

[data-theme="dark"] {
  --paper: #171512;
  --ink: #e9e5d8;
  --accent: #d97a66;
}

注意暗色下强调色被提亮了——同一色相的朱砂红在深底上需要更高的明度才能保持可读性。这是设计令牌最容易被忽略的细节：主题切换不是反转，是重新校准。

字体是令牌，不是魔法值

中英混排的字体栈值得单独设令牌。标题衬线、正文无衬线、元信息等宽，三种字体承担三种语气：

--font-serif: "Noto Serif SC", "Songti SC", serif;
--font-sans: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;

衬线只在标题与引文出现，正文保持系统无衬线——这是阅读速度与辨识度的平衡点。

令牌体系的验收标准

一套令牌做完了没有，我的验收标准只有一条：新写一个页面时，不需要知道任何十六进制颜色值。如果写组件时还在查「这个灰是多少」，说明令牌层有缺口，回补语义值，而不是在组件里写死。