字体
全程 Inter,三个字重,行高取整像素。令牌导出按字号字重给样式命名,不提供语义别名,所以下面这张表就是那层映射:哪类东西用哪个样式。导出的二十个样式里有七个出现在生成器区域内,其余属于平台自己的营销与落地页。
| 样式 | 字号 | 承载 |
|---|---|---|
16-semibold | 16 / 600 / 22 | 仅对话框标题 |
14-medium | 14 / 500 / 20 | 按钮、侧栏标题(「Templates」「AI Generate」) |
12-medium | 12 / 500 / 16 | 属性卡片标题、分段控件选项 |
12-regular | 12 / 400 / 16 | 字段标签、输入框内取值、下拉文字、说明文字、提示条与对话框正文 |
11-regular | 11 / 400 / 16 | 缩略图标签、「查看全部」 |
10-medium | 10 / 500 / 14 | 选中的那个工具栏文字 |
10-regular | 10 / 400 / 14 | 单位后缀,以及静止态的工具栏文字 |
16-semiboldFabrication Tips16 / 600 / 22
14-mediumGenerate14 / 500 / 20
12-mediumSize12 / 500 / 16
12-regularCorner radius12 / 400 / 16
11-regularClassic circle11 / 400 / 16
10-mediumTemplates10 / 500 / 14
10-regularmm10 / 400 / 14
七个样式按真实字号各排一行,每行装的就是它负责的那类东西。七档里只有两档大于 12px,而 10–12px 的四档靠字重区分、不靠字号——这是 320px 侧栏既读得清又不会越写越高的原因。
面板建立在 12px 上
标签、取值、卡片标题共用 12px。卡片内的层级来自字重(卡片标题 500、字段标签 400)和位置(标题行在上、字段行在下),不来自字号。14px 留给两样必须隔着房间也能读到的东西:按钮和侧栏标题。
Templates label · 14 / 500
mm
note · 12 / 400 · text-tertiary
同一张卡片里三层:卡片标题 12 / 500 / text-primary、字段标签 12 / 400 / text-primary、输入框内取值 12 / 400 / text-secondary。差的是字重和颜色,不是字号——面板因此不会越写越高。
把字段那一档提到 14 会让每行高 4px、一条 320px 的侧栏少放一张卡片。字段标签、取值、说明文字共用 12-regular,所以需要更大的字时是整档上移——换成 14-regular——并接受更高的行。没有办法只调其中一样,这正是它的用意。
数字
取值一律 tabular-nums:等宽数字让一列 92px 输入框里的 200、3、12 各自对齐,改值时数字不会左右跳。单位用 10-regular 档,作为独立元素待在同一个字段的末端,不另开一列。