Sharjah Design System نظام الشارقة للتصميم
Sharjah Design System نظام الشارقة للتصميم
English Government of Sharjah
الرئيسية
دليل الخط نظام الألوان الأيقونات تخطيط الواجهات والمسافات الحقول والمدخلات الأزرار التصميم المتجاوب إمكانية الوصول رموز التصميم تصميم المحتوى
أبدأ الآن عناصر واجهة المستخدم القوالب مجموعة أدوات واجهة المستخدم
خارطة الطريق

روابط

الرئيسية أبدأ الآن مجموعة أدوات واجهة المستخدم

إرشادات

دليل الخط نظام الألوان الأيقونات
الأزرار التصميم المتجاوب رموز التصميم

النتائج

ابحث في الموقع عن “”

نظام الألوان

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

لوحة ألوان متكاملة

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

بناء الألوان الدلالية

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

أساسي HEX: #924C2D

اللون الرئيسي للجهة الحكومية المستخدم للازرار الأساسية والعناصر

أساسي-داكن HEX: #33211F

اللون الرئيسي للجهة الحكومية المستخدم للازرار الأساسية والعناصر

فرعي-ذهبي HEX: #9D7424

اللون الفرعي للجهة الحكومية المستخدم في الخلفيات

فرعي-ذهبي-فاتح HEX: #C3A773

اللون الفرعي للجهة الحكومية المستخدم في الخلفيات

فرعي-فاتح HEX: #EEE6D8

اللون الثانوي للخلفيات

رمادي-رقمي HEX: #353535

لون النص الأساسي للعناوين والمحتوى المهم

لوحات الألوان المساندة

لوحات ألوان إضافية مخصصة لعرض البيانات، ومؤشرات الحالة، والألوان المميزة. وتضم كل لوحة 10 درجات لونية، مما يوفر مرونة عالية في مختلف الاستخدامات مع الحفاظ على الاتساق البصري.

العلامة التجارية

950
900
800
700
600
500
400
300
200
100
50

الثلجي

950
900
800
700
600
500
400
300
200
100
50

رمادي

950
900
800
700
600
500
400
300
200
100
50

زينك

950
900
800
700
600
500
400
300
200
100
50

محايد

950
900
800
700
600
500
400
300
200
100
50

حجري

950
900
800
700
600
500
400
300
200
100
50

أحمر

950
900
800
700
600
500
400
300
200
100
50

برتقالي

950
900
800
700
600
500
400
300
200
100
50

كهرماني

950
900
800
700
600
500
400
300
200
100
50

أصفر

950
900
800
700
600
500
400
300
200
100
50

لايم

950
900
800
700
600
500
400
300
200
100
50

أخضر

950
900
800
700
600
500
400
300
200
100
50

زمرد

950
900
800
700
600
500
400
300
200
100
50

أزرق مخضر

950
900
800
700
600
500
400
300
200
100
50

سماوي

950
900
800
700
600
500
400
300
200
100
50

سماء

950
900
800
700
600
500
400
300
200
100
50

نيلي

950
900
800
700
600
500
400
300
200
100
50

بنفسجي

950
900
800
700
600
500
400
300
200
100
50

أرجواني

950
900
800
700
600
500
400
300
200
100
50

فوشيا

950
900
800
700
600
500
400
300
200
100
50

وردي

950
900
800
700
600
500
400
300
200
100
50

زهري

950
900
800
700
600
500
400
300
200
100
50

ألوان البيئات

ألوان تتكيف مع مختلف البيئات والسمات، مع الحفاظ على التسلسل الهرمي البصري ومعايير إمكانية الوصول.

السمة الفاتحة

الزر الأساسي
عنصر السطح
حقل الإدخال

السمة الداكنة

الزر الأساسي
عنصر السطح
حقل الإدخال

ألوان الإشعارات

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

✓

تم بنجاح

هذا مثال على رسالة نجاح توضح الاستخدام الصحيح للون المخصص لهذه الحالة.

✕

خطأ

هذا مثال على رسالة خطأ توضح الاستخدام الصحيح للون المخصص لهذه الحالة.

⚠

تحذير

هذا مثال على رسالة تحذير توضح الاستخدام الصحيح للون المخصص لهذه الحالة.

ℹ

معلومات

هذا مثال على رسالة معلومات توضح الاستخدام الصحيح للون المخصص لهذه الحالة.

الألوان المتدرجة

ألوان متدرجة صُممت بعناية لإضفاء لمسة بصرية مميزة، وإبراز العناصر المهمة، وتعزيز الجوانب الجمالية. ويُنصح باستخدامها باعتدال للحفاظ على التسلسل الهرمي البصري ووضوح الواجهة.

التدرج الأخضر الرسمي

#58B786 #009247

التدرج الأحمر الرسمي

#F2767B #ED1C24

التدرج البني الرسمي

#B8846D #924C2D

التدرج الرمادي الرقمي

#656565 #353535

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

تخضع جميع تركيبات الألوان للاختبار لضمان توافقها مع معايير WCAG AA الخاصة بتباين النصوص. ويعرض فاحص التباين أدناه التركيبات المعتمدة.

AAA 12.6:1
نص داكن على خلفية فاتحة
AA 4.8:1
نص أبيض على خلفية خضراء
غير مطابق 2.1:1
تباين منخفض

Best practice: احرص دائمًا على أن تكون نسبة التباين للنصوص العادية 4.5:1 على الأقل وفق معيار WCAG AA، و**3:1** للنصوص الكبيرة (18 بكسل فأكثر أو 14 بكسل فأكثر بخط عريض).**

السابق دليل الخط التالي الأيقونات