设计前端

纸上站点:给博客做一套设计 Token

1 分钟阅读

把设计规范变成 CSS 变量的过程,比想象中更像排版一次活字。


设计 Token 是站点的度量衡。色、字、距、影全部先用变量命名,再谈具体值。

为什么要先定 Token

组件层如果直接写十六进制色,暗色模式就要逐处返工。语义化命名之后,换主题只是换值。

  • 前景永远叫 ink,背景永远叫 paper
  • 点缀色占比控制在 5% 以内
  • 阴影只暗示厚度,不做光晕

命名即文档

:root {
  --c-ink: #1a1815;
  --c-paper: #f7f3ec;
}

读到名字就知道用途,这是给未来自己的信。