Manual de marca
Logo
- Completo como assinatura. Mini onde o espaço é pequeno: ícone, avatar e favicon.
- Branco no escuro, preto no claro. O ponto continua laranja nos dois.
- Não usar sobre laranja. O ponto desaparece.
- Não aplicar sombra, contorno, gradiente ou brilho.
- Não distorcer, girar ou redesenhar com outra fonte.
Arquivos oficiais no Notion, em Marketing HQ › Marca › Logos.
Cor
A marca tem dois laranjas, o Terroso e o Terrão, e nenhum outro. Os neutros são quentes, de asfalto e cal de campo. Toque numa cor para copiar o código.
O laranja nunca escurece. No hover o botão clareia. No claro, o texto fica preto e o laranja vira marca.
Proporção aproximada. O trecho laranja é o CTA e as marcas. Quanto mais profissional a ferramenta, menos laranja.
Amarelo não marca tipo de jogo nem categoria. Ele lê como aviso.
Superfícies
Uma marca, três ambientes. O app e o backoffice são escuros. O painel do organizador é claro, com fundo creme.
App
- Laranja sólido no CTA principal, um por tela.
- Seleção branca sólida em abas, filtros e escolhas.
- Saira nos títulos. Anton em data, VS e placar.
- Laranja vivo em contagens e marcas pequenas.
Backoffice
- Laranja só no logo e no item ativo da navegação.
- CTA branco sólido. Nunca laranja em botão.
- Saira só no título da página. Inter no resto, sem Anton.
- Mono só em ID, código e log.
- Cinzas neutros, sem tom quente.
Painel do organizador
- Saira nos títulos, Inter na interface.
- Fundo creme só na página. Cartões, modais e listas brancos.
- Cinzas frios no texto e nas bordas.
- Sidebar grafite com ativo em laranja claro.
- Texto preto. Laranja só como marca: filete e ponto.
- Roxo só em cobrança e pagamento.
Valores do código do painel (na-trave-campeonatos) e do backoffice.
Tipografia
Saira dá o tom de esporte nos títulos. Anton fica com data, hora, VS e placar. Inter carrega a leitura.
Caixa alta só no Anton e nos rótulos pequenos. O resto em caixa de frase. Valores do painel vêm do código do na-trave-campeonatos. A escala do backoffice é proposta.
Elementos gráficos
Três peças que dão a cara da marca. Cada uma tem um lugar certo e nenhuma aparece em todo produto.
Sublinhado rasgado
Traço laranja com borda irregular, embaixo de uma única palavra.
- Onde usarTítulos de abertura no app, como entrar e boas-vindas. Títulos de artes e do site.
- RegraUma palavra por peça. Nunca em links, botões, texto corrido ou título de tela comum.
- No painelO título da página já tem o filete. O sublinhado não entra.
Confronto
Escudos direto no fundo, sem ladrilho, do mesmo tamanho. VS em Anton cinza, inclinado.
- Onde usarCards e telas de partida no app. Partidas e súmula no painel. Artes de jogo.
- RegraEscudo com fundo transparente fica solto. Imagem com fundo próprio vira quadrado de cantos arredondados com anel fino. Sem escudo, entra o pôster do time. Nunca círculo.
- FC
Contagem regressiva
Número em Anton laranja vivo, unidade em Inter cinza. Um dos poucos lugares com laranja.
- Onde usarNo card e na tela da partida, até o jogo começar.
- RegraUma contagem por tela. Depois do início, o placar assume o lugar.
Sem imagem
Quando falta escudo, foto ou logo, a plataforma gera uma peça no lugar. Ela sai do nome, então é sempre a mesma para o mesmo time, jogador ou campeonato.
Time sem escudo
Pôster: a sigla do time gigante, cortada pela borda, com corte diagonal, linhas de velocidade e um mini escudo.
- RegraCor da paleta abaixo, escolhida pelo nome. Sigla em Saira itálico 800, até duas letras. Em cores claras, sigla e escudo ficam escuros.
- PequenoAbaixo de 28px some a sigla e o mini escudo cresce no centro.
Jogador sem foto
Camisa em movimento na cor do time, com as iniciais do jogador no canto, como no pôster do time.
- RegraCor do time do jogador. Sem time, cinza quente. Iniciais do jogador, até duas letras. Nunca número.
- FormaQuadrado de cantos arredondados, igual ao das fotos. Nunca círculo.
Campeonato sem logo
Pôster: corte diagonal, a sigla gigante cortada pela borda e o troféu no canto.
- RegraSigla com as iniciais das palavras principais, até três letras. Quadrado de cantos arredondados, como o logo enviado.
- PequenoAbaixo de 28px a sigla some e o troféu vai para o centro.
Tons terrosos e um pouco abafados, do mesmo mundo do asfalto e da cal. Ficam vivos no app escuro sem brigar com o laranja do CTA. Sem laranja, amarelo ou roxo. As opções que ficaram de fora estão em Propostas sem imagem.
As peças geradas valem nos três produtos. Quando o time, o jogador ou o organizador envia a imagem, ela substitui a peça gerada.
Ícones
Todos os ícones são desenhados por nós, na mesma grade de 24, com traço 1,5 e a bola do logo como único peso forte.
Os ícones que têm a bola ganham uma versão com o ponto laranja do logo. É a versão de peça de marca.
- Artes, site, e-mails, onboarding e estados vazios.
- Uma bolinha laranja por peça. Ela é o ponto do logo.
- No escuro, Terrão. No claro, Terroso.
- Na interface comum, como listas, navegação e botões. Lá o ponto fica neutro.
- Dois ícones com bolinha laranja lado a lado.
- No backoffice.
Um ícone por conceito em todos os produtos. Campeonato é sempre o troféu. Partidas usa o placar, jogador usa a camisa, arbitragem usa o apito e local de jogo usa o pin. Início fica na navegação.
Instagram e WhatsApp usam os ícones oficiais das marcas, sem redesenho, baixados dos kits de marca da Meta.
Cartões, no plural, segue a cor do texto. Amarelo e vermelho são os únicos ícones com cor própria, porque a cor é a regra do jogo. Sempre com o nome ao lado ou na legenda, para quem não distingue as cores.
Mesma grade e mesmo traço. O ponto cheio aparece onde faz sentido, como em local e informação.
Ícones neutros. Laranja só dentro do CTA ou no item ativo.
Passe o mouse em cima de cada ícone para ver a animação. Ela roda uma vez, em menos de um segundo, e some para quem desliga animações no aparelho.
Voz e escrita
Direta, de quem joga. Diz o que acontece e para.
Desafio enviado para o Brasil.
3 times sem elenco. Adicionar jogadores
Campeonato 8f3a2c91 atualizado.
Faça e evite
Os erros que mais aparecem na revisão, por produto.
Ícones de futebol neutros.
Laranja em ícone decorativo.
Logo branco no escuro, com o ponto laranja.
Logo sobre laranja. O ponto desaparece.
Ícones desenhados pela NaTrave!.
Ícones arredondados de biblioteca.
Status de espera em cinza.
Status em laranja. Compete com o CTA.
Um único laranja forte na tela.
Dois CTAs laranja disputando atenção.
Hover clareia o laranja.
Hover escurece. O laranja perde a vida.
Escudos direto no fundo, do mesmo tamanho.
Escudo em ladrilho branco. Pesa mais que o nome do time.
Aba e filtro ativos em branco sólido.
Aba ativa em laranja. Vira um segundo CTA.
Anton só em data, hora, VS e placar.
Anton em título de tela. Fica pesado.
Sublinhado em uma palavra.
Frase inteira sublinhada. Vira preenchimento.
No claro, texto preto com o laranja como marca.
Texto em laranja escurecido. Vira marrom.
Cartões brancos sobre o fundo creme.
Cartão creme sobre creme. Some na página.
Roxo só em cobrança e pagamento.
Roxo em botão comum. Perde o sentido.
CTA branco sólido.
Botão laranja no backoffice.
id 8f3a2c91Mono só em ID, código e log.
O campeonato foi atualizado pelo organizador.Mono em texto corrido. Cansa a leitura.