تطبيق واحد. لغتين. نفس الدقة.

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

110 شاشةعربي RTL + English LTRفاتح وغامقReadex Pro + IBM Plexشبكة 4pt

عربي · RTL

English · LTR

الفكرة: «الدرب»

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

القوس · الباب

إطار للصور والأفاتار وحافة الهيدر السفلية وعلامة التاب الفعّال. --r-arch. بيقول «ادخل».

تم الحجز
2
بانتظار البدء
3
الشهادة

المسار · الخطوات

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

الشعاع · النور

توهّج برتقالي واحد، وللحظات الكبيرة بس: الـSplash، نجاح الحجز، الشهادة. ممنوع كزخرفة خلفية في أي شاشة تانية.

اعمل. اسأل نفسك «الحاجة دي بتخدم أنهي خطوة؟». لو مفيش إجابة، شيلها.

ما تعملش. بلوبات ضبابية، تدرّجات بنفسجي/أزرق، أيقونات عشوائية، أو لون من غير معنى. دي علامات «الشكل المولّد».

إيه اللي اتغيّر من الإصدار الأول ولماذا

المجال	v1	v2	السبب
الأسطح	تدرّجات + توهّج + نسيج على الأزرار والكروت	ألوان مسطّحة. الفصل بحد 1px أو ظل، مش الاتنين	التدرّج واللمعة هما أوضح علامة للشكل المولّد، والمسطّح بيبان مطبوع مش مرسوم
الزر الرئيسي	نص أبيض على برتقالي (تباين 2.9:1)	نص كحلي على برتقالي (6.0:1)	الأبيض كان بيفشل في AA. الكحلي أوضح ومميّز للبراند
التاب بار	كبسولة عائمة كحلية، التابات غير الفعّالة بدون اسم	شريط مثبّت بأسماء ظاهرة دايمًا وعلامة قوس للفعّال	الأيقونة لوحدها بتتحفظ بالتعوّد، والتاب بار العايم بياكل مساحة وبيغطّي المحتوى
الخط	Cairo لكل الأوزان (900 أسود)	Readex Pro للعناوين + IBM Plex Sans/Arabic للنص	خطّين مصمّمين يتجاورا، الإنجليزي والعربي بنفس الهيكل والأوزان، وهرمية أنضف (400/500/600/700)
الزوايا	كروت 24–30 وكل حاجة كبسولة	كروت 16، حقول وأزرار 12، وسوم 6. الكبسولة للاختيار بس	قاعدة بسيطة: «الحالة = وسم مربّع، الاختيار = كبسولة»
الحركة	أنيميشن متفرّق في شاشات محدّدة	نظام واحد: دخول بالاتجاه + stagger + عدّادات + مؤشرات منزلقة + ضغط	الحركة بتشرح وتؤكّد، ومتّسقة في كل الشاشات، وبتحترم تقليل الحركة
الإنجليزي	ترجمة لاحقة فوق تخطيط عربي، حروف عربية متبقية، لابلات تتداخل	تايبوغرافي بالـ:lang()، لابلات مختصرة، initials مترجمة، فحص آلي لكل الشاشات	الإنجليزي لازم يبان مصمّم مش مترجم

اللغة والاتجاه: عربي وإنجليزي بشكل طبيعي

العربي هو المصدر والإنجليزي لغة أساسية مش «نسخة». ده معناه تخطيط واحد بيشتغل في الاتجاهين، وتايبوغرافي مضبوط لكل لغة، وأرقام وتواريخ وعملة بالقواعد المحلية لكل واحدة. التبديل بين اللغتين بيحصل لحظيًا من نفس الملفات.

نفس الشاشة بالاتجاهين

غيّر اللغة أو الاتجاه أو الثيم من شريط كل معاينة. لاحظ إن مفيش حاجة اتعمل لها «قلب» يدوي: كل المسافات والمحاذاة بخصائص منطقية (inline-start / inline-end).

إيه اللي بينعكس وإيه اللي لأ

