从一个变量，到一种一致的体验

设计变量让界面的共同规则变得可见，也让变化更容易管理。本文是用于演示代码高亮与长文阅读的示例内容。

从用途命名，而不是从外观命名

相比一个具体的灰度值，text-secondary 更能说明使用意图。当主题切换时，我们可以改变数值，而保留语义。这样，组件只需表达自己需要什么，不必知道每一种环境如何实现它。

1:root {
2  --surface: #141414;
3  --text-primary: #f0eee8;
4  --text-secondary: #a9a79f;
5  --accent: #a5b4fc;
6}
7
8[data-theme="light"] {
9  --surface: #f5f3ed;
10  --text-primary: #191919;
11  --text-secondary: #62615c;
12  --accent: #394dd8;
13}

用状态验证系统

默认状态看起来协调还不够。焦点、错误、禁用和加载状态同样需要进入设计语言。组件的价值，正是让这些细节不必在每个页面重新决定。

一致性，让设计判断可以被积累，而不是不断重来。

从小规模开始：一个按钮、一组输入、一种内容布局。让真实使用不断修正规则，比预先穷尽所有可能更有效。