تخطَّ إلى المحتوى
Theme

الألوان

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

تستخدم لوحة F5 سبعة ألوان أساسية للعلامة التجارية بالإضافة إلى الأسود والأبيض، لكل منها أربع متغيرات من التدرجات الفاتحة والداكنة، بإجمالي 45 لوناً. تُعدّ هذه الصفحة المرجع الوحيد الموثوق لتعيين ألوان العلامة التجارية إلى خصائص CSS المخصصة لـ Starlight أثناء تطوير السمات.

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

Section titled “الألوان الأساسية”
#e4002b
F5 Red—f5-red
#f29a36
Tangerine—f5-tangerine
#0e41aa
River—f5-river
#ab2782
Raspberry—f5-raspberry
#009639
Jade—f5-jade
#62228b
Eggplant—f5-eggplant
#0072b0
Bay—f5-bay
#ffffff
White—f5-white
#000000
Black—f5-black
الاسمHEXRGBCMYKLESSPMSمتغير CSS
F5 Red#e4002b228, 0, 430, 100, 81, 11monza185--f5-red
Tangerine#f29a36242, 154, 540, 36, 78, 5carrot-orange1375--f5-tangerine
River#0e41aa14, 65, 17092, 62, 0, 33tory-blue293--f5-river
Raspberry#ab2782171, 39, 1300, 77, 24, 33—241--f5-raspberry
Jade#0096390, 150, 57100, 0, 62, 41fun-green355--f5-jade
Eggplant#62228b98, 34, 13929, 76, 0, 45honey-flower2617--f5-eggplant
Bay#0072b00, 114, 176100, 35, 0, 31—7461--f5-bay
White#ffffff255, 255, 2550, 0, 0, 0alabaster—--f5-white
Black#0000000, 0, 060, 50, 40, 100blackBlack--f5-black

ملاحظة حول أسماء LESS: يُظهر Brand Center لون Raspberry باسم tory-blue ولون Bay باسم honey-flower — وهذه أخطاء نسخ ولصق من مدخلات River وEggplant على التوالي. تم تعليمها بـ — أعلاه تفادياً لنشر قيم غير صحيحة.

الألوان الثانوية (التدرجات الفاتحة والداكنة)

Section titled “الألوان الثانوية (التدرجات الفاتحة والداكنة)”

لكل لون أساسي أربع متغيرات مرتبة من الأفتح (المستوى 1) إلى الأغمق (المستوى 4).

يُخصّص Brand Center أسماء متغيرات LESS للألوان الثانوية. تتميز متغيرات Cloud Red وTangerine بأسماء فريدة وذات معنى. تعرض جميع المجموعات اللونية الأخرى الأسماء النائبة ذاتها (wewak، froly، carmine، venetian-red) — وهي قيم افتراضية للقالب من منصة العلامة التجارية، ومدرجة أدناه للاكتمال، إلا أنه لا ينبغي الاعتماد عليها كمعرّفات معيارية.

F5 Red

Section titled “F5 Red”
#e4002b
F5 Red (base)—f5-red
#f7b2bf
Level 1—f5-red-1
#f06680
Level 2—f5-red-2
#a70020
Level 3—f5-red-3
#720016
Level 4—f5-red-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#f7b2bf247, 178, 1910, 28, 23, 3wewak
2#f06680240, 102, 1280, 57, 47, 6froly
3#a70020167, 0, 320, 100, 81, 35carmine
4 (الأغمق)#720016114, 0, 220, 100, 81, 55venetian-red

Tangerine

Section titled “Tangerine”
#f29a36
Tangerine (base)—f5-tangerine
#ffe4c4
Level 1—f5-tangerine-1
#ffbd61
Level 2—f5-tangerine-2
#a35700
Level 3—f5-tangerine-3
#7a4100
Level 4—f5-tangerine-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#ffe4c4255, 228, 1960, 11, 23, 0tequila
2#ffbd61255, 189, 970, 26, 62, 0koromiko
3#a35700163, 87, 00, 47, 100, 36chelsea-gem
4 (الأغمق)#7a4100122, 65, 00, 47, 100, 52cinnamon

River

Section titled “River”
#0e41aa
River (base)—f5-river
#b7c6e5
Level 1—f5-river-1
#6e8dcc
Level 2—f5-river-2
#0b3180
Level 3—f5-river-3
#072155
Level 4—f5-river-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#b7c6e5183, 198, 2290, 28, 23, 3wewak
2#6e8dcc110, 141, 2040, 58, 47, 6froly
3#0b318011, 49, 1280, 100, 81, 35carmine
4 (الأغمق)#0721557, 33, 850, 100, 81, 55venetian-red

