让设计令牌管住样式

一个页面自己长得好看不难，难的是十个页面看起来像同一个人做的。

只在一处落地具体数值

颜色、间距、圆角、缓动曲线统统写成 CSS 自定义属性，组件里只引用变量：

.card {
	padding: var(--ui-space-5);
	border-radius: var(--ui-radius);
	transition: transform var(--ui-dur) var(--ui-ease-settle);
}

改版时只动令牌文件，全站跟着变。

好处不止于改版

• 想检查「全站是不是出现了六种不同的灰色」时，扫一眼令牌文件就够了
• 深色模式只是换一组变量，组件代码一行都不用改
• 间距刻度固定之后，纵向节奏自然就稳了，不必每次凭手感调

代价

多了一层间接，写的时候要多想一步：这个值该不该进令牌。

判断标准很简单——第二个地方用到它的时候就抽出来。只出现一次的数值，留在原地更好读。