字阶令牌

样张使用生成的 CSS 自定义属性来排版，所以你看到的就是 @tanrei/web 实际提供的效果。每个角色把自己的各个部分作为单独的属性公开：-font-family、-font-size、-line-height、-font-weight、-letter-spacing 和 -font-weight-emphasized，另有一个 -font 简写。使用指引（h2 或 p 对应哪个角色，以及为什么强调是一种字重而不是一个角色）请阅读字体排印。

十六个角色

link

body 14px / 22px · 400 (强调 500) · 0

端正清朗的界面 Tanrei

body-large 16px / 26px · 400 (强调 500) · 0

端正清朗的界面 Tanrei

body-small 13px / 20px · 400 (强调 500) · +0.005em

端正清朗的界面 Tanrei

caption 11px / 16px · 500 (强调 600) · +0.02em

端正清朗的界面 Tanrei

code 13px / 20px · 400 (强调 500) · 0

const tanrei = 端麗;

code-small 12px / 16px · 400 (强调 500) · 0

const tanrei = 端麗;

display 48px / 52px · 450 (强调 550) · -0.04em

端正清朗的界面 Tanrei

eyebrow 12px / 16px · 500 (强调 600) · +0.08em

Design tokens

heading-1 32px / 40px · 500 (强调 600) · -0.03em

端正清朗的界面 Tanrei

heading-2 24px / 32px · 500 (强调 600) · -0.025em

端正清朗的界面 Tanrei

heading-3 20px / 28px · 500 (强调 600) · -0.02em

端正清朗的界面 Tanrei

heading-4 18px / 26px · 500 (强调 600) · -0.015em

端正清朗的界面 Tanrei

heading-5 16px / 24px · 500 (强调 600) · -0.01em

端正清朗的界面 Tanrei

heading-6 14px / 20px · 500 (强调 600) · 0

端正清朗的界面 Tanrei

label 14px / 20px · 500 (强调 600) · 0

端正清朗的界面 Tanrei

label-small 12px / 16px · 500 (强调 600) · +0.01em

端正清朗的界面 Tanrei

令牌	字体族	字号	行高	字重	强调字重	字距
--tanrei-sys-typescale-body	Inter	14px	1.5714	400	500	0px
--tanrei-sys-typescale-body-large	Inter	16px	1.625	400	500	0px
--tanrei-sys-typescale-body-small	Inter	13px	1.5385	400	500	0.065px
--tanrei-sys-typescale-caption	Inter	11px	1.4545	500	600	0.22px
--tanrei-sys-typescale-code	Roboto Mono	13px	1.5385	400	500	0px
--tanrei-sys-typescale-code-small	Roboto Mono	12px	1.3333	400	500	0px
--tanrei-sys-typescale-display	Inter	48px	1.0833	450	550	-1.92px
--tanrei-sys-typescale-eyebrow	Inter	12px	1.3333	500	600	0.96px
--tanrei-sys-typescale-heading-1	Inter	32px	1.25	500	600	-0.96px
--tanrei-sys-typescale-heading-2	Inter	24px	1.3333	500	600	-0.6px
--tanrei-sys-typescale-heading-3	Inter	20px	1.4	500	600	-0.4px
--tanrei-sys-typescale-heading-4	Inter	18px	1.4444	500	600	-0.27px
--tanrei-sys-typescale-heading-5	Inter	16px	1.5	500	600	-0.16px
--tanrei-sys-typescale-heading-6	Inter	14px	1.4286	500	600	0px
--tanrei-sys-typescale-label	Inter	14px	1.4286	500	600	0px
--tanrei-sys-typescale-label-small	Inter	12px	1.3333	500	600	0.12px

生成自 design/tokens/tanrei.light.tokens.json, tokens/sys/typescale.tokens.json

强调级差

link

强调文本就是该角色在自身字重上加上所属系列的级差。角色所属的系列是其名称的第一段；caption、code、code-small 和 eyebrow 采用 label 的级差。各内置系统的四个级差：

设计系统	emphasis.display	emphasis.heading	emphasis.body	emphasis.label
tanrei	100	100	100	100
cupertino	100	200	200	200
m3-expressive-like	100	100	100	200
m3-like	100	100	100	200

生成自 tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json