小网站也值得有一套小小的设计系统

示例文章：以下内容是一份可替换的设计笔记，不构成作者真实项目成果记录。

个人网站通常由一个人维护，但页面会不断增加。今天写首页，明天补文章页，几周之后再加归档；如果每次都重新决定颜色和距离，网站很容易逐渐失去一致性。

先约定少量变量

一套小型设计系统可以从很少的项目开始：页面底色、正文颜色、强调色、边框颜色，以及几种常用间距。变量名称描述用途，比只描述某个颜色值更有帮助。

深色主题不应简单反转所有颜色。背景、卡片与悬浮状态依然需要层次，辅助文字和边框也需要分别考虑。在两个主题中，相同元素应该承担相同职责。

组件要表达状态

按钮除了正常状态，还有悬浮、焦点与不可用状态。导航除了当前位置，也要支持键盘焦点。统一这些状态，比制作大量只存在于截图中的组件更实际。

正文排版也可以被当成一个完整组件。标题、引用、列表、表格与代码块在一处维护，新的文章就能够直接继承已有的阅读体验。

给变化留出位置

设计系统的价值不是禁止变化，而是让变化可以解释。如果一个新页面需要更密集的内容，可以增加一种明确的布局，而不必让每个元素都拥有独立例外。

• 重复三次的样式值得检查是否需要共享。
• 一次性的特殊布局可以留在对应页面。
• 新的变量需要明确用途和使用范围。
• 视觉规范应该与实际组件同步更新。

小而清楚的约定，能让下一次修改变成一个局部决定。页面的风格因此逐渐稳定，维护者也能把精力更多地留给内容。