Estilo Neon/Accent Gamble Hub

1) Conceito e princípios

Neon/Accent é uma linguagem visual onde a superfície principal permanece discreta (dark-first) e a atenção do usuário é direcionada por breves flashes de neon: contornos acentuados, brilhos, iluminação de estados e micro-sinais. Objetivo: detecção rápida de ação (CTA, foco, notificação) e alta leitura sem superaquecimento.

1. Sotaque, dosado. 90/10: até 10% da área da tela podem ter «luz».

2. A semântica é mais importante do que a marca. O neon é uma forma de destacar o significado, não apenas o brilho.

3. O contraste é primário. Qualquer objeto luminoso não reduz a leitura do texto (mínimo AA).

4. Ritmo e pausa. A animação é curta, previsível, com pausas e física clara.

5. Produtividade e disponibilidade. Não há desfalques pesados/sombras em dispositivos fracos; todos os efeitos são testados em modos HC.

2) Cor e luz: painel e papéis

2. 1 Superfícies básicas (dark-first)

'bg/base' é um grafite profundo com barulho leve/grãos (reduz as «faixas» nos gradientes).
'bg/elevated' é um pouco mais claro para cartões e modais.
'fg/primary' é quase branco, mas não limpo (# FFF → L≈0. 90 em OKLCH) para reduzir os destaques.

2. 2 Neons acentuados (OKLCH, referências)

Cyber Blue: `oklch(0. 74 0. 16.250) 'é o principal sotaque de marca.
Electric Purple: `oklch(0. 70 0. 17.310) '- secundário, para sequências ou eventos de jogo.
Toxic Lime: `oklch(0. 82 0. 14 140) 'é um raro highlight (jackpot, vitória).
Alert Coral: `oklch(0. 72 0. 14 30) '- avisos/erros («neon» discreto).

2. 3 Pares Contrastantes

Texto/ícone ao fundo: ≥ 4. 5:1 (normal), ≥ 3:1 (grande/grosso).
Texto para preenchimento de neon: ≥ 4. 5:1. Com "C" alto, reduza "C _ text' para 0. 01–0. 03.
Contornos/ícones-indicador: ≥ 3:1 para o ambiente.

3) Efeitos luminosos (glow) sem danos à lisura

3. 1 Formas de brilho

Outer Glow (contorno macio): 1-2 anéis de desfocamento, raio 8-24 px, dependendo da escala.
Neon Stroke: linha fina 1-2 px alta luminosidade + sombra externa macia.
Inset Glow: Um «soturno» interno para inputs focados.

3. 2 Limitadores

Nunca coloque um pequeno texto sobre um brilho intenso.
O Glow não substitui o estado; ele complementa o formulário/ícone/sublinhar.
Em grandes áreas (banner/heder) - reduza a opacidade do brilho para 20-35%.

3. 3 Adaptação de tópicos

No tema light, o neon é mais fraco e mais curto em raio, senão é um efeito ácido.
Em high-contrast - os brilhos são desligados, e o traço/moldura é claro.

4) Tipografia e hierarquia

Conteúdo básico: 16-18 px; títulos com escala clara (por exemplo, escala de 12 pontos).
Desenho: evite ultra-light; Mínimo Regular/Medium.
Intervalo de linha 1. 45–1. 6.
A ênfase do texto não é cor, mas escala/peso/ícone; cor - apenas como extra.

5) Malhas, ritmo, fundo

Colunas: 12 (desktop), 6 (tablet), 4 (mobile).
Módulo horizontal 8 px; vertical - 8/12/16 px, dependendo da secção.
Gradiente de fundo: halo fraco radial na área CTA chave.
Ruído tátil (grain) L = £0. 02 para profundidade sem plástico.

6) Componentes (pattern)

6. 1 Botões

Primary: preenchimento de 'brandNeon' + 'on-primary' texto ≥ 4. 5:1, glow raio 12-16 px por hover.
Secundary: transparente com traçado de neon (1-2 px) e macio outer glow a hover.
Tertiary: texto, sem brilho, apenas sublinhar/ícone.

• Hover: - L fundo (0. 02–0. 04) + leve glow.
• Ativo: preenchimento mais escuro, removido ou reduzido glow.
• Focus: anel de contraste 2-3 px (sem desfocar), não apenas cor.

6. 2 Campos de entrada

Default: quadro de neutral fino 1 px.
Focus: neon stroke + inset glow fraco dentro do campo; placeholder contraste reduzido (mas ≥ 3:1).
Erro/Sucess: contorno semântico + ícone; glow mínimo.

6. 3 Tabas/navegação

Indicador de taba ativa - linha de neon 2 px + blur macio 8 px.
Howers - Um córrego leve sob o cursor (shadow spread 4-6 px).

6. 4 Cartões/banners

