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. Это дает яркий характер бренда, но остается удобным и быстрым продуктом.