نظام الألوان واللوحات ذات العلامات التجارية

1) لماذا إضفاء الطابع الرسمي على اللون

• الوعي بالعلامة التجارية والاتساق البصري،
• سهولة القراءة والتوافر (WCAG)،
• تحجيم الواجهات (المواضيع، المنصات، المواقع)،
• يمكن التنبؤ بتجارب A/B (على النقيض، CTR، الأخطاء).

2) أسس النظام: النماذج والمقاييس

OKLCH (موصى به): موحد من الناحية الإدراكية، من المناسب التحكم في الخفة 'L' والتشبع 'C' مع الحفاظ على الظل 'H'.
مختبر/LCH: مناسب أيضًا ؛ OKLCH أكثر استقرارًا في الإدراك.
sRGB: مساحة عرض محدودة ؛ يتم التحقق من صحة المجاميع دائمًا في sRGB و WCAG.
التباين (WCAG 2. 2): النص الأساسي ≥ 4. 5:1، كبير ≥ 3:1 ؛ الإخطارات الحرجة - استهدف AAA (7:1) حيثما أمكن ذلك.

3) طبقات النظام: من العلامة التجارية إلى الدلالات

1. نواة العلامة التجارية: 1-2 ظلال ذات علامة تجارية (+ لهجة داعمة).
2. دلالات الواجهة: الأدوار («الابتدائية»، «الثانوية»، «النجاح»، «التحذير»، «الخطر»، «المعلومات»، «المحايد»).
3. مقاييس النغمة: خطوات الخفة (على سبيل المثال 25/50/100...900).
4. Темы: «الضوء »/« الظلام» (+ التباين العالي، AMOLED).
5. الدول: 'الافتراضي/التحويم/النشط/التركيز/المعوق'.
6. السياق: الأسطح ('bg/base'، 'bg/subtle'، 'bg/evenated') والنص ('fg/primary'، 'fg/ثانوي'، 'fg/muted').
7. تصور البيانات: لوحات منفصلة ومستمرة.

4) نواة العلامة التجارية: الخيارات والقيود

حدد Hue وحدد خفة العمل للعلامة التجارية في الموضوعات الخفيفة والمظلمة (غالبًا L≈0. 60–0. 70 'لملء الأزرار في الضوء و' L≈0. 70–0. 80 'للنص/الأيقونات في الظلام).
حد من الكروم «C»: «C» عالية جميلة على اللافتات، لكنها تكسر إمكانية القراءة في واجهة المستخدم - احتفظ بإصدارات 2: «التسويق» (الغني) و «البقالة» (الأكثر تقييدًا).
إصلاح المتغيرات: الرئيسية («العلامة التجارية/الأولية»)، البديلة («العلامة التجارية/البديلة») والدعم المحايد («المحايد»).

5) مقاييس النغمة

• بالنسبة لـ OKLCH، حرك خطوات «L» (على سبيل المثال 0. 98→0. 90→0. 80→…→0. 18)، و 'C' تقلل قليلاً إلى حواف المقياس لتجنب «الأوساخ» في الضوء و «التعكر» في الظلام.
• إصلاح نقاط التفتيش: «50/100/300/500 (مفتاح )/700/900».
• في كل خطوة، تحقق من تباين الزوج مع الخلفية الأساسية ولون النص المتوقع.

مثال على العلامة التجارية/المقياس الأولي (OKLCH، تقريبي)

brand. primary. 50  = oklch(0. 98 0. 03 230)
brand. primary. 100 = oklch(0. 94 0. 05 230)
brand. primary. 300 = oklch(0. 86 0. 08 230)
brand. primary. 500 = oklch(0. 74 0. 10,230) # keytone brand. primary. 700 = oklch(0. 56 0. 09 230)
brand. primary. 900 = oklch(0. 32 0. 07 230)

6) الأدوار الدلالية ورسم الخرائط

العلامة التجارية والدلالات المنفصلة: لا يجب أن تكون «النجاح» خضراء.

role. primary. bg    -> brand. primary. 500 role. primary. text   -> fg. on-primary     # ≥ 4. 5-1 to the role. primary. bg role. success. bg    -> green. 500 role. warning. bg    -> amber. 500 role. danger. bg    -> red. 500 role. info. bg     -> blue. 500 role. neutral. bg    -> gray. 200/700 (light/dark)

وتحسب النصوص «داخل» تلقائيا (انظر الفقرة 10).

7) الموضوعات والأسطح الخفيفة/المظلمة

light:
bg/base   = oklch(0. 98 0. 01 260)
bg/subtle  = oklch(0. 96 0. 01 260)
bg/elevated = oklch(0. 93 0. 01 260)
fg/primary  = oklch(0. 18 0. 03 260) # ≈7:1 к bg/base fg/secondary = oklch(0. 32 0. 03 260) # ≥4. 5:1 border    = oklch(0. 80 0. 02 260)

dark:
bg/base   = oklch(0. 16 0. 01 260)
bg/subtle  = oklch(0. 20 0. 01 260)
bg/elevated = oklch(0. 24 0. 01 260)
fg/primary  = oklch(0. 90 0. 02 260)
fg/secondary = oklch(0. 78 0. 02 260)
border    = oklch(0. 34 0. 02 260)

الحفاظ على أهداف متساوية في كلا الموضوعين ؛ تجنب الأبيض "المسبب للعمى" على الأسود النقي - ارفع خط الظهر "Ln' إلى ~ 0. 16.

8) الدول والتفاعل

