الرموز
الطباعة
منظومة طباعة من أربع طبقات: سلّم متجاوب، ورموز أولية، ورموز دلالية، وأنماط نص. سبعة أدوار بثلاثة أحجام ومستويي تأكيد. عربي وإنجليزي بخط روبيك.
بنية من أربع طبقات
المبادئ
عشرة مبادئ حاكمة تفسّر القرارات خلف منظومة الطباعة.
الطباعة تشير للأولوية عبر الدور والحجم والوزن. عيّن الأدوار حسب أهمية المحتوى لا التفضيل البصري.
يجب تمييز كل حرف عند حجمه المقصود. اختر خطوطاً بأشكال واضحة وافرض حداً أدنى لكل دور.
كتل النص تدعم القراءة المستمرة. استخدم أدوار القراءة للنص الطويل، والأدوار البنائية للتسميات القصيرة.
ارتفاع سطر وتباعد متسقان يخلقان إيقاع قراءة متوقّعاً. اقرن كل حجم بارتفاع سطر متناسب من السلّم.
الأحجام تتبع تدرّجاً نسبياً منهجياً لا قيماً عشوائية. اشتق كل الأحجام من نسبة ثابتة.
لكل عنصر نصي غرض دلالي يحدّد تنسيقه. اختر الدور حسب ما يفعله المحتوى، لا حسب شكله.
الوزن يشير للتأكيد داخل الدور لا للتسلسل بين الأدوار. لا تجمع ترقية دور وزيادة وزن على العنصر نفسه.
كل عائلة خط تحمل هوية دلالية. عيّن العائلات حسب الفئة: بنائي، قراءة، تقني. عندنا روبيك للعربي واللاتيني.
يجب أن يبقى النص مدرَكاً على خلفيته في كل الظروف. عامل التباين كقيد صارم وتحقّق منه عند كل حجم ومقطع.
الطباعة تتكيّف بثبات عبر السياقات دون فقد التسلسل. حدّد استجابة كل دور لعرض الشاشة قبل التطبيق.
الأدوار
سبعة أدوار، لكل منها غرض دلالي محدد. اختر الدور حسب وظيفة النص لا حسب شكله. كل دور له ثلاثة أحجام (كبير، متوسط، صغير) ومستويان: أساسي وقوي.
| مجموعة الدور | أساسي | قوي |
|---|---|---|
| العنوان الرئيسي | 500 · medium | 700 · bold |
| العرض، العناوين الفرعية، التسمية | 500 · medium | 600 · semibold |
| المتن، التعليق، أحادي المسافة | 400 · regular | 500 · medium |
السلّم
أربع عشرة درجة (١٠٠ إلى ١٤٠٠)، الدرجة ٣٠٠ هي الأساس (١٦ بكسل). القيم تتقلص على الشاشات الأصغر: الدرجات ١٠٠ إلى ٣٠٠ ثابتة، وما فوقها ينخفض تدريجيا. المعاينة تعكس عرض شاشتك الحالي.
| الدرجة | LG/XL | MD | SM | معاينة |
|---|---|---|---|---|
| 100 | 12 | 12 | 12 | أ |
| 200 | 14 | 14 | 14 | أ |
| 300أساس | 16 | 16 | 16 | أ |
| 400 | 18 | 18 | 16 | أ |
| 500 | 20 | 20 | 18 | أ |
| 600 | 24 | 22 | 20 | أ |
| 700 | 28 | 26 | 24 | أ |
| 800 | 32 | 30 | 28 | أ |
| 900 | 36 | 34 | 30 | أ |
| 1000 | 40 | 36 | 32 | أ |
| 1100 | 48 | 42 | 36 | أ |
| 1200 | 56 | 48 | 40 | أ |
| 1300 | 64 | 56 | 48 | أ |
| 1400 | 72 | 64 | 56 | أ |
الرموز الأولية
القيم الخام التي تشير إليها الرموز الدلالية: العائلات، والأوزان، والتباعد الحرفي.
العائلات
ميركاتو تستخدم خطا واحدا للواجهة، روبيك، للعربية والإنجليزية في كل الأدوار. يملأ روبيك دوري الخط الأساسي والثانوي معا، فلا نحتاج خطين. عائلة أحادية المسافة منفصلة تحمل المحتوى التقني.
الأوزان
التباعد الحرفي
| الرمز | القيمة | يستخدمه |
|---|---|---|
| type.letter-spacing.tight | -1.2px | العرض، العناوين |
| type.letter-spacing.slight | -0.6px | العناوين الفرعية، التسمية الكبيرة |
| type.letter-spacing.none | 0 | المتن، معظم التسميات |
| type.letter-spacing.loose | 0.1px | المتن الصغير، التعليق المتوسط |
| type.letter-spacing.wide | 0.2px | التعليق الصغير |
التباعد والعربية
الاقتران
اقترانات صالحة تحافظ على التسلسل ووضوح القراءة. لكل زوج علاقة وقاعدة تحكم استخدامه معا.
| الاقتران | العلاقة | القاعدة |
|---|---|---|
| Display + Body | مرساة + محتوى | عرض مهيمن واحد، والمتن طبقة قراءة مساندة. |
| Headline + Body | مرساة + محتوى | العنوان يفتح الكتلة، والمتن يواصل تدفق القراءة تحته. |
| Title + Body | مرساة + محتوى | العنوان الفرعي مرساة المكوّن، والمتن يحمل الشرح. |
| Title + Label | مرساة + إجراء | التسمية تابعة: تعرّف ولا تنافس. |
| Body + Caption | محتوى + تعليق | التعليق يساند المتن، ولا يقدّم محتوى رئيسيا جديدا. |
| Label + Caption | إجراء + تعليق | التعليق يوضّح التسمية بتفصيل لا تحمله وحدها. |
| Mono + Caption | تقني + تعليق | التعليق يعطي سياقا للنص التقني، بوزن عادي للاثنين. |
الاستخدام
لكل دور استخدام صحيح وآخر يجب تجنّبه. اختر الدور حسب وظيفة النص، لا حسب حجمه.
| الدور | افعل | تجنّب |
|---|---|---|
| Display | مرة واحدة لكل عرض، وأعطه مساحة يقف فيها وحده. | عناوين الصفحات أو التكرار على شاشة واحدة. |
| Headline | أعلى عنوان لمحتوى الصفحة، قصير ووصفي. | داخل البطاقات أو الحوارات أو المكوّنات. |
| Title | العنوان الافتراضي للبطاقات واللوحات والحوارات. | عناوين الصفحات الكاملة. |
| Body | الفقرات والأوصاف، مع احترام ارتفاع السطر. | تسميات الواجهة أحادية السطر. |
| Label | الأزرار وحقول النماذج والتبويبات. | المحتوى الوصفي متعدد الأسطر. |
| Caption | الطوابع الزمنية والنص المساعد والتلميحات. | أي محتوى يجب قراءته كمعلومة رئيسية. |
| Mono | الشيفرة والقيم والرموز والمعرّفات. | النثر أو العناوين أو النص التوضيحي. |
إمكانية الوصول
يحدد الحجم والوزن تصنيف WCAG: نص كبير أو نص عادي، وهو ما يحكم عتبة التباين المطلوبة مع ألوان النص.
- ٢٤ بكسل فأكثر بأي وزن ← نص كبير ← تباين ٣:١.
- ١٨٫٦٧ بكسل فأكثر بوزن غامق حقيقي (٧٠٠) ← نص كبير ← تباين ٣:١.
- ما دون ذلك ← نص عادي ← تباين ٤٫٥:١.
السميك (٦٠٠) لا يفي بإعفاء النص الكبير
الأدوار البنائية (العرض، العناوين، العناوين الفرعية) نص كبير بحكم حجمها. المتن والتسميات والتعليقات نص عادي وتتطلب تباينا أعلى. راقب دورين يتغير تصنيفهما على الشاشات الصغيرة: title/md وtitle/sm القوي.
الشيفرة للمطوّرين
التسليم الأساسي لطبقة الطباعة هو متغيّرات CSS المخصّصة. المكوّنات تستهلك رموز الأدوار الدلالية فقط (--type-{role}-{size}-{emphasis}-{prop})، ولا تلمس السلّم ولا الرموز الأولية ولا قيم px خام أبداً. الطباعة ثابتة عبر الوضعين الفاتح والداكن؛ ما يتغيّر هو السلّم المتجاوب حسب عرض الشاشة، لا السمة.
سلسلة المتغيّرات
المتغيّرات تُبنى على ثلاث طبقات: مدرّج أوّلي، ثم رمز أوّلي، ثم رمز دلالي يُحلّ حسب الوضع. المكوّنات تستهلك الطبقة الدلالية فقط.
/* Tier 1 — responsive scale step (one source, breakpoint-driven) */
--type-scale-300: 16px; /* base step, constant across breakpoints */
--type-scale-1000: 40px; /* at >=1024px; 36px on MD, 32px on SM */
/* Tier 2 — primitive tokens name the raw axes */
--type-size-1000: var(--type-scale-1000);
--type-weight-medium: 500;
--type-letter-spacing-tight: -1.2px;
/* Tier 3 — semantic role token; components consume THIS */
:root {
--type-headline-lg-base-family: var(--type-family-primary);
--type-headline-lg-base-weight: var(--type-weight-medium);
--type-headline-lg-base-size: var(--type-size-1000);
--type-headline-lg-base-line-height: var(--type-line-height-1200);
--type-headline-lg-base-letter-spacing: var(--type-letter-spacing-tight);
}
/* No :root[data-theme="dark"] block: type does not change per mode.
Only the Tier 1 scale shifts, and it shifts by viewport, not theme. */جدول المرجع
| الرمز | متغيّر CSS | القيمة | الاستخدام |
|---|---|---|---|
| display.lg.strong.size | --type-display-lg-strong-size | size.1300 (48-64px) | أكبر حجم عرض للأبطال |
| headline.lg.base.weight | --type-headline-lg-base-weight | 500 (weight.medium) | وزن عنوان الصفحة |
| title.md.strong.line-height | --type-title-md-strong-line-height | line-height.700 (24-28px) | ارتفاع سطر عنوان البطاقة |
| body.md.base.size | --type-body-md-base-size | size.300 (16px) | حجم الفقرة الافتراضي |
| body.md.base.family | --type-body-md-base-family | Rubik (family.secondary) | خط الفقرات |
| label.md.base.letter-spacing | --type-label-md-base-letter-spacing | 0 (letter-spacing.none) | تباعد التسميات والأزرار |
| mono.sm.base.family | --type-mono-sm-base-family | mono stack (family.mono) | الشيفرة والمعرّفات |
الاستخدام
.card-title {
font-family: var(--type-title-md-strong-family);
font-weight: var(--type-title-md-strong-weight);
font-size: var(--type-title-md-strong-size);
line-height: var(--type-title-md-strong-line-height);
letter-spacing: var(--type-title-md-strong-letter-spacing);
}
.card-body {
font-family: var(--type-body-md-base-family);
font-weight: var(--type-body-md-base-weight);
font-size: var(--type-body-md-base-size);
line-height: var(--type-body-md-base-line-height);
}
/* Set all five props of a role together: the size alone is not the style. */أخطاء شائعة
| الخطأ | ما يفسد | الصواب |
|---|---|---|
font-size: 16px | يفقد السلّم المتجاوب والوزن وارتفاع السطر للدور | var(--type-body-md-base-size) |
var(--type-scale-1000) | يتجاوز طبقة الأدوار الدلالية | var(--type-headline-lg-base-size) |
| تطبيق حجم الدور وحده | يسقط العائلة والوزن وارتفاع السطر والتباعد | طبّق خصائص الدور الخمس معاً |
| تباعد حرفي ثابت على نص عربي | يفكك اتصال حروف روبيك في RTL | اعتمد على رمز الدور؛ RTL يحيّد التباعد إلى صفر |
كيف تُستهلك
الرموز مصدرها واحد آلي القراءة (tokens.json في المهارة). حزمة @mercato/tokens تولّد منه: متغيّرات CSS (التسليم الأساسي)، وإعداد Tailwind جاهز، وكائن سمة مطبوع بـ TypeScript. أهداف المنصّات الأخرى (Style Dictionary وDTCG وiOS وAndroid وCompose) تتولّد من المصدر نفسه عند الطلب.
// CSS variables (canonical) — import once at the app root
import "@mercato/tokens/css";
// Tailwind preset
// tailwind.config: { presets: [require("@mercato/tokens/tailwind")] }
// Typed theme object (JS/TS)
import { tokens } from "@mercato/tokens";