Stile Neon/Accent Gamble Hub

1) Concetto e principi

Neon/Accent è un linguaggio visivo in cui la superficie principale rimane contenuta (dark-first) e l'attenzione dell'utente è indirizzata da brevi flash di neon: tracciati accentuati, bagliori, evidenziazione degli stati e micro-segnali. Obiettivo: rilevamento rapido dell'azione (CTA, attivazione, notifica) e elevata leggibilità senza sovraccarico.

1. L'accento è dosato. 90/10: fino al 10% dello schermo può avere la luce.

2. La semantica è più importante del marchio. Il neon è un modo per evidenziare il significato, non solo la luminosità.

3. Il contrasto è primario. Qualsiasi oggetto luminoso non riduce la leggibilità del testo (minimo AA).

4. Ritmo e pausa. L'animazione è breve, prevedibile, con pause e fisica chiara.

5. Prestazioni e disponibilità. Nessuna sfocatura o ombra pesante sui dispositivi deboli; tutti gli effetti vengono testati in modalità HC.

2) Colore e luce: tavolozza e ruoli

2. 1 Superfici di base (dark-first)

«bg/base» è un grafite profondo con leggero rumore/grano (riduce le «strisce» sulle sfumature).
«bg/elevated» è leggermente più chiaro per schede e moduli.
«fg/primary» è quasi bianco, ma non pulito (# FFF). 90 in OKLCH) per ridurre i riflettori.

2. 2 Neoni di riferimento (OKLCH, punti di riferimento)

Cyber Blue: `oklch(0. 74 0. 16.250) 'è l'accento di marca principale.
Electric Purple: `oklch(0. 70 0. 17.310) 'è secondario, per la sequenza o gli eventi di gioco.
Toxic Lime: `oklch(0. 82 0. 14 140) 'è un raro highlight (jackpot, vittoria).
Alert Coral: `oklch(0. 72 0. 14 30) '- avvisi/errori («neon»).

2. 3 Coppie di contrasto

Testo/icone al fondo: ≥ 4. 5:1 (normale), 3:1 (grande/grasso).
Il testo per il riempimento al neon è ≥ 4. 5:1. Con «C» alto, abbassare «C _ text» a 0. 01–0. 03.
Tracciati/icone indicatori: ≥ 3:1 all'ambiente.

3) Effetti luminosi (glow) senza danni alla leggibilità

3. 1 Forme di bagliore

Outer Glow (tracciato morbido): 1-2 anelli di sfocatura, raggio 8-24 px a seconda della scala.
Neon Stroke: linea sottile 1-2 px ad alta luminosità + ombra esterna morbida.
Inset Glow è il «sottofondo» interno per gli input nel focus.

3. 2 Limitatori

Non posizionare mai un piccolo testo sopra un intenso bagliore.
Glow non sostituisce lo stato. completa il modulo/icona/sottolineatura.
In grandi aree (banner/heder) - riduce l'opacità del bagliore al 20-35%.

3. 3 Adattamento ai temi

In un tema light, il neon è più debole e più breve nel raggio, altrimenti è un effetto acido.
In high-contrast - I bagliori vengono disattivati e rimane un tracciato/riquadro chiaro.

4) Tipografia e gerarchia

Contenuto base: 16-18 px; intestazioni con scala netta (ad esempio una scala a 12 punti).
Disegni: evitiamo l'ultra-light; Minimo Regolare/Medium.
Intervallo tra righe 1. 45–1. 6.
L'accento del testo non è colore, ma scala/peso/icona; il colore è solo come un altro colore.

5) Griglie, ritmo, sfondo

Colonne: 12 (desktop), 6 (tablet), 4 (mobile).
Modulo orizzontale 8 px; verticale - 8/12/16 px a seconda della sezione.
Sfumatura di sfondo: halo debole radiale nella zona CTA chiave.
Rumore tattile (grain) L = © 0. 02 per la profondità senza «plastica».

6) Componenti (pattern)

6. 1 Pulsanti

Primary: riempimento «brandNeon» + «on-primary» testo ≥ 4. 5:1, raggio glow 12-16 px per hover.
Secondary: trasparente con traccia neon (1-2 px) e soft outer glow hover.
Tertiary: testo, senza bagliore, solo sottolineatura/icona.

• Hover: - L di sfondo (0. 02–0. 04) + leggero glow.
• Active: riempimento più scuro, rimosso o ridotto glow.
• Focus: anello di contrasto 2-3 px (senza sfocatura), non solo colore.

6. 2 Campi di input

Default: cornice sottile di neutral 1 px.
Focus: neon stroke + inset glow debole all'interno del campo; placeholder contrasto ridotto (ma 3:1).
Errore/Success - tracciato del colore semantico + icona; glow è minimo.

6. 3 Taba/navigazione

Indicatore Tabula attiva: linea neon 2 px + blur morbido 8 px.
Howers - sottofondo leggero sotto il cursore (shadow spread 4-6 px).

6. 4 Schede/banner

