🔤 Typography · 字体层级 / 大标题 / 字组

来源：Figma 「大标题 (93)」+「标题 (19)」+「字组 (1)」共 113 次实例抽取
14 个 variant · 覆盖 H1-H6 + Display + Body + Caption + 数字大字 + 字组组合

Display & Hero · 营销大标题

$389,900 MXN
display-1 · 64px / 700
letter-spacing -0.02em
Compra inteligente
display-2 · 48px / 700
letter-spacing -0.01em

Heading · H1-H6

H1 · 模块主标题

h1 · 32px / 700
line-height 1.2

H2 · 区块标题

h2 · 24px / 700
line-height 1.25

H3 · 卡片标题

h3 · 20px / 600
line-height 1.3

H4 · 子标题

h4 · 18px / 600
line-height 1.4
H5 · 强调正文
h5 · 16px / 600
line-height 1.5
H6 · 小标题
h6 · 14px / 600
line-height 1.5

Body & Caption · 正文层级

Body-lg · 大正文，用于产品详情描述、报告摘要。

body-lg · 18px / 400
color grey-700

Body · 默认正文，用于段落文字、说明文案。

body · 16px / 400
color grey-700

Body-sm · 小正文，用于辅助说明、二级信息。

body-sm · 14px / 400
color grey-600
Caption · 极小辅助文字
caption · 12px / 400
color grey-400
Overline · 顶部标识
overline · 11px / 700
letter-spacing 0.08em

数字大字 · 价格 / 统计 / 续航

数字独立展示场景（价格、里程、评分）。tabular-nums 保证数字等宽对齐。

450 km
number-xg · 56px / 700
续航 / 距离
8.7 /10
number-lg · 32px / 700
评分
$ 389,900 MXN $429,900
price · 28px / 700
价格 + 原价

字组 · Title + Sub + Tags 组合

从 Figma 「字组」抽取的标题组合模式，强调信息层级打包展示。

2026 新款

Nissan Versa Exclusive

紧凑型轿车 · 1.6L · CVT · 4 门
🔥 销量 #1 ⚡ 节能 💎 8.7/10

购车流程

5 步即可提车，全程平均 3 天

🎨 对应 Design Tokens

类型size / weightcolor token
Display 1-264/48 · 700--grey-900
H1-H232/24 · 700--grey-900
H3-H520/18/16 · 600--grey-900
H614 · 600--grey-700
Body-lg18 · 400--grey-700
Body / Body-sm16/14 · 400--grey-700 / --grey-600
Caption12 · 400--grey-400
Overline11 · 700 uppercase--grey-400
Number xg/lg/md56/32/20 · 700--grey-900 · tabular-nums