用 CSS 变量，搭建一个有呼吸感的设计系统

一个设计系统的起点，不一定是几百个组件。它也可以只是一组用得顺手的变量，以及我们对细节的一致判断。

从语义而不是颜色开始

与其将变量命名为“绿色”，不如为它命名为“强调色”。组件关心的是用途，而不是某个具体的颜色值。

:root {
  --color-background: #f8faf7;
  --color-text: #27352b;
  --color-muted: #737f73;
  --color-accent: #47794b;
  --color-border: #e1e7dc;
}

这样，当配色需要改变时，我们就不必逐个寻找使用了哪个十六进制颜色的组件。

让间距拥有节奏

我喜欢用一个很小的间距集合，而不是在每个页面临时决定一个数字。

:root {
  --space-small: 8px;
  --space-medium: 16px;
  --space-large: 24px;
  --space-section: 48px;
}

一致的间距会建立一种看不见的节奏。读者未必说得出哪里不同，却能感受到页面更从容了。

深色主题不是简单反色

主题切换只需要覆盖语义变量，组件本身不必重新编写：

[data-theme='dark'] {
  --color-background: #111713;
  --color-text: #c3cebf;
  --color-muted: #98a493;
  --color-accent: #a2c18d;
  --color-border: #2b362a;
}

不过，颜色关系需要重新检查。深色背景上的纯白可能过于刺眼，浅色主题中的强调色在深色主题中也未必足够清晰。

我通常会降低正文的亮度，给边框更少的对比，同时保留足够明显的焦点状态。

不要忘记真实的内容

设计系统需要用长标题、短摘要、中文、英文、代码块和不同屏幕尺寸测试。只有在真实的变化面前保持稳定，它才真正成为一个系统。

先有一组明确的约定，再慢慢长出组件。不是所有规则都需要一次制定完毕。