好的界面，留有呼吸的余地

当一个界面不再急于展示自己能做多少事，我们反而更容易看清它真正想说什么。

留白并不是设计完成之后剩下的东西。和字体、颜色、图片一样，它是需要用心安排的元素。在为这个小网站摸索视觉方向时，我又一次想起了这件事。

让重要的东西先开口

打开一个页面时，你的目光该落在何处？如果标题、按钮、卡片、背景都在争抢注意力，答案往往并不清晰。

我喜欢从做减法开始。暂时去掉装饰性元素，只保留内容。没有了阴影、渐变和插画，这个页面是否依然成立？

当留白让重要的东西更容易被看见，它就有了价值。

装饰可以传达某种状态、建立层级或营造氛围。每一次添加都需要一个理由。一个空着的角落，并不一定需要被填满。

用距离来表达关系

两个元素之间的间距，本身就在讲故事。

让标题靠近它的描述，读者会把它们看作一个整体。在两组文章之间多留一点间距，你可能根本不需要分隔线。

一个实用的起点，是选定一小组间距值：

这些数字并不通用。真正重要的是，这些关系在整个页面中保持一致。稳定的节奏，往往比再加一层装饰更能赋予设计个性。

让颜色各司其职

当所有东西都色彩鲜艳，颜色就不再是有用的信号。

这个网站使用安静的 neutral 配色，让文字有空间自成主体。标题和链接在悬停时保持原本的色调，只有对比度的细微变化。深色模式沿用与 Beautiful UI 相同的表面层级，而不是简单地把黑白颠倒。

/* Beautiful UI 深色主题的几个原始取值。 */
html[data-theme='dark'] {
  --page: oklch(0.209 0.004 264.477);
  --surface: oklch(0.26 0.006 271.191);
  --ink: oklch(0.964 0.002 247.839);
  --ink-2: oklch(0.731 0.008 260.731);
  --line: oklch(0.308 0.006 258.354);
}

.article {
  max-width: 65ch;
  line-height: 1.9;
  color: var(--ink-2);
}

代码很简单。阅读的舒适度，往往取决于同样细微的决定：行宽、段落间距，以及链接是否易于辨认。

为阅读腾出空间

组件库和个人网站对读者提出的要求并不相同。组件在小范围内展示一种状态，而文章需要让连续十几段文字都读起来舒服。

我们可以保留细致的边框、克制的配色和安静的交互，同时给文字更多空间。稍大的字号和慷慨的行距，让界面稍稍退后一步。

我希望这个网站是一个你能停留片刻的地方。有话要说时认真写，没话说时就留一点空白。

视觉参考：Beautiful UI。这是一篇示例文章，展示本站的 Markdown 排版和阅读体验。