Clubeiros
Brand Guide
Dois anéis e um movimento
O símbolo é composto por dois anéis concêntricos abertos com um triângulo de play no centro. Os anéis se sobrepõem como camadas de pertencimento — o externo é a comunidade ampla, o interno é o clube específico, e o play no núcleo é a ação acontecendo agora.
A forma evoca uma arena vista de cima, uma pista circular, gente reunida em volta de um centro. Não pertence a nenhuma modalidade específica — funciona pra clube de basquete, futebol, vôlei, natação ou qualquer esporte de base.
Símbolo em quatro contextos
Use a versão colorida sempre que possível. Mono preto para impressões em uma cor; mono branco para fundos escuros ou coloridos da paleta da marca.
Símbolo + wordmark
O wordmark usa Poppins Bold, com a letra O em coral. Essa escolha cria um eco visual com o anel interno do símbolo — a marca tem dois círculos: um no ícone, outro na palavra.
O símbolo pode aparecer isolado quando o espaço não permite o conjunto (favicon, ícone de app, marca d'água em rodapés).
Área de proteção
Mantenha em volta da marca um espaço livre equivalente a x = metade da altura do símbolo. Nenhum outro elemento gráfico, texto ou borda deve invadir essa região.
Legibilidade em qualquer escala
O símbolo foi desenhado para funcionar de favicon a outdoor. Não use abaixo de 16px de altura em digital ou 8mm em impressão.
Paleta da marca
A logo principal usa apenas navy + coral. As demais cores existem para o sistema de UI (estados, categorias, gráficos) mas não devem ser combinadas dentro da logo. Versões mono substituem ambas as cores por preto ou branco.
Poppins + DM Sans
Poppins é a fonte de display e títulos da marca — usada no wordmark, headlines e elementos de destaque. DM Sans é a tipografia de apoio para corpo de texto, interface e leitura longa. Ambas estão disponíveis no Google Fonts e cobrem caracteres do português.
Regras de aplicação
Aplicações reais
Como a marca se comporta no header da plataforma, em e-mails transacionais, no favicon do navegador e em ícones de app.
Header do site
Favicon e aba de navegador
Ícone de app (mobile)
Arquivos prontos pra loja no pacote de entrega abaixo. As bordas arredondadas aqui são só ilustrativas — o sistema operacional aplica a máscara.
Pacote de entrega
Clique em qualquer card para baixar o arquivo. Use SVG sempre que possível — é vetorial, escala em qualquer dimensão e tem peso mínimo. PNG do símbolo está fornecido para casos onde SVG não é suportado (favicons legados, app icons, redes sociais).
Sobre os app icons: são quadrados com fundo sólido e sem transparência — o formato correto pra App Store e Google Play. Não arredonde as bordas manualmente: iOS e Android aplicam a máscara (squircle / círculo) automaticamente. O símbolo já vem posicionado dentro da zona segura. Tamanhos: 180px (iOS home), 192px (Android), 512px (Play Store), 1024px (App Store).
Sobre os PNG com fundo: cada variante vem sobre o fundo em que é aplicada — coloridas, mono preto e grayscale sobre o off-white da marca (#F4F4F0); mono branco e branca sobre o navy (#1E2A47). Use quando a transparência atrapalha (WhatsApp, e-mail, planilhas, alguns apps).
Sobre as imagens de social preview: 1200 × 630px (1.91:1), fundo sólido sem transparência, sRGB, ~30KB. São a prévia que aparece quando o link é compartilhado no WhatsApp, Facebook, LinkedIn, X. Referencie por URL absoluta no <head>:
<meta property="og:image" content="https://brand.clubeiros.com.br/v1/social/clubeiros-og-navy-1200x630.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
Sobre o lockup em ambientes sem Poppins: os SVGs de lockup referenciam a fonte Poppins via font-family. Em contextos onde Poppins não pode ser carregada (e-mails transacionais, alguns apps mobile, exports estáticos), abra o SVG no Figma ou Illustrator e converta o texto em outlines (paths) antes de exportar.
Carregando as fontes em produção: adicione ao <head> do site:
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">