设计规范
字体、形状与图标
Geist 与系统中文字体、后台字阶与排版规则；圆角令牌与同心规则；Lucide 图标与图标块。
字体栈
| 角色 | 字体 | 令牌 |
|---|---|---|
| 界面 | Geist（拉丁）→ PingFang SC → Noto Sans SC → Microsoft YaHei → system-ui | --font |
| 数据与代码 | Geist Mono → ui-monospace → SF Mono → Menlo | --mono |
- 数字一律
font-variant-numeric: tabular-nums（表格、指标、坐标轴、计数）。 - Geist 的几何感与“光学仪器”的精确感一致，且与系统中文字体的字重匹配；中文不加载网络字体。
后台字阶（default 密度）
| 令牌 | 字号 / 行高 | 字重 | 字距 | 用途 |
|---|---|---|---|---|
display | 40 / 44 | 600 | -0.03em | 页面主指标（一页最多一个） |
metric | 28 / 34（手机 24 / 32） | 600 | -0.02em | 指标卡数字；手机缩小一档，保证两张并排 |
title-lg | 26 / 32 | 600 | -0.02em | 页面大标题 |
title | 17 / 24 | 600 | -0.01em | 卡片标题、抽屉标题 |
headline | 15 / 22 | 600 | 0 | 列表主行、分组标题 |
body | 14 / 22 | 400 | 0 | 正文、表格 |
body-sm | 13 / 20 | 400 | 0 | 次要正文 |
label | 13 / 18 | 500 | 0 | 按钮、导航、表单标签 |
caption | 12 / 16 | 500 | +0.01em | 时间戳、坐标轴、辅助信息 |
overline | 11 / 14 | 600 | +0.06em（仅拉丁大写） | 侧栏分组名、卡片眉题 |
官网（comfortable 密度）：Hero 64 / 68（手机 40 / 44）、区块标题 40 / 48、引言 18 / 30。
排版规则
- 一个卡片内最多三级：标题（title）→ 主内容（metric / body）→ 辅助（caption）。
- 指标数字与单位之间空一格，单位用
ink-2小一号。 - 标题
text-wrap: balance；正文行长 ≤ 68ch。 - 中文不用斜体、不用全大写；中英混排之间加空格。
形状
| 令牌 | 值 | 用途 |
|---|---|---|
r-xs | 6px | 小标签、勾选框、提示 |
r-sm | 10px | 按钮、输入框、导航项、图标块 |
r-md | 14px | 菜单、下拉、小卡片、列表行悬停底、吐司 |
r-lg | 20px | 卡片、对话框 |
r-xl | 28px | 大面板、手机底部弹层顶角 |
r-full | 999px | 胶囊、分段、Chip、开关、头像、徽标 |
- 同心规则：内层圆角 = 外层圆角 − 内边距，最小 6px（如卡片 20、内边距 12 → 内层 8，取
r-xs以上最近值）。 - 抛光玻璃边：浏览器支持时加
corner-shape: squircle（连续曲率圆角），不支持时退回普通圆角，尺寸不变。
图标
- Lucide，线宽 1.75；尺寸：导航 20、按钮内 16、图标块内 18（64 块内 28）、徽标内 12。
- 图标块（Icon tile）：领域 tint 底 + 领域实色图标，
r-sm（64 用r-md），尺寸 32 / 36 / 44 / 64。用于卡片标题、指标卡、详情页头、设置分组、空状态。 - 当前导航项图标用
brand；其余导航图标ink-2。 - 纯图标按钮必须有
aria-label和提示。