Raspberry

Section titled “Raspberry”
#ab2782
Raspberry (base)—f5-raspberry
#e6bed9
Level 1—f5-raspberry-1
#cd7db4
Level 2—f5-raspberry-2
#801d62
Level 3—f5-raspberry-3
#561441
Level 4—f5-raspberry-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#e6bed9230, 190, 2170, 28, 23, 3wewak
2#cd7db4205, 125, 1800, 58, 47, 6froly
3#801d62128, 29, 980, 100, 81, 35carmine
4 (الأغمق)#56144186, 20, 650, 100, 81, 55venetian-red

Jade

Section titled “Jade”
#009639
Jade (base)—f5-jade
#b2dfc4
Level 1—f5-jade-1
#66c088
Level 2—f5-jade-2
#00712b
Level 3—f5-jade-3
#004b1d
Level 4—f5-jade-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#b2dfc4178, 223, 1960, 28, 23, 3wewak
2#66c088102, 192, 1360, 58, 47, 6froly
3#00712b0, 113, 430, 100, 81, 35carmine
4 (الأغمق)#004b1d0, 75, 290, 100, 81, 55venetian-red

Eggplant

Section titled “Eggplant”
#62228b
Eggplant (base)—f5-eggplant
#cdabe3
Level 1—f5-eggplant-1
#9c59c9
Level 2—f5-eggplant-2
#822cb8
Level 3—f5-eggplant-3
#41175d
Level 4—f5-eggplant-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#cdabe3205, 171, 2270, 28, 23, 3wewak
2#9c59c9156, 89, 2010, 58, 47, 6froly
3#822cb8130, 44, 1840, 100, 81, 35carmine
4 (الأغمق)#41175d65, 23, 930, 100, 81, 55venetian-red

Bay

Section titled “Bay”
#0072b0
Bay (base)—f5-bay
#b2d7eb
Level 1—f5-bay-1
#66afd7
Level 2—f5-bay-2
#005c8d
Level 3—f5-bay-3
#003d5f
Level 4—f5-bay-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#b2d7eb178, 215, 2350, 28, 23, 3wewak
2#66afd7102, 175, 2150, 58, 47, 6froly
3#005c8d0, 92, 1410, 100, 81, 35carmine
4 (الأغمق)#003d5f0, 61, 950, 100, 81, 55venetian-red

White (الألوان المحايدة)

Section titled “White (الألوان المحايدة)”
#ffffff
White (base)—f5-white
#faf9f7
Level 1—f5-white-1
#f5f5f5
Level 2—f5-white-2
#e6e6e6
Level 3—f5-white-3
#cccccc
Level 4—f5-white-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#faf9f7250, 249, 2470, 28, 23, 3wewak
2#f5f5f5245, 245, 2450, 58, 47, 6froly
3#e6e6e6230, 230, 2300, 100, 81, 35carmine
4 (الأغمق)#cccccc204, 204, 2040, 100, 81, 55venetian-red

Black (الرمادي)

Section titled “Black (الرمادي)”
#000000
Black (base)—f5-black
#999999
Level 1—f5-black-1
#666666
Level 2—f5-black-2
#343434
Level 3—f5-black-3
#222222
Level 4—f5-black-4
المستوىHEXRGBCMYKLESS
1 (الأفتح)#999999153, 153, 1530, 28, 23, 3wewak
2#666666102, 102, 1020, 58, 47, 6froly
3#34343452, 52, 520, 100, 81, 35carmine
4 (الأغمق)#22222234, 34, 340, 100, 81, 55venetian-red

التعيين إلى خصائص CSS المخصصة لـ Starlight

Section titled “التعيين إلى خصائص CSS المخصصة لـ Starlight”

يعرض Starlight متغيرات --sl-color-* للتخصيص. فيما يلي التعيين من لوحة F5 إلى فتحات الألوان الدلالية في Starlight، المُنفَّذة في styles/custom.css.

كيفية عمل تخصيص سمات Starlight: في Starlight، الوضع الداكن هو الافتراضي لـ :root — لا يوجد محدد data-theme="dark". يستخدم الوضع الفاتح :root[data-theme='light']. متغيرات مقياس الرمادي دلالية وليست مرتبة حسب السطوع: gray-1 هو دائماً “النص الأساسي” وgray-6/gray-7 هما دائماً “الخلفيات الخفية”، بصرف النظر عن الوضع. تتبادل قيم السطوع الفعلية بين الوضعين. وبالمثل، accent-high هو دائماً لون نص التمييز عالي الوضوح وaccent-low هو دائماً خلفية التمييز الخفية — يتعكس سطوعهما بين الوضعين.

