Color System

نظام الألوان

نظام الألوان الكامل بما في ذلك الألوان الأساسية والثانوية والتمييزية مع إرشادات الاستخدام.

نسبة استخدام الألوان

60%
25%
10%
5%

نتبع قاعدة 60-30-10 لضمان توازن بصري مريح.

الألوان الأساسية

60%

الأزرق الأساسي

الثقة، الاستقرار، الذكاء

HEX

#007DC7

RGB

0, 125, 199

HSL

203, 100%, 39%

CMYK

100, 37, 0, 22

Pantone

299 C

25%

تيل (الأزرق المخضر)

الابتكار، النمو، الحيوية

HEX

#5DCAAD

RGB

93, 202, 173

HSL

164, 50%, 58%

CMYK

54, 0, 14, 21

Pantone

338 C

10%

الأصفر الدافئ

الطاقة، التفاؤل، الإبداع

HEX

#F6C465

RGB

246, 196, 101

HSL

39, 89%, 68%

CMYK

0, 20, 59, 4

Pantone

142 C

5%

الكحلي العميق

العمق، الرقي، السلطة

HEX

#242139

RGB

36, 33, 57

HSL

248, 27%, 18%

CMYK

37, 42, 0, 78

Pantone

276 C

المجموعة الموسعة

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

#E6F3FA
#B3DCEF
#80C6E5
#4DAFDA
#1A99D0
#007DC7
#0066A3
#004F7F
#00385C
#002138
الأزرق الأساسي 50
الأزرق الأساسي 100
الأزرق الأساسي 200
الأزرق الأساسي 300
الأزرق الأساسي 400
الأزرق الأساسي 500
الأزرق الأساسي 600
الأزرق الأساسي 700
الأزرق الأساسي 800
الأزرق الأساسي 900

الألوان الوظيفية

النجاح

التأكيدات، الإجراءات الإيجابية

#22C55E

تحذير

تنبيهات، حالات الانتظار

#F59E0B

خطأ

أخطاء، إجراءات تدميرية

#EF4444

معلومات

نصوص مساعدة وتوضيحية

#3B82F6

الألوان المحايدة

#FFFFFF
#F9FAFB
#F3F4F6
#E5E7EB
#D1D5DB
#9CA3AF
#6B7280
#4B5563
#374151
#1F2937
#111827
#000000

تركيبات الألوان

نماذج للتركيبات المتوافقة مع معايير الوصول العالمية.

الأزرق الأساسي على الأبيض

تباين عالٍ، وضوح ممتاز للأزرار والعناوين الرئيسية.

نسبة التباين
AAA 7.5:1

التيل على الكحلي

رؤية قوية، رائع للعناصر التفاعلية في الوضع الداكن.

نسبة التباين
AAA 8.2:1

الكحلي على التيل

توازن حيوي للأزرار الثانوية والبطاقات.

نسبة التباين
AAA 8.2:1

الوضع الفاتح والداكن

الوضع الفاتح

Background: #FFFFFF
Text: #111827
Primary: #007DC7
Surface: #F3F4F6

الوضع الداكن

Background: #242139
Text: #FFFFFF
Primary: #5DCAAD
Surface: #1F2937

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

معايير WCAG

  • تحقيق نسبة تباين 4.5:1 للنص العادي.
  • تحقيق نسبة تباين 3:1 للنص الكبير.
  • ضمان الوضوح التام للألوان الوظيفية.

نصائح التصميم

  • لا تستخدم الألوان كوسيلة وحيدة لنقل المعلومة.
  • اختبر التصميم مع مرشحات عمى الألوان.
  • حافظ على تباين عالٍ للعناصر التفاعلية.