design
design/foundations/index.md
medium
design-foundations-index
UI 通用硬规范索引 — 与视觉风格无关的底线：WCAG 2.2 无障碍 / 8pt 间距 / 模块化字阶 / 60-30-10 配色 / 响应式断点。Use when 写任意前端页面 / 评审 UI 是否达标 / 校对比度间距字阶时。
子项索引
| 子项 | 一句话 |
|---|---|
| accessibility leaf | WCAG 2.2 无障碍底线 — 对比度 4.5:1/3:1、触控目标 24/44px、:focus-visible、prefers-reduced-motion、状态禁纯色编码 |
| spacing-grid leaf | 间距用 8pt 主网格(8/16/24/32...)，密集/数据 UI 与微间距才下探 4pt，禁奇数像素 |
| typography-scale leaf | 正文 16px 基准、单一模块化字阶比例(默认 1.25)、行长 45-75 字符、行高 1.5、靠字重造层级 |
| color-usage leaf | 配色按 60-30-10 分配(主中性/次表面/强调)，强调色仅留给 CTA·链接·激活，hover/active 比基色深 10-15% |
| responsive-breakpoints leaf | 响应式断点降列策略(≤1024 二列 / ≤768 单列)、移动优先、降列保持层级不重排、移动端守触控目标底线 |
Foundations · 通用硬规范
这里是与风格无关的底线：无论 bento 还是 wes-anderson，对比度、间距、字阶、配色比例、响应式都得守住。 数字锚定 WCAG 2.2 与主流设计系统（Material 3 / Apple HIG），可直接照抄。
按你正在关心的维度下钻：
| 你在关心 | 进哪个 |
|---|---|
| 对比度够不够 / 触控目标多大 / 焦点可见 / 动效尊重偏好 | accessibility |
| 间距用多少 / 8pt 还是 4pt | spacing-grid |
| 字号阶梯怎么定 / 行长行高字重 | typography-scale |
| 各色占比 / 主色辅色强调色怎么分 | color-usage |
| 断点设哪几档 / 移动端怎么降列 | responsive-breakpoints |
链接
- 上层：
../index.md - 配色角色如何 token 化：
../design-language/tokens-and-theming.md - 动效细则：
../component-patterns/motion-and-animation.md