字体 Typography
字体族 3 项、三个文字阶梯(界面 / 正文 / 标题),每档配对行高与字重。样式示例直接以 token 值渲染。
字体族 font · 3
| Token 名称 | 字体族 | 示例 |
|---|---|---|
| font-mono | "SF Mono", "Cascadia Code", "Fira Code", ui-monospace, monospace | Daren Design 设计系统 Aa 123 |
| font-preview | ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif | Daren Design 设计系统 Aa 123 |
| font-sans | ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif | Daren Design 设计系统 Aa 123 |
界面文字 UI text-ui · 7 档
| Token 名称 | 字号 / 行高 / 字重 | 示例 |
|---|---|---|
| text-ui-caption | 11px / 16px | 界面文字 Aa 12 |
| text-ui-body-small | 12px / 18px | 界面文字 Aa 12 |
| text-ui-body-default | 14px / 22px | 界面文字 Aa 12 |
| text-ui-body-large | 16px / 24px | 界面文字 Aa 12 |
| text-ui-title-small | 16px / 24px / 500 | 界面文字 Aa 12 |
| text-ui-title-default | 20px / 28px / 500 | 界面文字 Aa 12 |
| text-ui-title-large | 24px / 32px / 500 | 界面文字 Aa 12 |
值格式 = 字号 / 行高 / 字重;行高与字重 token:leading-ui-* · weight-ui-*
正文 Body text-body · 5 档
| Token 名称 | 字号 / 行高 / 字重 | 示例 |
|---|---|---|
| text-body-xs | 11px / 16px / 400 | 正文阅读段落 Aa 15 |
| text-body-sm | 12px / 18px / 400 | 正文阅读段落 Aa 15 |
| text-body-md | 14px / 22px / 400 | 正文阅读段落 Aa 15 |
| text-body-md-strong | 14px / 22px / 500 | 正文阅读段落 Aa 15 |
| text-body-lg | 16px / 24px / 400 | 正文阅读段落 Aa 15 |
值格式 = 字号 / 行高 / 字重;行高与字重 token:leading-body-* · weight-body-*
标题 Title text-title · 6 档
| Token 名称 | 字号 / 行高 / 字重 | 示例 |
|---|---|---|
| text-title-sm | 16px / 24px / 500 | 标题层级 Aa 20 |
| text-title-md | 20px / 28px / 500 | 标题层级 Aa 20 |
| text-title-lg | 24px / 32px / 500 | 标题层级 Aa 20 |
| text-title-xl | 36px / 44px / 500 | 标题层级 Aa 20 |
| text-title-2xl | 48px / 56px / 500 | 标题层级 Aa 20 |
| text-title-3xl | 56px / 62px / 500 | 标题层级 Aa 20 |
值格式 = 字号 / 行高 / 字重;行高与字重 token:leading-title-* · weight-title-*