الخطوط
مقياس الخط الكامل - 13 نمطاً من العنوان الكبير (64 بكسل) وصولاً إلى التسمية التوضيحية 2 (11 بكسل)، كل منها بأربعة أوزان، مضبوطة بخط Inter ومعيّنة 1:1 على أنماط النص في Figma.
كيف يعمل النظام
كل نمط هو رمز تصميم مركّب: فئة واحدة مثل text-body-medium يضبط حجم الخط وارتفاع السطر والتباعد بين الأحرف والوزن معاً، محدداً في styles/typography.css. لا تجمع أبدًا بين text-sm مع font-medium و leading-5 يدويًا - رمز تصميم واحد يضمن المقاييس الدقيقة التي يحددها نمط النص في Figma.
التسمية هي text-{family}-{weight} - 13 عائلة × 4 أوزان (Regular 400، Medium 500، Semibold 600، Bold 700). يُطبَّق اللون بشكل منفصل باستخدام رموز النص الدلالية، لذا يبدو التسمية النموذجية على النحو التالي text-body-medium text-text-secondary: فئة واحدة للمقاييس، وفئة واحدة للون.
لأن هذه الفئات تعيش في text-* مساحة الأسماء، يتم تسجيلها مع cx() (غلاف tailwind-merge الخاص بنا) كأدوات مساعدة لحجم الخط - وإلا فإن الدمج مع فئة لون سيحذفها بصمت. إذا أضفت نمطًا أو أعدت تسميته، فعكسه في utils/cx.ts.
عنوان كبير
64px / 80pxHero numerals and marketing-scale headings.
عرض 1
56px / 72pxFull-page hero headings.
عرض 2
48px / 64pxLarge section heroes.
عرض 3
40px / 54pxProminent stats and page heroes.
عرض 4
32px / 44pxPage titles; the largest style used inside the app shell.
العنوان 1
24px / 34pxCard headline figures (step totals, earnings).
العنوان 2
20px / 26pxSection headings inside pages and panels.
العنوان 3
18px / 24–26pxSub-section headings, calendar month titles.
العنوان الرئيسي
16px / 22pxEmphasized body copy and lead paragraphs.
نص أساسي
14px / 20pxThe default UI text: labels, table cells, nav items.
نص أساسي 2
13px / 18pxDense contexts: compact tables, secondary descriptions.
تسمية توضيحية 1
12px / 16px · tracking 0.15pxAxis labels, unit suffixes, timestamps.
تسمية توضيحية 2
11px / 15px · tracking 0.2pxThe smallest legible annotations (badges, fine print).