从一个颜色开始，把界面收拢起来

很多界面看起来”不专业”，问题往往不在审美，而在不一致：这里圆角 6px，那里 10px；这个灰色用在正文，那个灰色用在小标题。用户说不清哪里怪，但能感觉到。

三组变量就够起步

先不要急着建组件库。把下面三组值写进一个文件，全站只引用它们：

:root {
  --ink: #191817;      /* 正文 */
  --ink-soft: #55504a; /* 次级文字 */
  --line: #e6e1d7;     /* 分割线 */

  --font-display: "Songti SC", serif;
  --font-body: system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-6: 40px;
}

间距用固定的几档，而不是随手写 13px。这一条执行下去，页面的呼吸感会立刻变好。

留白比装饰有用

新手最容易犯的错，是页面显得”空”就加装饰：渐变、阴影、图标、边框。其实多数时候需要的是把行高和段落间距调大。

• 正文行高取 1.7–1.9
• 段落间距约等于一个行高
• 大标题与正文之间至少留两倍间距

先在纸上定层级

动手写代码之前，先回答：这个页面最重要的信息是什么？用户第一眼应该看到什么？把它放大、加粗、单独占一行。其余元素按重要性依次减弱——字号、颜色、透明度都是可以调的工具。

一个页面只有一个主角。确认这一点，比选十套配色方案都管用。