Neon/Accent estilo Gamble Hub

1) Concepto y principios

Neon/Accent es un lenguaje visual donde la superficie principal permanece discreta (dark-first) y la atención del usuario se canaliza con destellos cortos de neón: contornos acentuados, resplandores, retroiluminación de estados y micro señales. Objetivo: detección rápida de la acción (CTA, enfoque, notificación) y alta legibilidad sin sobrecarga.

1. Acento dosificado. 90/10: hasta un 10% del área de la pantalla puede tener «luz».

2. La semántica es más importante que la marca. El neón es una manera de resaltar el significado, no sólo el «brillo».

3. El contraste es primario. Cualquier objeto luminoso no reduce la legibilidad del texto (mínimo AA).

4. Ritmo y pausa. La animación es corta, predecible, con pausas y física clara.

5. Rendimiento y disponibilidad. No hay desenfoque/sombras pesadas en dispositivos débiles; todos los efectos se prueban en modos HC.

2) Color y luz: paleta y roles

2. 1 Superficies base (dark-first)

'bg/base' es un grafito profundo con un ligero ruido/grano (reduce las «rayas» en los gradientes).
'bg/elevated' - un poco más claro para tarjetas y modales.
'fg/primary' es casi blanco, pero no limpio (# FFF → L≈0. 90 en OKLCH) para reducir el deslumbramiento.

2. 2 Neones de acento (OKLCH, puntos de referencia)

Cyber Blue: `oklch(0. 74 0. 16 250) 'es el principal acento de marca.
Electric Purple: `oklch(0. 70 0. 17 310) '- secundaria, para una secuencia o eventos de juego.
Toxic Lime: `oklch(0. 82 0. 14 140) 'es un raro highlight (premio mayor, victoria).
Alert Coral: `oklch(0. 72 0. 14 30) '- advertencias/errores («neón» discreto).

2. 3 Pares de contraste

Texto/iconos al fondo: ≥ 4. 5:1 (normal), ≥ 3:1 (grande/gordo).
Texto al relleno de neón: ≥ 4. 5:1. Con 'C' alto, reduzca 'C _ text' a 0. 01–0. 03.
Contornos/iconos-indicadores: ≥ 3:1 al entorno.

3) Efectos luminosos (glow) sin dañar la legibilidad

3. 1 Formas de brillo

Glow de salida (contorno suave): 1-2 anillos de desenfoque, radio 8-24 px dependiendo de la escala.
Neon Stroke: línea delgada de 1-2 px de alto brillo + sombra exterior suave.
Inset Glow: un «deslizamiento» interno para los inputs en el foco.

3. 2 Limitadores

Nunca coloque texto fino encima de un brillo intenso.
Glow no reemplaza el estado; complementa la forma/icono/subrayado.
En áreas grandes (banner/header): reduzca la opacidad del resplandor al 20-35%.

3. 3 Adaptación a los temas

En el tema de la luz, el neón es más débil y más corto en radio, de lo contrario es un efecto «ácido».
En el alto contraste: los resplandores se apagan, el contorno/marco permanece claro.

4) Tipografía y jerarquía

Kegl básico de contenido: 16-18 px; encabezados con una escala clara (por ejemplo, una escala de 12 puntos).
Inscripciones: evitar ultra-luz; mínimo Regular/Medio.
Intervalo entre líneas 1. 45–1. 6.
El énfasis en el texto no es el color, sino la escala/peso/icono; color - sólo como extra.

5) Rejillas, ritmo, fondo

Columnas: 12 (escritorio), 6 (tablet), 4 (móvil).
Módulo horizontal 8 px; vertical - 8/12/16 px dependiendo de la sección.
Gradiente de fondo: «halo» débil radial en la zona de CTA clave.
Ruido táctil (grain) L = ± 0. 02 - para la profundidad sin «plástico».

6) Componentes (patrones)

6. 1 Botones

Primary: relleno 'brandNeon' + 'on-primary' texto ≥ 4. 5:1, glow radio 12-16 px por hover.
Secondary: transparente con trazo de neón (1-2 px) y suave outer glow cuando hover.
Tertiary: texto, sin brillo, sólo subrayado/icono.

• Hover: −ΔL de fondo (0. 02–0. 04) + ligero glow.
• Active: relleno más oscuro, eliminado o reducido glow.
• Focus: anillo de contraste 2-3 px (sin desenfoque), no sólo color.

6. 2 Campos de entrada

Default: marco fino neutral 1 px.
Focus: neon stroke + débil inset glow dentro del campo; placeholder de contraste reducido (pero ≥ 3:1).
Error/Éxito: contorno de color semántico + pictograma; glow mínimo.

6. 3 Tabas/Navegación

El indicador de tabú activo es la línea de neón 2 px + blur suave 8 px.
Los hovers son un ligero retroceso bajo el cursor (shadow spread 4-6 px).

6. 4 Tarjetas/banners

