间距系统与 8px 栅格
基 8 间距阶使 padding、margin、gap 决策自动化且一致。
设计令牌入门
为什么
随机 padding（13px、17px、22px）造成视觉抖动并使 '对齐这个' 成手动战斗。8px 基阶给 6-8 值覆盖所有需求并使对齐自动。
Tokens Studio（原 Figma Tokens）有 50 万以上安装量，W3C 设计令牌格式模块即将成为候选推荐。令牌从单一来源实现暗色模式、多品牌主题和平台一致性。
何时使用
第一天就采用间距阶 — 最便宜、最高杠杆的令牌集。若有 30+ 唯一 padding 值，审计并对齐到阶。
如何做
1. 选基 — 8px（0.5rem）；4px 仅用于微调图标
2. 生成阶 — 0、4、8、12、16、24、32、48、64（16 后 ×1.5 步）
3. 命名 — xs=4、sm=8、md=12、lg=16、xl=24、2xl=32、3xl=48、4xl=64
4. 应用到一切 — padding、margin、gap、组件高度全用阶
5. 组件尺寸 — 控件高 = 40px（lg+sm）、卡片 padding = 24px（xl）
6. Tailwind — 映射到 p-1..p-16，或用默认 4px 阶（p-2 = 8px）
7. 强制 — stylelint-declaration-strict-value 禁止阶外原始 px
示例
// spacing-tokens.ts — 8px 基阶
export const space = {
0: "0",
xs: "0.25rem", // 4px — 图标内部
sm: "0.5rem", // 8px — 紧凑 gap
md: "0.75rem", // 12px — 默认 gap
lg: "1rem", // 16px — 卡片内部
xl: "1.5rem", // 24px — 卡片 padding
"2xl": "2rem", // 32px — 区段 gap
"3xl": "3rem", // 48px — 页面 gap
"4xl": "4rem", // 64px — hero gap
} as const;
/* Card.tsx — 每维度来自阶 */
.card {
padding: var(--space-xl); /* 24px */
gap: var(--space-md); /* 12px */
border-radius: var(--radius-md); /* 8px */
box-shadow: var(--space-sm);
}
/* stylelint 配置 — 禁原始 px */
"declaration-property-value-allowed-list": {
"/^(padding|margin|gap)/": ["/var\\(--space/", "0"]
}
常见问题
- ⚠离栅格值 — 13px padding '微调' 对齐，破坏整栅格节奏
- ⚠阶过细 — 20 间距值，设计者无法决定用哪个
- ⚠混合基 — padding 8px、图标 6px、字号 10px，无一对齐
最佳实践
- ✓一基、最多 8 值 — 覆盖 95% 需求，决策变自动
- ✓现有值对齐到阶 — 13px→12px、22px→24px，绝不保留离栅格
- ✓stylelint 强制 — 禁 padding/margin/gap 中原始 px，CI 违规失败