Neon/Accent stil Gamble Hub

1) Concept și principii

Neon/Accent este un limbaj vizual în care suprafața principală rămâne discretă (întuneric-primul), iar atenția utilizatorului este îndreptată de scurte sclipiri de neon: contururi de accent, străluciri, iluminare de stat și micro-semnale. Scop: detectarea rapidă a acțiunii (CTA, focalizare, notificare) și lizibilitate ridicată fără supraîncărcare.

1. Accent - dozat. 90/10: până la 10% din suprafața ecranului poate avea „lumină”.

2. Semantica este mai importantă decât marca. Neon este o modalitate de a evidenția sensul, nu doar „luminozitate”.

3. Contrastul este primar. Orice obiect luminos nu reduce lizibilitatea textului (minim AA).

4. Ritm şi pauză. Animația este scurtă, previzibilă, cu pauze și fizică clară.

5. Performanță și disponibilitate. Fără blur/umbre grele pe dispozitive slabe; toate efectele sunt testate în moduri HC.

2) Culoare și lumină: paletă și roluri

2. 1 întuneric-primul

„bg/base” - grafit profund cu zgomot/cereale ușoare (reduce „dungile” pe degradeuri).
„bg/elevat” - un pic mai ușor pentru carduri și modele.
'fg/primar' - aproape alb, dar nu curat (# FFF → L≈0. 90 în OKLCH) pentru a reduce strălucirea.

2. 2 Neoni de accent (OKLCH, repere)

Cyber Blue: 'oklch (0. 74 0. 16.250) este accentul principal al mărcii.
Electric Purple: 'oklch (0. 70 0. 17 310) "- secundar, pentru secvențe sau evenimente de joc.
Var toxic: 'oklch (0. 82 0. 14.140) "este un punct culminant rar (jackpot, câștig).
Alert Coral: 'oklch (0. 72 0. 14 30) "- avertismente/erori (reţinut" neon ").

2. 3 Perechi de contrast

Text/pictograme în fundal: ≥ 4. 5:1 (normal), ≥ 3:1 (mare/gras).
Textul de umplere neon: ≥ 4. 5:1. La high 'C', low 'C _ text' la 0. 01–0. 03.
Contururi/icoane indicator: ≥ 3:1 la mediul înconjurător.

3) Efecte strălucitoare fără a afecta lizibilitatea

3. 1 Forme de strălucire

Stralucire exterioara: 1-2 inele blur, raza 8-24 px in functie de scala.
Neon Stroke: linie subțire 1-2 px luminozitate ridicată + umbră exterioară moale.
Inset Glow: „iluminare” internă pentru poots în focalizare.

3. 2 Limitatoare

Nu plasați niciodată text mic pe partea de sus a strălucirii intense.
Strălucirea nu înlocuiește starea; completează forma/pictograma/subliniază.
În zone mari (banner/antet) - reduce opacitatea strălucirii la 20-35%.

3. 3 Adaptarea la teme

În tema luminii, neonul este mai slab și mai scurt în rază, altfel are un efect „acid”.
În contrast ridicat - luminile sunt stinse, rămâne un contur/cadru clar.

4) Tipografie și ierarhie

Dimensiunea conținutului de bază: 16-18 px; anteturi de scară clară (de exemplu, scară de 12 puncte).
Stil: evita ultra-lumina; Minim regulat/mediu.
Distanța de linie 1. 45–1. 6.
Accentul în text nu este pe culoare, ci pe scară/greutate/pictogramă; culoare - numai ca suplimentare.

5) Grile, ritm, fundal

Coloane: 12 (desktop), 6 (tabletă), 4 (mobil).
Modul orizontal 8 px; vertical - 8/12/16 px în funcție de secțiunea.
Degrade fundal: radial slab „halo” în zona cheie CTA.
Zgomot tactil (cereale) L = ± 0. 02 - pentru adâncime fără „plastic”.

6) Componente (modele)

6. 1 Butoane

Primar: completați textul 'brandNeon' + 'on-primary' ≥ 4. 5:1, raza de strălucire 12-16 px pe planor.
Secundar: transparent cu contur de neon (1-2 px) și strălucire exterioară moale la hover.
Terțiar: textual, fără strălucire, subliniază/pictogramă numai.

• Hover: − Δ L fundal (0. 02–0. 04) + lumină strălucire.
• Activ: umplere mai închisă, îndepărtată sau strălucire redusă.
• Focalizare: inel de contrast 2-3 px (fără estompare), nu doar culoare.

6. 2 Câmpuri de intrare

Implicit: cadru subțire neutru 1 px.
Focus: neon accident vascular cerebral + strălucire slabă în interiorul câmpului; substituent de contrast redus (dar ≥ 3:1).
Eroare/Succes: contur de culoare semantic + pictogramă; strălucire minimă.

6. 3 file/navigare

Indicator de filă activă - linie neon 2 px + blur moale 8 px.
Hovers - iluminare ușoară sub cursor (răspândirea umbrelor 4-6 px).

6. 4 carduri/bannere

cărți de turneu: cadru-neon în colțuri (scurt „colțuri”), astfel încât întregul cadru nu strălucește.
Bannere - o mască întunecată sub text (suprapunere 40-60%), astfel încât fundalul neon nu „mănâncă” conținutul.

