Neon/Accent style Gamble Hub

1) Concept et principes

Neon/Accent est un langage visuel où la surface principale reste discrète (dark-first) et où l'attention de l'utilisateur est guidée par de courts flashs néon : contours d'accent, lumières, illuminations d'état et micro-signaux. Objectif : détection rapide de l'action (CTA, focus, notification) et grande lisibilité sans surcharge.

1. L'accent est dosé. 90/10 : jusqu'à 10 % de la surface de l'écran peut avoir une « lumière ».

2. La sémantique est plus importante que la marque. Le néon est un moyen de mettre en évidence le sens, pas seulement la « luminosité ».

3. Le contraste est primaire. Tout objet lumineux ne réduit pas la lisibilité du texte (minimum AA).

4. Rythme et pause. L'animation est courte, prévisible, avec des pauses et une physique claire.

5. Performances et disponibilité. Pas de flou/ombre lourd sur les dispositifs faibles ; tous les effets sont testés dans les modes HC.

2) Couleur et lumière : palette et rôles

2. 1 Surfaces de base (dark-first)

'bg/base 'est un graphite profond avec un léger bruit/grain (réduit les « bandes » sur les gradients).
« bg/elevated » est un peu plus lumineux pour les cartes et les modales.
'Fg/primary 'est presque blanc, mais pas pur (# FFF → L≈0. 90 dans OKLCH) pour réduire l'éblouissement.

2. 2 Néons d'accent (OKLCH, repères)

Cyber Blue: `oklch(0. 74 0. 16 250) "est le principal accent de marque.
Electric Purple: `oklch(0. 70 0. 17 310) est secondaire, pour la séquence ou les événements de jeu.
Toxic Lime: `oklch(0. 82 0. 14 140) est un highlight rare (jackpot, victoire).
Alert Coral: `oklch(0. 72 0. 14 30) "- avertissements/erreurs (" néon "discret).

2. 3 Couples contrastés

Texte/icônes de fond : ≥ 4. 5:1 (normal), ≥ 3:1 (gros/gras).
Texte au fond de néon : ≥ 4. 5:1. Lorsque 'C' est élevé, abaissez 'C _ text' à 0. 01–0. 03.
Contours/icônes indicateurs : ≥ 3:1 à l'environnement.

3) Effets lumineux (glow) sans nuire à la lisibilité

3. 1 Formes de lueur

Outer Glow (contour doux) : 1-2 anneaux de flou, rayon 8-24 px selon l'échelle.
Neon Stroke : ligne mince 1-2 px haute luminosité + ombre extérieure douce.
Inset Glow : une « lumière » interne pour les inputs au centre.

3. 2 Limiteurs

Ne placez jamais un petit texte sur une lueur intense.
Glow ne remplace pas la condition ; il complète la forme/icône/soulignement.
Sur de grandes surfaces (bannière/tête d'affiche) - réduire l'opacité de la lueur jusqu'à 20-35 %.

3. 3 Adaptation aux thèmes

Dans le thème light, le néon est plus faible et plus court dans le rayon, sinon l'effet « acide ».
En haute contraste - les lumières s'éteignent, il reste un contour/cadre clair.

4) Typographie et hiérarchie

Contenu de base : 16-18 px ; titres à échelle claire (par exemple, échelle à 12 points).
Tracés : on évite l'ultra-léger ; minimum Regular/Medium.
Intervalle entre les lignes 1. 45–1. 6.
L'accent dans le texte n'est pas la couleur, mais l'échelle/le poids/l'icône ; couleur - seulement comme supplémentaire.

5) Grilles, rythme, fond

Colonnes : 12 (bureau), 6 (tablet), 4 (mobile).
Un module horizontal 8 px ; vertical - 8/12/16 px selon la section.
Gradient de fond : « halo » radial faible dans la zone clé CTA.
Bruit tactile (grain) L = ± 0. 02 - pour une profondeur sans « plastique ».

6) Composants (modèles)

6. 1 Boutons

Primary : remplissage 'brandNeon' + 'on-primary' texte ≥ 4. 5:1, rayon glow 12-16 px par hover.
Secondaire : transparent avec contour néon (1-2 px) et doux outer glow à hover.
Tertiaire : texte, pas de lueur, seulement le soulignement/icône.

• Hover : − Δ L de fond (0. 02–0. 04) + glow léger.
• Active : remplissage plus foncé, enlevé ou réduit glow.
• Focus : anneau contrasté 2-3 px (pas de flou), pas seulement la couleur.

6. 2 Champs de saisie

Par défaut : cadre fin neutral 1 px.
Focus : neon stroke + faible inset glow à l'intérieur du champ ; placeholder de contraste réduit (mais ≥ 3:1).
Error/Success : contour de couleur sémantique + pictogramme ; le glow est minime.

6. 3 Tabes/navigation

L'indicateur taba actif est une ligne néon de 2 px + blur doux de 8 px.
Les hovers sont une lumière légère sous le curseur (shadow spread 4-6 px).

6. 4 Cartes/bannières

