تخطَّ إلى المحتوى

دليل هوية مدار

ملاحة النجوم في ضوء النهار: هوية تستلهم نجم سهيل الذي اهتدى به المسافرون، واليوم الأول في المقر.

القصة والمعنى

«مدار» اسمٌ مأخوذ من المسار الذي يدور فيه النجم. اهتدى العرب قروناً بالنجوم في الصحراء والبحر، وكان «سهيل» (Canopus) أشهرها: إذا طلع في سماء الجزيرة بشّر بانكسار الحر وبداية موسم جديد. مدار منصة محاكاة مهنية سعودية؛ يدخل فيها المتدرّب إلى بيئة عمل حقيقية الملامح، ويتدرّب قبل أن يبدأ.

الفكرة البصرية «ملاحة النجوم»: المتدرّب هو النجم، والمدار هو مساره المهني، والنسيج (السدو) هو المجتمع والخبرة التي تحيط به. هوية فاخرة ووطنية الروح، لكنها ليست حكومية الشكل.

في «مدار نهاراً» ننتقل من سماء الليل إلى ضوء النهار: اليوم الأول في المقر هو البطل، والمنتج نفسه هو الصورة، ونجم سهيل يبقى الدليل الذي يرافق المتدرّب.

  • الاهتداء: نرشد ولا نفرض.
  • الأصالة: جذور سعودية بلغة معاصرة.
  • الدقّة: قياس واضح وتقارير صادقة.
  • الدفء: مرافقة إنسانية في كل خطوة.
Aم المدار ونجم سهيلالأساسي

حرف الميم مرسوم هندسياً كمدار مغلق يمتد ذيله إلى الأسفل كمسار انطلاق، ونجم سهيل رباعي الأطراف يسير على المدار. النجم هو المتدرّب، والمدار هو رحلته المهنية. قابل للتسجيل كعلامة مركّبة (رمز + كلمة «مدار»).

Bحلقات السدو

مدارات متحدة المركز بينها شريط منسوج من «الضروس» المتناوبة كما في نسيج السدو، وعين (معين) ذهبية في المركز. غني ودافئ ومناسب للأختام والشهادات والمواد المطبوعة.

Cالمدار بخط واحد

مدار بيضاوي مائل بخط واحد يلتف حول كوكب مجوّف، والنجم في مقدمته. بسيط وتقني، مناسب للأيقونات الصغيرة والحركة.

Dالشعار الكتابي

«مدار» بخط كوفي لين أحادي السماكة مرسوم يدوياً، مع نجم سهيل فوق الألف، ومرافق لاتيني «MADAR» بنفس السماكة.

المساحة الآمنة والحد الأدنى للحجم

وحدة المساحة الآمنة = ارتفاع نجم سهيل في الشعار (س). اترك مساحة لا تقل عن «س» من كل الجهات، ولا يدخلها نص أو صورة أو حافة.

العنصرشاشةطباعة
الرمز16px (favicon)، و24px في الواجهة6 mm
أفقيارتفاع 24px8 mm
عموديارتفاع 56px18 mm
ثنائي اللغةارتفاع 32px11 mm

تحت 24px استخدم الرمز وحده بنسخة الأيقونة (بدون هالة دقيقة) — ملف favicon.svg.

الاستخدام الخاطئ

افعل
  • استخدم الملفات الأصلية من /brand فقط.
  • ضع الشعار على الأبيض (canvas) أو panel، ونسخة on-dark على لوحات ink وفي الوضع الداكن.
  • استخدم النسخة الأحادية عندما يتعذر اللونان.
لا تفعل
  • لا تمدّ الشعار أو تضغطه أو تميله أو تدوّره.
  • لا تغيّر ألوانه، ولا تجعل النجم بلون غير ذهبي سهيل أو لون الخط.
  • لا تحرّك النجم في الشعار الثابت (الحركة للمؤشرات فقط).
  • لا تكتب «مدار» بخط آخر بجانب الرمز.
  • لا تضف ظلالاً أو توهجاً أو تدرجات أو حدوداً.
  • لا تضعه على خلفيات مزدحمة أو بتباين ضعيف.
  • لا تدمجه مع العلم أو الشعار الوطني أو شعارات رؤية 2030.

نظام الألوان «مدار نهاراً»

