字体Typography

不引入网络字体。标题走系统圆体，呼应标志的圆角轮廓；正文和控件走系统无衬线，保证中西文混排清晰；代码和数值走等宽。三组字体栈都是令牌。

三套字体

下面的字体栈是从 :root 上的令牌读出来的。在你的系统上实际用到哪一款，取决于装了哪些字体：以苹果设备为例（没装 Inter 时）：标题是 SF Pro Rounded，正文是 SF Pro 配苹方，等宽是 SF Mono。

Display · 标题

--ok-font-display

…

UI · 正文与控件

--ok-font

…

Mono · 代码与数值

--ok-font-mono

…

字阶

十一级。标题五档的字号是令牌 --ok-fs-display / -h1 / -h2 / -h3 / -h4：桌面 56 / 40 / 28 / 20 / 17，视口窄于 520px 时收到 38 / 30 / 24 / 18 / 16；正文以下各档字号固定。右侧标注的是当前视口下的实际字号，把窗口拉窄到 520 以下可以看到标题档变化。

墨色方块，粉色鼻子Display…/1.06 · 700 · 圆体--ok-fs-display

安静而利落的界面H1…/1.15 · 700 · 圆体--ok-fs-h1

动效用来解释因果H2…/1.25 · 700 · 圆体--ok-fs-h2

窗口模式与主题色H3…/1.35 · 600--ok-fs-h3

通知与提醒H4…/1.4 · 600--ok-fs-h4

一块利落的方块，压着一只会拱的鼻子。Body L17/1.6 · 450.ok-t-body-l

更改会同步到你的所有设备，随时可以撤销。Body15/1.6 · 450.ok-t-body

保存更改 Save changesLabel15/1.3 · 600.ok-t-label

上次同步：今天 14:02Caption13/1.4 · 500.ok-t-caption

New · Beta · ProMicro11/1.3 · 700 · 大写.ok-t-micro

⌘K 240ms --ok-r-4Mono13/1.5 · 500 · 等宽.ok-t-mono

字重

只用 450 / 500 / 600 / 700 四档。按钮、分段、选择器上的文字统一 600；菜单项 500，选中的那一项加粗到 600。

字重 450 Aa正文字重 500 Aa说明、菜单项、等宽字重 600 Aa小标题、标签、按钮字重 700 Aa大标题、Micro

悬停不改文字。悬停只换底色或线色，不改字号、字重，带文字的元素也不位移；否则周围的内容会被挤动。
选中加粗但不变宽。菜单打开前按“全部加粗”量一次宽度，切换选中项时菜单不会跟着变宽。自己做类似的列表时，也要先给加粗后的宽度留位置。

排版规矩

会变化的数字用等宽

计数、百分比、时间这类会跳动的数值开启 tabular-nums，数字宽度一致，旁边的内容不会跟着抖。库里的计数、进度、步进器、滑块、分页、表格等组件已经开了。

默认（比例数字）10.88% · 1,088 次tabular-nums10.88% · 1,088 次

中西混排。中文与西文、数字之间留一个半角空格；中文旁边的标点用全角。
行长。正文每行 28–38 个汉字为宜；说明文字不超过两行。
三级文字色只做装饰。--ok-text-3 的对比度不足 4.5:1，正文和必须读到的信息用 --ok-text 或 --ok-text-2，见色彩。

在代码里用

用 Text 和 Heading 组件，或者直接加 .ok-t-* 类名；自己写样式时引用字号和字体令牌。

tsx

import { Heading, Text } from 'oink-ui';

<Heading level={2}>区块标题</Heading>            {/* 默认 h2 字阶；variant 可以和语义层级分开 */}
<Heading level={3} variant="h4">小标题</Heading>
<Text variant="caption" tone="neutral">上次同步：今天 14:02</Text>

/* 不用组件时：直接加类名，或者引用令牌 */
<p className="ok-t-body-l">导语</p>
.my-title { font: 700 var(--ok-fs-h2)/1.25 var(--ok-font-display); }

组件的属性见 Text / Heading 文字。