العنصر	في RTL	ملاحظة
سهم الرجوع، الشيفرون، سهم «التالي»	ينعكس	الأيقونات الاتجاهية بتتعكس أوتوماتيك من `icons.js`، من غير class
ترتيب التاب بار والـSegmented والـStepper	ينعكس	«الرئيسية» أول عنصر عند بداية السطر: يمين في العربي، شمال في الإنجليزي
أشرطة التقدّم والـSlider والـPath	ينعكس	التقدّم يبدأ من حافة البداية. الـRange native بيتعكس لوحده
اتجاه دخول الشاشة (انتقال للأمام)	ينعكس	للأمام = ناحية حافة النهاية: شمال في العربي، يمين في الإنجليزي (راجع قسم الحركة)
الأرقام، أكواد الحجز، الإيميل، رقم الموبايل، الروابط	ما ينعكسش	بتتعزل `.num` / `.en` (direction:ltr + unicode-bidi:isolate) عشان ما تتلخبطش جوّه جملة عربية
الصور واللوجوهات والـQR	ما ينعكسش	لوجو الجهة مش بيتقلب أبدًا
أيقونات الوقت والعلامات والـplay	ما ينعكسش	الساعة، علامة صح، تشغيل/إيقاف: لها اتجاه عالمي
الرسوم البيانية بمحور زمني	ما ينعكسش	الزمن بيمشي شمال لليمين في الاتنين. الأرقام على المحور LTR

الأرقام والتواريخ والعملة

النوع	العربي	English	القاعدة
الأرقام	2,500 · 10,344	2,500 · 10,344	أرقام لاتينية في الاتنين، فاصل آلاف بفاصلة، `tabular-nums` في الجداول والأسعار
العملة	2,500 ج.م	EGP 2,500	العربي: الرقم ثم الرمز. الإنجليزي: الرمز ثم الرقم. السعر بخط العناوين
التاريخ	الجمعة 23 أكتوبر 2026	Fri, Oct 23, 2026	الشهر بالاسم دايمًا. ما نكتبش 10/11/2026 (لبس بين اليوم والشهر)
الوقت	10:00 ص	10:00 AM	12 ساعة بالصباح/المساء
المدّة	3 أسابيع · 36 ساعة	3 weeks · 36 hours	الرقم والوحدة بتتعزل مع بعض
الجمع	تدريب · تدريبان · 3 تدريبات	1 program · 3 programs	ما نبنيش الجملة بالتركيب. الجملة كاملة في ملف الترجمة

تمدّد النص

الإنجليزي أطول من العربي بحوالي 15–30% في اللابلات القصيرة (مثال: «حجوزاتي» 7 حروف و«My bookings» 11). التاب بار فيه 78px لكل تاب، فاللابلات مختصرة بالإنجليزي عن قصد: Home · Training · Scholars · Bookings · Account.

العربي أطول رأسيًا (تشكيل وارتفاع حروف). لذلك line-height للعربي 1.7 وللإنجليزي 1.55، وارتفاع أي حقل أو زر ثابت بـmin-height مش height.

اعمل. استخدم margin-inline-start وtext-align:start وinset-inline. اختبر كل شاشة في الاتجاهين قبل التسليم.

ما تعملش. left / right / padding-left، ولا عرض ثابت للابل، ولا قلب بـscaleX(-1)، ولا تركيب جملة من أجزاء.

الألوان

ألوان البراند من موقع دربني الفعلي: برتقالي #FF6B2B وكحلي #071A3E وذهبي #F5C400. اللون هنا له معنى دايمًا. لو مش قادر تشرح ليه الحاجة دي ملوّنة، خلّيها رمادي.

البراند

درجات البرتقالي والكحلي

الدلالات (Semantic)

الحيادي

اعمل. برتقالي واحد كإجراء رئيسي في كل شاشة. نص على البرتقالي = كحلي. برتقالي كنص على الفاتح = --pri-ink.

ما تعملش. تدرّجات، نص أبيض على البرتقالي، لون وحده بيدل على حالة (دايمًا أيقونة أو نص معاه)، أو --faint لنص مهم.

التباين (محسوب لحظيًا من الـtokens)

الاستخدام	النص	الخلفية	فاتح	غامق	النتيجة

الخطوط

