Sistema de cores e painéis de marca

1) Por que formalizar a cor

• o reconhecimento da marca e da consistência visual,
• legibilidade e disponibilidade (WCAG),
• zoom de interface (tópicos, plataformas, locais),
• experimentos A/B previsíveis (contraste, CTR, erros).

2) Fundações do sistema: modelos e métricas

OKLCH (recomendado): Sintonicamente uniforme, é conveniente controlar a luminosidade 'L' e a saturação 'C', mantendo o tom 'H'.
Lab/LCH: Também é adequado; O OKLCH é mais estável em percepção.
sRGB: espaço de exibição final; os valores finais são sempre validados em sRGB e WCAG.
Contraste (WCAG 2. 2): texto básico ≥ 4. 5:1, grande ≥ 3:1; notificações críticas - apontar para AAA (7:1) sempre que possível.

3) Camadas de sistema: da marca para a semântica

1. Núcleo de marca: 1-2 tons de marca (+ alento de suporte).
2. Semântica de interface: papéis ('primary', 'segundary', 'sucess', 'warning', 'denger', 'info', 'neutral').
3. Escalas de tom: passos de luz (por exemplo, 25/50/100...900).
4. Темы: `light` / `dark` (+ high-contrast, AMOLED).
5. Estados: 'default/hover/ativo/focus/disabled'.
6. Contexto: superfícies ('bg/base', 'bg/subtle', 'bg/elevated') e texto ('fg/primary', 'fg/secundary', 'fg/muted').
7. Visualização de dados: painéis individuais discretos e contínuos.

4) Núcleo de marca: seleção e limitadores

Selecione o tom principal (Hue) e defina a luminosidade de trabalho da marca em temas claros e escuros (muitas vezes '). 60–0. 70 'para preencher botões na light e' L≈0. 70–0. 80 'para texto/ícone em dark).
Limite o cromo 'C': alto 'C' bonito nos banners, mas quebra a leitura na UI - mantenha 2 versões: «marketing» (cheio) e «refeição» (contido).
Verifique as variações de base ('brand/primary'), alternativa ('brand/alt') e apoio neutro (' neutral ').

5) Escalas de tons (Tonal scales)

• Para OKLCH, mova 'L' degraus (por exemplo, 0. 98→0. 90→0. 80→…→0. 18), a 'C' diminua levemente para as bordas da escala para evitar «sujeira» nas luzes e «turvidades» nas escuras.
• Fixe os pontos de referência: '50/100/300/500 (key )/700/900'.
• Em cada etapa, verifique o contraste do par com o fundo básico e com a cor esperada do texto.

Exemplo de escala de brand/primary (OKLCH, próximo)

brand. primary. 50  = oklch(0. 98 0. 03 230)
brand. primary. 100 = oklch(0. 94 0. 05 230)
brand. primary. 300 = oklch(0. 86 0. 08 230)
brand. primary. 500 = oklch(0. 74 0. 10,230) # keytone brand. primary. 700 = oklch(0. 56 0. 09 230)
brand. primary. 900 = oklch(0. 32 0. 07 230)

6) Papéis semânticos e mapping

Partilhe a marca e a semântica, o «sucesso» não deve ser uma marca verde.

role. primary. bg    -> brand. primary. 500 role. primary. text   -> fg. on-primary     # ≥ 4. 5-1 to the role. primary. bg role. success. bg    -> green. 500 role. warning. bg    -> amber. 500 role. danger. bg    -> red. 500 role. info. bg     -> blue. 500 role. neutral. bg    -> gray. 200/700 (light/dark)

Os textos 'on-' são calculados automaticamente (consulte o parágrafo 10).

7) Temas claros/escuros e superfícies

light:
bg/base   = oklch(0. 98 0. 01 260)
bg/subtle  = oklch(0. 96 0. 01 260)
bg/elevated = oklch(0. 93 0. 01 260)
fg/primary  = oklch(0. 18 0. 03 260) # ≈7:1 к bg/base fg/secondary = oklch(0. 32 0. 03 260) # ≥4. 5:1 border    = oklch(0. 80 0. 02 260)

dark:
bg/base   = oklch(0. 16 0. 01 260)
bg/subtle  = oklch(0. 20 0. 01 260)
bg/elevated = oklch(0. 24 0. 01 260)
fg/primary  = oklch(0. 90 0. 02 260)
fg/secondary = oklch(0. 78 0. 02 260)
border    = oklch(0. 34 0. 02 260)

Mantenha os mesmos objetivos de contraste em ambos os temas; Evite os brancos "cegos" em preto puro - levanta o'L "de fundo para £0. 16.

8) Estados e interatividade

button/primary:
default. bg = brand. primary. 500 hover. bg  = brand. primary. 500 with +ΔC(0. 01) -ΔL(0. 02)
active. bg = brand. primary. 700 focus. ring = brand. primary. 300 # ring contrast ≥ 3:1 to the disabled environment. bg= neutral. 200 (light) / neutral. 700 (dark)
text. on  = auto-contrast(default. bg)    # ≥ 4. 5:1

