Proposta visual
Brand kit
e diretrizes
de design
Uma identidade de alto contraste, lettering próprio e comunicação direta. Vermelho, preto e espaço livre dão intensidade com clareza.
01 · Diretrizes
Essência da marca
O núcleo que orienta todas as decisões visuais.
A identidade deve transmitir
- Energia sem ruído.
- Precisão nas escolhas e nas mensagens.
- Clareza para reconhecer, ler e agir.
A identidade deve evitar
- Efeitos de velocidade que prejudiquem a leitura.
- Promessas genéricas e excesso de informação.
- Ornamentos que disputem atenção com a marca.
Tom
Direto
Presença
Intensa
Estrutura
Precisa
Ritmo
Objetivo
02 · Diretrizes
Sistema de logotipo
Variantes oficiais e operacionais para superfícies e escalas reais.
Assinatura principal
Superfície: Preto, branco e fundos neutros lisos.
Uso: Aplicação preferencial da assinatura completa em vermelho.
assets/full-primary.png
Sobre preto
Superfície: Fundo preto puro #000000.
Uso: Manter o vermelho original e toda a geometria da assinatura.
assets/full-primary.png
Sobre branco
Superfície: Fundo branco puro #FFFFFF.
Uso: Usar a assinatura vermelha sem caixa, contorno ou efeito.
assets/full-primary.png
Ícone F
Superfície: Preto ou branco liso, com área de respiro.
Uso: Identificação exclusiva do FULL em avatar, favicon e interfaces compactas.
assets/icon.png
Exportações: 512X512 · 180X180 · 128X128 · 48X48 · 32X32 · 16X16
Assinatura branca
Superfície: Vermelho, preto ou grafite.
Uso: Alternativa uniforme para fundo escuro ou vermelho.
assets/full-white.png
Cor uniforme: #FFFFFF
Assinatura preta
Superfície: Branco ou off-white.
Uso: Alternativa uniforme em superfícies claras e reprodução de uma cor.
assets/full-black.png
Cor uniforme: #0A0A0A
03 · Diretrizes
Aplicação correta do logo
Escolha a variante pela superfície. Nunca esconda uma escolha inadequada.
Usos proibidos
- Não redesenhar, redigitar ou vetorizar automaticamente o lettering.
- Não alterar proporção, inclinação, espaçamento, cortes ou lateral externa contínua do F.
- Não adicionar gradiente, sombra, contorno, brilho, textura ou efeito metálico.
- Não rotacionar, comprimir, esticar ou dividir a assinatura.
- Não usar o ícone F como substituto de identidades de outros produtos.
- As composições com Super Ads, Google Search, Google Ads, Meta Ads, Sales e Leads continuam pendentes de definição. Usar FULL de forma independente.
- O ícone F identifica apenas FULL e não substitui o S oficial no site ou aplicativos da Super Ads.
Regra central
Troque a variante ou recomponha o layout.
Não crie caixa, tarja, placa ou fundo artificial atrás do logo.
Validação
- Conferir contraste na área exata atrás do ativo
- Preservar proporção e área de proteção
- Testar em tamanho mínimo e recorte real
04 · Diretrizes
Sistema de cores
Cores organizadas por função, contraste e contexto de uso.
Marca e ação
Vermelho FULL
#E80411
Marca, destaques e ações principais. · Fundo de ação com rótulo branco. · Texto #FFFFFF
Vermelho profundo
#A8000B
Hover e superfícies de destaque discreto. · Texto #FFFFFF
Branco
#FFFFFF
Contraponto de contraste e áreas claras. · Texto #0A0A0A
Neutros
Preto
#0A0A0A
Superfície principal escura e texto em fundo claro. · Texto #FFFFFF
Cinza funcional
#6B6B6B
Texto secundário em branco e off-white. · Texto #FFFFFF
Off-white
#F7F7F5
Superfície clara de apoio. · Texto #0A0A0A
Estados
Grafite de confirmação
#171717
Estado concluído com símbolo de confirmação e texto explícito. · Texto #FFFFFF
Rosa de atenção
#FDE8E9
Estado em análise com rótulo e símbolo de atenção. · Texto #0A0A0A
Vermelho de erro
#B0030C
Erro ou impedimento com mensagem de correção. · Texto #FFFFFF
Leitura funcional
Cores semânticas apoiam estados e não substituem a cor central da marca. Cada estado também usa texto, ícone ou forma.
05 · Diretrizes
Tipografia
Cinco funções claras, famílias realmente aplicadas e amostras legíveis.
Regra de quebra
Amostras tipográficas do Brand Kit ocupam uma linha. Em aplicações reais, títulos podem quebrar naturalmente: ajuste largura e composição antes de reduzir o impacto.
06 · Diretrizes
Hierarquia e interface
Estrutura primeiro, componentes depois e decoração por último.
Composição
Uma mensagem por bloco; uma ação principal por contexto.
- Marca ou título principal.
- Contexto e informação que sustentam a mensagem.
- Próxima ação e informação de apoio.
Grid de 12 colunas no desktop e 4 no mobile; margens mínimas de 24 px e 20 px, respectivamente. Espaçamentos em múltiplos de 8 px.
Componentes
- Botão principal vermelho #E80411, texto branco, Inter 700; altura mínima de 44 px e cantos de 4 px.
- Botão secundário transparente com borda e rótulo de alto contraste; mesmo tamanho do principal.
- Blocos de conteúdo com título claro, separadores discretos e 24 px de respiro; borda de 1 px e raio de 4 px quando necessário.
- Campos com rótulo persistente, altura mínima de 44 px, contorno visível e erro descrito em texto.
- Concluído · POSITIVE · Confirmação em grafite, com símbolo de verificação e mensagem.
- Em análise · INTERMEDIATE · Atenção em rosa claro, com símbolo e descrição da próxima etapa.
- Não foi possível concluir · NEGATIVE · Erro em vermelho profundo, com instrução objetiva de correção.
FULL
Clareza, contraste e presença.
Uma identidade de alto contraste, lettering próprio e comunicação direta. Vermelho, preto e espaço livre dão intensidade com clareza.
Blocos de conteúdo com título claro, separadores discretos e 24 px de respiro; borda de 1 px e raio de 4 px quando necessário.
Ordem de produção
- Definir hierarquia e áreas seguras antes de desenhar componentes.
- Alinhar títulos, textos e ações por uma borda comum.
- Usar grandes áreas lisas e pouca decoração.
- Recompor a ordem e a distribuição para cada formato.
- Preservar o logo como imagem; fontes de apoio não reproduzem o lettering.
07 · Diretrizes
Linguagem visual
Ícones, fotografia, ilustração e movimento pertencem ao mesmo sistema.
Iconografia
- Usar formas simples e consistentes, com traço de 2 px e caixa de 24 px.
- Ícones funcionais acompanham texto sempre que o significado não for universal.
- O F é um ativo de marca, separado da iconografia funcional.
Fotografia
- Usar fotografia apenas quando houver assunto real e autorização de uso.
- Preservar tons naturais e detalhes relevantes; escolher enquadramento com área livre para texto.
- Não aplicar imagem sobre o logo nem usar bancos de imagem como prova de resultados.
Ilustração
- Preferir diagramas simples para explicar relações e etapas.
- Empregar preto, branco e vermelho; evitar efeitos tridimensionais e texturas sem função.
Movimento
- Transições funcionais entre 120 e 200 ms, com deslocamento curto.
- Manter o logo imóvel e preservar sua geometria.
- Respeitar prefers-reduced-motion e oferecer leitura sem animação.
Um único foco
Imagem, fundo e ornamentos sustentam a mensagem. Nenhum deles pode competir com texto, logo ou ação.
08 · Diretrizes
Pontos de contato
Testes reais verificam se o sistema funciona fora do manual.
O que precisa ser reconhecido primeiro?
Qual informação sustenta a mensagem?
O conteúdo permanece legível no formato final?
O logo e a ação sobrevivem ao recorte?
Reconhecer o F sem usar a assinatura completa. Perder a lateral contínua ou cortar a diagonal no círculo. ICON PASS
Demonstrar marca, título e ação em uma leitura curta. Logo, título e ação competirem pelo mesmo peso. PRIMARY PASS
Identificar um documento de diretrizes sem perder legibilidade. Texto e assinatura invadirem as áreas seguras. MONO_LIGHT PASS
Critério
Os testes validam decisões. Não são mockups decorativos e devem usar dimensões, recortes e conteúdo plausíveis.
09 · Diretrizes
Web, interface e social
Aplicações comerciais e informativas com hierarquia, contraste e adaptação.
Web e interface
- Priorizar fundo preto, texto branco e uma ação vermelha por bloco.
- Títulos em Sora 700; corpo em Inter 400 a partir de 16 px.
- Reduzir colunas no mobile sem reduzir a escala do texto abaixo do mínimo.
Anúncios e social
- Peça vertical: 1080 × 1350 px, margem segura de 72 px e título curto.
- Texto de demonstração: Identidade FULL. Ação: Conheça o FULL.
- Recompor para 1080 × 1080 e 1080 × 1920 px, respeitando as áreas ocupadas pela plataforma.
FULL
Clareza, contraste e presença.
Uma identidade de alto contraste, lettering próprio e comunicação direta. Vermelho, preto e espaço livre dão intensidade com clareza.
Blocos de conteúdo com título claro, separadores discretos e 24 px de respiro; borda de 1 px e raio de 4 px quando necessário.
Recomposição
Uma peça quadrada, vertical e horizontal compartilha o sistema, mas não a mesma distribuição. Reorganize a composição para cada formato.
10 · Diretrizes
Formatos pequenos e editoriais
Avatar, Open Graph, documentos e impressão protegem reconhecimento e leitura.
Avatar e quadrados
- Aplicar o F centralizado, com largura de 68% do quadro e superfície lisa.
- Manter a área visível inteira no recorte circular.
- Exportar 512, 180, 128, 48, 32 e 16 px sem inventar detalhes adicionais.
Open Graph
- Usar formato de 1200 × 630 px com margem segura de 64 px.
- Título curto e uma assinatura; testar a miniatura sem cortar informação essencial.
Apresentações e documentos
- Capa de documento: assinatura branca em preto, título Diretrizes de identidade e data discreta.
- Manter títulos, corpo e legendas na mesma hierarquia do sistema.
- Usar páginas de conteúdo claras ou escuras conforme a condição de leitura.
Materiais impressos
- Usar o master raster sem ampliação acima da resolução indicada.
- Preparar conversão CMYK e prova de cor com o fornecedor; HEX é referência de tela.
- Papelaria, sinalização e impressão especial exigem composição e prova no suporte final.
Ícone funcional
Use o ICON oficial ou a derivação formal documentada. Ele deve permanecer reconhecível de 512 a 16 px e nunca ser um recorte arbitrário do wordmark.
11 · Diretrizes
Adaptação e acessibilidade
O sistema precisa sobreviver a dimensões, recortes e condições reais de leitura.
Adaptação entre formatos
- Desktop: testar 1366 px e 1440 px sem overflow horizontal.
- Mobile: testar 360 px e 390 px, leitura contínua e áreas de toque de 44 px.
- Trocar a assinatura completa pelo F abaixo de 120 px de largura disponível.
- No formato vertical, distribuir mensagem e ação em zonas separadas.
- No recorte circular, preservar a silhueta completa do F.
- Em impressão, confirmar dimensões físicas e resolução efetiva do PNG.
Acessibilidade
- Garantir contraste mínimo de 4,5:1 para texto comum e 3:1 para texto grande.
- Estados combinam cor, símbolo e texto; nunca dependem apenas de cor.
- Usar foco de teclado visível: anel branco ou preto de 2 px com afastamento de 3 px, conforme a superfície.
- Manter corpo a partir de 16 px e entrelinha entre 1,45 e 1,6.
- Fornecer texto alternativo funcional para imagens; ornamentos não recebem descrição redundante.
- Respeitar preferência por movimento reduzido e ordem semântica de leitura.
Aceite
Não basta funcionar tecnicamente. Se o resultado ainda parecer improvisado, simplifique e reconstrua antes da entrega.
12 · Diretrizes
Ativos e entrega
Arquivos claros, rastreáveis e disponíveis em formato editável e exportado.
brand-kit.htmlConsulta rápida da identidade em desktop e mobile.
design-guidelines.txtReferência completa para agentes e produção.
design-guidelines.htmlLeitura visual do mesmo sistema para o gestor.
13 · Diretrizes
Checklist de qualidade
Oito eixos confirmam que a identidade está pronta para uso.