/* الوضع الداكن — الافتراضي لـ Starlight (:root) */
:root {
  --sl-color-white: #ffffff;      /* نص العناوين (الأكثر سطوعاً) */
  --sl-color-gray-1: #f5f5f5;    /* النص الأساسي — White المستوى 2 */
  --sl-color-gray-2: #cccccc;    /* نص الجسم — White المستوى 4 */
  --sl-color-gray-3: #999999;    /* نص خافت/مكتوم — Black المستوى 1 */
  --sl-color-gray-4: #666666;    /* الحدود — Black المستوى 2 */
  --sl-color-gray-5: #343434;    /* خلفية الكود المضمّن — Black المستوى 3 */
  --sl-color-gray-6: #222222;    /* خلفية الشريط الجانبي — Black المستوى 4 */
  --sl-color-black: #000000;     /* خلفية الصفحة */
  --sl-color-accent-low: #720016;   /* خلفية التمييز الخفية — F5 Red المستوى 4 */
  --sl-color-accent: #f06680;       /* الروابط، النشط — F5 Red المستوى 2 */
  --sl-color-accent-high: #f7b2bf;  /* نص التمييز — F5 Red المستوى 1 */
}


/* الوضع الفاتح — مقياس رمادي معكوس وسطوع تمييز معكوس */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* نص العناوين (الأكثر قتامة) — Black المستوى 4 */
  --sl-color-gray-1: #222222;    /* النص الأساسي — Black المستوى 4 */
  --sl-color-gray-2: #343434;    /* نص الجسم — Black المستوى 3 */
  --sl-color-gray-3: #666666;    /* نص خافت — Black المستوى 2 */
  --sl-color-gray-4: #999999;    /* الحدود — Black المستوى 1 */
  --sl-color-gray-5: #cccccc;    /* حدود فاتحة — White المستوى 4 */
  --sl-color-gray-6: #f5f5f5;    /* خلفية الشريط الجانبي — White المستوى 2 */
  --sl-color-gray-7: #faf9f7;    /* خلفية شريط التنقل — White المستوى 1 */
  --sl-color-black: #ffffff;     /* خلفية الصفحة */
  --sl-color-accent-low: #f7b2bf;   /* خلفية التمييز الخفية — F5 Red المستوى 1 (معكوس) */
  --sl-color-accent: #e4002b;       /* الروابط، النشط — F5 Red */
  --sl-color-accent-high: #720016;  /* نص التمييز — F5 Red المستوى 4 (معكوس) */
}

معاينة بصرية للرموز المميزة

Section titled “معاينة بصرية للرموز المميزة”

بدّل مفتاح تغيير السمة لترى هذه الرموز الدلالية تتغير بين الوضع الداكن والفاتح.

رموز مقياس الرمادي

Section titled “رموز مقياس الرمادي”
white
نص العناوين—sl-color-white
gray-1
النص الأساسي—sl-color-gray-1
gray-2
نص الجسم—sl-color-gray-2
gray-3
نص خافت—sl-color-gray-3
gray-4
الحدود—sl-color-gray-4
gray-5
خلفية الكود المضمّن—sl-color-gray-5
gray-6
خلفية الشريط الجانبي—sl-color-gray-6
black
خلفية الصفحة—sl-color-black

رموز التمييز

Section titled “رموز التمييز”
accent-low
خلفية التمييز الخفية—sl-color-accent-low
accent
الروابط، النشط—sl-color-accent
accent-high
نص التمييز—sl-color-accent-high

رموز الشارات

Section titled “رموز الشارات”
default
الشارة الافتراضية—sl-color-bg-badge-default
note
شارة الملاحظة—sl-color-bg-badge-note
danger
شارة الخطر—sl-color-bg-badge-danger
success
شارة النجاح—sl-color-bg-badge-success
caution
شارة التنبيه—sl-color-bg-badge-caution
tip
شارة التلميح—sl-color-bg-badge-tip

التحقق من التباين (WCAG AA)

Section titled “التحقق من التباين (WCAG AA)”