خطّين، كل واحد بيغطّي العربي واللاتيني. Readex Pro للعناوين والأرقام الكبيرة (شخصية ودافية وبتقرا من بعيد)، وIBM Plex Sans Arabic + IBM Plex Sans للنص (زوج مصمَّم ليتجاور، بنفس الارتفاع والوزن). النتيجة: الجملة العربية اللي فيها كلمة إنجليزي زي «كورس IELTS» ما بتتكسرش.

Display · Readex Pro · 600

دربني

Darabny

أبتثجحخدذرزسشصضطظعغفقكلمنهوي ٠١٢٣ 0123456789

Text · IBM Plex Sans Arabic + IBM Plex Sans · 400 / 500 / 600 / 700

برنامج مكثّف على مدار 9 أيام للتدريب العملي على التحاليل الطبية، مع شهادة معتمدة.

A nine-day hands-on programme in medical lab testing, with an accredited certificate.

كورس IELTS · PhD Studentship · 2,500 ج.م

السلّم (Scale)

الحجم والوزن والارتفاع بيتحكّموا فيهم متغيّرات. بدّل اللغة في المعاينة وشوف إزاي الارتفاع والتباعد بيتظبط لكل لغة.

الدور	الحجم / الارتفاع	الوزن	الخط	الاستخدام
Display	32 / 1.18	700	Readex Pro	Splash، عناوين الـOnboarding
H1	26 / 1.25	700	Readex Pro	عنوان الشاشة
H2	21 / 1.3	600	Readex Pro	عنوان قسم أو كارت كبير
H3	17 / 1.35	600	Readex Pro	عنوان كارت
Title (t1)	15.5 / 1.4	600	Plex	عنوان صف في قائمة
Body	16 / 1.7 (AR) · 1.55 (EN)	400	Plex	النص الأساسي، أقصى عرض 65 حرف
Secondary (t2)	14 / 1.5	400	Plex	وصف ثانوي
Caption (t3)	12.5 / 1.5	400	Plex	تواريخ وميتا. أصغر مقاس مسموح

اعمل. خط العناوين على h1–h3 والأرقام الكبيرة بس. النص الصغير بخط النص. أرقام الجداول والأسعار tabular-nums.

ما تعملش. letter-spacing على العربي أبدًا (بيكسر الاتصال بين الحروف)، ولا أوزان 800/900، ولا نص أقل من 12.5px، ولا نص كله كابيتال في جمل.

المسافات والشكل والارتفاع

شبكة 4pt. الشاشة المرجعية 390×844 وبتتحمّل من 320 لـ430. كل قيمة هنا هي متغيّر CSS.

المسافات

أبعاد الشاشة

الشاشة المرجعية	390 × 844 · يُختبر على 320 · 375 · 390 · 430
حواف الشاشة (gutter)	16
Status bar · App bar · Top bar	46 · 56 · ≥ 60
Tab bar	72 (جوّه المنطقة الآمنة 14 + safe-area)
Footer لاصق	padding 12 / 16 / 30 + حد علوي 1px
هدف اللمس	≥ 44 (الأساسي 48، الأزرار الكبيرة 56) · مسافة بين الأهداف ≥ 8

الزوايا

القاعدة: «الحالة = وسم بزاوية 6، الاختيار = كبسولة». وسم «مؤكد» مربّع، وفلتر «تمويل كامل» كبسولة. كده العين تفرّق بين اللي بتقراه واللي بتضغطه من غير ما تقرا.

الارتفاع (Elevation)

السطح بيتفصل بحد 1px أو بظل، مش الاتنين. الظل الحقيقي (--sh-3) للعناصر اللي بتطفو بس: Sheet، Dialog، Toast.

الأيقونات

مجموعة واحدة، شبكة 24px، ستروك 2px، أطراف دائرية، من غير تعبئة. بتتحقن كـSVG sprite فبتشتغل حتى من file://. اضغط على أي أيقونة لنسخ اسمها.

الحركة

الحركة في دربني بتشرح (الحاجة دي جت منين) أو بتأكّد (التطبيق سمعك). لو الحركة زخرفة بس، مش موجودة. كل التجارب تحت شغّالة بنفس الكود اللي في التطبيق.

المبادئ

