FOUNDATIONS · TYPOGRAPHY

字体 Typography

字体族 3 项、三个文字阶梯(界面 / 正文 / 标题),每档配对行高与字重。样式示例直接以 token 值渲染。

字体族 font · 3

Token 名称字体族示例
font-mono"SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospaceDaren Design 设计系统 Aa 123
font-previewui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serifDaren Design 设计系统 Aa 123
font-sansui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serifDaren Design 设计系统 Aa 123

界面文字 UI text-ui · 7 档

Token 名称字号 / 行高 / 字重示例
text-ui-caption11px / 16px界面文字 Aa 12
text-ui-body-small12px / 18px界面文字 Aa 12
text-ui-body-default14px / 22px界面文字 Aa 12
text-ui-body-large16px / 24px界面文字 Aa 12
text-ui-title-small16px / 24px / 500界面文字 Aa 12
text-ui-title-default20px / 28px / 500界面文字 Aa 12
text-ui-title-large24px / 32px / 500界面文字 Aa 12

值格式 = 字号 / 行高 / 字重;行高与字重 token:leading-ui-* · weight-ui-*

正文 Body text-body · 5 档

Token 名称字号 / 行高 / 字重示例
text-body-xs11px / 16px / 400正文阅读段落 Aa 15
text-body-sm12px / 18px / 400正文阅读段落 Aa 15
text-body-md14px / 22px / 400正文阅读段落 Aa 15
text-body-md-strong14px / 22px / 500正文阅读段落 Aa 15
text-body-lg16px / 24px / 400正文阅读段落 Aa 15

值格式 = 字号 / 行高 / 字重;行高与字重 token:leading-body-* · weight-body-*

标题 Title text-title · 6 档

Token 名称字号 / 行高 / 字重示例
text-title-sm16px / 24px / 500标题层级 Aa 20
text-title-md20px / 28px / 500标题层级 Aa 20
text-title-lg24px / 32px / 500标题层级 Aa 20
text-title-xl36px / 44px / 500标题层级 Aa 20
text-title-2xl48px / 56px / 500标题层级 Aa 20
text-title-3xl56px / 62px / 500标题层级 Aa 20

值格式 = 字号 / 行高 / 字重;行高与字重 token:leading-title-* · weight-title-*