二途序

CSS 设计令牌体系

设计令牌是什么

设计令牌（Design Tokens）是将视觉设计决策抽象为命名变量的方法。在 CSS 中，自定义属性（Custom Properties）天然支持这一模式。

颜色令牌

1
2
3
4
5
6
7
8
9
10
:root {
  /* Light mode — warm cream canvas */
  --color-canvas: #faf9f5;
  --color-surface-card: #efe9de;
  --color-primary: #cc785c;
  --color-ink: #141413;
  --color-body: #3d3d3a;
  --color-muted: #6c6a64;
  --color-hairline: #e6dfd8;
}

深色模式

1
2
3
4
5
6
7
8
9
html[data-theme="dark"] {
  --color-canvas: #181715;
  --color-surface-card: #252320;
  --color-ink: #faf9f5;
  --color-body: #a09d96;
  --color-muted: #8e8b82;
  --color-hairline: #2a2825;
  /* --color-primary stays #cc785c — coral is constant */
}

核心原则

  1. 单一来源 — 所有颜色只在一处定义
  2. 语义命名 — --color-ink 而非 --color-black
  3. 模式无关 — 组件代码引用变量，不关心当前模式

好的设计系统让换主题变成换变量，而不是重写 CSS。

排版令牌

层级 字号 字重 行高
h1 36px 400 1.15
h2 28px 400 1.2
body 16px 400 1.6
caption 13px 500 1.4

正文行宽控制在 720px，约 75 字符/行 — 长篇阅读的最佳视觉宽度。