نظام تصميم أزورا
توكنز ومكوّنات مُستخرجة من نظام أزورا الفعلي — الألوان، التايبوجرافي، المسافات، وكل نمط واجهة مؤكّد، في صفحة مرجعية واحدة.
أزورا هو نظام الـ ERP الخلفي (back-office) اللي بتشغّل بيه سيميكولون منتجات السفر والسياحة والأسطول (ملفات/بروفايلات السائحين، الخدمات السريعة، الفوترة، جدولة البرنامج اليومي، لوحات CRM). النظام ده اتستخرج مباشرة من screenshots للتطبيق الفعلي — مش مُختلَق. وفين ما قيمة معينة متقدرناش نقرأها بالظبط من الـ screenshot (شوية ألوان في الـ charts)، استخدمنا أقرب قيمة منطقية وحددناها عشان تتستبدل بالقيمة الحقيقية بعدين.
المبادئ
- البرتقالي بيحمل الفعل (Action). كل إجراء أساسي — Add Profile، Pay/Invoice، Invoice، Create Invoice، الخطوة الحالية في الـ stepper، زرار الإعدادات العائم — بيستخدم نفس البرتقالي الأساسي للعلامة التجارية. لو اللون برتقالي، يبقى ده الحاجة اللي المفروض تدوس عليها بعدين.
- الكحلي الغامق هو البديل الهادئ. Advanced Filter وأي إجراء ثانوي/مساعد بيقعد على كحلي قريب من الأسود، أبدًا على برتقالي، عشان الفعل الأساسي يفضل هو اللي بيبان الأول.
- الحالة (Status) بتعيش في الـ pills، مش في chrome الصفحة. Pending، Confirmed، Draft، وstepper حالة البروفايل (Pending → Confirmed → Done → Cancel) بتستخدم مجموعة ألوان pill ثابتة وصغيرة، متكررة بنفس الشكل في الجداول والـ badges والـ stepper نفسه.
- الكروت البيضا عايمة على خلفية رمادية فاتحة باردة.
surface-pageأبدًا مابتتستخدمش للمحتوى؛ كل جدول وفورم وملخص بيقعد جوه بلوكsurface-cardبظل خفيف وخط حدّ 1px، عشان شاشات البيانات الكثيفة تفضل واضحة. - الأرقام هي البطل في الداشبورد. بلاطات الـ Insights وإجماليات الـ charts بتستخدم أكبر وأثقل خط في الصفحة — أكبر من أي عنوان — عشان الـ KPIs تتقرا بسرعة.
التايبوجرافي — مؤكّد
أزورا بيستخدم خطّين مختلفين حسب اتجاه الصفحة: نسخة العربي/RTL بتستخدم Cairo (font-family: Cairo, sans-serif)، ونسخة الإنجليزي/LTR بتستخدم Roboto (font-family: Roboto, sans-serif). الاختيار بيبقى حسب اتجاه الصفحة، مش حسب نوع الجهاز أو نظام التشغيل.
الاتجاه الثنائي (RTL/LTR)
أزورا بيدعم RTL كامل، مش مجرد نصوص مترجمة.
- الـ chrome بيتعكس. الـ sidebar وجرس الإشعارات وقائمة الحساب بتنتقل من الحافة الشمال (إنجليزي) للحافة اليمين (عربي)؛ عنوان الصفحة والـ breadcrumb بيتمحوروا لليمين؛ محتويات الكروت (الأيقونة جنب الرقم، التسمية فوق القيمة) بتتعكس كمان.
- الأرقام والتواريخ والعملة بتفضل LTR جوه صفوف RTL. خلايا الجدول زي
AZora-2026-10-26-54، أو تاريخ، أو سعر، بتتكتب من الشمال لليمين حتى جوه صف عربي متمحور لليمين. - توكنز الألوان والمسافات والـ radius مش مرتبطة باتجاه معين. بس الـ layout (المحاذاة، مكان الأيقونة) هو اللي بيتعكس؛ ابني المكوّنات بخصائص CSS منطقية بدل left/right ثابتة.
الأيقونات
أزورا بيسحب أيقوناته من مكتبتين — Tabler Icons (المجموعة الأساسية ذات الخط الرفيع: أيقونات الـ sidebar، أيقونات إجراءات الجدول، أيقونات حقول الفورم) وFont Awesome 6 (باقي المخزون). الاتنين خط رفيع (outline) بمقاس 16–24px، ودايمًا بلون واحد (currentColor) — أبدًا متعدد الألوان.
مراجعة إمكانية الوصول — 2026-10-26
اكتشفنا إن توكنين بيحملوا نص أبيض كانوا أقل من حد التباين الأدنى 4.5:1، وعملنالهم حل: success-strong (أغمق من success) لأي سطح نجاح فيه نص/أيقونة بيضا — توست النجاح بقى يستخدمها؛ وbutton-disabled-bg نفسه اتغمّق (من القيمة الأصلية المأخوذة #f3a282 إلى #c34513) لأن القيمة اللي اتقاسها كانت بس ~2.0:1 مع نص أبيض، ودلوقتي ~5.0:1.
اللوجو
اللوجو الحقيقي موجود في النظام كـ asset — ملف اللوجو الرسمي النظيف. ألوانه (logo-mark-blue، logo-wordmark-start/-end) مأخوذة بالضبط (pixel-sampled) من نفس الملف.
توكنز الألوان
الأسطح (Surfaces)
الحدود (Borders)
النصوص (Ink)
العلامة التجارية (Brand)
شارات الحالة (Status pills)
عناصر التحكم (Controls)
النجاح (التوست)
بلاطات الفئات (Category tiles)
الأزرار (Buttons)
اللوجو (Logo)
الرسوم البيانية (Charts)
الأخطاء (Error)
التايبوجرافي
نسخة العربي/RTL: Cairo, sans-serif. نسخة الإنجليزي/LTR: Roboto, sans-serif.
| الستايل | الحجم | ارتفاع السطر | الوزن | الاستخدام |
|---|---|---|---|---|
Display / page-title | 28px | 34px | 600 | عناوين أعلى الصفحة ("Tourist File"، "Add Profile") |
Heading / section | 20px | 26px | 700 | عناوين الأقسام ("Profile Info") |
Heading / card-title | 16px | 22px | 700 | عناوين الكروت والـ widgets ("Money Summary") |
Body / body | 14px | 20px | 400 | نص الفقرات وخلايا الجداول الافتراضي |
Body / body-strong | 14px | 20px | 600 | القيم المُبرزة، قيم الحقول، تسميات الأزرار |
Label / field-label | 13px | 18px | 500 | تسميات حقول الفورم ("Arrival Date") |
Label / table-header | 12px | 16px | 600 | عناوين أعمدة الجدول |
Numeral / stat-value | 30px | 36px | 700 | أرقام insight في الداشبورد |
المسافات والانحناء
المسافات (Spacing)
space-14pxspace-28pxspace-312pxspace-416pxspace-520pxspace-624pxspace-832pxspace-1040pxالانحناء (Radius)
radius-sm6pxradius-md10pxradius-lg16pxradius-full999pxالمكوّنات
Button
إجراءاتأزرار إجراءات معبّأة (filled) بمستويين من الأهمية في أزورا، بالإضافة لـ outline أقل أهمية للعناصر داخل القوائم.
- Primary (برتقالي العلامة، نص أبيض) هو العنصر البرتقالي المعبّأ الوحيد في الشاشة في أغلب الأحيان — بيحدد الفعل التالي الوحيد.
- Secondary (كحلي غامق، نص أبيض) لإجراء مساعد بيقعد جنب إجراء أساسي من غير ما ينافسه في الانتباه.
- Outline — محايد (شفاف، حد
border-subtle، نصink-700) للإجراءات جوه قوائم الـ dropdown وأزرار الـ toolbar. - Outline — primary (تعبئة بيضا، حد
brand-orange1.5px، نصbrand-orange) هو شقيق أقل أهمية للزرار الـ primary المعبّأ. - Destructive — solid (تعبئة
error، نص أبيض) لإجراء لا رجعة فيه ومعروض كزرار مستقل مش بند في قائمة.
التلاتة بيشتركوا في radius واحد 10px، تسمية 14px/600، وانتقال خلفية 0.15s.
الزرار المعطّل (Primary) — مؤكّد: لون button-disabled-bg فاتح مع نص أبيض — مش زرار رمادي على خلفية الصفحة. خلّي النص أبيض؛ بس التعبئة هي اللي بتخف.
Badge
تغذية راجعةpills صغيرة معبّأة بالكامل مستديرة، مستخدمة لكل حالة في المنتج: قائمة البروفايلات، جدول آخر الحجوزات، وstepper حالة البروفايل.
أربع أزواج ثابتة — أبدًا متخلطش خلفية حالة مع لون نص حالة تانية:
| الحالة | الخلفية | النص |
|---|---|---|
| Pending | status-pending-bg | status-pending-ink |
| Confirmed | status-confirmed-bg | status-confirmed-ink |
| Draft | status-draft-bg | status-draft-ink |
| Confirmed / success (صفوف القوائم) | status-success-bg | status-success-ink |
تسمية 12px/600، padding رأسي space-1–space-2، padding أفقي space-3، وradius-full. دي أبدًا مش outline — التعبئة هي اللي بتخليها واضحة في جدول كثيف.
في شكل badge تاني أهدأ للحالات التشغيلية/التوفّر:
| الحالة | الخلفية | النص |
|---|---|---|
| Available | status-available-bg | status-available-ink |
StatCard
عرض بياناتبلاطة KPI المستخدمة في صف Insights بالداشبورد. كارت أبيض على surface-page، بظل shadow-card، radius radius-md، padding space-4: صف تسمية فوق بستايل ink-500/field-label، بعدين الرقم بستايل stat-value (أكبر خط في النظام) بلون ink-900، وتعليق سطر واحد اختياري.
خلّي التعليقات جملة قصيرة واحدة. الرقم دايمًا هو مرساة الكارت البصرية.
DataTable
عرض بياناتنمط القائمة الكثيفة اللي بتحمل أغلب شاشات أزورا. حاوية surface-card بظل shadow-card وradius radius-md، صف هيدر بستايل table-header (ink-500، 12px/600) على حد سفلي رفيع، وصفوف المحتوى بستايل body/14px بـ padding رأسي space-3 ونفس الخط الرفيع بين الصفوف — من غير تلوين zebra.
ترتيب محتوى الصف ثابت: عمود معرّف/رابط (لينك بلون brand-orange)، عمود أو أكتر بيانات عادية، عمود حالة Badge، وعمود إجراءات ختامي. الجداول القابلة للاختيار بتضيف عمود checkbox في أقصى اليسار.
StatusDonut
عرض بياناتالحلقة رباعية الأقسام من widget "معالجة الملفات" في الداشبورد: دونات واحد لكل حالة (Pending، Confirmed، Done، Cancel)، كل واحد حلقة صغيرة مستقلة بالنسبة المئوية جواها وتعليق "Count: N" تحتها.
بيستخدم مجموعة ألوان خاصة بيه (chart-status-pending…chart-status-cancel)، مش نفس زوج status-* المستخدم في badges الجدول.
Toggle
إجراءاتمفتاح on/off المستخدم كعنصر تحكم على مستوى الصف في كل جدول قائمة — Hotels، Drivers، Last Profiles. الحالة On بتستخدم control-on (نفس برتقالي كل زرار primary)؛ الحالة Off بتستخدم control-off، مسار رمادي متوسط. مسار وthumb بـ radius-full، thumb أبيض، من غير نص تسمية جنبه.
خصّص ده لتبديل مباشر وفوري بس. لحالة workflow بتمر بخطوات، استخدم Badge أو stepper تفاصيل البروفايل بدلاً منه — أبدًا Toggle.
Toast
تغذية راجعةنمط التوست المؤكّد في المنتج: مستطيل معبّأ، نص أبيض ثقيل، ثابت أعلى يمين الشاشة، زوايا radius-sm. حالتين مؤكّدتين — error (خلفية error) وsuccess (خلفية success-strong، توست "Updated successfully" في صفحة Users).
- تعبئة solid
error/success-strong، أبدًا tint خفيف. - بيستخدم
success-strong، مش توكنsuccessالأساسي: النص الأبيض علىsuccessالخام (#1fa971) بيقيس أقل من حد 4.5:1 (~3.0:1)، فأي سطح نجاح فيه نص لازم يستخدمsuccess-strongبدلاً منه. - كدّس التوستات الجديدة فوق القديمة بفجوة صغيرة (
space-2)؛ كل واحد له زرار إغلاق مستقل. - خلل معروف في المنتج، مش نمط للتكرار: التوست التاني الملتقط بيعرض raw i18n key (
general.changeStatusError) بدل النص المترجم.
CategoryTile
تنقّلصف بلاطات الروابط السريعة الباستيل أعلى صفحة Users: أيقونة + تسمية على خلفية ناعمة ملونة حسب الفئة، نص غامق بنفس درجة اللون، من غير حد أو ظل.
أربع أزواج ثابتة، واحد لكل فئة تقرير:
| البلاطة | الخلفية | النص/الأيقونة |
|---|---|---|
| Cashbox Statement | category-peach-bg | category-peach-ink |
| Invoice Report | category-slate-bg | category-slate-ink |
| Payment Vouchers | category-blue-bg | category-blue-ink |
| Services Report | category-mint-bg | category-mint-ink |
WizardStepper
تنقّلالـ stepper الأفقي المرقّم المستخدم للتنقل في فورم متعدد الخطوات — Add Profile، Edit User. مختلف عن stepper حالة Badge في صفحة تفاصيل البروفايل: ده دوائر وخطوط واصلة، للتنقل جوه فورم.
- كل خطوة دائرة مرقّمة: الخطوات الحالية والمكتملة معبّأة
brand-orangeبنص أبيض؛ الخطوات القادمة دائرة outline. - الخط الواصل بين الخطوات
brand-orangeلحد الخطوة الحالية، بعدينborder-strongللباقي. - تسمية الخطوة فوق الدايرة بتاعتها.
FileUpload
فورماتمنطقة رفع المرفقات من قسم Attachments في فورم حجز الفندق: مستطيل كبير بحد متقطّع، border-strong، radius radius-md، أيقونة رفع سحابة في المنتصف بلون ink-500 ونص "Drag and drop, or click to upload file" بحجم body ولون ink-500.
بيترافق مع نجمة حقل إلزامي على التسمية زي أي FormField، وزرار primary معطّل تحته لحد ما يتم إرفاق ملف فعليًا.
ChoiceCard
فورماتمحدد radio على شكل pill لاختيارات ثنائية إما/أو في wizard استئجار السيارة، دايمًا معروض ككارتين pill كبار جنب بعض.
- غير مختار: خلفية
surface-card، حدborder-subtle1px، نقطة radio فاضية رمادية، تسميةink-700. - مختار: خلفية
brand-orange-soft، حدbrand-orange2px، نقطة radio معبّأةbrand-orange(مركز أبيض)، تسميةink-900عريضة. - أيقونة صغيرة في chip أبيض مستدير الزوايا على طرف الكارت الخارجي.
- مؤكّد إنه RTL-native: نقطة الـ radio والتسمية في الحافة اليمين (البداية) في العربي، وchip الأيقونة في الحافة الشمال.
Tabs
تنقّلشريط التابات بخط سفلي (underline) المستخدم للتنقل بين أقسام صفحة تفاصيل سجل.
- التاب النشط: نص وأيقونة
brand-orange، عريض، خط سفلي 3pxbrand-orangeبعرض التاب بالكامل. - التاب غير النشط: نص وأيقونة
ink-500، من غير خط سفلي. - خط رفيع
border-subtleبيمر تحت الشريط بالكامل. - التابات مرقّمة في نص التسمية نفسها ("1. Overview") لما بتمثل تسلسل ثابت.
- مختلف عن WizardStepper: التابات أقسام متوازية لسجل مكتمل الشخص بيتنقل بينها بحرية؛ WizardStepper فورم متعدد خطوات لسه مش مكتمل وبيتحرك للأمام.
Checkbox
فورماتcheckbox اختيار الصف المستخدم في كل DataTable: الحالة غير المحددة مربع outline بحد border-strong على surface-card؛ الحالة المحددة مربع معبّأ brand-orange بعلامة صح بيضا، زوايا radius-sm. عنصر "تحديد الكل" في الهيدر بيستخدم نفس المربع البرتقالي المعبّأ بشرطة بيضا قصيرة لما يكون التحديد جزئي.
FormField
فورماتحقل النص المسمّى المستخدم في كل فورم "Add…": تسمية field-label فوق حقل surface-card بحد border-subtle 1px وزوايا radius-sm. الحقل الإلزامي بيضيف نجمة error صغيرة.
موضع النجمة غير ثابت في المنتج نفسه: أغلب الفورمات بتحطها بعد النص ("Name *")، بس فورم حجز الفندق بيحطها قبل ("* Check in").
حالة الحقل غير الصالح المؤكّدة: حد الحقل بيفضل محايد (border-subtle)، مش error — بس سطر واحد من نص المساعدة بلون error بيظهر تحت الحقل مباشرة. ولا التسمية ولا خلفية الحقل بتتغير.
AuthLayout
تنقّلالـ layout المنقسم لشاشة تسجيل الدخول العامة — السطح الوحيد في المنتج اللي مش جزء من chrome التطبيق الداخلي.
- اللوحة اليسار (~1/3 العرض، خلفية
surface-page): لوجو أزورا الحقيقي أعلاه، بعدين "تسجيل الدخول" بستايلpage-title، عنوان فرعيbody/ink-500، اتنين FormField (إيميل، باسورد)، checkbox بسيط + تسمية ("عرض كلمة المرور")، وزرار الإرسال مثبّت أسفل اللوحة. - اللوحة اليمين (~2/3 العرض): صورة فوتوغرافية/توضيحية full-bleed، من غير نص أو UI فوقها.
- زرار الإرسال بيستخدم
button-disabled-bg، مشbrand-orange، رغم إنه مفعّل وقابل للنقر بالكامل — ده لون الزرار الأساسي الخاص بشاشة الدخول؛ متصلحوش لـ brand-orange لما تطابق الشاشة دي بالتحديد. - تحديث 2026-10-26: قيمة توكن
button-disabled-bgاتغمّقت من القيمة الأصلية المأخوذة#f3a282إلى#c34513كحل لمشكلة إمكانية الوصول — النص الأبيض على القيمة الأصلية كان بيقيس بس ~2.0:1، دلوقتي ~5.0:1. - التحقق الداخلي هنا بيطابق نمط FormField المؤكّد: حد محايد، نص مساعدة أحمر بس.