بتشرح أو بتأكّد	انتقال الشاشة بيبيّن الاتجاه. الضغط بيأكّد. الـspring في المفضلة بيقول «اتحفظ».
على قد التكرار	اللي المستخدم بيعمله 100 مرة في اليوم (تبديل تاب، سكرول، كتابة) قريب من الفوري. الاحتفال للحظات النادرة: تأكيد حجز، شهادة.
transform و opacity بس	أي حركة تانية (width / height / top) بتكسّر الـ60fps على الموبايلات الضعيفة. أشرطة التقدّم بتتحرّك بـ`scaleX`.
أقل من 320ms	الدخول والتفاعل 120–320ms. ease-out دايمًا (بداية سريعة ونزول ناعم). ممنوع ease-in لأنه بيحسّسك بالتأخير.
الاتجاه بيتبع القراءة	«للأمام» ناحية حافة النهاية: شمال في العربي، يمين في الإنجليزي. «رجوع» العكس.
تقليل الحركة	`prefers-reduced-motion`: الحركة المكانية بتتشال والتلاشي بيفضل. التطبيق بيشتغل كامل من غيرها.

الـTokens

Token	القيمة	الاستخدام

المعمل (شغّال بالكود الحقيقي)

متى ما نحرّكش

الفعل	التكرار	القرار
تبديل تاب في التاب بار	عشرات المرات يوميًا	تلاشي سريع فقط (200ms)، من غير انزلاق
الكتابة في البحث، الفلترة، الـscroll	مئات المرات	صفر حركة مكانية. النتيجة فورية
فتح Sheet أو Dialog	من وقت للتاني	حركة قياسية 200–320ms من مكان الزر
الضغط على زر	دايمًا	scale .97 في 120ms. فورًا، من غير تأخير
تأكيد حجز، شهادة، أول مفضلة	نادر	مسموح باحتفال: شعاع، spring، رسم علامة الصح

الأزرار

أي زر ارتفاعه 44px على الأقل. زر برتقالي واحد في الشاشة. النص على البرتقالي كحلي للتباين. كل زر له حالة ضغط وتعطيل وتحميل وتركيز.

الحقول والنماذج

العنوان فوق الحقل، المساعدة تحته، الخطأ بنص وأيقونة (مش لون بس). الحقل 54px بزاوية 12. التحقق يظهر بعد أول محاولة إرسال مش أثناء الكتابة. الحقول اللي محتواها LTR (إيميل، موبايل) بتتعزل .inp.ltr.

الاختيار والتنقل

مفاتيح، اختيارات، فلاتر، تابات، وتاب بار. المؤشّرات في الـSegmented والـTabs بتنزلق بين الخيارات وبتتقاس تاني لو اتغيّرت اللغة.

التاب بار والهيدر

الكروت والمحتوى

كارت التدريب، كارت المنحة، الجهة، الصفوف، الإحصاءات، التذكرة والشهادة. الكارت مسطّح بحد 1px. ممنوع كارت جوّه كارت.

الرسائل والنوافذ والحالات

جرّب Toast وDialog وBottom sheet داخل الموبايل. التنبيهات بتستخدم لون + أيقونة + نص. كل شاشة لازم تغطي الحالات اللي تخصّها.

مصفوفة الحالات

الحالة	المعالجة	مثال
تحميل	Skeleton بنفس أبعاد المحتوى. ما فيش spinner ملء الشاشة	h09 · b01 (loading)
فاضي	رسم + عنوان + جملة + إجراء واضح	h08 · m01 · b12
خطأ	رسالة بشرية + السبب + إعادة المحاولة + دعم	h02 · k09
أوفلاين	شريط ثابت + آخر نسخة محفوظة + التذكرة بتشتغل	h01
نجاح	تأكيد بصري + الخطوة الجاية + مشاركة	k08 · a11
مقفول / اشتراك	محتوى ضبابي + الفايدة + الخطة	s20
انتهى	وسم رمادي + إجراء بديل	s04 (expired)

التقدّم والمسار والبيانات

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

الشاشات والرحلات

كل الشاشات بحالاتها (تحميل، فاضي، خطأ، أوفلاين…) موجودة في المحاكي التفاعلي بمقاسات مختلفة وعربي/إنجليزي وفاتح/غامق.

