做设计久了，会遇到一种让人困惑的情况：把自己的作品和参考放在一起——对齐不差，颜色接近，字体也选了——但对方的就是好看，自己的就是不对劲。你很难说清楚哪里出了问题，只能感觉那张参考"更整齐"，或者"更透气"。

这个差异不来自颜色，也不来自字体的选择，而来自空间的节奏。页面里所有的间距、尺寸、留白，它们之间有没有关联，有没有共同的刻度，直接决定了界面整体看起来是否协调。8pt 系统就是这套刻度的名字。

1. 规则只有一条

8pt 系统的核心规则只有一条：界面里所有的空间值——间距、内边距、组件尺寸——都来自 8 的倍数，以及在必要时用 4 做更细粒度的补充。

"所有"这个词很重要。不是"尽量"，不是"大多数情况下"，而是系统性地、一致地用这套数字：4、8、12、16、24、32、40、48、56、64。不来自这个序列的数字——比如 13px 的间距、17px 的内边距——只要没有明确理由，就不应该出现在你的设计文件里。

为什么是 8，而不是 10 或者 12？这和 8 的因数结构有关。8 可以被 2 整除，也可以被 4 整除，翻倍是 16，再翻倍是 32。整个序列里，相邻数值之间的关系都是整除的，没有零头，没有断裂。这让不同层级的尺寸可以咬合在一起：按钮高度 48，图标尺寸 24，两者正好差一倍；卡片内边距 16，卡片间距 24，比例是 2:3，视觉上有关联感。10 的倍数序列在常用的设计尺寸里不够密集，12 的倍数与常见字号之间的契合度更低，都难以做到 8 这样的覆盖广度。