الهوية فاتحة أولاً: صفحة بيضاء هادئة، وحبر نيلي عميق للنص والزر الأساسي، وأزرق الأطلس للروابط والتحديد واللوحات المشبعة، ونجم سهيل الذهبي للرسوم فقط. أربعة ألوان هادئة (زبدي ووردي ونعناعي وسماوي) تميّز البطاقات ولحظات التجربة. الوضع الداكن اختياري من زر في الهيدر، ويُحفظ اختيار المستخدم، ولا يتبع إعداد الجهاز.

فاتحالافتراضي
الأسطح
canvas#FFFFFF
18.18:1
panel#F3F5FA
16.67:1
raised#FFFFFF
18.18:1
sunken#EBEEF6
15.67:1
الحبر
  • يومك الأولink#0E133015.67:1
  • يومك الأولink-soft#5B63805.10:1
  • يومك الأولink-faint#646B864.53:1
أزرق الأطلس
ابدأ التقديمابدأ التقديميومك الأولfocus
accent#2F43E06.03:1
accent-strong#2233B89.40:1
accent-soft#EEF1FF6.22:1
on-accent#FFFFFF6.99:1
focus#2F43E06.99:1
الحدود
line#E6E9F21.21:1زخرفي
line-strong#858DA83.29:1
نجم سهيل
suhail#F0B4291.86:1للرسوم فقط
ألوان البطاقات
butter#FFE37A
14.30:1
blush#FFCADB
12.75:1
mint#BDEBD3
13.84:1
sky#D9E3FF
14.18:1
الحالات
success#17703F / #E3F5EB5.40:1
warn#8A5200 / #FFF1D65.72:1
danger#B42318 / #FDE7E55.55:1
داكناختياري
الأسطح
canvas#0B1026
16.68:1
panel#111733
15.60:1
raised#182046
13.96:1
sunken#070B1C
17.35:1
الحبر
  • يومك الأولink#F5F1E813.96:1
  • يومك الأولink-soft#A3ABCB6.93:1
  • يومك الأولink-faint#9098BC5.55:1
أزرق الأطلس
ابدأ التقديمابدأ التقديميومك الأولfocus
accent#7B88FF5.10:1
accent-strong#98A3FF8.07:1
accent-soft#1C25524.74:1
on-accent#0B10266.09:1
focus#F3D08A12.72:1
الحدود
line#232C581.40:1زخرفي
line-strong#5A68A83.56:1
نجم سهيل
suhail#F0B42910.09:1للرسوم فقط
ألوان البطاقات
butter#3B3316
11.14:1
blush#3A1F2B
13.20:1
mint#173A2C
11.10:1
sky#1C2552
12.97:1
الحالات
success#3CCB7F / #10301F6.85:1
warn#F5A524 / #35260A7.18:1
danger#FF6B70 / #3A14165.87:1

النسبة هي تباين الدور على أضعف سطح له: النص ≥ 4.5:1، والحدود القوية وحلقة التركيز ≥ 3:1.

اللونHEXالدور
أبيض الصفحة#FFFFFFالخلفية
حبر نيلي#0E1330النص والزر الأساسي
أزرق الأطلس#2F43E0التوقيع اللوني
ذهبي سهيل#F0B429النجم والرسوم فقط
زبدي#FFE37Aبطاقة
وردي#FFCADBبطاقة
نعناعي#BDEBD3بطاقة
سماوي#D9E3FFبطاقة

المكوّنات لا تستخدم هذه القيم مباشرة، بل أدواراً دلالية تتبدّل مع الثيم. الأصناف مثل bg-canvas وtext-ink وborder-line وbg-accent تُولَّد من tokens.ts إلى tailwind.css. عمودا التباين يعرضان أدنى نسبة للدور في كل ثيم.

