设计 Token：少即是多

做个人站时很容易陷入「每个组件自己写一套颜色」。三个月后你想加暗色模式，就会发现自己在全局搜 #FBFBFA。

我真正在用的 Token

这站目前只维护几类：

• 背景 / 表面：bg、surface、surface-hover
• 文字三级：primary / secondary / tertiary
• 边框两级：默认与 hover
• 圆角 / 阴影 / 区块间距

标签色（蓝、绿、黄……）仍然有，但尽量少出现在叙事型内容里。博客标签改成 A / B 文本后，页面立刻冷静很多。

命名比数量重要

我试过把 spacing 拆成 spacing-1 到 spacing-12，结果组件里仍然随手写 mb-8。后来接受现实：Token 是约束，不是百科全书。

能被一句话解释的变量才值得进 :root。解释不清的，就让 Tailwind 工具类去处理。

暗色模式的教训

暗色不是「把颜色反相」。边框要更亮一点，阴影要更重一点，标签背景也要重新校准对比度。用 data-theme="dark" 覆盖同一套变量名，比维护两套 class 名省心太多。

写在最后

个人项目不需要完整的 Design System 文档。一套能覆盖 80% 场景的 CSS 变量，就已经能让站看起来「像一个人做的」，而不是「每个区块来自不同模板」。