用限制塑造更清晰的界面

这是用于验证博客阅读体验的示例文章。它不会冒充你的真实观点或经历；发布前，请把正文替换成你自己的内容。

好的界面并不来自无限选择，而来自一组清晰、能够反复使用的限制。限制颜色数量、收紧间距阶梯、规定动效节奏，都会让页面更容易形成稳定的视觉语言。

先决定什么不能做

与其从组件开始，不如先写下边界：一个页面可以使用几种表面色？正文的最大行宽是多少？哪些元素值得获得强调？这些答案会直接减少后面的随机决定。

设计系统的价值，不是让每个页面看起来一样，而是让每个决定都有来处。

把令牌变成约束

在这个原型里，组件只读取语义变量，例如 --color-surface 和 --space-4。这样做让视觉调整发生在系统层，而不是散落在每张卡片里。

:root {
  --color-background: #f5faf6;
  --color-surface: #fff;
  --space-4: 1.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

检查每个元素是否必要

• 移除装饰后，信息层级是否依然清晰？
• 悬停状态是否提供反馈，而不是制造噪音？
• 长文是否仍然保持舒适的阅读节奏？

这篇示例文章同时覆盖段落、标题、引用、列表和代码块。现在正文独立保存为 Markdown，新增文章会自动进入归档，目录与阅读时长也会自动生成。