نظام التصميم · الإصدار الأول

دليل تصميم تنفيذ

كل الألوان والخطوط والمكونات التي تبنى بها واجهات تنفيذ، في مكان واحد. أي تعديل في الرموز ينعكس هنا وفي كل الصفحات.

الألوان

ثلاثة أوضاع للأسطح لا تختلط داخل كتلة واحدة: لوح متدرج أردوازي إلى ورقي، أو فحمي يضيئه ضوء أخضر، أو رمادي فاتح يدخله الأخضر عبر شرائط الزوايا فقط.

ألوان الهوية

الأشرطة الداكنة وبداية التدرج

أردوازي

var(--tf-slate)

الأزرار والأقراص والتبويب النشط

أخضر الهوية

var(--tf-green)

الأرقام والإبراز والنداء المميز

ورقي

var(--tf-leaf)

أسطح الأقسام الفاتحة

رمادي ضبابي

var(--tf-haze)

الدرجات المساندة

فحمي

var(--tf-night)

أخضر عميق

var(--tf-green-deep)

أخضر متوسط

var(--tf-green-bright)

نعناعي

var(--tf-mint)

نعناعي عميق

var(--tf-mint-deep)

حبر

var(--tf-ink)

حبر ناعم

var(--tf-ink-soft)

حبر خافت

var(--tf-ink-muted)

حبر باهت

var(--tf-ink-faint)

ورقي عميق

var(--tf-leaf-deep)

ورقي فاتح

var(--tf-leaf-soft)

ضباب

var(--tf-mist)

خط

var(--tf-line)

ورق

var(--tf-paper)

ألوان البطاقات

مريمية

var(--tf-tint-sage)

فيروزي

var(--tf-tint-teal)

سماوي

var(--tf-tint-sky)

حجري

var(--tf-tint-stone)

ألوان الحالة

نجاح

var(--tf-success)

نجاح فاتح

var(--tf-success-soft)

تحذير

var(--tf-warning)

تحذير فاتح

var(--tf-warning-soft)

خطر

var(--tf-danger)

خطر فاتح

var(--tf-danger-soft)

معلومة

var(--tf-info)

معلومة فاتح

var(--tf-info-soft)

التدرجات

التدرج المميز: أردوازي ← أخضر ← ورقي

اللوح الداكن مع توهج ورقي

اللوح الداكن بتوهجين

غسلة الواجهة الفاتحة

اتجاهات الأخضر

الاتجاه المطبق مقابل الاتجاهات السابقة، على نفس المكونات. تغيير الاتجاه تعديل في ملف الرموز فقط.

المطبق

١٠

مراحل محكومة

سير عمل محكوم

كل انتقال مسجل ومدقق.

ابدأ الآن
اطلب عرضا

أردوازي وورقي

مستوحى من مرجعك: داكن بارد ينساب إلى أخضر منعش، مؤسسي وحديث.

١٠

مراحل محكومة

سير عمل محكوم

كل انتقال مسجل ومدقق.

ابدأ الآن
اطلب عرضا

زمردي وذهبي

أخضر مشبع مع ذهبي دافئ، أكثر فخامة وأقل برودة.

١٠

مراحل محكومة

سير عمل محكوم

كل انتقال مسجل ومدقق.

ابدأ الآن
اطلب عرضا

أخضر اعتماد

أقرب لهوية منصة اعتماد: أخضر مائل للفيروزي.

١٠

مراحل محكومة

سير عمل محكوم

كل انتقال مسجل ومدقق.

ابدأ الآن
اطلب عرضا

نخيلي داكن

الاتجاه الأول: شبه أسود بروح خضراء مع زعفران.

الخطوط

خط عرض ثقيل للعناوين والأرقام، وخط هادئ واضح للنصوص. لا تباعد بين الحروف العربية أبدا.

خط العناوين

أ ب ت ١٢٣

Alexandria

٦٠٠ · ٧٠٠ · ٨٠٠ · ٩٠٠

خط النصوص

أ ب ت ١٢٣

IBM Plex Sans Arabic

٤٠٠ · ٥٠٠ · ٦٠٠ · ٧٠٠

h1

من الطلب إلى إقفال العقد

h2

من الطلب إلى إقفال العقد

h3

تجهيز كراسة الشروط

h4

تجهيز كراسة الشروط

h5

تجهيز كراسة الشروط

subtitle1