الدورفاتحتباين الفاتحداكنتباين الداكنالاستخدام
canvas#FFFFFF18.18#0B102616.68خلفية الصفحة
panel#F3F5FA16.67#11173315.60لوحات كبيرة وأقسام بديلة وخلفية اللوحات الإدارية
raised#FFFFFF18.18#18204613.96بطاقات وقوائم ونوافذ
sunken#EBEEF615.67#070B1C17.35حقول الإدخال والآبار ومسارات التقدم
line#E6E9F21.21#232C581.40حدود هادئة وفواصل
line-strong#858DA83.29#5A68A83.56حدود الحقول والفواصل المهمة
ink#0E133015.67#F5F1E813.96النص الأساسي، والزر الأساسي في الفاتح
ink-soft#5B63805.10#A3ABCB6.93النص الثانوي والفقرات
ink-faint#646B864.53#9098BC5.55التسميات الصغيرة ورؤوس الجداول
accent#2F43E06.03#7B88FF5.10الروابط والتحديد واللوحات المشبعة
accent-strong#2233B89.40#98A3FF8.07التحويم والضغط على الأزرق
accent-soft#EEF1FF6.22#1C25524.74خلفيات مميّزة خفيفة وشارات
on-accent#FFFFFF6.99#0B10266.09النص فوق الأزرق
focus#2F43E06.99#F3D08A12.72حلقة التركيز (2px وإزاحة 2px)
butter#FFE37A14.30#3B331611.14بطاقة ملوّنة، والنص فوقها ink
blush#FFCADB12.75#3A1F2B13.20بطاقة ملوّنة
mint#BDEBD313.84#173A2C11.10بطاقة ملوّنة
sky#D9E3FF14.18#1C255212.97بطاقة ملوّنة وصور رمزية
success#17703F5.28#3CCB7F7.52نص النجاح
success-soft#E3F5EB5.40#10301F6.85خلفية النجاح
warn#8A52005.50#F5A5247.71نص التنبيه
warn-soft#FFF1D65.72#35260A7.18خلفية التنبيه
danger#B423185.66#FF6B705.68نص الخطأ
danger-soft#FDE7E55.55#3A14165.87خلفية الخطأ
suhail#F0B4291.86#F0B42910.09نجم سهيل والرسوم فقط، وليس نصاً أبداً
افعل
  • استخدم أدوار الواجهة فقط (bg-canvas وtext-ink وborder-line وbg-accent…) ولا تكتب قيم HEX في المكوّنات.
  • الزر الأساسي حبر بنص canvas (تباين 18.18:1)، والأزرق للروابط والتحديد والزر المميز (نص on-accent بتباين 6.99:1).
  • النص فوق البطاقات الملوّنة بلون ink دائماً، وفي الداكن تصبح البطاقات درجات داكنة من نفس اللون.
  • البطاقات المسطّحة raised بحد line على canvas أو panel.
لا تفعل
  • لا تستخدم ذهبي سهيل #F0B429 لوناً لنص في أي ثيم: تباينه 1.86:1 على الأبيض، راسب.
  • لا تستخدم ألوان Tailwind الافتراضية (blue-500 وgray-*) ولا أسماء اللوحة القديمة (night وstar وgold وteal وmist) في الواجهة، فاختبار حارس يمنعها.
  • لا تجعل الوضع الداكن يتبع إعداد النظام؛ الفاتح هو الافتراضي دائماً.

كل أدوار النص مفحوصة آلياً (WCAG AA ≥ 4.5:1) على الأسطح الأربعة في الثيمين، والحدود القوية وحلقة التركيز ≥ 3:1، في packages/brand/src/tokens.test.ts. اللوحة الليلية القديمة (نيلي الليل وذهبي الرمل والفيروزي) باقية في @madar/brand لعالم المكتب ثلاثي الأبعاد والإيميلات وملفات PDF فقط.

الخطوط وسلّمها

خطّان فقط. Alexandria للعناوين والأرقام والساعة: هندسي عريض بروح اللافتات المعاصرة، يمنح الأرقام حضوراً. IBM Plex Sans Arabic للنصوص والواجهة: واضح في الأحجام الصغيرة وأرقامه مقروءة. كلاهما برخصة OFL ومستضاف ذاتياً في /brand/fonts مع ملفات الرخصة.

