نئون/لهجه سبک قمار توپی

1) مفهوم و اصول

نئون/لهجه یک زبان بصری است که در آن سطح اصلی با احتیاط (تاریک اول) باقی می ماند و توجه کاربر توسط فلاش های نئون کوتاه هدایت می شود: خطوط لهجه، درخشش، روشنایی حالت و میکرو سیگنال. هدف: تشخیص سریع اقدام (CTA، تمرکز، اطلاع رسانی) و خوانایی بالا بدون اضافه بار.

1. لهجه - دوز. 90/10: تا 10٪ از منطقه صفحه نمایش می تواند «نور» داشته باشد.

2. معناشناسی مهمتر از برند است. نئون راهی برای برجسته کردن معنی است، نه فقط «روشنایی».

3. تفاوت اصلی است. هر شیء درخشان قابلیت خواندن متن را کاهش نمی دهد (حداقل AA).

4. ریتم و مکث انیمیشن کوتاه، قابل پیش بینی، با مکث و فیزیک روشن است.

5. عملکرد و در دسترس بودن بدون تاری سنگین/سایه بر روی دستگاه های ضعیف ؛ تمام اثرات در حالت های HC آزمایش می شوند.

2) رنگ و نور: پالت و نقش

2. 1 تاریکی اول

«bg/base» - گرافیت عمیق با نویز/دانه نور («نوارها» را در شیب کاهش می دهد).
'bg/بالا' - کمی سبک تر برای کارت ها و مدل ها.
«fg/primary» - تقریباً سفید، اما تمیز نیست (# FFF → L≈0. 90 در OKLCH) برای کاهش تابش خیره کننده.

2. 2 نئون لهجه (OKLCH، نشانه ها)

آبی سایبر: 'oklch (0. 74 0. 16250) لهجه اصلی نام تجاری است.
الکتریکی بنفش: 'oklch (0. 70 0. 17 310) "- ثانویه، برای رویدادهای دنباله یا بازی.
آهک سمی: 'oklch (0. 82 0. 14,140) 'برجسته نادر است (برنده تمام پولها, برنده شدن).
هشدار مرجان: '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 پیکسل بسته به مقیاس.
سکته مغزی نئون: خط نازک 1-2 پیکسل روشنایی بالا + سایه بیرونی نرم.
Inset Glow: «روشنایی» داخلی برای inpoots در تمرکز.

3. 2 محدود کننده ها

هرگز متن کوچک را در بالای تابش شدید قرار ندهید.
Glow جایگزین state نمیشود ؛ این شکل/آیکون/زیر خط را تکمیل می کند.
در مناطق بزرگ (بنر/هدر) - کاهش کدورت درخشش به 20-35٪.

3. ۳ سازگاری با موضوعات

در موضوع نور، نئون در شعاع ضعیف تر و کوتاه تر است، در غیر این صورت اثر «اسید» دارد.
در کنتراست بالا - چراغ ها خاموش می شوند، یک طرح واضح/قاب باقی می ماند.

4) تایپوگرافی و سلسله مراتب

اندازه محتوای اصلی: 16-18 پیکسل ؛ هدر مقیاس روشن (به عنوان مثال، مقیاس 12 نقطه).
سبک: اجتناب از نور فوق العاده ؛ به طور منظم/متوسط حداقل.
فاصله خط 1. 45–1. 6.
تاکید در متن بر روی رنگ نیست، اما در مقیاس/وزن/آیکون ؛ رنگ - فقط به عنوان اضافی.

5) شبکه، ریتم، پس زمینه

ستون ها: 12 (دسکتاپ)، 6 (قرص)، 4 (تلفن همراه).
ماژول افقی 8 پیکسل ؛ عمودی - 8/12/16 پیکسل بسته به بخش.
گرادیان پس زمینه: «هاله» ضعیف شعاعی در منطقه کلیدی CTA.
نویز لمسی (دانه) L = ± 0. 02 - برای عمق بدون «پلاستیک».

6) قطعات (الگوهای)

6. 1 دکمه ها

اولیه: متن 'brandNeon' + 'on-primary' را ≥ 4 پر کنید. 5:1، شعاع تابش 12-16 پیکسل در شناور.
ثانویه: شفاف با کانتور نئون (1-2 پیکسل) و درخشش بیرونی نرم در شناور.
ثالثیه: متنی، بدون درخشش، زیر خط/آیکون تنها.

• شناور: − Δ L پس زمینه (0. 02–0. 04) + درخشش نور.
• فعال: پر شدن تیره تر، حذف یا کاهش درخشش.
• تمرکز: حلقه کنتراست 2-3 پیکسل (بدون تاری)، نه فقط رنگ.

6. 2 زمینه های ورودی

پیش فرض: خنثی 1 پیکسل قاب نازک.
تمرکز: سکته مغزی نئون + درخشش درونی ضعیف در داخل میدان ؛ کاهش محل نگهدارنده کنتراست (اما ≥ 3:1).
خطا/موفقیت: طرح رنگی معنایی + آیکون ؛ درخشش حداقل.

6. 3 زبانه/ناوبری

نشانگر برگه فعال - خط نئون 2 پیکسل + تاری نرم 8 پیکسل.
شناور - نور نور زیر مکان نما (سایه گسترش 4-6 پیکسل).

6. 4 کارت/آگهی ها

کارت های مسابقات: فریم نئون در گوشه ها (گوشه های کوتاه) به طوری که کل قاب درخشان نیست.
آگهی ها - یک ماسک تیره در زیر متن (پوشش 40-60٪) به طوری که پس زمینه نئون «خوردن» محتوا نیست.

7) میکرو تعاملات و انیمیشن

