タイプスケールトークン

見本は、生成された CSS カスタムプロパティで組んでいます。ここに見えているものが、@tanrei/web が提供するものです。各ロールは、その構成要素を個別のプロパティとして公開しています。-font-family、-font-size、-line-height、-font-weight、-letter-spacing、-font-weight-emphasized、それにショートハンドの -font です。h2 や p がどのロールにあたるのか、なぜ強調がロールではなく太さなのかといった指針は、タイポグラフィを参照してください。

16 のロール

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 はラベルのステップを取ります。同梱システムごとの 4 つのステップは次のとおりです。

デザインシステム	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