Tarjetas de torneos: marco de neón en las esquinas («esquinas» cortas) para que todo el marco no brille.
Las pancartas son una máscara oscurecida debajo del texto (overlay 40-60%) para que el neón de fondo no se «coma» el contenido.

7) Micro-ayuda y animación

Duración: 120-200 ms (hover), 180-240 ms (focus/active), 240-320 ms (muelles/modales).
Curva: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) 'para la sensación «material».
Pulso de neón: un ciclo por hover, sin parpadeo infinito.
Eventos sistémicos (victoria/logro): Un breve estallido de retroiluminación de 300-500 ms con atenuación.

8) Disponibilidad y modos de alto contraste

Todos los significados están disponibles sin color ni brillo: forma, icono, etiqueta de texto, subrayado.
Soporte 'prefers-contrast', 'forced-colors'; cuando está activado: desactive el glow, amplifique los marcos y rellenos, compruebe los contrastes.
Para el daltonismo: evitamos el par «rojo-verde» como única señal; usamos pictogramas y texto.

9) Rendimiento

Minimice la box-shadow con un gran blur y filter: blur () en muchos elementos.
Prefiera sombras de pseudoelementos y capas compositoras (transformación/opacity).
En móviles - preset «ligero» de animaciones; desactivación de glow intensivo en FPS bajo.
Neon gradientes - renderizar como mapas de bits (WebP/AVIF) a grandes tamaños.

10) Tokens de color y estilos (ejemplo)

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 (fragmentos)

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) Visualización de datos

Gráficos seriales: la serie principal es neutral, la serie resaltada es el neón con grosor aumentado y marcadores de forma.
Puntos/columnas: ≥ 3:1 al fondo; firmas - ≥ 4. 5:1.
La retroiluminación de la serie seleccionada es un outer suave glow (sm), sin parpadeo constante.

12) Bloques de contenido y promociones

El texto en los neones promocionales es siempre en dados/overlay (40-60%), estrictamente por contraste.
«Glitch »/scan-linies - sólo como un acento raro, no más de 2-3 secciones por página.

13) Iconos e ilustraciones

Los iconos son lineales/duotones con un trazo de neón para estados activos.
Las ilustraciones son «neón por contorno» con un relleno mínimo; evite el brillo fino alrededor del texto.

14) Comercialización vs producto

Los banners de marketing pueden utilizar cromos 'C' más altos y resplandores complejos.
En el producto (formas, tablas, balance) - «C» reducido, efectos de glow cortos y contraste estricto.

15) Reglas de texto para iGaming

Notificaciones responsables (18 +, límites, KYC/AML, riesgos) - AAA por contraste, sin glow.
En las tablas de coeficientes/leadbords - crecimiento/caída denotado no sólo por el color, sino por las flechas/pictogramas y la negrura.

16) Localización y adaptación

Cirílico/latín: las mismas métricas de kegl e intervalos entre letras.
CTA de dos líneas: desactiva el glow del texto, dejándolo en el trazo/fondo.
RTL - espejo sólo efectos direccionales (esquinas/resplandor).

17) Lista de verificación de rugido (diseño/desarrollo)

Contraste

• Texto ≥ 4. 5:1; ≥ importante 3:1; notificaciones del sistema - AAA.

Glow

• Glow no se superpone con el texto; radio y alfa dentro de los presets.

Estados

• Hover/Active/Focus son distinguibles por la forma, no sólo por el color/luz.

Rendimiento

• Sin múltiples blur pesados; hay un preset «ligero» para móviles.

Disponibilidad

• El modo de alto contraste es correcto (glow off, marcos on).

Semántica

• El neón refleja el significado (acción/enfoque/estado), no «para la belleza».

18) Anti-patrones

Los sólidos rellenos de neón de grandes áreas → el cansancio de los ojos.
Parpadeo/ondulación constante → irritación y problemas de disponibilidad.
Texto sobre glow brillante sin sustrato.
La única señal es color/brillo (sin forma/iconos/subrayado).
Intensidades de glow inconsistentes en una pantalla («porra» visual).

19) A/B y métricas

Pruebe la intensidad glow (alfa/radio) en los botones CTR CTA y los errores de entrada.
Seguimiento de tiempo a acción y errores de formulario después de escribir un enfoque de neón.
Encuestas de UX sobre confort visual (especialmente en sesiones largas).

20) Documentación en el sistema de diseño

Página «Neon/Accent»: paletas (producto/marketing), tokens glow, ejemplos de componentes, micro-participaciones de demostración de vídeo.
«Matriz de contraste»: coeficientes reales para 'fg × bg' y 'on-'.
Conjunto de clases preset y snippets para frontend.

Resumen breve

Neon/Accent para Gamble Hub - punto, semántico, productivo. La luz guía la mirada hacia la acción sin romper el contraste y la comodidad. El motor son los tokens (OKLCH), los presets glow «ligeros», los estados estrictos, los efectos desactivables en el alto-contraste. Esto da un carácter llamativo a la marca, pero sigue siendo un producto cómodo y rápido.