初月_Yuechu

令牌不是「多写一层变量」#

::::

这些变量的意义不在于「集中管理」，而在于约束决策范围。当我想给一个卡片加圆角时，不是问「多少像素好看」，而是问「它属于哪个圆角层级」。

排版是最容易失控的部分#

中文和英文的视觉密度不同，同一套字号在两种语言里读起来完全不一样。最初本站的正文偏小，中文显得又细又密；后来我把正文调到 17px，行高提到 1.85，并把正文和标题的字重分别调到 500 和 600，阅读压力才明显下降。

字号不是孤立数字，它和行高、字重、字体一起决定阅读感受。

颜色和表面要成对出现#

Material 3 的 surface / on-surface 配对，解决的是「文字放在什么背景上」的问题。只定义一个主色是不够的，还必须定义它对应的可读前景色。

1
.card {
2
  background: var(--surface-container);
3
  color: var(--on-surface);
4
}
5

6
.card--muted {
7
  background: var(--surface-container-low);
8
  color: var(--on-surface-variant);
9
}

这样切换明暗主题时，不需要在每个组件里写条件判断，变量会自己完成替换。

动效也要有名字#

动效最容易被忽略，但它同样需要约束。本站把常用时长和缓动收进 --m3e-duration-* 与 --m3e-easing-*，并统一尊重 prefers-reduced-motion。

这样做的好处是：当我给一个面板加展开动画时，不需要重新思考「应该用 200ms 还是 400ms」，而是直接选择「短时长」或「中时长」。视觉节奏自然就统一了。

回头看，设计系统真正节省的不是写 CSS 的时间，而是反复做小决定的时间。把那些决定提前做完，才能把注意力留给内容本身。