Cartes de tournois : cadre néon dans les coins (courts « coins ») afin que tout le cadre ne brille pas.
Les bannières sont un masque sombre sous le texte (overlay 40-60 %) pour que le néon-fond ne « mange » pas le contenu.

7) Microproduction et animation

Durées : 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (docks/models).
Courbe : 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) 'pour la sensation « matérielle ».
Néon-pouls : un cycle par hover, sans clignotement infini.
Événements systémiques (victoire/réalisation) : Bref sursaut d'éclairage de 300-500 ms avec atténuation.

8) Disponibilité et modes de contraste élevé

Tous les sens sont disponibles sans couleur et sans éclat : forme, icône, étiquette de texte, soulignement.
Prise en charge de 'prefers-contrast', 'forced-colors' ; lors de l'activation - désactiver le glow, renforcer les cadres et les fonds, vérifier les contrastes.
Pour le daltonisme : on évite la paire rouge-vert comme unique signal ; utilisez des pictogrammes et du texte.

9) Performance

Minimisez votre box-shadow avec un grand blur et filter : blur () sur une multitude d'éléments.
Préférez les ombres des pseudo-éléments et les couches composites (bou/opacity).
Sur les mobiles - « léger » prescrire les animations ; désactivation du glow intense à faible FPS.
Neon-gradients - Rendu en tant qu'assets bitmap (WebP/AVIF) à grande taille.

10) Tokens de couleur et de style (exemple)

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

Presets CSS (fragments)

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) Visualisation des données

Graphiques en série : la série principale est neutre, la série dédiée est néon avec une épaisseur accrue et des marqueurs de forme.
Points/colonnes : ≥ 3:1 à l'arrière-plan ; signatures - ≥ 4. 5:1.
L'éclairage de la série sélectionnée est un outer glow doux (sm), sans clignotement permanent.

12) Blocs de contenu et promos

Le texte sur les néons promotionnels est toujours sur le placard/overlay (40-60 %), strictement en contraste.
« Glitch »/ligne de scan - seulement comme un accent rare, pas plus de 2-3 sections par page.

13) Icônes et illustrations

Les icônes sont linéaires/duoton avec une barre de néon pour les états actifs.
Les illustrations sont des « non-contours » avec un remplissage minimum ; éviter la petite lueur autour du texte.

14) Marketing vs produit

Les bannières de marketing peuvent utiliser un chrome plus élevé "C'et des lumières complexes.
Dans le produit (formes, tables, équilibre) - réduit 'C', effets glow courts et contraste strict.

15) Règles de texte pour iGaming

Notifications responsables (18 +, limites, KYC/AML, risques) - AAA par contraste, sans glow.
Dans les tableaux de coefficients/liderboards - la croissance/la chute ne désigne pas seulement la couleur, mais les flèches/pictogrammes et la graisse.

16) Localisation et adaptation

Cyrillique/latin : les mêmes métriques du kegl et des intervalles entre les lettres.
CTA à deux lignes - Désactiver le glow du texte, le laisser au contour/arrière-plan.
RTL - miroirs uniquement effets directionnels (coins/éblouissements).

17) Check-list rhubarbe (conception/développement)

Contraste

• Texte ≥ 4. 5:1; grande ≥ 3:1 ; notifications système - AAA.

Glow

• Glow ne se croise pas avec le texte ; rayon et alpha à l'intérieur des presets.

États

• Hover/Active/Focus est distingué par la forme et pas seulement par la couleur/lumière.

Performances

• Sans blur lourd multiple ; il existe un preset « léger » pour les mobiles.

Disponibilité

• Le mode haute contraste est correct (glow off, cadres on).

La sémantique

• Le néon reflète le sens (action/focus/status) et non « pour la beauté ».

18) Anti-modèles

Les nappes de néon solides de grandes surfaces → la fatigue des yeux.
Scintillement/pulsation persistante → irritation et problèmes d'accessibilité.
Texte sur un glow brillant sans substrat.
Le seul signal est la couleur/lueur (pas de forme/icône/soulignement).
Intensités de glow incohérentes dans un seul écran (« bouillie » visuelle).

19) A/B et métriques

Testez l'intensité glow (alpha/rayon) sur les boutons CTA CTR et les erreurs de saisie.
Suivi du temps-à-action et des erreurs de formulaire après la saisie de neon-focus.
Sondages UX sur le confort visuel (en particulier dans les longues sessions).

20) Documentation dans le système de conception

Page « Neon/Accent » : palettes (produit/marketing), jetons glow, exemples de composants, vidéo-démo de microproduction.
« Matrice de contraste » : coefficients réels pour 'fg × bg' et 'on-'.
Jeu de classes preset et de snapets pour frontende.

Résumé succinct

Neon/Accent pour Gamble Hub - ponctuel, sémantique, productif. La lumière guide le regard vers l'action sans perturber le contraste et le confort. Le moteur est des tokens (OKLCH), des presets glow « légers », des états stricts, des effets désactivables en haute contraste. Cela donne un caractère lumineux à la marque, mais reste un produit pratique et rapide.