Neon/styl akcentu Gamble Hub

1) Pojęcie i zasady

Neon/Accent to język wizualny, na którym główna powierzchnia pozostaje dyskretna (ciemno-pierwsza), a uwagę użytkownika kierują krótkie błyski neonowe: kontury akcentów, blaski, oświetlenie stanu i mikro-sygnały. Cel: szybkie wykrywanie akcji (CTA, focus, notification) i wysoka czytelność bez przeciążenia.

1. Akcent - dawkowany. 90/10: do 10% powierzchni ekranu może mieć „światło”.

2. Semantyka jest ważniejsza od marki. Neon to sposób na podkreślenie znaczenia, a nie tylko „jasności”.

3. Kontrast jest podstawowy. Dowolny obiekt świetlny nie zmniejsza czytelności tekstu (minimum AA).

4. Rytm i pauza. Animacja jest krótka, przewidywalna, z przerwami i przejrzystą fizyką.

5. Wydajność i dostępność. Brak ciężkiej rozmycia/cienia na słabych urządzeniach; wszystkie efekty są testowane w trybach HC.

2) Kolor i światło: paleta i role

2. 1 ciemno-pierwszy

„bg/base” - grafit głęboki z lekkim szumem/ziarnem (zmniejsza „paski” na gradientach).
'bg/elevated' - trochę lżejszy dla kart i modeli.
'fg/primary' - prawie biały, ale nie czysty (# FFF → L ≤ 0. 90 w OKLCH) w celu zmniejszenia blasku.

2. 2 neony akcentowe (OKLCH, punkty orientacyjne)

Cyber Blue: 'oklch (0. 74 0. 16,250) "jest głównym akcentem marki.
Elektryczny fioletowy: 'oklch (0. 70 0. 17 310) "- drugorzędne, do sekwencji lub imprez gry.
Wapno toksyczne: 'oklch (0. 82 0. 14,140) "jest rzadką atrakcją (jackpot, win).
Alert Coral: 'oklch (0. 72 0. 14 30) "- ostrzeżenia/błędy (" neon ").

2. 3 Pary kontrastowe

Tekst/ikony do tła: ≥ 4. 5:1 (normalne), ≥ 3:1 (duże/tłuste).
Neon Napełnij tekst: ≥ 4. 5:1. Przy wysokim 'C', dolnym' C _ text 'do 0. 01–0. 03.
Ikony obrysów/wskaźników: ≥ 3:1 dla środowiska.

3) Efekty świetlne bez szkody dla czytelności

3. 1 Formy blasku

Zewnętrzny blask: 1-2 rozmyte pierścienie, promień 8-24 px w zależności od skali.
Neon Stroke: cienka linia 1-2 px wysoka jasność + miękki cień zewnętrzny.
Inset Glow: wewnętrzne „oświetlenie” dla wsadów w ostrości.

3. 2 Ograniczniki

Nigdy nie umieszczaj małego tekstu na szczycie intensywnego blasku.
Glow nie zastępuje stanu; uzupełnia kształt/ikonę/podkreślenie.
W dużych obszarach (baner/nagłówek) - zmniejszyć zmętnienie blasku do 20-35%.

3. 3 Dostosowanie do tematów

W temacie światła neon jest słabszy i krótszy w promieniu, w przeciwnym razie ma „kwas” efekt.
W wysokim kontraście - światła są wyłączone, pozostaje wyraźny obrys/rama.

4) Typografia i hierarchia

Podstawowy rozmiar zawartości: 16-18 px; wyraźne nagłówki skali (na przykład 12-punktowa skala).
Styl: unikać ultra-light; Regularne/średnie minimum.
Rozstaw linii 1. 45–1. 6.
Nacisk w tekście nie dotyczy koloru, ale skali/wagi/ikony; kolor - tylko jako dodatkowy.

5) Siatki, rytm, tło

Kolumny: 12 (pulpit), 6 (tablet), 4 (mobilny).
Moduł poziomy 8 px; pionowe - 8/12/16 px w zależności od odcinka.
Gradient tła: promieniowy słaby „halo” w kluczowej strefie CTA.
Szum dotykowy (ziarno) L = ± 0. 02 - dla głębokości bez „plastiku”.

6) Komponenty (wzory)

6. 1 przyciski

Podstawowy: wypełnić tekst 'brandNeon' + 'on-primary' ≥ 4. 5:1, promień świecenia 12-16 px na zawisie.
Wtórny: przezroczysty z konturem neonowym (1-2 px) i miękkim zewnętrznym blaskiem na zawisku.
Trzeciorzędowe: tekstowe, bez blasku, tylko podkreślenie/ikona.

• Zawisza: − Tło Α L (0. 02–0. 04) + światło świetlne.
• Aktywny: ciemniejsze wypełnienie, usunięcie lub zmniejszenie blasku.
• Ostrość: pierścień kontrastu 2-3 px (bez rozmycia), nie tylko kolor.

6. 2 Pola wejściowe

Domyślnie: neutralna ramka 1 px cienka.
Koncentracja: udar neonowy + słaby blask wstawki wewnątrz pola; zmniejszone łożysko kontrastowe (ale ≥ 3:1).
Błąd/sukces: semantyczny obrys kolorów + ikona; blask minimalny.

6. 3 Zakładki/nawigacja

Aktywny wskaźnik zakładki - neon line 2 px + miękkie rozmycie 8 px.
Hovers - lekkie oświetlenie pod kursorem (rozprzestrzenianie cieni 4-6 px).

6. 4 karty/banery

Karty turniejowe: frame-neon w narożnikach (krótkie „narożniki”), dzięki czemu cała ramka nie świeci.
Banery - zaciemniona maska pod tekstem (nakładka 40-60%), aby neonowe tło nie „zjadło” zawartości.

