用设计令牌搭建可扩展的 CSS 基础

为什么要用设计令牌

做一个页面容易，让它能在后续不断扩展而不失控很难。我的做法是先不急着写样式，而是把可变的决策抽出来，集中定义成设计令牌（CSS 自定义属性），页面里只引用令牌，不写死具体值。

令牌如何分层

我把令牌分成四层，每层只解决一类问题：

1. **颜色**：背景、表面、正文、辅助文字、边框，以及一个强调色（含 hover 与浅色底）。颜色数量刻意保持少，避免页面变花。 2. **间距**：以 8px 为基准，形成 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 的梯度。布局时只从这里取，间距自然有节奏。 3. **字号与行高**：标题、正文、辅助文字分级明确，正文 17px、行高 1.6，长文本用 1.75，保证阅读舒适。 4. **结构**：圆角、阴影、最大宽度、页头高度。这类值改动一次就能全局生效。

可读性必须量化

颜色好看不等于可读。我用相对亮度公式实际计算了每一处文本与背景的对比度：

- 主标题 15.26:1 - 正文与辅助说明 5.79:1 - 页脚与次要信息 4.78:1

WCAG AA 要求正文至少 4.5:1，所以最初选定的浅灰辅助色（3.03:1）被换掉了。这件事让我确信：**对比度要算，不能凭感觉**。

响应式的两个关键点

1. 只设最大宽度并居中，窗口变宽时内容不会散； 2. 断点少而明确，小屏时字号收敛、栅格自动坍缩为单列，而不是为每个设备写一套样式。

深色模式

令牌体系让深色模式几乎零成本：只需要在 `prefers-color-scheme: dark` 下覆盖颜色令牌，布局与组件代码一行不用改。这也是把决策抽出来的最大收益。

小结

设计令牌的本质，是把「设计决策」和「具体实现」分开。前期多花十分钟定义令牌，后续每加一个区块都能复用同一套语言，页面会自然保持一致——这正是「打好基础」的实际含义。