9) Responsabilidade e WCAG

Texto básico e ícones em controles - ≥ 4. 5:1.
Notificações-chave do sistema (KYC/AML, 18 +, erros de pagamento) - apontem para AAA (7:1).
Os estados e limites dos campos são no máximo 3:1.
As referências não são apenas cores (sublinhar/focus-estilo).

10) Texto de contraste automático ('on-')

1. Por OKLCH, defina a pré-lista. texto 'L _ on' para '(L _ text vs L _ bg) ≥ 4. 5:1`.

2. Se o cromo estiver alto, reduza 'C _ text' para 0. 01–0. 03.

3. Para um tema escuro, levantar 'L _ on' para mais 0. 02–0. 04 para compensar o gleire.

fg. on(colorX) = auto(colorX, targetContrast=4. 5)

11) Visualização de dados

Painéis categóricos: 8 a 12 cores resistentes ao daltonismo (evite o vapor vermelho-verde sem sinais alternativos).
Contínuo: de 'bg/elevated' a um foco com controle de contraste de assinaturas.
Adicione patters/marcadores para variabilidade sem cor.

12) Contexto internacional (associações culturais)

Leve em conta as conotações locais (por exemplo, vermelho - perigo/atenção; ouro - ganho/prêmio).
Para iGaming: evite conflitos de sucesso/perigo com acentos de marca na mesma tela; a iconografia e a assinatura são mais importantes do que a luminosidade.

13) Integração no design

13. 1 Denominação de tokens

color.{theme}.{role    surface    brand}.{state    step}
color examples. light. brand. primary. 500 color. dark. role. success. bg color. light. surface. bg. base color. light. fg. on-primary

13. 2 Tokens (JSON/Style Dictionary)

json
{
"color": {
"light": {
"surface": { "bg": { "base": "oklch(0. 98 0. 01 260)"} },
"brand":  { "primary": { "500": "oklch(0. 74 0. 10 230)" } },
"role":  { "primary": { "bg": "{color. light. brand. primary. 500}" },
"danger": { "bg": "oklch(0. 62 0. 12 25)" } },
"fg": { "primary": "oklch(0. 18 0. 03 260)",
"on-primary": "auto({color. light. role. primary. bg},4. 5)" }
}
}
}

13. 3 variáveis CSS (camada de tópicos)

css
:root[data-theme="light"] {
--bg-base: oklch(0. 98 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 18 0. 03 260);
--on-primary: color-contrast (var (--brand-primary-500)) ;/auto-fit/
}
[data-theme="dark"] {
--bg-base: oklch(0. 16 0. 01 260);
--brand-primary-500: oklch(0. 74 0. 10 230);
--fg-primary: oklch(0. 90 0. 02 260);
--on-primary: color-contrast(var(--brand-primary-500));
}

13. 4 Figma/documentação

Os componentes usam apenas tokens e os HEX/SRGB diretos são proibidos por linters.
Na biblioteca, página Matriz de contraste: tabela 'fg x bg' com coeficientes reais.

14) Processos de controle de qualidade

Em design: teste de contraste em artbords (ambos os modos), presídios individuais para daltonismo.
Código: Os helpers unit calculam o contraste e caem em violações; Snepshots visuais para telas críticas.
Em CI/CD: verificação de todos os pares de tokens e estados, relatório com o componente, o tema e o valor real.

15) Especificidades iGaming

Promoção e torneios: Use owerley e limite 'C' nos fundos para evitar que o texto afogue.
Notificações responsáveis (limites, 18 +, riscos) - genuinamente AAA.
Métricas/tabelas: os números e caracteres de alteração (↑/↓) distinguem entre a forma e o contraste, e não apenas a cor.

16) Folha de cheque de implementação

• Definidos os tons de marca e suas escalas tonais (OKLCH).
• Os papéis, estados e superfícies de dois temas foram definidos.
• Geração automática 'on-' com contraste de destino.
• Matriz 'fg x bg' e testes WCAG em CI.
• Painéis individuais para Datawiz (com suporte ao daltonismo).
• Estilo linter proíbe cores crus.
• Página «Exceções e razões» na haydline.

17) Anti-pattern

Misture o sotaque de marca com «sucesso/erro» em um único sinal UX.
Basear-se apenas na saturação da hierarquia.
Não sincronizar light/dark (o contraste «partiu» em um dos temas).
HEX rígido sem tokens → uma deriva incontrolável da interface.

Resumo curto

Construa o painel de cima para baixo: o núcleo de marca → papéis semânticos → escalas de tons → tópicos → estados. Trabalhe no OKLCH, fixe os tokens, automatize os testes 'on-' e WCAG. Cuide separadamente os painéis do Datawiz. Isso dará consistência à marca, lisura e escalabilidade do produto.