建这个站之前，先定了一件事：它不该看起来像一个产品官网。
产品官网的结构是被验证过的——首屏大标题、一句副标、两个按钮、下面三张特性卡。这套东西有效，但它是为了说服陌生人点击而设计的。个人博客不需要说服谁，它需要的是让人愿意读第二段。
所以方向换成了另一个：把它当成一份持续出版的刊物。
编号是这套视觉的骨架
每篇文章有一个固定编号，No. 001 起，按发布时间递增，不复用。首页目录里编号在左、标题居中、日期靠右，三者用发丝线隔开。
这个决定解决了一个实际问题：文章列表怎么排都不好看。用卡片，三张以上就开始像商品货架；用纯列表，又容易变成一坨没有层次的文字。而编号给了列表一个天然的纵向节奏——眼睛沿着 001 / 002 / 003 往下滑，比沿着标题滑更省力。
编号还有个副作用是好的：它暗示了「这里在持续产出」。一个只有三篇文章的站，如果有编号，看起来像是刚开始；如果没有编号，看起来像是做完了就扔了。
顶部那行 VOL. 01 — 2026 是虚构的，一年一卷，明年变 02。没有任何功能，纯粹是氛围。这类东西要克制着用——加一个叫细节，加三个就叫装腔。
不用卡片，用线
整站没有一个圆角卡片、没有一处投影。分隔全靠 1px 的发丝线，重点区块用 2px 的实线压边。
原因很实际：卡片是在模拟「一张纸浮在另一张纸上」，那是屏幕时代的隐喻。而这个站想模拟的是印刷品——印刷品里没有浮起来的卡片，只有栏线和留白。
代价是层次更难做。没有投影，就只能靠字号对比、字重、留白和线的粗细来建立层级。这要求间距必须精确，差 4px 就能看出来。所以间距全部走 4 的倍数梯度，写进 CSS 变量，不允许临时手写数值。
中文没有用 webfont
这是整个站最重要的一个技术决定。
思源宋体（Noto Serif SC）完整字重几 MB。即使 Google Fonts 做了 unicode-range 切片，按需加载，一篇三千字的文章也会触发几十个切片请求，累计轻松过 1 MB。首屏为了等字体白屏两秒，对阅读体验是净损失。
所以中文走系统字体栈：
--font-display: "Fraunces", "Songti SC", "Noto Serif CJK SC",
"Source Han Serif SC", "SimSun", serif;
拉丁展示字用自托管的 Fraunces（可变字体，36 KB），中文回落到系统宋体。macOS 上是 Songti SC，Windows 上是 SimSun，Linux 上多半有 Noto Serif CJK。
这里有个取舍要说清楚：SimSun 在小字号下渲染确实差，笔画细、发虚、屏显优化差。但这个问题只在正文出现，而正文我用了 17px 以上的字号和 1.85 的行高，SimSun 在这个尺寸下勉强能看。标题字号更大，宋体的骨架反而是优势。
如果哪天有人反馈「你这字看着发糊」，那就是 Windows + SimSun 的用户。解法不是换字体，是建议他装一个思源宋体——或者我以后做一个按需子集化的中文 webfont，只包含站内实际用到的字。后者工程量不小，先记着。
配色是算出来的，不是挑出来的
暖纸底 #f5f1e8，暖近黑 #1a1814，赭石红 #a8451f。
不用纯白纯黑，是因为纯黑压纯白的对比度是 21:1，太高了，长文读久了眼睛累。暖色系把对比度降到 15:1 左右，同时避免屏幕发蓝。
强调色只有一个，赭石红，只用在三处：链接悬停、文章编号、首字下沉。全站没有第二个彩色。
写完之后把每一组文字/底色的组合都算了一遍对比度：
| 组合 | 对比度 |
|---|---|
| 正文 / 纸底 | 15.73:1 |
| 次要文字 / 纸底 | 5.25:1 |
| 强调色 / 纸底 | 5.27:1 |
| 暗色正文 / 暗底 | 15.18:1 |
| 暗色强调 / 暗底 | 5.88:1 |
最低的一组是 5.25:1，高于 WCAG AA 要求的 4.5。这个不能靠目测——赭石红这类中间明度的颜色，肉眼觉得「挺清楚」，实测经常掉到 3:1 出头。
暗色模式不是把颜色反过来，是另一套值。纸底换成 #14120f（带一点暖调的深棕黑，不是纯黑），强调色提亮到 #e0713f——同一个赭石红在深底上会显得脏，必须往上提。
动效只做了一次
页面加载时，标题、副标、正文依次上浮 20px 淡入，间隔 90ms，总共 180ms 内结束。滚动到新区块时，内容再淡入一次。
除此之外没有别的动效。导航的下划线扫过、文章行的右移 6px，都是 160ms 的即时反馈，不算动效设计。
克制的原因是：动效越多，越像模板。一个页面里如果有五种不同的入场方式，读者的注意力就被分散到动画上，而不是内容上。一次编排好的入场序列，比十个小惊喜有效。
全部动效都包在 prefers-reduced-motion 里，系统开了「减少动态效果」就一个都不播。
最后
这套东西的说服力不来自某个单点，来自一致性——编号、线、衬线字、单一强调色，四件事从头到尾没有破例。
破例一次就散了。比如首页加一张圆角卡片配投影，整个「印刷品」的隐喻立刻失效，剩下的部分看起来就只是「没做完的现代风」。
所以真正的约束不是技术，是忍住不加。