Identista visual Gamble Hub

1) A essência da marca e os princípios

Imagem: tecnológica, honesta, confiável, focada em dados e responsabilidades.
Tom: discreto e competente; sem hipérbole.
Princípios: legibilidade> decoração, disponibilidade padrão, consistência entre os produtos.

2) Logotipo: estrutura e uso

2. 1 Opções

Principal (horizontal): sinal + palavra Gamble Hub.
Compacto (sinal): para favicon/avatares.
Vertical: para locais estreitos.

2. 2 Construção e área de segurança

Grade 8px. Área de segurança = altura do título G no perímetro.
Tamanho mínimo: impressão: 18 mm de largura; tela: 120 px.
Não é possível alterar as proporções, inclinar ou adicionar efeitos/gradientes a partir de um painel.

2. 3 No fundo

No fundo, há um logotipo colorido.
Em/foto complexa - monocroma (branco/preto) em 8-12 px arredondado.
No escuro, invertido.

3) Sistema de cores (tokens)

3. 1 Painel básico

Primary / Indigo 600: `#2F6BFF`

Primary Dark / Indigo 700: `#1E54F0`

Success / Green 600: `#2EAE60`

Warning / Orange 600: `#FF9F1A`

Critical / Red 600: `#E53935`

FG Primary: `#11131A`

FG Muted: `#656D76`

BG Base: `#FFFFFF`

BG Subtle: `#F7F8FA`

BG Inverse: `#0E1116`

3. 2 Gradientes (opcional)

'Linear-gradiente (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - usar com dosagem.

3. 3 Contraste e estados

Botão primary: fundo '# 2F6BFF', texto branco, hover '# 1E54F0', disabled 40% alfa.
Contraste de texto ≥ 4. 5:1 (AA). Para inversão - 3:1 para grande.

4) Tipografia

Títulos: Inter/SF Pro/sistemas, gordura 600-700.
Texto: Inter 14-16 px, line-height 1. 5.
Código/mono: JetBrains Mono ou mono de sistema.
Hierarquia: H1 32/40, H2 24/32, H3 20/28, Body 16/24, caption 12/16.
Não usar fontes decorativas para a interface.

5) Malha, recuos e raios

Grade: 8px; contêineres com max-width 1120-1280 px.
Cartões: Recuos internos de 16-24 px, intercalados de 16 px.
Raio: 8/12/16 px; por omissão, 12 px, para botões 8 px.
Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Iconografia e ilustrações

Grade de ícone 24 x 24, linha 1. 75-2px, arredondos concordados.
A semântica é primária, a cor é secundária (a cor muda de estado).
Ilustrações: planas, sem símbolos «casual» (fichas/cartões - apenas em informações neutras e em contextos moderados e não favoráveis).

7) Imagens e fotos

Os temas são tecnologia, dados, segurança, equipe.
Evitar os clichês «jackpots/confetti».
Acima da foto, uma tinta gradiente/escura para o contraste de texto (no mínimo 60% opacidade na parte escura).

8) Temas escuros e claros

Escuro: fundo '# 0E1116', texto '# E6E8EB', limites '# 2A2F37'.
Os acentos mantêm o contraste (primary é claro entre 8% e 12%).
Gráficos: fundo 2 passos mais claro do que o fundo, malha abafada, assinaturas contrastantes.

9) Disponibilidade (A11y)

Contraste AA/AAA; os estilos de foco não são removidos.
Alternativas de texto no logotipo e imagens significativas.
O tamanho mínimo do clique é 40-48 px.
Respeitar 'preferers-reduced-motion' - Animação diminuir/desativar.

10) Tom e microopirataria

Curto, certo, sem jargão.
Os erros explicam o que fazer ao usuário.
Unidades e formatos: datas no local do usuário, na interface ISO ao digitar, moedas com código (EUR, USD).
Não usar metáforas «apostas» em mensagens de comida.

11) Exemplos de tokens (JSON e CSS)

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12) Componentes e estados (exemplos UI)

Botão Primary: fundo primary-600, texto # FFF, hover primary-700, disabled 40% alfa.
Beijs: sucess/warning/critical com texto lido e ícone.
Cartão: fundo BG Base, sombra sm, raio md, header 16 px, corpo 16-24 px.

13) Animação e movimento

Transições 120-200 ms, curva 'ease-in-out'.
As animações são apenas 'trans '/' opacity'.
Para estados críticos, sem animações (não distrair).

14) Assistência social, apresentações, e-mail