Le schede dei tornei sono una cornice-neon agli angoli («angoli» corti) in modo che non si illumini l'intera cornice.
I banner sono una maschera scura sotto il testo (overlay 40-60%) per evitare che il neon-sfondo «mangi» i contenuti.

7) Micropromozione e animazione

Durata: 120-200 ms (hover), 180-240 mc (focus/active), 240-320 mc (doci/modali).
Curva: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) 'per una sensazione «materiale».
Un ciclo su hover, senza lampeggiare infinitamente.
Eventi di sistema (vittoria/raggiungimento): un breve picco di evidenziazione 300-500 ms con black out.

8) Disponibilità e modalità ad alto contrasto

Tutti i significati sono disponibili senza colore e senza luce: forma, icona, etichetta di testo, sottolineatura.
Supporto per «prefers-contrast», «forced-colors»; quando si accende, disattiviamo il glow, rafforziamo i bordi e i riempimenti, controlliamo i contrasti.
Per il daltonismo, evitiamo la coppia rosso-verde come unico segnale; usano icone e testo.

9) Prestazioni

Ridurre al minimo il box-shadow con più blur e filter: blur () su più elementi.
Preferite le ombre tra pseudoelementi e i livelli compositori (form/opacity).
Su mobile è un preset «leggero» di animazioni; disattivazione dei glow intensivi con FPS basso.
Sfumature neon - Rendering come assetti bitmap (WebP/AVIF) a grandi dimensioni.

10) Token colori e stili (esempio)

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 CSS (sezioni)

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) Visualizzazione dei dati

Grafici seriali: la serie principale è neon, la serie selezionata è neon con spessore ingrandito e marcatori di forma.
Punti/colonne: 3:1 al fondo; Le firme sono ≥ 4. 5:1.
Evidenziazione della serie selezionata: soft outer glow (sm), senza costante misurazione.

12) Blocchi di contenuti e promo

Il testo sui neoni promozionali è sempre su piastra/overlay (40-60%), rigorosamente in contrasto.
Glitch/linee scan è solo come un raro accento, non più di 2-3 sezioni per pagina.

13) Icone e illustrazioni

Le icone sono lineari/duotone con un tratto di neon per gli stati attivi.
Le illustrazioni sono «neon tracciato» con riempimento minimo. evitare il piccolo bagliore intorno al testo.

14) Marketing vs prodotto

I banner di marketing possono utilizzare cromo «C» più elevato e bagliori più complessi.
Nel prodotto (moduli, tabelle, bilanciamento) - ridotto «C», effetti glow brevi e contrasto rigoroso.

15) Regole di testo per il iGaming

Notifiche responsabili (18 +, limiti, KYC/AML, rischi) - AAA per contrasto, senza glow.
Nelle tabelle dei coefficienti/liderboard - crescita/calo non solo colore, ma frecce/icone e grasso.

16) Localizzazione e adattamento

Cirillico/latino sono le stesse metriche di kegl e intervalli interbucali.
CTA a due righe - Disattiva il glow al testo e lo lascia sulla traccia/sfondo.
RTL - mirroring solo effetti mirroring (angoli/brillantini).

17) Foglio di assegno con gelosia (design/sviluppo)

Contrasto

• Testo ≥ 4. 5:1; Grande ≥ 3:1; notifiche di sistema - AAA.

Glow

• Glow non interseca il testo. raggio e alfa all'interno dei preseti.

Stati

• Hover/Active/Focus sono diversi dalla forma, non solo dal colore/luce.

Prestazioni

• Senza blur pesanti multipli; C'è un preset «leggero» per i cellulari.

Disponibilità

• La modalità high-contrast è corretta (glow off, bordi on).

Semantica

• Il neon riflette il significato (azione/fuoco/stato) e non «per la bellezza».

18) Anti-pattern

Riempimenti di neon di grandi dimensioni, stanchezza oculare.
La costante pressione/miscredenza può causare irritazione e problemi di disponibilità.
Testo sopra il glow luminoso senza sovrapposizione.
L'unico segnale è colore/bagliore (nessuna forma/icona/sottolineatura).
Intensità glow non coerente in una singola schermata (crash visivo).

19) A/B e metriche

Testate l'intensità glow (alfa/raggio) sui pulsanti CTA e gli errori di input.
Controlla il tempo-to-action e gli errori di modulo dopo l'inserimento del neon-focus.
Sondaggi UX sul comfort visivo (soprattutto in sessioni lunghe).

20) Documentazione in progettazione

Pagina Neon/Accent: tavolozza (prodotto/marketing), token glow, esempi di componenti, micropromozione video-demo.
«Matrice di contrasto»: fattori effettivi per «fg x bg» e «on-».
Set di classi preset e snippet per frontend.

Breve riepilogo

Neon/Accent per Gamble Hub - punto, semantico, produttivo. La luce guida lo sguardo verso l'azione senza compromettere il contrasto e il comfort. Motore - Token (OKLCH), glow-pread leggeri, stati rigorosi, effetti disattivati in high-contrast. Questo dà il carattere luminoso del marchio, ma rimane un prodotto comodo e veloce.