一个网站的气质，通常不是来自某个醒目的组件，而是来自许多细小决定的长期一致：正文一行有多长，标题与段落之间留多少空间，弱化文字是否仍然清晰，以及同一种强调色会不会在不同页面里突然改变含义。
接下来，我们会调整 Astro Kami 的视觉系统。目标不是简单地“换一套颜色”，而是建立一套能够解释这些决定的语言。
先定义阅读节奏
博客最重要的界面是文章本身。视觉调整应该从连续阅读开始，而不是从首页卡片开始。
好的排版不会要求读者注意排版本身。它只是在每一次换行、停顿和转折处，悄悄降低理解内容的阻力。
我们会重点观察以下几组关系：
- 正文字号、行高与行宽是否适合中英文混排。
- 一级标题到正文、段落到列表之间的垂直节奏是否稳定。
- 粗体、链接、行内代码和引用是否形成清晰但不过度喧闹的层级。
- 移动端缩窄后，标点、长链接和代码块是否仍然自然换行。
中文没有天然的词间空格，同样的 64ch 在中文和英文里并不代表相同的阅读密度。因此，行宽不能只看一个数字，还要用真实文章在不同屏幕上验证。
把视觉选择变成令牌
颜色和间距不应散落在组件里。我们会逐步把它们收敛为语义明确的设计令牌：
:root { --surface-page: #f6f1e6; --surface-raised: #fbf6ec; --text-primary: #25201b; --text-muted: #4a4239; --accent-primary: #8a4423; --space-prose: 1.5rem;}这里的重点是命名表达用途，而不是表达某个具体色值。以后即使主题改变，--text-muted 仍然表示辅助信息，不需要让每个组件重新理解“某一种灰色”是什么。
| 层级 | 负责的问题 | 验证方式 |
|---|---|---|
| 基础令牌 | 字体、色彩、间距、圆角 | 明暗主题与对比度检查 |
| 语义令牌 | 正文、边框、强调、表面 | 跨页面的一致性检查 |
| 组件规则 | 按钮、文章卡片、提示框 | 状态与响应式检查 |
| 页面组合 | 首页、归档、文章详情 | 阅读路径与信息层级检查 |
保留克制，也保留辨识度
“极简”不等于所有东西都变淡。真正需要克制的是没有意义的装饰，而不是信息层级。链接需要看起来可以点击，焦点状态需要足够明显，提示框需要让读者快速分辨语气。
我们会用三个问题审视每一次视觉改动：
- 它是否帮助读者更快理解内容？
- 它是否能在浅色、深色和窄屏环境中保持成立？
- 它是否成为可复用的规则，而不是只修好眼前这一个页面？
当这些问题都有明确答案时，视觉系统才不只是一个好看的截图，而是一套可以支撑后续功能和多语言内容的基础设施。