Avatares/ícones: marca em primary-600, recuos 12-16 px.
Slides: fundo claro/escuro, grade 8px, H1 40-48, conteúdo 18-24.
E-mail: modelo HTML 600-720 px largura, fontes do sistema/Inter, botões ≥ 44 px altura, assunto escuro levado em conta.

15) Impressão, merch e exterior

Perfil de cor CMYK, equivalentes Pantone alinhados à tipografia.
Tamanho mínimo do logotipo e raio de preservação.
Papel - mate, evitar lacres «gritantes»; a tecla é válida para o sinal.

16) Marcações legais e jogo responsável

Alívio com o selo de projeto/ , se necessário (Jurd. país).
Discricionários e restrições de idade - na parte inferior dos layouts; lisura AA.
Não usar identística em conteúdos que incentivem comportamento redundante.

17) A localização e o'SE '

Não se traduz o sinal/vocabulário do logotipo.
Blocos de texto - em recursos; Apoio de 'SE' (espelhamento de atirador/ícone).
Comprimento de linha em Alemão/Turco/Árabe leve em consideração nos layouts.

18) Do / Don’t

• Mantenha o contraste, as zonas de proteção, a hierarquia de fontes, a grade 8px.
• Verifique a visibilidade na foto/vídeo; Use a tinta.
• Sigam os Tóquio, nada de cores aleatórias.

• Esticar/traçar logotipo, aplicar sombras/traçados «para beleza».
• Usar imagens «de azar» como fundo em produtos.
• Misturar fontes não convencionais, quebrar o contraste ou remover o foco.

19) Assetas, naiming e versões

Nayming, 'gh-logo-hz-cor. svg`, `gh-logo-vt-mono-white. svg`, `gh-icon-24-alert. svg`.
Пакеты: `/brand/logos/`, `/brand/icons/24/`, `/brand/templates/`, `/brand/fonts/`.
Formatos: SVG para logos/ícones; PNG/WebP para as telas; PDF para impressão.
Versioning: SemVer para o pacote de tokens/ícones; chainjog com 'added/changed/deprecated/removed'.
Origem da verdade: repositório de tokens → montagem para web/iOS/Android.

20) Controle de qualidade e processo

Brand Review em PR: Verificação de tokens e contraste.
A/B para imagens de fundo controversas (leitura/conversibilidade).
Linter: proibição de cores fora do token, verificação de texto alt para imagens.
Auditoria trimestral: consistência do painel/tipografia/iconpac.

21) Modelos

Keynote/Slides: título, seção, conteúdo, «dados/gráficos», final.
Social: 1:1 avatar, 16:9 banner, histórias 9:16.
E-mail, cumprimentos, CTA, notificação, mergulho.
Lending: bloco de hero, 3 vantagens, vitrine, CTA, porão.

22) Folha de aplicações de cheque

• Logotipo: opção correta, área de segurança, contraste, tamanho.
• Cores: apenas os tokens; contraste AA.
• Fontes: hierarquia, entre linhas, tamanhos de tarefas.
• Ícones: malha 24 x 24, espessura única da linha.
• Imagens: tópico válido, leitura do texto acima.
• Tema escuro/claro: testados, sem artefatos.
• Localização/RENAULT: as linhas não «quebram» o layout.
• Marcações legais/Resolvível Gaming estão presentes.

23) Plano de implementação (3 iterações)

• Logótipos, painéis, tipografias, tokens básicos, conjunto de ícones 24 x 24 (principais 40-60), modelos de apresentação e e-mail.

• Tópico escuro, componentes UI em tocadores (botões, cartões, tabelas), hyde para gráficos, parque social, leniência.

• Iconpac avançado, ilustrações, layouts impressos, linter/CI para tokens, auditorias regulares de marca.

24) Mini-FAQ

É possível pintar o logotipo para uma promoção especial?
Apenas em temas sazonais aprovados e sem violação de contraste/área de proteção.

O que é primário, um tocador ou um layout?
Os tokens. O layout é obrigado a usar variáveis de cor/retirada/tipografia do sistema.

Como agir em casos de disputa?
Abrir o RFC no repositório de identics, anexar exemplos, realizar o Brand Review.

Resultado

A identista Gamble Hub não é um «conjunto de imagens», mas um sistema: logotipo, painel, tipografia, iconpac, tokens e processos de controle de qualidade. Siga as regras de contraste, disponibilidade e consistência, use tokens e modelos - e a marca será reconhecida, moderna e unificada em todos os produtos e canais.