Neon/Accent стиль Gamble Hub

1) Концепція і принципи

Neon/Accent - це візуальна мова, де основна поверхня залишається стриманою (dark-first), а увага користувача спрямовується короткими неоновими спалахами: акцентні контури, світіння, підсвічування станів і мікро-сигнали. Мета: швидке виявлення дії (CTA, фокус, повідомлення) і висока читаність без перевантаження.

1. Акцент - дозовано. 90/10: до 10% площі екрану можуть мати «світло».

2. Семантика важливіша за бренд. Неон - це спосіб виділити сенс, а не просто «яскравість».

3. Контраст первинний. Будь-який об'єкт, що світиться, не знижує читаність тексту (мінімум AA).

4. Ритм і пауза. Анімація коротка, передбачувана, з паузами і ясною фізикою.

5. Продуктивність і доступність. Немає важких розмиття/тіней на слабких пристроях; всі ефекти тестуються в HC-режимах.

2) Колір і світло: Палітра та ролі

2. 1 Базові поверхні (dark-first)

'bg/base'- глибокий графіт з легким шумом/зерном (зменшує «смуги» на градієнтах).
'bg/elevated'- трохи світліше для карток і модалок.
«fg/primary» - майже білий, але не чистий (#FFF → L≈0. 90 в OKLCH), щоб знизити відблиски.

2. 2 Акцентні неони (OKLCH, орієнтири)

Cyber Blue: `oklch(0. 74 0. 16 250)'- основний бренд-акцент.
Electric Purple: `oklch(0. 70 0. 17 310)'- вторинний, для послідовності або ігрових подій.
Toxic Lime: `oklch(0. 82 0. 14 140)'- рідкісний highlight (джекпот, перемога).
Alert Coral: `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) Світні ефекти (glow) без шкоди читаності

3. 1 Форми світіння

Outer Glow (м'який контур): 1-2 кільця розмиття, радіус 8-24 px залежно від масштабу.
Neon Stroke: тонка лінія 1-2 px високої яскравості + м'яка зовнішня тінь.
Inset Glow: внутрішній «підсвіт» для інпутів у фокусі.

3. 2 Обмежувачі

Ніколи не розміщуйте дрібний текст поверх інтенсивного світіння.
Glow не замінює стан; він доповнює форму/іконку/підкреслення.
На великих площах (банер/хедер) - знижуйте непрозорість світіння до 20-35%.

3. 3 Адаптація до тем

У light-темі неон слабший і коротший за радіусом, інакше - «кислотний» ефект.
У high-contrast - світіння відключаються, залишається чіткий контур/рамка.

4) Типографіка та ієрархія

Базовий кегль контенту: 16–18 px; заголовки з чітким масштабом (наприклад, 12-точкова шкала).
Накреслення: уникаємо ultra-light; мінімум Regular/Medium.
Міжрядковий інтервал 1. 45–1. 6.
Акцент в тексті - не кольором, а масштабом/вагою/іконкою; колір - тільки як додатковий.

5) Сітки, ритм, фон

Колонки: 12 (desktop), 6 (tablet), 4 (mobile).
Горизонтальний модуль 8 px; вертикальний - 8/12/16 px залежно від секції.
Фоновий градієнт: радіальний слабкий «ореол» в зоні ключового CTA.
Тактильний шум (grain) L = ± 0. 02 - для глибини без «пластику».

6) Компоненти (патерни)

6. 1 Кнопки

Primary: заливка'brandNeon'+'on-primary'текст ≥ 4. 5:1, glow радіус 12-16 px на hover.
Secondary: прозора з неоновим обводом (1-2 px) і м'яким outer glow при hover.
Tertiary: текстова, без світіння, тільки підкреслення/іконка.

• Hover: −ΔL фону (0. 02–0. 04) + легкий glow.
• Active: темніша заливка, прибраний або зменшений glow.
• Focus: контрастне кільце 2-3 px (без розмиття), не тільки колір.

6. 2 Поля введення

Default: тонка рамка neutral 1 px.
Focus: neon stroke + слабкий inset glow всередині поля; placeholder зменшеної контрастності (але ≥ 3:1).
Error/Success: контур семантичного кольору + піктограма; glow мінімальний.

6. 3 Таби/навігація

Індикатор активного таба - неонова лінія 2 px + м'який blur 8 px.
Ховери - легкий підсвіт під курсором (shadow spread 4-6 px).

6. 4 Картки/банери

Картки турнірів: рамка-неон по кутах (короткі «куточки»), щоб не світилася вся рамка.
Банерам - затемнена маска під текстом (overlay 40-60%), щоб неон-фон не «з'їдав» контент.

7) Мікровзаємодії та анімація

