字体

全程 Inter,三个字重,行高取整像素。令牌导出按字号字重给样式命名,不提供语义别名,所以下面这张表就是那层映射:哪类东西用哪个样式。导出的二十个样式里有七个出现在生成器区域内,其余属于平台自己的营销与落地页。

样式字号承载
16-semibold16 / 600 / 22仅对话框标题
14-medium14 / 500 / 20按钮、侧栏标题(「Templates」「AI Generate」)
12-medium12 / 500 / 16属性卡片标题、分段控件选项
12-regular12 / 400 / 16字段标签、输入框内取值、下拉文字、说明文字、提示条与对话框正文
11-regular11 / 400 / 16缩略图标签、「查看全部」
10-medium10 / 500 / 14选中的那个工具栏文字
10-regular10 / 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 档,作为独立元素待在同一个字段的末端,不另开一列。

Esc
输入关键词搜索全部文档 · 切换 · 打开