Neon/Accent style Gamble Hub

1) المفهوم والمبادئ

Neon/Accent هي لغة بصرية حيث يظل السطح الرئيسي متحفظًا (داكن أولاً)، ويتم توجيه انتباه المستخدم بواسطة ومضات نيون قصيرة: ملامح اللهجة والتوهج وإضاءة الحالة والإشارات الدقيقة. الغرض: الكشف السريع عن الإجراءات (CTA، التركيز، الإخطار) وسهولة القراءة العالية دون زيادة الحمل.

1. لكنة - جرعة. 90/10: ما يصل إلى 10٪ من مساحة الشاشة يمكن أن تحتوي على «ضوء».

2. الدلالات أهم من العلامة التجارية. النيون هو وسيلة لتسليط الضوء على المعنى، وليس فقط «السطوع».

3. التباين أساسي. لا يقلل أي جسم مضيء من إمكانية قراءة النص (الحد الأدنى AA).

4. الإيقاع والتوقف. الرسوم المتحركة قصيرة ويمكن التنبؤ بها مع توقف مؤقت وفيزياء واضحة.

5. الأداء والتوافر. عدم وجود ضبابية/ظلال ثقيلة على الأجهزة الضعيفة ؛ يتم اختبار جميع التأثيرات في أوضاع HC.

2) اللون والضوء: لوحة وأدوار

2. 1 مظلمة أولا

«bg/base» - الجرافيت العميق مع ضوضاء/حبة خفيفة (يقلل «خطوط» على التدرجات).
«بغ/مرتفع» - أخف قليلاً للبطاقات والموديلات.
«fg/primary» - أبيض تقريبًا، لكنه ليس نظيفًا (# FFF → L≈0. 90 في OKLCH) لتقليل الوهج.

2. 2 Accent neons (OKLCH، معالم)

Cyber Blue: 'oklch (0. 74 0. 16 250) 'هي لهجة العلامة التجارية الرئيسية.
الأرجواني الكهربائي: 'oklch (0. 70 0. 17 310) - ثانوي، للتسلسل أو أحداث اللعبة.
الجير السام: 'oklch (0. 82 0. 14140) 'هو تسليط الضوء نادر (الفوز بالجائزة الكبرى، الفوز).
تنبيه المرجان: 'oklch (0. 72 0. 14 30) '- التحذيرات/الأخطاء («النيون» المقيد).

2. 3 أزواج التباين

النص/الأيقونات إلى الخلفية: ≥ 4. 5:1 (عادي)، ≥ 3:1 (كبير/دهني).
نص ملء النيون: ≥ 4. 5:1. عند "C" المرتفع، أقل "C _ text' إلى 0. 01–0. 03.
الخطوط العريضة/أيقونات المؤشرات: ≥ 3:1 للبيئة.

3) تأثيرات التوهج دون الإضرار بقابلية القراءة

3. 1 أشكال التوهج

التوهج الخارجي: 1-2 حلقات ضبابية، نصف قطر 8-24 px حسب المقياس.
ضربة النيون: خط رفيع 1-2 بكسل سطوع عالي + ظل خارجي ناعم.
Inset Glow: «إضاءة» داخلية للداخل تحت التركيز.

3. 2 محددات

لا تضع نصًا صغيرًا فوق توهج شديد.
التوهج لا يحل محل الدولة ؛ وهو يكمل الشكل/الأيقونة/خط الأساس.
في مناطق كبيرة (لافتة/رأس) - قلل من عتامة التوهج إلى 20-35٪.

3. 3 التكيف مع المواضيع

في موضوع الضوء، يكون النيون أضعف وأقصر في نصف القطر، وإلا فإن له تأثير «حمضي».
في تناقض كبير - يتم إطفاء الأضواء، ويبقى مخطط/إطار واضح.

4) الطباعة والتسلسل الهرمي

حجم المحتوى الأساسي: 16-18 px ؛ رؤوس مقياس واضحة (على سبيل المثال، مقياس 12 نقطة).
الأسلوب: تجنب الضوء الفائق ؛ الحد الأدنى العادي/المتوسط.
تباعد الخط 1. 45–1. 6.
التركيز في النص ليس على اللون، ولكن على المقياس/الوزن/الأيقونة ؛ اللون - فقط كإضافة.

5) الشبكات والإيقاع والخلفية