Тривалості: 120-200 мс (hover), 180-240 мс (focus/active), 240-320 мс (доки/модалки).
Крива: `cubic-bezier(0. 2, 0. 0, 0. 2, 1)'для «матеріального» відчуття.
Неон-пульс: один цикл на hover, без нескінченного блимання.
Системні події (перемога/досягнення): короткий сплеск підсвічування 300-500 мс із загасанням.

8) Доступність і режими високої контрастності

Всі сенси доступні без кольору і світіння: форма, іконка, текстовий лейбл, підкреслення.
Підтримка'prefers-contrast','forced-colors'; при включенні - відключаємо glow, підсилюємо рамки і заливки, перевіряємо контрасти.
Для дальтонізму: уникаємо пари «червоний-зелений» як єдиний сигнал; використовуємо піктограми і текст.

9) Продуктивність

Зведіть до мінімуму box-shadow з великим blur і filter: blur () на безлічі елементів.
Віддайте перевагу тіні з псевдоелементів і шари-композитори (transform/opacity).
На мобільних - «легкий» пресет анімацій; відключення інтенсивних glow при низькому 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) Візуалізація даних

Серіальні графіки: основний ряд - neutral, виділений ряд - неон зі збільшеною товщиною і маркерами форми.
Точки/стовпчики: ≥ 3:1 до фону; підписи - ≥ 4. 5:1.
Підсвічування вибраної серії - м'який outer glow (sm), без постійного мерехтіння.

12) Контентні блоки і промо

Текст на промо-фонових неонах - завжди на плашці/оверлі (40-60%), строго за контрастом.
«Глітч »/скан-лінії - тільки як рідкісний акцент, не більше 2-3 секцій на сторінку.

13) Іконки та ілюстрації

Іконки - лінійні/дуотон з неоновим штрихом для активних станів.
Ілюстрації - «неон по контуру» з мінімальною заливкою; уникати дрібного світіння навколо тексту.

14) Маркетинг vs продукт

Маркетингові банери можуть використовувати більш високу хрому «C» і складні світіння.
У продукті (форми, таблиці, баланс) - знижена'C', короткі glow-ефекти і строгий контраст.

15) Текстові правила для iGaming

Відповідальні повідомлення (18 +, ліміти, KYC/AML, ризики) - AAA за контрастом, без glow.
У таблицях коефіцієнтів/лідербордах - зростання/падіння позначайте не тільки кольором, а стрілками/піктограмами і жирністю.

16) Локалізація та адаптація

Кирилиця/латиниця: однакові метрики кегля і міжбуквених інтервалів.
Двострочні CTA - відключаємо glow у тексту, залишаємо його біля обведення/фону.
RTL - дзеркалимо тільки спрямовані ефекти (куточки/відблиски).

17) Чек-лист рев'ю (дизайн/розробка)

Контраст

• Текст ≥ 4. 5:1; великий ≥ 3:1; системні повідомлення - AAA.

Glow

• Glow не перетинається з текстом; радіус і альфа в межах пресетів.

Стани

• Hover/Active/Focus помітні формою, а не тільки кольором/світлом.

Продуктивність

• Без множинних важких blur; є «легкий» пресет для мобільних.

Доступність

• High-contrast режим коректний (glow off, рамки on).

Семантика

• Неон відображає сенс (дія/фокус/статус), а не «для краси».

18) Анти-патерни

Суцільні неонові заливки великих площ → стомлення очей.
Постійне мерехтіння/пульсація → роздратування і проблеми доступності.
Текст поверх яскравого glow без підкладки.
Єдиний сигнал - колір/світіння (немає форми/іконки/підкреслення).
Неузгоджені інтенсивності glow в одному екрані (візуальна «каша»).

19) A/B і метрики

Тестуйте інтенсивність glow (альфа/радіус) на CTR CTA-кнопок і помилки введення.
Стеження за time-to-action і помилками форм після введення neon-фокусу.
UX-опитування по зоровому комфорту (особливо в тривалих сесіях).

20) Документація в дизайн-системі

Сторінка «Neon/Accent»: палітри (продукт/маркетинг), токени glow, приклади компонентів, відео-демо мікровзаємодій.
«Матриця контрасту»: фактичні коефіцієнти для'fg × bg'і'on-'.
Набір preset-класів і сніпетів для фронтенда.

Коротке резюме

Neon/Accent для Gamble Hub - точковий, семантичний, продуктивний. Світло направляє погляд до дії, не порушуючи контраст і комфорт. Рушій - токени (OKLCH), «легкі» glow-пресети, строгі стани, відключаються ефекти в high-contrast. Це дає яскравий характер бренду, але залишається зручним і швидким продуктом.