مدار8:45
Alexandria
العناوين والأرقام والساعة
الأوزان400500700
أبجد Aa
IBM Plex Sans Arabic
النصوص والواجهة
الأوزان400500600
  1. text-hero
    40–88px / 1.12 / 500
    Alexandria
    جرّب يومك الأول
  2. text-display
    32–60px / 1.18 / 500
    Alexandria
    قبل أن يبدأ
  3. text-h1
    28–44px / 1.22 / 500
    Alexandria
    مقرٌّ كامل ينتظرك
  4. text-h2
    26–40px / 1.25 / 500
    Alexandria
    يومك الأول، ساعة بساعة
  5. text-h3
    21px / 1.45 / 500
    Alexandria
    تقابل المرشد الساعة 9:30
  6. text-h4
    18px / 1.5 / 600
    IBM Plex Sans Arabic
    تحليل السيرة الذاتية
  7. text-body-lg
    18px / 1.8 / 400
    IBM Plex Sans Arabic
    أسبوع عمل في مقر افتراضي مع فريق كامل، ومقابلة قصيرة مع مرشد مدار.
  8. text-body
    16px / 1.75 / 400
    IBM Plex Sans Arabic
    تمشي في المقر، وتحضر الاجتماعات، وتسلّم مهامك لمدير يراجعها. كل ما تعلمته هنا يظهر في تقرير جاهزيتك.
  9. text-small
    14px / 1.6 / 400
    IBM Plex Sans Arabic
    يُحفظ القرار في سجل التدقيق باسم المراجع.
  10. text-caption
    13px / 1.5 / 500
    IBM Plex Sans Arabic
    آخر نشاط قبل ساعتين
  11. text-label
    13px / 1.4 / 600
    IBM Plex Sans Arabic
    مدة الصلاحية (أيام)
  12. text-mono
    14px / 1.6 / 400
    IBM Plex Mono
    --color-accent: #2F43E0
  • لا تباعد بين الحروف العربية أبداً، ولا تبرير بالكشيدة. التتبّع السالب (-0.01em) للعناوين اللاتينية فقط.
  • الأوزان: Alexandria بـ 400 و500 و700 (500 للعناوين)، وPlex بـ 400 و500 و600.
  • الأوقات والأرقام المتغيرة بأرقام جدولية (.tabular) حتى لا تهتز عند التحديث.
  • طول السطر للنصوص نحو 65 حرفاً كحد أقصى.
  • ممنوع: النص المائل، وتلوين كلمة واحدة في العنوان، والتسميات الصغيرة فوق كل عنوان، وإلحاق «←» بنص الأزرار.
  • «الخط السعودي» من وزارة الثقافة يمنع الاستضافة وإعادة التوزيع دون موافقة خطية، لذلك لا يُستخدم في الويب.

الأشكال والارتفاع

الاستدارة تكبر مع حجم السطح: اللوحات أكثر استدارة من البطاقات، والبطاقات أكثر من الحقول. الأزرار والشارات والهيدر العائم كبسولات كاملة.

rounded-full
999px
الأزرار والشارات والشرائح والهيدر العائم
rounded-panel
28px
اللوحات الكبيرة والنوافذ
rounded-card
20px
البطاقات
rounded-chip
16px
البطاقات الطافية الصغيرة
rounded-control
12px
الحقول والقوائم
بطاقة مسطّحة: raised وحد line
عنصر طافٍ: shadow-float
primary

كبسولة حبر بنص canvas: الإجراء الأساسي الوحيد في الشاشة

accent

أزرق الأطلس: إجراء مميز داخل لوحة (المايكروفون، النسخ)

secondary

سطح raised بحد line: حفظ وإجراءات ثانوية

outline

حد ink بسماكة 1.5px: البديل بجانب الأساسي

ghost

بلا خلفية: إلغاء وأدوات صغيرة

danger

إجراءات لا رجعة فيها

ظل واحد فقط، للعناصر الطافية: البطاقات الصغيرة الطافية والقوائم المنبثقة والنوافذ. البطاقات العادية مسطّحة، سطح raised وحد line دون ظل. في الداكن يُضاف إليه حد واضح.

الثيمshadow-float
فاتح0 18px 40px -18px rgb(14 19 48 / 0.35), 0 2px 6px rgb(14 19 48 / 0.06)
داكن0 0 0 1px #34407A, 0 18px 40px -18px rgb(0 0 0 / 0.6)

أحجام الأزرار: sm بارتفاع 36px وmd بـ 44px وlg بـ 52px، وأهداف اللمس على الجوال لا تقل عن 44px. حلقة التركيز ظاهرة دائماً.

نقش السدو

النقش مولَّد برمجياً من زخارف السدو الأصيلة: الضروس (مثلثات متناوبة)، العيون (معينات)، الشيفرون، النقاط، الخطوط، والسُّلَّم — مثنيّة في حلقات مدارية أو ممدودة كشريط يتكرر بلا فواصل.