الأعمدة: 12 (سطح المكتب)، 6 (جهاز لوحي)، 4 (متنقل).
الوحدة الأفقية 8 px ؛ عمودي - 8/12/16 px حسب القسم.
تدرج الخلفية: «هالة» شعاعية ضعيفة في منطقة CTA الرئيسية.
ضوضاء اللمس (الحبوب) L = ± 0. 02 - للعمق بدون «بلاستيك».

6) المكونات (الأنماط)

6. 1 أزرار

الابتدائي: املأ نص «brandNeon» + «on-primary» ≥ 4. 5:1، نصف قطر متوهج 12-16 بكسل على تحوم.
ثانوي: شفاف مع محيط النيون (1-2 px) وتوهج خارجي ناعم عند التحليق.
ثالثي: نصي، لا توهج، سطر/أيقونة فقط.

• تحوم: − Δ L الخلفية (0. 02–0. 04) + توهج خفيف.
• نشط: حشوة أغمق أو إزالة أو تقليل التوهج.
• التركيز: حلقة التباين 2-3 px (بدون ضبابية)، وليس اللون فقط.

6. 2 حقول المدخلات

الافتراضي: إطار رقيق 1 px محايد.
التركيز: ضربة نيون + توهج داخلي ضعيف داخل الحقل ؛ قلة عنصر التباين (ولكن ≥ 3:1).
خطأ/نجاح: مخطط الألوان الدلالي + أيقونة ؛ الحد الأدنى من التوهج.

6. 3 علامات تبويب/ملاحة

مؤشر علامة التبويب النشط - خط النيون 2 px + طمس ناعم 8 px.
تحومات - إضاءة الضوء تحت المؤشر (انتشار الظل 4-6 px).

6. 4 بطاقات/لافتات

بطاقات البطولة: إطار نيون في الزوايا («زوايا» قصيرة) حتى لا يتوهج الإطار بأكمله.
اللافتات - قناع مظلم أسفل النص (تراكب 40-60٪) بحيث لا «تلتهم» خلفية النيون المحتوى.

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

المدد: 120-200 مللي ثانية (تحوم)، 180-240 مللي ثانية (تركيز/نشط)، 240-320 مللي ثانية (أرصفة/وسائط).
المنحنى: 'مكعب بيزير (0. 2, 0. 0, 0. 2، 1) 'للإحساس «المادي».
نبض النيون: دورة واحدة لكل حومة، ولا وميض لا نهاية له.
أحداث النظام (الفوز/الإنجاز): دفعة قصيرة من 300-500 مللي ثانية مع التخفيف.

8) التوافر وأوضاع التباين العالية

تتوفر جميع المعاني بدون لون وتوهج: الشكل، الأيقونة، الملصق النصي، السطر.
دعم «يفضل التباين» و «الألوان القسرية» ؛ عند تشغيله - أطفئ التوهج، قم بتقوية الإطارات والملء، تحقق من التناقضات.
لعمى الألوان: تجنب الزوج الأحمر الأخضر باعتباره الإشارة الوحيدة ؛ استخدم الرسوم البيانية والنص.

9) الأداء

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

10) رموز الألوان والأناقة (مثال)

json
{
"color": {
"dark": {
"bg": { "base": "oklch(0. 16 0. 01 260)", "elevated": "oklch(0. 22 0. 01 260)" },
"fg": { "primary": "oklch(0. 90 0. 02 260)", "secondary": "oklch(0. 78 0. 02 260)" },
"neon": {
"brand":  { "500": "oklch(0. 74 0. 16 250)" },
"purple": { "500": "oklch(0. 70 0. 17 310)" },
"lime":  { "500": "oklch(0. 82 0. 14 140)" },
"coral":  { "500": "oklch(0. 72 0. 14 30)" }
}
}
},
"elevation": {
"glow": {
"sm": { "blur": 8, "spread": 2, "alpha": 0. 35 },
"md": { "blur": 12, "spread": 4, "alpha": 0. 30 },
"lg": { "blur": 20, "spread": 6, "alpha": 0. 25 }
}
}
}

تجهيزات CSS المسبقة (شظايا)

css
:root[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--fg-primary: oklch(0. 90 0. 02 260);
--neon-brand: oklch(0. 74 0. 16 250);
--glow-md: 0 0 12px rgba(0, 180, 255, 0. 30), 0 0 4px rgba(0, 180, 255, 0. 45);
}