مدت زمان: 120-200 ms (شناور)، 180-240 ms (تمرکز/فعال)، 240-320 ms (اسکله/مدول).
منحنی: 'cubic-bezier (0. 2, 0. 0, 0. 2، 1) "برای یک احساس" مادی ".
پالس نئون: یک چرخه در هر شناور، بدون چشمک زدن بی پایان.
رویدادهای سیستم (پیروزی/دستیابی): پشت سر هم کوتاه نور پس زمینه 300-500 میلی ثانیه با تضعیف.

8) در دسترس بودن و حالت های کنتراست بالا

تمام معانی بدون رنگ و درخشش در دسترس هستند: شکل، آیکون، برچسب متن، زیر خط.
پشتیبانی از 'prefers-contrast', 'forced-colors'; هنگامی که روشن شد - درخشش را خاموش کنید، فریم ها را تقویت کرده و پر کنید، کنتراست را بررسی کنید.
برای کور رنگی: اجتناب از جفت قرمز سبز به عنوان تنها سیگنال ؛ استفاده از pictograms و متن.

9) عملکرد

به حداقل رساندن جعبه سایه با یک تاری بزرگ و فیلتر: تاری () بر روی عناصر متعدد.
سایه های شبه عنصر و آهنگسازان لایه (تبدیل/کدورت) را ترجیح می دهد.
در تلفن همراه - «نور» از پیش تعیین شده از انیمیشن ها ؛ غیرفعال کردن تابش شدید در FPS پایین.
شیب نئون - رندر به عنوان دارایی های شطرنجی (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 به پس زمینه ؛ امضا - ≥ 4. 5:1.
روشنایی سری انتخاب شده درخشش بیرونی نرم (SM)، بدون سوسو زدن ثابت است.

12) بلوک های محتوا و تبلیغاتی

متن در neons پس زمینه تبلیغی - همیشه در یک صفحه/پوشش (40-60٪)، به شدت در مقابل.
خطوط «قطعی «/اسکن - فقط به عنوان یک لهجه نادر، بیش از 2-3 بخش در هر صفحه.

13) آیکون ها و تصاویر

آیکون ها - خطی/duoton با سکته مغزی نئون برای حالت های فعال.
تصاویر - «نئون در امتداد کانتور» با حداقل پر کردن ؛ اجتناب از درخشش کوچک در اطراف متن.

14) بازاریابی در مقابل محصول

آگهی های بازاریابی ممکن است از کروم «C» بالاتر و درخشش پیچیده استفاده کنند.
در محصول (فرم ها، جداول، تعادل) - کاهش «C»، اثرات درخشش کوتاه و کنتراست شدید.

15) قوانین متنی برای iGaming

اطلاعیه های بحرانی (18 +، محدودیت ها، KYC/AML، خطرات) - AAA در مقابل، بدون درخشش.
در جداول ضریب/مدیران - نشان می دهد رشد/سقوط نه تنها با رنگ, اما با فلش/آیکون ها و محتوای چربی.

16) محلی سازی و سازگاری

سیریلیک/لاتین: همان معیارهای فاصله پین و نامه.
دو خط CTA - غیر فعال کردن درخشش برای متن, ترک آن در سکته مغزی/پس زمینه.
RTL - آینه تنها اثرات جهت (گوشه/برجسته).

17) چک لیست بررسی (طراحی/توسعه)

کنتراست ها

• متن ≥ 4. 5:1; ≥ بزرگ 3:1 ؛ اطلاعیه های سیستم - AAA.

درخشش

• درخشش با متن همپوشانی ندارد ؛ شعاع و آلفا در ایستگاه از پیش تنظیم.

کشورها

• شناور/فعال/تمرکز با شکل، نه فقط رنگ/نور قابل تشخیص است.

عملکرد

• بدون تاری سنگین متعدد ؛ یک «نور» از پیش تعیین شده برای تلفن همراه وجود دارد.

در دسترس بودن

• حالت کنتراست بالا درست است (درخشش، فریم در).

معناشناسی

• نئون نشان دهنده معنی (عمل/تمرکز/وضعیت) است، نه «برای زیبایی».

18) ضد الگوهای

نئون جامد مناطق بزرگ را پر می کند → خستگی چشم.
سوسو زدن ثابت/موج دار شدن → تحریک و مسائل مربوط به دسترسی.
متن بیش از درخشش روشن بدون زیر.
تنها سیگنال رنگ/درخشش (بدون شکل/آیکون/زیر خط) است.
شدت درخشش متناقض در یک صفحه (بصری «فرنی»).

19) A/B و معیارهای

شدت درخشش (آلفا/شعاع) را برای دکمه های CTR CTA و خطاهای ورودی تست کنید.
ردیابی زمان به عمل و خطاهای فرم پس از ورود به تمرکز نئون.
نظرسنجی UX در مورد راحتی بصری (به ویژه در جلسات طولانی).

20) مستندات در سیستم طراحی

صفحه «نئون/لهجه»: پالت (محصول/بازاریابی)، نشانه های درخشان، نمونه های جزء، نسخه ی نمایشی ویدئویی از تعاملات میکرو.
«ماتریس کنتراست»: ضرایب واقعی برای «fg × bg» و «on-».
مجموعه ای از کلاس های از پیش تعیین شده و قطعه برای جلو.

خلاصه ای کوتاه

نئون/لهجه برای Gamble Hub - نقطه، معنایی، تولیدی. نور نگاه خیره به عمل را بدون کنتراست و راحتی مزاحم هدایت می کند. موتور - نشانه (OKLCH), «نور» ایستگاه از پیش تنظیم درخشش, کشورهای سخت, اثرات غیر فعال در کنتراست بالا. این به شخصیت روشن نام تجاری، اما یک محصول راحت و سریع باقی می ماند.