افعل
  • استخدمه عنصراً مسانداً: الشهادات والتقارير المطبوعة، وأرضيات وجدران المكتب ثلاثي الأبعاد.
  • اجعله بشفافية 8–20٪ خلف النصوص.
  • حلقة واحدة أو شريط واحد في الشاشة الواحدة.
لا تفعل
  • لا تضعه خلف الشعار مباشرة ولا داخل المساحة الآمنة.
  • لا تلوّنه بغير ألوان الهوية، ولا تستخدمه بتباين كامل خلف نص.
  • لا تقدّمه على أنه نسيج سدو حقيقي؛ هو استلهام.

الأيقونات

  • شبكة 24px، خط أحادي 1.75px بأطراف وزوايا مستديرة — نفس منطق خط المدار.
  • أشكال هندسية بسيطة، بلا تعبئة إلا لحالة «نشط» أو النجم.
  • الأيقونات الاتجاهية (أسهم، تقدّم، رجوع) تنعكس في الواجهة العربية؛ الساعات والشعارات لا تنعكس.
  • المكتبة: lucide-react بسماكة 1.75، والأيقونات الزخرفية تحمل aria-hidden. الرسوم اليدوية للشعار ونجم سهيل فقط.
  • المجسّمات ثلاثية الأبعاد للرسم التوضيحي، وليست بديلاً عن الأيقونات.

مبادئ الحركة

الحركة مدارية: الأشياء لا تقفز، بل تدور وتستقر. منحنى «orbit» الافتراضي cubic-bezier(.2,.7,.2,1) — انطلاقة حاسمة وهبوط ناعم. العناصر الداخلة تستخدم «rise» كنجم يطلع من الأفق، والخارجة «set».

الرمزالقيمةالاستخدام
fast120msالتحويم والضغط
base200msانتقالات الواجهة
slow420msاللوحات وانتقال الصفحات
orbit12s linearالحلقات والخلفيات الهادئة
loader2.4s linearorbitLoaderSvg()
  • لحظة افتتاح واحدة منسّقة في الصفحة، خلال 1.2 ثانية أو أقل.
  • الحركات المرتبطة بالتمرير بـ CSS (animation-timeline) داخل @supports، دون مكتبات حركة.
  • تمايل هادئ للبطاقات الطافية (6 ثوانٍ، ±6px)، وparallax مع المؤشر حتى 12px على المؤشر الدقيق فقط.
  • لا ظهور متدرّج لكل قسم، ولا تأثير تحويم على كل بطاقة.
  • مؤشر التحميل: النجم يدور على مدار الميم بسرعة ثابتة.
  • احترم «تقليل الحركة»: تتوقف كل الحركة غير الضرورية، ويعرض الفيديو ملصقه الثابت، ولا يبقى أي محتوى مخفياً.

نبرة الكتابة

نكتب بعربية سعودية بيضاء مهنية: واضحة، ودودة، محترمة، بلا تكلّف ولا عامية ثقيلة. الشخصيات داخل المحاكاة تتحدث بلهجة مكاتب الرياض المهنية. النصوص القانونية والسياسات بالفصحى المعاصرة.

بدلاً مننكتب
تم رفض طلبكما اكتمل الطلب — راجع الحقول المظللة وجرّب مرة ثانية
خطأ في النظامصار خلل عندنا، جرّب بعد لحظات
شهادة إتمامتقرير الجاهزية
Submitإرسال

المخاطبة والجنس: لا نسأل عن الجنس ولا نستنتجه. الافتراضي صياغات محايدة (المصدر، صيغة الجمع، «لنبدأ»، «يمكنك»). في الإعدادات تفضيل اختياري لـ«صيغة المخاطبة» (مذكر / مؤنث / محايد) يغيّر اللغة فقط ولا يدخل أبداً في التقييم أو التقارير.

الأرقام: نستخدم الأرقام اللاتينية (0-9) في الواجهة الرقمية والبيانات والتقارير لسهولة القراءة والتوافق مع الأنظمة والبحث (Intl: ar-SA-u-nu-latn). الأرقام العربية المشرقية (٠-٩) مسموحة في المطبوعات الاحتفالية والنصوص الأدبية فقط. لا نخلط النظامين في شاشة واحدة.