7) Mikro-interakcje i animacja

Czas trwania: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (doki/modale).
Krzywa: "sześcienno-bezier (0. 2, 0. 0, 0. 2, 1) 'dla sensacji „materialnej”.
Impuls neonowy: jeden cykl na koń, bez niekończącego się mrugania.
Zdarzenia systemowe (wygrana/osiągnięcie): krótki wybuch 300-500 ms podświetlenia z tłumieniem.

8) Dostępność i wysokie tryby kontrastu

Wszystkie znaczenia są dostępne bez koloru i blasku: kształt, ikona, etykieta tekstowa, podkreślenie.
Wsparcie dla „preferuje kontrast”, „wymuszone kolory”; po włączeniu - wyłączyć blask, wzmocnić ramy i wypełnienia, sprawdzić kontrasty.
Dla ślepoty kolorów: unikać czerwono-zielonej pary jako jedyny sygnał; używać piktogramów i tekstu.

9) Wydajność

Zminimalizuj pudełko-cień z dużą rozmazaniem i filtrem: rozmyte () na wielu elementach.
Preferuje pseudoelementowe cienie i kompozytory warstwowe (przekształcenie/nieprzezroczystość).
Na telefon komórkowy - „światło” wstępne animacje; wyłączanie intensywnego blasku przy niskim FPS.
Neon gradienty - renderować jako aktywa rastrowe (WebP/AVIF) w dużych rozmiarach.

10) Kolor i styl żetony (przykład)

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 }
}
}
}

Ustawienia wstępne CSS (fragmenty)

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) Wizualizacja danych

Wykresy szeregowe: główny rząd jest neutralny, zaznaczony rząd jest neonowy ze zwiększoną grubością i markerami kształtu.
Punkty/kolumny: ≥ 3:1 w tle; podpisy - ≥ 4. 5:1.
Oświetlenie wybranej serii jest miękkie zewnętrzne blask (sm), bez stałego migotania.

12) Bloki treści i promocje

Tekst na promo tło neony - zawsze na talerzu/nakładce (40-60%), ściśle w przeciwieństwie.
„Glitch „/linie skanowania - tylko jako rzadki akcent, nie więcej niż 2-3 sekcje na stronę.

13) Ikony i ilustracje

Ikony - liniowy/duoton z udarem neonu dla stanów aktywnych.
Ilustracje - „neon wzdłuż konturu” z minimalnym wypełnieniem; unikać małego blasku wokół tekstu.

14) Marketing vs produkt

Banery marketingowe mogą używać wyższych chromów „C” i złożonych blasków.
W produkcie (formy, tabele, równowaga) - zmniejszone 'C', krótkie efekty świetlne i ścisły kontrast.

15) Zasady tekstowe dla iGaming

Powiadomienia krytyczne (18 +, limity, KYC/AML, ryzyko) - AAA dla kontrastu, brak blasku.
W tabelach/tablicach wskaźników - wskazać wzrost/upadek nie tylko z kolorem, ale ze strzałkami/ikonami i zawartością tłuszczu.

16) Lokalizacja i adaptacja

Cyrylica/łacina: Ten sam pin i odstęp liter.
Dwa-wiersz CTA - wyłączyć blask dla tekstu, pozostawić go na skok/tło.
RTL - lustro tylko efekty kierunkowe (narożniki/podświetlenia).

17) Lista kontrolna (projekt/rozwój)

Kontrast

• Tekst ≥ 4. 5:1; duże ≥ 3:1; powiadomienia systemowe - AAA.

Blask

• Blask nie pokrywa się z tekstem; promień i alfa w ustawieniach wstępnych.

Państwa

• Hover/Active/Focus są wyróżniane przez kształt, nie tylko kolor/światło.

Wydajność

• Bez wielu ciężkich rozmazań; istnieje ustawienie „światła” dla telefonów komórkowych.

Dostępność

• Tryb wysokiego kontrastu jest poprawny (odblask, ramki włączone).

Semantyka

• Neon odzwierciedla znaczenie (działanie/skupienie/status), a nie „dla piękna”.

18) Anty-wzory

Solidne neonowe wypełnienia dużych obszarów → zmęczenie oczu.
Stałe migotanie/marszczyć → podrażnienia i problemy z dostępnością.
Tekst na jasny blask bez podkładu.
Jedynym sygnałem jest kolor/blask (brak kształtu/ikony/podkreślenia).
Niespójne natężenie świecenia na jednym ekranie (wizualna „owsianka”).

19) A/B i mierniki

Sprawdź natężenie światła (alfa/promień) dla przycisków CTR CTA i błędów wejściowych.
Śledzenie czasu do działania i tworzenie błędów po wprowadzeniu neon focus.
Badania UX na temat komfortu widzenia (zwłaszcza w długich sesjach).

20) Dokumentacja w systemie projektowym

Strona „Neon/Accent”: palety (produkt/marketing), żetony świetlne, przykłady komponentów, demo wideo mikro-interakcji.
„Matryca kontrastu”: rzeczywiste współczynniki dla 'fg × bg' i 'on-'.
Zestaw klas wstępnych i snippets dla frontu.

Krótkie podsumowanie

Neon/Accent dla Gamble Hub - punkt, semantyczny, produktywny. Światło kieruje wzrok do działania bez zakłócania kontrastu i komfortu. Silnik - żetony (OKLCH), „lekkie” ustawienia świetlne, ścisłe stany, wyłączone efekty w wysokim kontraście. Daje to jasny charakter marki, ale pozostaje wygodnym i szybkim produktem.