用 CSS 变量搭一套设计系统

设计系统听起来像大团队的奢侈品，但在个人项目里它反而是最省钱的投资：token 写一次，所有页面引用，改一处等于改全站。这篇记录我把整站样式收敛进 CSS 变量的过程，不引入任何框架，最终只有一个 tokens.css 和两个配套文件。

为什么是 CSS 变量

工具链方案（Sass 变量、Tailwind 配置）都要经过编译，而 CSS 自定义属性是运行时真实存在的值，好处有三个：

• 即改即见：DevTools 里改一个 --accent，全站强调色立刻变化，非常适合调视觉。
• 零依赖：换构建工具、换框架，变量文件原样搬走。
• 可级联：媒体查询里直接覆盖变量就能做主题与适配，比如小屏把分割线透明度从 0.3 提到 0.35。

:root {
  --accent: #18D1FF;
  --accent-fg: #000000;
  --fs-h2: 28px;
  --dur: 300ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

只允许四个色位

约束比能力重要。强调色只有四种用法是合法的：标题左侧色条、反色块底、编号标签底、hover 反馈。其余地方一概不许出现。这条规则让”用色”从审美问题变成了审查问题——数一数页面上青色的面积就知道对不对。

反色代替加粗：要强调就”青底黑字”，不加粗、不加发光、不加阴影。

字阶做减法

字号轴只留 72 / 48 / 28 / 20 / 16 / 12 / 11 七档，把 14、18、24 这些中间档全部砍掉。巨与微的两极分布会天然形成”仪表盘感”，中间档越多，页面越平庸。

层级	桌面	用途
Display	72px	首屏大名
H1	48px	页标题
H2	28px	区块标题
正文	16px	阅读主体
元信息	12px	日期、编号

动效只有一条曲线

全站只允许一条缓动曲线 cubic-bezier(.2,.8,.2,1) 和一个主时长 300ms，只动 opacity、color、transform。禁止弹跳，禁止弹簧。prefers-reduced-motion 下全部瞬时切换，这是底线不是可选项。

收尾

最终文件结构很简单：tokens.css 只放变量，base.css 放 reset 和通用组件类，prose.css 放正文排版。三个文件都不超过 300 行，但整站的视觉一致性已经比大多数”随手写样式”的项目好得多。设计系统不是画多少组件图，而是让每一次取值都有出处。