التاريخ: الميلادي أساسي في الواجهة، والهجري (أم القرى) يظهر بجانبه في التقارير والوثائق الرسمية: «25 سبتمبر 2026 · 14 ربيع الآخر 1448 هـ» (Intl: ar-SA-u-ca-islamic-umalqura).

  • الذكاء الاصطناعي: نُفصح دائماً عندما يكون المتحدث شخصية ذكاء اصطناعي.
  • لا وعود توظيف؛ نقول «جاهزية» لا «ضمان».
  • جمل قصيرة، الفعل أولاً، وزر واحد أساسي في كل شاشة.

الشعار المشترك «مدار × شريك»

عند ظهور مدار مع جهة شريكة (جامعة، شركة، جهة تدريب) نستخدم تشكيلة ثابتة: شعار مدار، فاصل رأسي رفيع، ثم شعار الشريك — بارتفاع بصري متساوٍ.

افعل
  • ارتفاع بصري متساوٍ (قد يختلف الارتفاع الهندسي).
  • فاصل بعرض 1px (أو 0.25 مم) بلون line، والمسافة من كل جانب = س.
  • في العربية: مدار يمين والشريك يسار. في الإنجليزية العكس.
  • لون الشريك يُستخدم لوناً ثانوياً (accent) فقط في مواد البرنامج المشترك.
  • احصل على موافقة كتابية من الشريك على كل استخدام لشعاره.
لا تفعل
  • لا تعيد تلوين شعار الشريك أو تعديله أبداً.
  • لا تستبدل ألوان مدار الأساسية بلون الشريك.
  • لا تضع شعار الشريك داخل الرمز أو بدل النجم.
  • لا شعارات شركاء في صورة المشاركة العامة (OG) للمنصة.

الصور والشخصيات

الصور نهارية: مجسّمات ثلاثية الأبعاد ناعمة في ضوء الشمس، ومكتب سعودي مصغّر تمرّ عليه ظلال سعف النخيل، وأدوات يوم العمل (تقويم، مايكروفون، فنجان، مستند). اللوحة أزرق الأطلس وذهبي سهيل والأبيض فقط. لا نصوص ولا حروف ولا شعارات ولا أعلام داخل الصور.

«مرشد مدار»: شخصيتان مرشدتان متخيّلتان (رجل بالثوب والشماغ، وامرأة بالعباءة والحجاب) بزي محتشم ومظهر مهني ودود. هما شخصيات خيالية، ويُفصح دائماً أنهما بالذكاء الاصطناعي.

  • الصور الثابتة تُولَّد بـ codex، وحلقات الحركة القصيرة بـ Veo على Google Cloud، ويُسجَّل مصدر كل أصل وأداته ونص توليده في provenance.json.
  • شخصيات المكتب ثلاثي الأبعاد: أسلوب مبسّط راقٍ، غير كاريكاتيري، أعمار وألوان بشرة متنوعة.
  • اللباس محتشم ومهني: ثوب وشماغ أو غترة، عباءة وحجاب، بدلات عمل.
  • لا صور لأشخاص حقيقيين دون موافقة موثقة؛ الصور المولّدة تُعلَّم «مولّدة بالذكاء الاصطناعي».
  • لوحة المزاج الأولى ومفاهيم الشخصيات في docs/brand/imagery مرجع للشخصيات؛ أصول الصفحة الرئيسية في /brand/landing.

الملفات

  • الشعارات: /brand/logo/*.svg (+ PNG)
  • الأيقونات: /brand/favicon.svg، favicon-32.png، apple-touch-icon.png (180)، icon-192.png، icon-512.png، icon-maskable-512.png
  • صورة المشاركة: /brand/og-image.png (1200×630)
  • صور الصفحة الرئيسية وحلقاتها: /brand/landing/* (AVIF وWebP بعرضين + provenance.json)
  • النقش: /brand/pattern/*.svg
  • الخطوط: /brand/fonts/*.woff2 (Alexandria وIBM Plex Sans Arabic) + fonts.css + الرخص
  • الكود: @madar/brand — ui وday وfloatShadow وtypeScale (أدوار الواجهة)، وtailwind.css المولّد، وmadarMark()، lockupSvg()، orbitLoaderSvg()، saduSvg()