Brand
Logos & Ícones
Os ativos oficiais da marca. Use sempre os arquivos originais em /public/brand, nunca recrie, redesenhe ou aproxime o logo manualmente. Consistência aqui é o primeiro sinal de acabamento.
Ícone
O símbolo Hogrid isolado, o monograma HG no squircle. A versão colorida é a primária e funciona sobre qualquer fundo; o branco monocromático é a variante para superfícies escuras. Tamanho mínimo de 16px.
Bancada
#0d0d0d · símbolo colorido
Superfície
#1a1a1a · branco monocromático
Branco
#ffffff · símbolo colorido
Variação sazonal
Para eventos e datas sazonais existe uma versão temática do símbolo. Na temporada da Copa do Mundo o padrão é o icon-cup.png: ele substitui o símbolo colorido como ícone primário durante o período, mantendo o mesmo squircle e as mesmas regras de tamanho e área de proteção.
Símbolo sazonal · Copa do Mundo
icon-cup.png · padrão da temporada
Regra de uso
Durante um evento sazonal ativo, icon-cup.png é o ícone padrão em favicon, avatar e app icon. Fora da temporada, volta o símbolo colorido icon.png. Nunca misture as duas versões na mesma superfície.
Escala de tamanhos
O ícone permanece legível de 96px até o mínimo de 16px. Abaixo disso, a forma perde definição.
Logotipo
O logotipo completo, símbolo mais wordmark. A versão é definida pela cor do fundo, nunca pela preferência estética: logo branca em fundo escuro, logo preta em fundo claro ou Volts.
Bancada
#0d0d0d · logo branca
Superfície
#1a1a1a · logo branca
Branco / claro
#ffffff · logo preta
Volts
#c4f005 · logo preta
Aplicação por cor de fundo
A regra é o contraste. Em fundos escuros vai a logo branca; em fundos claros e no Volts vai a logo preta. O símbolo colorido isolado continua sendo a opção para espaços mínimos, onde a wordmark não sobrevive.
| Fundo | Valor | Versão | Arquivo |
|---|---|---|---|
| Bancada | #0d0d0d | Logo branca | logo-2026-white.svg |
| Superfície | #1a1a1a | Logo branca | logo-2026-white.svg |
| Branco / claro | #ffffff | Logo preta | logo-2026-black.svg |
| Volts | #c4f005 | Logo preta | logo-2026-black.svg |
| Espaço mínimo | favicon / avatar | Símbolo isolado | icon.png |
Regras de uso
Diretrizes inegociáveis para preservar a leitura e a autoridade da marca.
Do
- Usar sempre os arquivos oficiais de /public/brand.
- Escolher a versão pelo contraste do fundo: logo branca no escuro, logo preta no claro e no Volts.
- Respeitar o tamanho mínimo: ícone 16px, logo 80px em digital.
- Garantir contraste suficiente entre logo e fundo.
Don't
- Recriar, redesenhar ou aproximar o logo manualmente.
- Distorcer, esticar, rotacionar ou aplicar sombra.
- Recolorir o logo ou aplicar filtros e gradientes.
- Posicionar sobre fundos de baixo contraste ou ruidosos.
Usos incorretos
Sete violações comuns, aqui sobre painel claro com a logo preta. Cada uma quebra a integridade do logo: nenhuma é aceitável, nem 'só desta vez'.
Não distorcer a proporção
Não esticar na vertical
Não rotacionar
Não aplicar sombra
Não recolorir por filtro
Não usar em baixo contraste
Não achatar/comprimir
App Icon & Favicon
Nas superfícies mínimas (ícone de app, aba do navegador, avatar) usa-se apenas o símbolo, nunca o logotipo completo. A wordmark não sobrevive em tamanhos pequenos.
App icon
Símbolo sobre Bancada
Favicon
Símbolo colorido, 16–32px
Escala mínima
16 · 24 · 32px