纸上站点:给博客做一套设计 Token
把设计规范变成 CSS 变量的过程,比想象中更像排版一次活字。
设计 Token 是站点的度量衡。色、字、距、影全部先用变量命名,再谈具体值。
为什么要先定 Token
组件层如果直接写十六进制色,暗色模式就要逐处返工。语义化命名之后,换主题只是换值。
- 前景永远叫 ink,背景永远叫 paper
- 点缀色占比控制在 5% 以内
- 阴影只暗示厚度,不做光晕
命名即文档
:root {
--c-ink: #1a1815;
--c-paper: #f7f3ec;
}
读到名字就知道用途,这是给未来自己的信。