Typescale tokens

Specimens are set with the generated CSS custom properties, so what you see is what @tanrei/web ships. Each role exposes its parts as separate properties: -font-family, -font-size, -line-height, -font-weight, -letter-spacing and -font-weight-emphasized, plus a -font shorthand. For guidance — which role an h2 or a p is, and why emphasis is a weight rather than a role — read Typography.

The sixteen roles

link

body 14px / 22px · 400 (emphasized 500) · 0

Clean, well-formed 端麗

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

Clean, well-formed 端麗

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

Clean, well-formed 端麗

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

Clean, well-formed 端麗

code 13px / 20px · 400 (emphasized 500) · 0

const tanrei = 端麗;

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

const tanrei = 端麗;

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

Clean, well-formed 端麗

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

Design tokens

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

Clean, well-formed 端麗

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

Clean, well-formed 端麗

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

Clean, well-formed 端麗

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

Clean, well-formed 端麗

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

Clean, well-formed 端麗

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

Clean, well-formed 端麗

label 14px / 20px · 500 (emphasized 600) · 0

Clean, well-formed 端麗

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

Clean, well-formed 端麗

Token	Family	Size	Line height	Weight	Emphasized weight	Tracking
--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

Generated from design/tokens/tanrei.light.tokens.json, tokens/sys/typescale.tokens.json

Emphasis steps

link

Emphasized text is the role at its weight plus the step of its family. A role’s family is the first segment of its name; caption, code, code-small and eyebrow take the label step. The four steps, per shipped system:

Design system	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

Generated from tokens/systems/*.system.json, design/tokens/<system>/tanrei.light.tokens.json