button/primary:
default. bg = brand. primary. 500 hover. bg  = brand. primary. 500 with +ΔC(0. 01) -ΔL(0. 02)
active. bg = brand. primary. 700 focus. ring = brand. primary. 300 # ring contrast ≥ 3:1 to the disabled environment. bg= neutral. 200 (light) / neutral. 700 (dark)
text. on  = auto-contrast(default. bg)    # ≥ 4. 5:1

9) المسؤولية و WCAG

النص الأساسي والأيقونات في عناصر التحكم هي ≥ 4. 5:1.
إخطارات النظام الرئيسية (KYC/AML، 18 +، أخطاء الدفع) - تستهدف AAA (7:1).
الحالات الميدانية والحدود - على الأقل 3:1.
تمييز الروابط ليس فقط عن طريق اللون (التأكيد/نمط التركيز).

10) نص تباين مناسب تلقائيًا («on -»)

1. وفقًا لـ OKLCH، حدد التخلف. نص «L _ on' بحيث» (L_text مقابل L_bg) ≥ 4. 5:1`.

2. إذا كان الكروم مرتفعًا، فإن "C _ text' أقل إلى 0. 01–0. 03.

3. للحصول على موضوع مظلم، ارفع 'L _ on' 0 آخر. 02–0. 04 لتعويض الوهج.

fg. on(colorX) = auto(colorX, targetContrast=4. 5)

11) تصور البيانات

اللوحات القاطعة: 8-12 لونًا مقاومًا لعمى الألوان (تجنب الأزواج الحمراء والخضراء بدون علامات بديلة).
مستمر: من «بغ/مرتفع» إلى لهجة مع تباين التحكم في التوقيعات.
أضف أنماطًا/علامات للتمييز بدون لون.

12) السياق الدولي (الرابطات الثقافية)

النظر في الدلالات المحلية (على سبيل المثال الأحمر - الخطر/الاهتمام ؛ ذهبية - فوز/جائزة).
للألعاب: تجنب تعارض النجاح/الخطر مع اللهجات ذات العلامات التجارية في شاشة واحدة ؛ الأيقونات والتوقيع أهم من «السطوع».

13) الإدماج في نظام التصميم

13. 1 تسمية الرموز

color.{theme}.{role    surface    brand}.{state    step}
color examples. light. brand. primary. 500 color. dark. role. success. bg color. light. surface. bg. base color. light. fg. on-primary

13. 2 رمز (JSON/Style Dictionary)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0. 98 0. 01 260)"} },
"brand":  { "primary": { "500": "oklch(0. 74 0. 10 230)" } },
"role":  { "primary": { "bg": "{color. light. brand. primary. 500}" },
"danger": { "bg": "oklch(0. 62 0. 12 25)" } },
"fg": { "primary": "oklch(0. 18 0. 03 260)",
"on-primary": "auto({color. light. role. primary. bg},4. 5)" }
}
}
}

13. 3 متغيرات CSS (طبقة الموضوع)

css
:root[data-theme="light"] {
--bg-base: oklch(0. 98 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 18 0. 03 260);
--on-primary: color-contrast (var (--brand-primary-500)) ;/auto-fit/
}
[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 90 0. 02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 فيغما/وثائق

تستخدم المكونات الرموز فقط، ويحظر HEX/SRGB المباشر بواسطة البطانات.
في المكتبة - صفحة «مصفوفة التباين»: الجدول 'fg × bg' مع المعاملات الفعلية.

14) عمليات مراقبة الجودة

في التصميم: التحقق من التباين على اللوحات الفنية (كلا الوضعين)، إعدادات مسبقة منفصلة لعمى الألوان.
في الرمز: يقوم مساعدو الوحدة بحساب التباين والسقوط في الانتهاكات ؛ لقطات مرئية للشاشات الحرجة.
في CI/CD: التحقق من جميع أزواج الرموز والدول، والإبلاغ مع المكون والموضوع والقيمة الفعلية.

15) تفاصيل iGaming

العروض الترويجية والبطولات: استخدم قيود التراكب و «C» على الخلفيات لمنع النص من «الغرق».
إخطارات مسؤولة (حدود، 18 +، مخاطر) - بصدق AAA.
المقاييس/الجداول: التمييز بين الأرقام وعلامات التغيرات (↑/↓) حسب الشكل والتباين، وليس فقط اللون.

16) قائمة التنفيذ المرجعية

• تم تحديد ظلال العلامة التجارية ومقاييسها اللونية (OKLCH).
• تم تحديد الأدوار والحالات والأسطح للموضوعين.
• الجيل التلقائي «على» مع تباين الهدف.
• مصفوفة «fg × bg» واختبارات WCAG في CI.
• لوحات فردية لـ dataviz (مع دعم عمى الألوان).
• تحظر أنماط البطانة الألوان «الخام».
• صفحة الاستثناءات والأسباب في المبدأ التوجيهي.

17) الأنماط المضادة

امزج تركيز العلامة التجارية مع النجاح/الخطأ في إشارة UX واحدة.
اعتمد فقط على التشبع للتسلسل الهرمي.
لا تتزامن مع الضوء/الظلام (التباين «يسار» في أحد الموضوعات).
Hard HEX بدون رموز → انجراف واجهة غير منضبط.

موجز موجز

قم ببناء لوحة من أعلى إلى أسفل: الأدوار الأساسية للعلامة التجارية → الدلالية → مقاييس النغمة → المواضيع → الولايات. اعمل في OKLCH، ورموز الدبوس، وأتمتة شيكات «on» و WCAG. بشكل منفصل، أدخل اللوحات للحصول على dataviz. سيعطي هذا اتساق العلامة التجارية وقابلية القراءة وقابلية توسيع المنتج.