المجموعة	الشاشات	الكود

إمكانية الوصول

معايير ملزمة مش اختيارية. اتفحصت آليًا على كل الشاشات في العربي والإنجليزي (طريقة الفحص في قسم التسليم).

المعيار	القاعدة	كيف نضمنه
التباين	نص عادي ≥ 4.5:1، نص كبير ≥ 3:1	جدول التباين المحسوب + فحص DOM آلي. النص على البرتقالي كحلي
أهداف اللمس	≥ 44×44، مسافة ≥ 8	`--tap-min` + فحص آلي بيطلّع أي عنصر أصغر
التركيز	حلقة 3px واضحة على كل عنصر تفاعلي، وترتيب منطقي	`:focus-visible` عالمي. الـSheet بيحبس الـfocus ويرجّعه
مش باللون وحده	أي حالة = لون + أيقونة أو نص	الـalert والـchip والـfield.err كلها بأيقونة
قارئ الشاشة	aria-label على الأيقونات، ‎aria-live للـtoast، role للـtabs والـdialog	مدمج في المكوّنات + `lang` صحيح على الصفحة
تكبير النص	يتحمّل 130% من غير قص	min-height بدل height. اللابلات ما بتتحدّدش بعرض
تقليل الحركة	الحركة المكانية بتتشال	`prefers-reduced-motion` في motion.css و global.css

المحتوى والنبرة

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

الموقف	العربي	English	بدل
زر الإجراء	احجز الآن	Book now	تقدّم بطلب الحجز الخاص بك
خطأ دفع	الدفع ما تمّش. جرّب محفظة تانية أو كلّمنا.	The payment didn’t go through. Try another wallet or contact us.	حدث خطأ غير متوقع
فاضي	لسه ما فيش حجوزات. ابدأ بتصفّح التدريبات.	No bookings yet. Browse trainings to get started.	لا توجد بيانات
نجاح	تمّ الحجز. تذكرتك جاهزة.	You’re booked. Your ticket is ready.	تمت العملية بنجاح!!

اعمل. زر = فعل + مفعول («احجز الآن»، «احفظ التغييرات»). رسالة الخطأ تقول إيه حصل وإيه يعمل بعدها.

ما تعملش. «OK» و«Yes»، علامات تعجب متتالية، جُمل بتبدأ بـ«عذرًا» لكل حاجة، أو ادّعاءات ما نقدرش نثبتها («الأفضل»، «رقم 1»).

التسليم للمطوّرين

الـtokens دي نفسها المستخدمة في التصميم، مولّدة لحظيًا من css/variables.css. انسخ JSON أو ثيم Flutter مباشرة.

design-tokens.json

Flutter · ThemeData

الأصول

الأصل	المقاس / الصيغة	الملف
أيقونة التطبيق	SVG 220 → PNG 1024 / 512 / 180	assets/brand/app-icon.svg
القوس (علامة مفرغة)	SVG أبيض	assets/brand/logo-arch.svg
الخطوط	Readex Pro (variable) · IBM Plex Sans Arabic 400–700 · IBM Plex Sans (variable)	assets/fonts/ · css/fonts.css
الأيقونات	SVG 24px · stroke 2	js/icons.js
صور المحتوى	JPG ≤ 900px · أغلفة 16:10 · لوجوهات مربّعة	assets/img/

ملفات النظام

css/variables.css	مصدر الحقيقة لكل الـtokens (فاتح، غامق، حركة)
css/global.css · components.css	القاعدة والمكوّنات المشتركة. خصائص منطقية فقط
css/motion.css · js/motion.js	نظام الحركة: انتقال، stagger، عدّادات، حلقات، مؤشرات منزلقة
js/i18n.js · i18n-en.js	محرّك العربي/الإنجليزي. `data-en` لتجاوز ترجمة عنصر بعينه
docs/audit-ui-ux.md	تقرير الأوديت الكامل

تقرير الأوديت: قبل وبعد

راجعت التطبيق كمصمّم UI/UX على 110 شاشة بالعربي والإنجليزي، بصريًا وآليًا. ده ملخّص اللي لقيته واللي اتصلّح. التفاصيل الكاملة في docs/audit-ui-ux.md.