الهوية والأيقونات

اللوجو

ليه القوس والشخص

• القوس: شكل الباب والمحراب في العمارة المصرية، يعني بيت وحماية، ومش "بيت" كرتوني زي أغلب منافسينا.
• الفراغ جوه القوس: مدخل مفتوح. المستخدم بيدخل بإرادته وبيشوف جوه.
• الشخص بالشمس: الإنسان هو المنتج. الشمس (--sun) بتتحط على اللي لازم يتشاف (المستوى الأعلى للثقة، التمييز). في اللوجو، اللي لازم يتشاف هو الشخص.
• القوس بلون البراند: الفيروزي الغامق (--brand) في النسخة الداخلية (inline) اللي بتتبع الثيم. الهوية بتتميز بالقوس والأسلوب كله، مش بلون لوحده (شوف صفحة الألوان).

النسخ الجاهزة (inline، بتتبع الثيم)

الوسم <span data-logo="lockup"></span> بيحقن SVG مرتبط بـ --brand (فيروزي غامق) و --accent (شمس) و currentColor. القوس بيتحول تلقائياً في الوضع الغامق.

ملفات SVG للتسليم (assets/img/)

على الفاتح (الألوان ثابتة جوه الملف: قوس فيروزي غامق #0b7b6d وشخص شمس #ffc53d)

على الغامق (حبر منتصف الليل: قوس #6fd3c3 وشخص شمس وكلمة بيضاء)

الملف	الاستخدام
logo-lockup-ar.svg / -on-dark	الترويسة، الإيميلات، المستندات والعقود (عربي)
logo-lockup-en.svg / -on-dark	الواجهات الإنجليزية، الملفات للشركاء الأجانب
logo-mark.svg / -on-dark	أيقونة التطبيق، avatar الدعم، مساحات صغيرة
favicon.svg	تبويب المتصفح (علامة بألوانها الأصلية).

المساحة الفارغة والأحجام الدنيا

المساحة الفارغة (clear space) = x، وx عرض الشخص جوه القوس (حوالي ربع عرض العلامة). ما حدش ولا نص ولا حد بيدخل جوه المساحة دي.

المساحة المحيطة باللوجو

الحد الأدنى للحجم

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

اللوجو بألوانه الأصلية على خلفية فاتحة هادية.

تغيير الألوان. ألوان اللوجو ثابتة.

مط أو ضغط اللوجو. النسبة ثابتة.

ظلال أو توهج أو تدرجات على اللوجو.

على خلفية ملوّنة أو مزدحمة. استخدم نسخة الغامق على الحبر، أو الفاتح على الورق أو الأبيض.

قلب العلامة أو تدويرها. القوس دايماً لفوق.

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

نمط القوس

تكرار أقواس خطّية بسيطة (assets/img/arch-pattern.svg). هي الزخرفة الأساسية في النظام، جنب النقط الخفيفة على الورق والبلوكات الملونة. القواعد:

• على الحبر الغامق (بطل الموقع، شاشة البداية، الفوتر) بخطوط بيضاء شفافية حوالي 10 إلى 12%، وعلى مراحل الألوان الصريحة (stage الـ flow وهيرو صفحات التوثيق) بـ overlay خفيف.
• خلف المحتوى مش جواه: مفيش نص يتحط فوق أقواس بتشتت القراءة.
• ما بيتحطش على الأسطح البيضا ولا في الجداول ولا في العقود.
• حجم التكرار 120px، ومفيش تدوير أو تدرج.

الأيقونات

مجموعة Lucide (رخصة ISC، نسخة lucide-static@0.468.0)، متحمّلة في assets/js/icons.js وبتتولّد بالسكريبت tools/build-icons.mjs. شكلها خطّي بسمك 1.75 على شبكة 24px، أطراف مستديرة. أسماء الأيقونات بتتكتب باسمنا (shield-check مش اسم Lucide الأصلي لو اختلف). الاستخدام: <i data-icon="shield-check"></i> وبيتحول SVG تلقائي.

• الأيقونة بتاخد لون النص (currentColor). مفيش أيقونة بلون مختلف عن نصها إلا للحالة (نجاح، خطر).
• الأيقونة وحدها محتاجة aria-label على الزر. الأيقونة اللي جنب كلمة aria-hidden تلقائياً.
• أيقونة وكلمة: مسافة 8px، وفي RTL الأيقونة على جهة البداية (يمين).
• أيقونات الحالة الأساسية: circle-check نجاح، triangle-alert (اسمها warn) تحذير، circle-x خطر، info معلومة، shield / shield-check / badge-check مستويات التوثيق.

الانعكاس في RTL

الأيقونات اللي بتشاور على اتجاه القراءة بتنعكس تلقائي في RTL بالكلاس icon--dir (transform: scaleX(-1)). القاعدة: بنكتب الأيقونة بمعناها في LTR: "التالي" = arrow-right / chevron-right، و"السابق" = arrow-left / chevron-left، والنظام بيقلبها في العربي. الأيقونات اللي مش اتجاهية (بحث، ساعة، علامة صح، تحميل) ما بتتقلبش أبداً.

معرض الأيقونات

كل الأيقونات المتاحة. دوّر بالاسم، واضغط على أي واحدة لنسخ اسمها. اللي عليها "RTL" بتنعكس تلقائي.

الصور والمشاهد والرسم

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

القواعد

• الاحترام: العاملة بتتصور كإنسانة ومحترفة، بنفس الكرامة اللي بنصور بيها الأسرة. بتبصّ للكاميرا أو لشغلها، مش بوضع خضوع، ومش دايماً بزي موحد.
• الموافقة: موافقة مكتوبة من كل شخص ظاهر وسحبها ممكن في أي وقت. صور البروفايل بتتاخد بموافقة العاملة وتتحكم في ظهورها.
• الأطفال: مفيش وجه طفل في أي صورة تسويقية أو داخل المنتج إلا بموافقة كتابية من ولي الأمر. الأفضل صور من الخلف أو أيدي أو سياق بدون وجه.
• التنوع بدون تصنيف: مصريات وأجنبيات حسب الواقع، من غير ترتيب بالجنسية أو اللون. ما نعرضش العاملات كـ "كتالوج".
• النص البديل (alt): كل صورة ليها وصف قصير يوصف المحتوى فعلاً ("مربية بتقرا لطفل في كنبة")، والصور الزخرفية alt="".
• التقنية: البورتريه في قوس بنسبة حوالي 4:4.6، والمشهد 4:3 أو بعرض كامل. loading="lazy"، وبيرجع للبورتريه أو المشهد المرسوم لو الملف مش موجود.
• في Wireframe الرمادي الصور والمشاهد والبورتريهات بتتحول لدرجات رمادي.
• النص فوق الصورة: جوه كارت أو ستيكر أو فوق scrim، مش مباشرة على وش حد.

الأفاتار والسياسات البصرية

• مفيش صورة؟ بورتريه مرسوم بيتولّد من الاسم (illus.js)، فنفس الشخص بنفس الشكل في كل مكان. المكاتب والفرق والأسر المجهولة بتاخد أيقونة في مربع. data-plain بيرجّع الحرفين.
• مستوى التوثيق بيظهر كشارة صغيرة على ركن الأفاتار (.avatar__tier) مع نص "موثّقة" في الشاشة الأكبر، مش لوحده.
• أفاتار أمانة الدعم: العلامة (mark) على خلفية الحبر.
• مفيش مصادر خارجية لأفاتار (Gravatar وغيره) عشان الخصوصية.

رسومات وزخارف

• الرسم: مسموح كبديل للصور في البورتريهات والمشاهد، بألوان النظام وخطوط حبر. مش بنستخدم مكتبات illustrations جاهزة ولا شخصيات كرتونية بتبسّط الإنسان.
• الحالات الفاضية والخطوات بتستخدم أيقونة كبيرة في قوس (.step-hero) + نص يشرح.
• الزخرفة: نمط القوس، النقط الخفيفة على الورق، الستيكرز المايلة (.sticker)، والـ ticker للتسويق بس.