排版与基础规范
基于 iOS 系统字体的 11 级字号阶梯，叠加 Manrope 可变字体承担大数字展示。间距遵循 4pt 网格，圆角分 7 档，阴影承担浅色主题下的层级区分。
03 · TYPOGRAPHY · 字号阶梯
Type Scale · 11 级字号阶梯
Hero 34
Title 1 · 28
Title 2 · 22
Title 3 · 20
Headline 17 · 列表项标题
Body 17 · 正文内容，用于主要阅读区域。
Callout 16 · 辅助正文
Subheadline 15 · 次要信息
Footnote 13 · 时间戳与标签
Caption 1 · 12 角标
Caption 2 · 11 最小文字
Numeric · Manrope
12,480
96.7%
7h 12m
11 级字号阶梯 + Manrope 三档大数字
Spacing · 4pt 网格与语义间距
4
8
12
16
20
24
32
48
64
| 场景 | 取值 | 说明 |
|---|---|---|
| 屏幕水平内边距 | 16pt | 左右安全区 |
| 卡片内边距 | 16pt | 上下左右统一 |
| 卡片间距 | 12pt | 垂直方向 |
| 区块间距 | 24pt | 不同功能区 |
| 列表项间距 | 8pt | 同类列表项 |
| 按钮内边距 | 14 × 24pt | 垂直 × 水平 |
Radius · 圆角七档
xs 4
sm 8
md 12
lg 16
xl 20
2xl 24
full
卡片统一 16pt；按钮默认 12pt，胶囊型用 full；嵌套圆角 = 外层圆角 − 内边距；底部 Sheet 仅顶部两角 24pt。
Shadow · 五层阴影
sm · 卡片
md · 浮层
lg · 弹窗
xl · Toast
字号阶梯
| 名称 | 大小 / 行高 | 字重 | 用途 |
|---|---|---|---|
| Hero | 34 / 41 | Bold | 启动页大标题 |
| Title 1 | 28 / 34 | Bold | 页面主标题 |
| Title 2 | 22 / 28 | Bold | 区块标题 |
| Title 3 | 20 / 25 | Semibold | 卡片标题 |
| Headline | 17 / 22 | Semibold | 列表项标题 |
| Body | 17 / 22 | Regular | 正文 |
| Callout | 16 / 21 | Regular | 辅助正文 |
| Subheadline | 15 / 20 | Regular | 次要信息 |
| Footnote | 13 / 18 | Regular | 时间戳、标签 |
| Caption 1 / 2 | 12 / 16 · 11 / 13 | Regular | 角标、最小文字 |
| Numeric Hero | 56 / 60 | Bold 700 | 计时器、步数、大 KPI |
| Numeric Large | 34 / 40 | Bold 700 | MetricCard 主数值 |
| Numeric Medium | 24 / 28 | SemiBold 600 | GroupKPI 数值 |
动效规范
| 类型 | 时长 | 场景 |
|---|---|---|
| 即时 | 100ms | 按钮按压、开关切换 |
| 快速 | 200ms | 淡入淡出、颜色变化 |
| 标准 | 300ms | 页面转场、弹窗出现 |
| 慢速 | 450ms | 复杂动画、列表重排 |
| 延展 | 600ms | 骨架屏脉冲、进度填充 |
弹性曲线 cubic-bezier(.34,1.56,.64,1) 仅用于 Sheet 弹出与 Toast 滑入。系统开启「减弱动态效果」时，所有过渡改为淡入淡出、时长减半、禁用弹性。