Modelo de manual de marca para sites: as regras da web que o PDF do logo deixa de fora

Um modelo de manual de marca escrito para sites, não para impressos: uso do logo em fundos claros e escuros, uma tabela de cores com pares de contraste aprovados, uma escala tipográfica, estados de botões e links, regras de imagens e de tom de voz e um checklist de aprovação para quem monta uma página.

A maioria dos manuais de marca foi feita para um designer diagramar um folheto. Eles mostram o logo sobre branco, listam as cores em CMYK e Pantone, citam uma fonte que o site não consegue carregar e não dizem nada sobre como fica um botão quando você passa o mouse por cima. Aí um desenvolvedor, um cliente ou um construtor de sites precisa adivinhar. Este modelo cobre as decisões de que um site realmente precisa, na ordem em que quem monta uma página vai precisar delas, com os números de acessibilidade já incluídos.

Quem lê um manual de marca para web

Escreva para três leitores. Um designer que vai criar novas páginas e quer o sistema. Um desenvolvedor ou construtor que precisa de valores exatos: códigos hex, nomes de fontes, tamanhos em pixels. E um editor de conteúdo, muitas vezes o dono do negócio, que vai adicionar uma página daqui a dois anos e precisa saber o que não fazer. Se uma regra não pode ser aplicada pelo terceiro leitor, ela não vai sobreviver.

Seja breve. Um resumo de uma página com os valores centrais, mais uma referência mais longa, vale mais que um documento de 60 páginas que ninguém abre. Se você precisa de um primeiro rascunho rápido dos valores, nosso gerador de guia de estilo de marca gratuito produz um; este guia trata do que entra na versão final.

1. Logo

Sites colocam logos em lugares onde o impresso nunca coloca: uma aba de navegador de 32 pixels, um cabeçalho em modo escuro, um menu mobile, uma assinatura de e-mail. Especifique:

Arquivo	Uso	Formato
Logo principal, para fundos claros	Cabeçalho, rodapé em temas claros	SVG, mais PNG em 2x
Logo para fundos escuros	Cabeçalho escuro, modo escuro, rodapé escuro	SVG, mais PNG em 2x
Símbolo compacto (só o símbolo)	Cabeçalho mobile, ícones de app, avatares de redes sociais	SVG, PNG quadrado
Favicon	Aba do navegador e favoritos	Símbolo simplificado que continua reconhecível em 16-32px

Depois, as regras: largura mínima de exibição (por exemplo, "nunca menos de 96px para o logo completo; abaixo disso, use o símbolo"), área de respiro ao redor, os fundos sobre os quais ele pode ficar e dois ou três exemplos de uso incorreto (esticado, com outra cor, sobre uma foto carregada). Sempre forneça uma versão escura como arquivo separado; pedir para alguém "inverter" produz um logo diferente a cada vez.

2. Cores, com o contraste já verificado

A falha de acessibilidade mais comum em sites com marca é uma cor da marca que não sustenta texto. O requisito de contraste da WCAG (critério de sucesso 1.4.3) pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande, que o W3C define como pelo menos 18 pontos, ou 14 pontos em negrito, cerca de 24px ou 18.5px. O W3C observa que os valores não devem ser arredondados: 4.499:1 reprova. Botões, bordas de formulários e ícones que as pessoas precisam ver têm um requisito próprio de 3:1 em relação às cores vizinhas (1.4.11).

Por isso, não liste as cores isoladas. Liste-as com as combinações permitidas:

Nome	Hex	Função	Texto permitido sobre ela	Não permitido
Forest	#1F5130	Botões principais, títulos	Texto branco, qualquer tamanho	Texto preto
Sage	#8DB596	Fundos, ilustrações	Texto escuro (#1A1A1A)	Texto branco em qualquer tamanho
Ember	#E4572E	Destaques, texto grande de exibição	Verifique por tamanho; muitas vezes só texto grande	Texto corrido, links sobre branco
Ink	#1A1A1A	Texto corrido	Sobre branco, Paper, Sage	Sobre Forest
Paper	#FAF7F2	Fundo da página	Ink, Forest	Texto em Sage

Os valores hex acima são um exemplo; meça os seus pares com qualquer verificador de contraste e anote a proporção ao lado de cada par permitido. Defina também as cores pela função, não só pelo nome: "ação principal", "link", "erro", "sucesso", "borda". Isso permite que um desenvolvedor monte um tema, e um modo escuro, sem adivinhar.

3. Tipografia

Fontes de impresso muitas vezes não são licenciadas para a web, ou são pesadas demais para carregar rápido. Defina:

Fontes web: os nomes exatos das famílias e os pesos que você vai carregar. Duas famílias e três ou quatro pesos são suficientes; cada arquivo extra deixa a primeira exibição mais lenta.
Fontes de reserva: as fontes do sistema usadas enquanto a fonte web carrega ou se ela falhar.
Uma escala tipográfica: tamanhos para cada nível, em desktop e mobile.

Nível	Desktop	Mobile	Peso	Altura de linha
H1	48px	34px	700	1.1
H2	34px	26px	700	1.2
H3	24px	20px	600	1.3
Corpo	18px	17px	400	1.6
Pequeno	15px	14px	400	1.5

Inclua as regras que as pessoas quebram: nada de texto corrido todo em maiúsculas, nada de texto justificado, linhas com cerca de 60-80 caracteres, links sublinhados no texto corrido para não depender só da cor.

4. Botões, links e estados

Esta é a seção que manuais de impresso nunca têm e de que os sites sempre precisam. Para cada tipo de botão, especifique todos os estados:

Elemento	Padrão	Hover	Foco do teclado	Desativado
Botão principal	Preenchimento Forest, texto branco, raio de 999px	Forest mais escuro	Contorno visível de 2px com afastamento de 2px	Preenchimento cinza, texto ainda legível, não clicável
Botão secundário	Contorno Forest, texto Forest	Preenchimento Sage claro	Mesma regra de contorno	Contorno cinza
Link de texto	Forest, sublinhado	Sublinhado mais grosso	Contorno	-

Nunca remova o contorno de foco por motivos estéticos; quem usa o teclado depende dele. Informe o raio dos cantos, o espaçamento interno e se os botões usam só a primeira letra maiúscula. Um botão principal por tela é uma boa regra para deixar por escrito.

5. Layout e espaçamento

Defina uma escala de espaçamento (por exemplo 4, 8, 12, 16, 24, 32, 48, 64, 96px) e diga que todos os espaços saem dela. Informe a largura máxima do conteúdo, a margem lateral no mobile e quantas colunas o grid usa em cada largura. São essas regras que fazem páginas montadas com meses de diferença, por pessoas diferentes, parecerem um só site.

6. Imagens e ícones

Fotografia: pessoas e lugares reais em vez de banco de imagens; descreva iluminação e clima com dois bons e dois maus exemplos.
Recorte: quais proporções você usa (por exemplo 16:9 para heroes, 4:3 para cards, 1:1 para fotos da equipe).
Texto alternativo: uma regra para escrevê-lo: descreva o que a imagem mostra e por que ela está ali; alt vazio para imagens puramente decorativas.
Ícones: um conjunto de ícones, uma espessura de traço, uma escala de tamanhos. Estilos de ícones misturados são o jeito mais rápido de um site parecer montado às pressas.

7. Tom de voz e palavras

Tom de voz na web é, acima de tudo, clareza. Anote três ou quatro traços de voz com um exemplo de "assim, não assado" para cada um, depois as microrregras: como você escreve datas, preços, telefones, o nome da empresa, as palavras que evita e o que os botões dizem ("Agende uma visita", não "Enviar"). Inclua mensagens de erro e estados vazios; eles também são marca.

8. E-mails e logins

Os visitantes encontram a sua marca fora do site: e-mails de confirmação, redefinições de senha, uma página de login de um portal de clientes. Diga qual logo, quais cores e qual nome de remetente eles usam, e quem é responsável por eles. Um e-mail de redefinição de senha fora da marca parece phishing.

Checklist de aprovação para qualquer página nova

O logo é a versão certa para o fundo e está acima do tamanho mínimo.
Todo par de texto e fundo está na lista de permitidos, ou foi medido em 4.5:1 (3:1 para texto grande).
Só as fontes e os pesos especificados são usados; os tamanhos saem da escala.
Os botões mostram hover e foco de teclado visível.
O espaçamento usa a escala; a largura do conteúdo respeita o máximo.
As imagens seguem as regras de recorte e de texto alternativo; os ícones vêm do conjunto único.
O texto segue o tom de voz e as microrregras.

Aplicando o manual em muitos sites

Agências e organizações com muitos sites têm um problema mais difícil: um manual aplicado uma vez vai se desviando à medida que pessoas diferentes editam. Colocar os valores centrais na plataforma, e não num PDF, é o que os mantém. Na plataforma white-label do We.Inc, uma marca é configurada uma vez com nome, logos claro e escuro, favicon, cores da marca, uma fonte do Google e estilo de botão, e isso segue para o login do cliente, o painel e os e-mails. Nossas páginas de marca personalizada e de governança de marca vão além.

Logos claro e escuro separados, mais um favicon, como na seção 1 do modelo, com imagens de fundo opcionais para os modos claro e escuro.

Cores principal, de destaque e secundária como valores hex, mais a fonte do Google da marca. Verifique você mesmo o contraste de cada combinação de texto; a plataforma não o certifica.

Cores e arredondamento dos cantos dos botões principal e secundário, os valores do estado padrão da seção 4.

A marca levada até o login do cliente, o tema da seção 8.

Os e-mails do sistema usam o logo e as cores da marca, com prévia antes do envio.

Para ver uma marca configurada de ponta a ponta numa demonstração, agende uma demonstração.

Fontes

Última verificação em 2026-10-25.

Perguntas frequentes

O que um manual de marca para sites deve incluir?

Versões do logo para fundos claros e escuros mais um favicon, cores com as combinações de texto permitidas, fontes web e uma escala tipográfica, estados de botões e links, espaçamento, regras de imagens e ícones, regras de tom de voz e microtexto, e a aparência de e-mails e logins.

Qual contraste as cores da marca precisam ter para texto?

A WCAG 1.4.3 pede pelo menos 4.5:1 para texto normal e 3:1 para texto grande (18 pontos, ou 14 pontos em negrito). Os valores não são arredondados, então 4.499:1 reprova.

Em que um guia de estilo web difere de um manual de marca para impresso?

Ele acrescenta o que o impresso nunca precisa: logos para fundo escuro e favicons, combinações de cores verificadas quanto ao contraste, fontes web carregáveis com reservas, tamanhos de texto responsivos e estados interativos como hover e foco do teclado.

Como as agências mantêm muitos sites de clientes dentro da marca?

Colocando os valores centrais na plataforma, e não num PDF. Na plataforma white-label do We.Inc, logos, cores, uma fonte e o estilo dos botões são definidos uma vez por marca e seguem para o login do cliente, o painel e os e-mails.