كل انتقال في سير العمل مسجل ومدقق، ولا تعتمد توصية دون مراجعة بشرية.

body1

كل انتقال في سير العمل مسجل ومدقق، ولا تعتمد توصية دون مراجعة بشرية.

body2

كل انتقال في سير العمل مسجل ومدقق، ولا تعتمد توصية دون مراجعة بشرية.

caption

كل انتقال في سير العمل مسجل ومدقق، ولا تعتمد توصية دون مراجعة بشرية.

الشكل والظل

زوايا كبيرة وناعمة، وأزرار حبة دواء، وظلال قليلة لا تظهر إلا للعناصر العائمة.

الزوايا

صغيرة جدا

10px

صغيرة

16px

متوسطة

24px

كبيرة

32px

كبيرة جدا

44px

حبة دواء

999

ظل العناصر العائمة

ظل القوائم والتلميحات

الأزرار

زر رئيسي بالحبر، وزر مميز بالزعفران لنداء واحد في الصفحة، وزر هادئ للإجراءات الثانوية.

الأنواع

الأحجام

مع أيقونات

الحالات

أزرار الأيقونات

على خلفية داكنة

النماذج

حقول بشكل حبة دواء وحلقة تركيز زعفرانية، مع رسائل مساعدة وخطأ واضحة.

حقول النص

يولد تلقائيا عند الحفظ إن ترك فارغا

القيمة يجب أن تكون أكبر من صفر

القوائم والبحث

نوع المشروع

الاختيارات

المفاتيح

إشعارات البريد
إشعارات التطبيق
إشعارات واتساب

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

حبوب الحالة ورقائق التصفية والصور الرمزية والتلميحات.

حبوب الحالة

منشورةقيد المراجعةمعتمدةمتأخرةمرفوضةقيد التقييممسودةمؤرشفة

رقائق التصفية

الكل
مفتوحة
قيد التقييم
مرساة

الصور الرمزية

+2
س
م
ع
ك ع

الشارات والتلميحات

البطاقات

بطاقات بسطح ضبابي أو ملون، بلا حدود ولا ظلال، ترتفع قليلا عند المرور.

بطاقة ميزة

سير عمل محكوم

كل انتقال مسجل ومدقق.

ذكاء مفسر

لكل توصية تبريرها.

بطاقة ملونة

الإدارات الطالبة

تابع طلبك خطوة بخطوة.

المقاول

راجع عقدك ووقعه.

الأرقام

١٠

مراحل

١٣

دورا

٤

تكاملات

أقراص الأيقونات

عرض البيانات

تقدم المراحل وسلسلة الاعتماد والجداول وحالات التحميل.

شرائط التقدم

المرحلة ٦ من ١٠

التقييم الفني

اكتمال الكراسة

٧٢٪

سلسلة الاعتماد

الطالبة

المالية

العقود

الإدارة العليا

جدول

المنافسةالإدارةالقيمة التقديريةالحالة
توريد أجهزة شبكاتتقنية المعلومات٧٬٢٠٠٬٠٠٠ ⃁قيد التقييم
صيانة المباني الإداريةالخدمات المساندة٣٬٤٥٠٬٠٠٠ ⃁قيد المراجعة
خدمات النظافةالخدمات المساندة٩٨٠٬٠٠٠ ⃁معتمدة
تطوير البوابة الإلكترونيةالتحول الرقمي٥٬١٠٠٬٠٠٠ ⃁مرفوضة

حالة التحميل

التنبيهات والنوافذ

تنبيهات بحسب الخطورة، ونافذة تأكيد، وإشعار عابر.

التنبيهات

النوافذ والإشعارات

الزخارف والشعار

أشكال زاوية فقط: شظايا، وشرائط زوايا مقصوصة بزاوية ٤٥ تنزف من حافة الكتلة، ولوح الهوية المتدرج خلف العنصر البؤري.

شرائط الزوايا على الرمادي

شظية

شظية على داكن

لوح الهوية المتدرج

سهم التعليق المرسوم باليد (للتعليقات التوضيحية فقط)

الشعار

قبل: الشعار الأصلي

بعد: الشعار المحسن

على خلفية داكنة

مدمج · العلامة · أيقونة التطبيق

البناء: ثلاث علامات بمسافة ١٦ وسمك ٩ بلا تداخل، والنقطة تقود الحركة

الأحجام