Cartões de torneio: moldura-neon nos cantos («cantos» curtos), para que não brilhe toda a moldura.
Banners - máscara escura sob o texto (overlay 40-60%) para evitar que o fundo neon «devore» conteúdo.

7) Microfluência e animação

Duração: 120-200 ms (hover), 180-240 ms (focus/ativo), 240-320 ms (docas/modais).
Curva: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1) 'para uma sensação «material».
Um ciclo em hover, sem piscar sem fim.
Eventos do sistema (vitória/realização): um breve pico de realce 300-500 ms com apagão.

8) Disponibilidade e modos de alto contraste

Todos os significados estão disponíveis sem cor ou brilho, como forma, ícone, editora de texto, sublinhar.
Suporte a 'prefers-contrast', 'forted-colors'; ao ligar, desligar o glow, reforçar as molduras e preenchimentos, verificar os contrastes.
Para o daltonismo: Evitamos o par vermelho-verde como o único sinal; Usamos ícones e texto.

9) Desempenho

Minimize box-shadow com mais blur e filter: blur () em vários itens.
Prefira sombras de pseudoelementos e compositores de camadas.
No celular, uma animação «leve»; desativar glow intensivo com FPS baixo.
Non gradientes - render como assetas de bitmap (WebP/AVIF) em grandes tamanhos.

10) Toques de cores e estilos (exemplo)

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

presídios CSS (fatias)

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) Visualização de dados

Gráficos de série: série principal - neutral, fila selecionada - neon com espessura aumentada e marcadores de forma.
Pontos/colunas: ≥ 3:1 para o fundo; assinaturas - ≥ 4. 5:1.
Realce a série selecionada - outer glow macio (sm), sem pressão permanente.

12) Blocos de conteúdo e promoção

O texto nos neons de fundo é sempre em tons/overlay (40-60%), em contraste rigoroso.
«Glitch »/« scan-line» - apenas como um sotaque raro, não mais do que 2 ou 3 seções por página.

13) Ícones e ilustrações

Ícones - linear/duoton com traço de neon para estados ativos.
Ilustrações - «neon por traçado» com preenchimento mínimo; evitar o pequeno brilho em torno do texto.

14) Marketing vs produto

Banners de marketing podem usar cromo mais alto 'C' e brilhos complexos.
O produto (formulários, tabelas, balanços) é «C» reduzido, efeitos glow curtos e contraste rigoroso.

15) Regras de texto para iGaming

Notificações responsáveis (18 +, limites, KYC/AML, riscos) - AAA em contraste, sem glow.
Em tabelas de coeficientes/liderbords - crescimento/queda não é apenas cor, mas seta/ícone e gordura.

16) Localização e adaptação

Cirílico/latim: as mesmas métricas de kegl e espaçamento entre búfalos.
CTA de duas linhas - Desligando o glow ao texto, deixando-o ao traçado/fundo.
Só espelham efeitos direcionados (cantos/destaques).

17) Folha de cheque (design/desenvolvimento)

Contraste

• Texto ≥ 4. 5:1; grande ≥ 3:1; notificações do sistema - AAA.

Glow

• Glow não se cruza com o texto; raio e alfa dentro dos presídios.

Estados

• Hover/Action/Focus são diferentes pela forma, não apenas pela cor/luz.

Desempenho

• Sem muitos blur pesados; há um pré «fácil» para celular.

Disponibilidade

• O modo high-contrast é correto (glow off, molduras on).

Semântica

• O neon reflete o significado (ação/foco/status) em vez de «beleza».

18) Anti-pattern

Cheias de neon de grandes áreas → cansar os olhos.
Constante pressão/pulsação → irritação e problemas de acessibilidade.
Texto em cima de um glow brilhante.
O único sinal é cor/brilho (sem forma/ícone/sublinhação).
Intensidades de glow incoerentes em uma única tela («cachaça» visual).

19) A/B e métricas

Teste a intensidade do glow (raio alfa) em botões CTR CTA e erros de digitação.
Monitorar time-to-action e erros de formulário após a entrada do foco neon.
Sondagens UX sobre o conforto visual (especialmente em sessões longas).

20) Documentação em design

Página «Neon/Accent»: painéis (produto/marketing), tokens glow, exemplos de componentes, microvisões de vídeo-demo.
Matriz de contraste: coeficientes reais para 'fg x bg' e 'on-'.
Conjunto de classes preset e snippets para frontend.

Resumo curto

Neon/Accent para Gamble Hub - pontual, semântico, produtivo. A luz guia o olhar para a ação sem quebrar o contraste e o conforto. Motor - tokens (OKLCH), «ligeiros» glow-presets, estados rigorosos, efeitos desconectáveis em high-contrast. Isso dá o brilho da marca, mas permanece um produto conveniente e rápido.