.button--primary {
color: var(--on-primary);
background: var(--neon-brand);
box-shadow: none;
}
.button--primary:hover {
box-shadow: var(--glow-md);
transform: translateZ (0) ;/compositing/
}
:root[data-high-contrast].button--primary:hover {
box-shadow: none; outline: 2px solid var(--fg-primary);
}

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

الرسوم البيانية التسلسلية: الصف الرئيسي محايد، والصف المميز هو النيون مع زيادة السماكة وعلامات الشكل.
النقاط/الأعمدة: ≥ 3:1 إلى الخلفية ؛ التوقيعات - ≥ ٤. 5:1.
إضاءة السلسلة المختارة هي توهج خارجي ناعم (sm)، بدون وميض ثابت.

12) كتل المحتوى والعروض الترويجية

نص على النيونات الخلفية الترويجية - دائمًا على لوحة/تراكب (40-60٪)، على النقيض تمامًا.
«خلل «/خطوط مسح - فقط كلهجة نادرة، لا تزيد عن 2-3 أقسام لكل صفحة.

13) الرموز والرسوم التوضيحية

الأيقونات - خطية/ثنائية مع ضربة نيون للحالات النشطة.
الرسوم التوضيحية - «النيون على طول الكونتور» مع الحد الأدنى من الملء ؛ تجنب توهج صغير حول النص.

14) التسويق مقابل المنتج

قد تستخدم لافتات التسويق كروم «C» أعلى وتوهج معقد.
في المنتج (الأشكال والجداول والتوازن) - انخفاض 'C' وتأثيرات التوهج القصيرة والتباين الصارم.

15) القواعد النصية للألعاب

الإشعارات الحرجة (18 +، الحدود، KYC/AML، المخاطر) - AAA على النقيض من ذلك، لا توهج.
في جداول المعامل/لوحات الصدارة - تشير إلى النمو/السقوط ليس فقط مع اللون، ولكن مع السهام/الأيقونات ومحتوى الدهون.

16) التوطين والتكيف

Cyrillic/Latin: نفس مقاييس تباعد الدبوس والحروف.
سطرين CTA - توهج تعطيل النص، اتركه عند السكتة الدماغية/الخلفية.
RTL - يعكس التأثيرات الاتجاهية فقط (الزوايا/النقاط البارزة).

17) قائمة مراجعة (تصميم/تطوير)

التباين

• النص ≥ 4. 5:1; ≥ كبيرة 3:1 ؛ إخطارات النظام - AAA.

توهج

• التوهج لا يتداخل مع النص ؛ نصف القطر و ألفا ضمن التجهيزات المسبقة.

الدول

• يمكن تمييز التحليق/النشط/التركيز من خلال الشكل، وليس فقط اللون/الضوء.

الأداء

• بدون ضبابية ثقيلة متعددة ؛ هناك «ضوء» محدد مسبقًا للجوال.

توافر

• وضع التباين العالي صحيح (توهج، إطارات تشغيل).

دلالات

• يعكس النيون المعنى (العمل/التركيز/الحالة)، وليس «للجمال».

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

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

19) ألف/باء والمقاييس

اختبر شدة التوهج (ألفا/نصف القطر) لأزرار CTR CTA وأخطاء الإدخال.
تتبع وقت العمل وأخطاء الشكل بعد الدخول في تركيز النيون.
استطلاعات UX حول الراحة البصرية (خاصة في الجلسات الطويلة).

20) التوثيق في نظام التصميم

صفحة «Neon/Accent»: لوحات (منتج/تسويق)، رموز متوهجة، أمثلة مكونات، عرض فيديو للتفاعلات الدقيقة.
«مصفوفة التباين»: معاملات فعلية لـ «fg × bg» و «on-».
مجموعة من الفصول والمقتطفات المعدة مسبقًا للجبهة.

موجز موجز

Neon/Accent for Gamble Hub - نقطة، دلالية، منتجة. يوجه الضوء النظرة إلى العمل دون تباين وراحة مزعجين. المحرك - الرموز المميزة (OKLCH)، التجهيزات المسبقة للتوهج «الخفيف»، الحالات الصارمة، التأثيرات المعوقة في التباين العالي. يمنح هذا الطابع المشرق للعلامة التجارية، لكنه يظل منتجًا مناسبًا وسريعًا.