7) Micro-interacțiuni și animație

Durate: 120-200 ms (hover), 180-240 ms (focus/activ), 240-320 ms (docuri/modale).
Curbă: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) "pentru o senzație de" material ".
Impuls de neon: un ciclu pe hover, nici o clipire nesfârșită.
Evenimente de sistem (câștig/realizare): o scurtă explozie de 300-500 ms retroiluminare cu atenuare.

8) Disponibilitate și moduri de contrast ridicate

Toate sensurile sunt disponibile fără culoare și strălucire: formă, pictogramă, etichetă text, subliniază.
Suport pentru „preferă contrastul”, „culori forțate”; când este pornit - opriți strălucirea, întăriți cadrele și umpleți, verificați contrastele.
Pentru orbirea culorilor: evitați perechea roșu-verde ca singurul semnal; utilizați pictograme și text.

9) Performanță

Minimizaţi umbra cutiei cu o ceaţă mare şi un filtru: neclaritate () pe mai multe elemente.
Preferați umbrele pseudoelemente și compozitorii de straturi (transformare/opacitate).
Pe mobil - o presetare „ușoară” a animațiilor; dezactivarea strălucirii intense la FPS scăzut.
Neon degradeuri - face ca active raster (WebP/AVIF) la dimensiuni mari.

10) Jetoane de culoare și stil (exemplu)

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

Presetări CSS (fragmente)

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) Vizualizarea datelor

Grafice seriale: rândul principal este neutru, rândul evidențiat este neon cu grosime crescută și markeri de formă.
Puncte/coloane: ≥ 3:1 în fundal; semnături - ≥ 4. 5:1.
Iluminarea seriei selectate este strălucirea exterioară moale (sm), fără pâlpâire constantă.

12) Blocuri de conținut și promoții

Text pe neoni de fundal promo - întotdeauna pe o placă/suprapunere (40-60%), strict în contrast.
„Glitch „/linii de scanare - numai ca un accent rar, nu mai mult de 2-3 secțiuni pe pagină.

13) Icoane și ilustrații

Pictograme - liniar/duoton cu neon accident vascular cerebral pentru stări active.
Ilustrații - „neon de-a lungul conturului” cu umplere minimă; evitați o mică strălucire în jurul textului.

14) Comercializare vs produs

Bannerele de marketing pot utiliza străluciri mai mari „C” crom și complexe.
În produs (forme, tabele, echilibru) - redus „C”, efecte de strălucire scurtă și contrast strict.

15) Reguli textuale pentru iGaming

Notificări critice (18 +, limite, KYC/AML, riscuri) - AAA prin contrast, fără strălucire.
În tabelele de coeficient/clasamente - indică creșterea/căderea nu numai cu culoare, ci și cu săgeți/pictograme și conținut de grăsime.

16) Localizare și adaptare

Chirilic/Latin: Aceleași pini și valori de spațiere a literelor.
Două linii CTA - dezactivați strălucirea pentru text, lăsați-l la contur/fundal.
RTL - oglindă numai efecte direcționale (colțuri/evidențiază).

17) Lista de verificare revizuire (proiectare/dezvoltare)

Contrast

• Text ≥ 4. 5:1; ≥ mari 3:1; notificări de sistem - AAA.

Strălucire

• Strălucirea nu se suprapune cu textul; raza și alfa în cadrul presetărilor.

Statele

• Hover/Active/Focus se disting prin formă, nu doar culoare/lumină.

Performanță

• Fără mai multe neclaritate grele; există o presetare „ușoară” pentru mobil.

Disponibilitate

• Modul de contrast ridicat este corect (strălucire off, cadre pe).

Semantică

• Neon reflectă sensul (acțiune/focus/status), nu „pentru frumusețe”.

18) Anti-modele

Neon solid umple de zone mari → oboseala ochilor.
Constant pâlpâire/unda → iritare și probleme de accesibilitate.
Text peste strălucire strălucitoare, fără underlay.
Singurul semnal este culoare/strălucire (nici o formă/pictogramă/subliniere).
Intensități strălucitoare inconsistente într-un singur ecran (vizual „terci”).

19) A/B și valori

Testați intensitatea strălucirii (alfa/rază) pentru butoanele CTA CTR și erorile de intrare.
Urmărirea timpului de acțiune și erorile de formă după introducerea neon focus.
Sondaje UX privind confortul vizual (în special în sesiuni lungi).

20) Documentația în sistemul de proiectare

Pagina „Neon/Accent”: palete (produs/marketing), jetoane strălucitoare, exemple componente, demo video de micro-interacțiuni.
„Matrice de contrast”: coeficienți reali pentru „fg × bg” și „on-”.
Set de clase presetate și fragmente pentru frontend.

Scurt rezumat

Neon/Accent pentru Gamble Hub - punct, semantic, productiv. Lumina direcționează privirea spre acțiune fără a perturba contrastul și confortul. Motor - token-uri (OKLCH), presetări strălucitoare „ușoare”, stări stricte, efecte dezactivate în contrast ridicat. Acest lucru oferă caracterul luminos al mărcii, dar rămâne un produs convenabil și rapid.