رموز السلّم الطباعي

العيّنات مكتوبة بخصائص 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 درجة التسميات. الدرجات الأربع لكل نظام مضمَّن:

نظام التصميم	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