基础 · FOUNDATION
间距与基线 Spacing
一把 8pt 梯子加 4pt 微调。padding、margin、gap、定位偏移、组件高度、行高全部从梯上取值——不发明数字。
间距梯
4
8
12
16
20
24
32
40
48
56
64
72
80
88
| 档位 | 语义 |
|---|---|
| 4 | 微调 |
| 8 | 元素内 |
| 12 | 紧凑 |
| 16 | 标准 |
| 20 | 舒适 |
| 24 | 区块内 |
| 32 | 区块间 |
| 40 | 大区块 |
| 48 | 节内距 |
| 56–88 | 节与节 |
| 样本 | 令牌 | 值 | 用途 |
|---|---|---|---|
| 4px | 微调 | ||
| 8px | 元素内 | ||
| 12px | 紧凑 | ||
| 16px | 标准 | ||
| 20px | 舒适 | ||
| 24px | 区块内 | ||
| 32px | 区块间 | ||
| 40px | 大区块 | ||
| 48px | 节内距 | ||
| 64px | 节间距 |
JSX 内联样式允许写字面量，但值必须在梯上。拿不准取哪档，就看同类组件用了哪档，跟它一致。
控件高度三档
sm · 2828px
md · 3636px
lg · 4444px
28 工具条键 · 36 表单键与输入框 · 44 主操作键。容器与头部导航取 32 / 40 / 48 / 56 / 64（60 是头部导航的历史值，允许）。可点击目标不小于 28px 高。
4pt 基线
- 显式行高一律写 px 且为 4 的倍数：13px 正文 → 20px；12.5px 副文 → 20px；16px 卡片标题 → 24px；22–26px 节标题 → 32px；40–48px 首屏 → 48 / 56px。
- 无单位行高只允许
1（单行字形复位，盒高由容器管）。 - 段落间距从梯上取：正文段间 8 / 12，区块间 16 / 24。
例外（审计器放行）
0、边框宽1 / 1.5 / 2px（细线不是间距）、999 / 50%圆角、百分比、calc()、var()、auto。- SVG 内部坐标、
transform、动画关键帧数值——图形语言，不归网格管。 - 宽度暂不强制（侧栏 266 等历史值牵连布局公式）；新代码的固定宽度请自觉取梯。
执法器
纪律：自己改过的文件不新增偏离
npm run audit:spacing # 报告态
npm run audit:spacing -- --strict # 有偏离即失败铁律
✓ 要需要尺寸时从梯上取一档
✗ 不要写 13px、22px 这类不在梯上的间距
✓ 要优先 8 的倍数，4 只做微调
✗ 不要为「看起来差一点」发明新值——一致性比精确性重要