الوضع الداكن (نص على خلفية صفحة #000000):

  • نص الجسم #cccccc → 16.3:1 (AAA)
  • النص الخافت #999999 → 10:1 (AAA)
  • رابط التمييز #f06680 → 5.6:1 (AA)

الوضع الفاتح (نص على خلفية صفحة #ffffff):

  • نص الجسم #343434 → 11.6:1 (AAA)
  • النص الخافت #666666 → 5.7:1 (AA)
  • رابط التمييز #e4002b → 4.6:1 (AA)

اقتراحات الألوان الدلالية

Section titled “اقتراحات الألوان الدلالية”
متغير Starlightلون F5حالة الاستخدام
--sl-color-accentF5 Red #e4002bالروابط، الأزرار، الحالات النشطة
--sl-color-text-accentF5 Red المستوى 2 #f06680حالات التمرير في الوضع الداكن
--sl-color-bg-accentF5 Red المستوى 4 #720016خلفيات التمييز
مخصص: --sl-color-infoBay #0072b0تنبيهات المعلومات
مخصص: --sl-color-successJade #009639رسائل النجاح
مخصص: --sl-color-warningTangerine #f29a36تنبيهات التحذير
مخصص: --sl-color-dangerF5 Red #e4002bتنبيهات الخطأ/الخطر

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

Section titled “تباين الألوان”

لضمان إمكانية الوصول وفهم اتصالاتنا للجميع، استخدم مجموعات ألوان الخلفية والنص التي تستوفي معايير إمكانية الوصول. اختر أزواجاً من الألوان بنسبة تباين لا تقل عن 3:1 للنص الكبير و4.5:1 للنص العادي.

يجب أن تستوفي جميع أزواج الألوان متطلبات تباين WCAG AA:

  • النص العادي (أقل من 18pt / 14pt عريض): نسبة تباين لا تقل عن 4.5:1
  • النص الكبير (18pt أو أكبر / 14pt عريض): نسبة تباين لا تقل عن 3:1
  • مكونات واجهة المستخدم والكائنات الرسومية: نسبة تباين لا تقل عن 3:1

أزواج آمنة موصى بها

Section titled “أزواج آمنة موصى بها”
المقدمةالخلفيةنسبة التباينالنجاح
White #ffffffF5 Red #e4002b4.6:1AA
White #ffffffRiver #0e41aa6.4:1AA / AAA
White #ffffffBay #0072b04.6:1AA
White #ffffffJade #0096394.2:1AA (نص كبير)
White #ffffffEggplant #62228b6.5:1AA / AAA
White #ffffffRaspberry #ab27824.7:1AA
Black #000000Tangerine #f29a367.8:1AA / AAA
Black #000000F5 Red المستوى 1 #f7b2bf10.1:1AA / AAA
Black #222222White المستوى 1 #faf9f715.8:1AA / AAA

تلميح: تحقق دائماً من نسب التباين باستخدام أداة مثل WebAIM Contrast Checker عند إنشاء مجموعات ألوان جديدة.

إرشادات الاستخدام

Section titled “إرشادات الاستخدام”
عائلة اللونالدورمتى تُستخدم
F5 Redهوية العلامة التجارية، الدعوات الأساسية للعملأقسام الترحيب، الأزرار الأساسية، علامات العلامة التجارية، حالات الخطأ
Riverمعلوماتي، موثوقروابط التنقل، الإشعارات المعلوماتية، تصورات البيانات
Bayمعلوماتي، ثانويالروابط الثانوية، تنبيهات المعلومات، تمييزات كتل الكود
Jadeنجاح، إيجابيرسائل النجاح، حالات التأكيد، مؤشرات التقدم
Tangerineتحذير، تنبيهتنبيهات التحذير، الحالات التي تحتاج انتباهاً، علامات التمييز
Raspberryتمييز، زخرفيالوسوم، الشارات، التمييزات الثانوية، علامات الفئات
Eggplantتمييز، متميزأبرز الميزات، مؤشرات الميزات المتميزة، الزخارف
White / الألوان المحايدةالخلفيات، الأسطحخلفيات الصفحة، أسطح البطاقات، الفواصل، الحدود الخفية
Black / الرماديالنص، الهيكلنص الجسم، العناوين، الحدود، طبقات الظل

فحوصات السمة

Section titled “فحوصات السمة”
  • يستخدم حد .swatch القيمة --sl-color-gray-5
  • يستخدم خلفية .swatch-label القيمة --sl-color-gray-6
  • تعرض جميع عينات --f5-* لونها الفعلي (تُحلّ خصائص CSS المخصصة من custom.css)
  • تظهر عينات الألوان في كلا وضعَي الفاتح والداكن
  • تتحدث عينات رموز الشارات عند تبديل السمة