Identidade visual para empresa e site: a ordem certa e o que um precisa entregar ao outro

A ordem certa é marca antes do site, com o site já no briefing da marca. A identidade entrega ao site cores com contraste acessível, fontes com licença para web, o logo em SVG e versões reduzidas, e regras de uso. O site devolve à marca o teste real: tela pequena, fundo escuro, botão, favicon.

Em que ordem fazer: identidade visual antes ou depois do site?

Faça a identidade visual antes do site, mas escreva o briefing dos dois ao mesmo tempo. O site é o lugar onde a marca mais aparece e o que mais exige dela: texto pequeno sobre cor, botão com estado de foco, logo pequeno no menu do celular, imagem de compartilhamento no WhatsApp. Uma marca criada sem pensar nisso chega ao site precisando de ajustes que ninguém orçou.

O motivo para a marca vir primeiro é simples: o site é uma aplicação da marca, não o contrário. Cores, tipografia, tom de voz e sistema de formas são decisões de marca; o layout do site as usa. Quando o site nasce antes, o designer de interface inventa uma paleta e uma tipografia provisórias, e a marca que vem depois ou se adapta ao site ou obriga a refazer o site. Nos dois casos, alguém paga duas vezes.

O erro oposto também existe: fechar o manual inteiro e só depois chamar quem faz o site. Aí o manual chega com uma cor que não passa no contraste, uma fonte licenciada só para desktop e um logo horizontal que não cabe no celular. O site não quebra a marca; ele revela o que faltou.

Quando o orçamento permite, nós recomendamos a produção em paralelo com uma pessoa coordenando: a marca fecha o sistema visual, o site começa estrutura e texto enquanto o manual é finalizado, e os dois se encontram no design system. Isso só funciona com um briefing comum, como o das perguntas do briefing de site.

O que o manual de marca precisa entregar para o site funcionar?

O manual precisa entregar cinco coisas em formato utilizável: cores com contraste verificado, fontes com licença para web, o logo em vetor com versões, as imagens de identidade do site e as regras de uso. Um PDF bonito com o logo em JPG não é manual; é apresentação.

Fontes: W3C, WCAG 2.2, Google Search Central, favicon, Google Search Central, logo, Meta for Developers, OFL FAQ, Dalton Maag, Design Tokens Community Group, consultadas em outubro de 2026.

As versões do logo são o item mais esquecido. O logo horizontal da fachada não cabe no menu do celular; é preciso uma versão reduzida (só o símbolo ou a sigla), uma versão em uma cor e uma versão clara para fundo escuro. Pela documentação de logo do Google, a imagem informada nos dados estruturados precisa ter no mínimo 112x112 px e ficar legível sobre fundo totalmente branco, porque é ela que pode aparecer nos resultados e no painel de conhecimento.

O favicon segue regra parecida. A documentação de favicon do Google pede imagem quadrada, de no mínimo 8x8 px, e recomenda maior que 48x48 px, que represente a marca; um logo com texto fino vira uma mancha nesse tamanho. E a imagem que aparece quando alguém compartilha o site no WhatsApp ou no Facebook tem especificação própria: a documentação da Meta recomenda pelo menos 1200x630 px, proporção próxima de 1,91:1 e arquivo de até 8 MB.

Os tokens fecham a entrega. Em vez de uma página do PDF com os códigos das cores, o manual entrega um arquivo que o desenvolvedor lê direto. O Design Tokens Format Module, do grupo comunitário da W3C, define token como um par nome e valor, em JSON; ainda é rascunho, não padrão, mas já é o formato que ferramentas de design e código usam para conversar.

Por que o contraste das cores decide se a marca serve para a tela?

Porque uma cor de marca que não passa no contraste não pode ser usada em texto nem em botão, e isso tira dela justamente os lugares onde o site mais a mostraria. A WCAG 2.2, Recomendação da W3C desde 12 de dezembro de 2024, exige no critério 1.4.3 contraste mínimo de 4,5:1 entre texto e fundo, ou 3:1 para texto grande (a partir de 18 pontos, ou 14 pontos em negrito), e no critério 1.4.11 contraste de 3:1 para componentes de interface, como a borda de um campo ou o estado de um botão.

Isso não é detalhe de acessibilidade para poucos. O WebAIM Million de 2026, que analisa 1 milhão de home pages, encontrou falhas detectáveis de WCAG 2 em 95,9% delas, com média de 56,1 erros por página, e texto com baixo contraste em 83,9%. O erro mais comum da web é exatamente o que uma paleta de marca mal testada produz.

No Brasil, a régua técnica para sites de empresas é a NBR 17225, que já tratamos em acessibilidade digital em sites de empresas; ela conversa com a WCAG e torna o contraste uma exigência, não uma preferência. Na prática, o manual precisa dizer quais pares de cor podem ser usados em texto e quais só em fundo ou detalhe. Uma paleta com um amarelo vibrante é linda em fachada e inútil em botão branco; a solução é um tom escuro de apoio para o texto, com o amarelo reservado a áreas grandes.

Quais fontes podem ir para o site, e o que a licença permite?

Só as fontes cuja licença cobre uso em site podem ir para o site, e isso é uma licença diferente da que o designer usou no computador. A página de licenciamento da Dalton Maag, uma fundição independente, separa os tipos: a licença Desktop permite instalar a fonte nos próprios dispositivos para criar documentos, apresentações e artes; a licença Web permite hospedar a fonte e ligá-la por CSS aos próprios sites, e é cobrada por impressões de página por mês; a licença App cobre fontes embutidas em produtos distribuídos. O manual precisa dizer qual dessas licenças a empresa tem.

As fontes sob a SIL Open Font License resolvem a maior parte dos casos. Pela FAQ oficial da OFL, elas podem ser usadas em trabalho comercial, inclusive em logos, sem licença adicional; o logo criado com elas pertence a quem o criou; e podem ser servidas como webfonts por @font-face. O que a OFL proíbe é vender a fonte sozinha e usar o nome reservado em versões modificadas. A maior parte do que a empresa precisa, do logo ao texto do site, cabe nessa licença.

Licença resolvida, falta a entrega técnica. O manual deve listar os pesos que o site vai usar (regular, médio, negrito) e os arquivos em formato para web, porque cada peso é um arquivo que o visitante baixa. Pares, escala e peso dos arquivos são assunto de tipografia para sites, mas a decisão de quais pesos existem começa no manual. Uma marca com seis pesos e duas famílias custa segundos de carregamento que a empresa não vai querer pagar.

Quando a marca já existe e ninguém sabe qual fonte é, identifique a fonte no material atual, cheque a licença e, se não houver como licenciar para web, escolha uma substituta OFL com desenho parecido. Extrair cores e fontes de um site mostra como fazer esse levantamento.

Quanto custa e quanto tempo leva uma identidade visual para empresa?

As faixas de preço são largas porque "identidade visual" vai de um logo a um sistema completo com manual e aplicações. O levantamento da Cronoshare, feito a partir dos orçamentos enviados pelos profissionais da plataforma e datado de 2 de janeiro de 2026, mostra logo de R$ 500 a R$ 10.000, manual de identidade visual de R$ 1.000 a R$ 5.000, paleta e tipografia de R$ 200 a R$ 2.000 e aplicações de R$ 300 a R$ 3.000; o preço médio nacional do projeto fica entre R$ 2.000 e R$ 20.000, e uma remodelação completa de marca pode chegar a cerca de R$ 50 mil. A própria página chama os valores de indicativos.

Para comparar, a página de preços da 99designs, plataforma de concursos de design, cobra em dólar mesmo no site brasileiro: concurso de logo a partir de US$ 249, em pacotes que vão de US$ 249 (cerca de 30 conceitos) a US$ 1.050, sem taxas extras incluídas. Concurso entrega opções de logo, não um sistema; manual, tokens e teste em tela ficam de fora, e é aí que o site costuma sofrer.

Do lado do site, os projetos de Website & Design da Brave Cross ficam na faixa de R$ 4.000 a R$ 20.000, com UI/UX, direção de arte e design system próprio. Uma empresa que precisa de marca e site do zero deve orçar as duas coisas, sem aceitar que uma saia "de brinde" na outra.

Sobre prazo, não existe pesquisa que diga quanto leva um projeto de marca; o que a Cronoshare registra é que prazos apertados podem ter custo adicional. O que dá para afirmar é a sequência: o design visual do site só começa quando o sistema da marca está fechado, e o restante segue o que mostramos em quanto tempo leva para fazer um site, onde o relógio de aprovação costuma pesar mais que o de produção.

Marca de brinde é logo sem manual. Site de brinde é template com o logo em cima. Nenhum dos dois aguenta o primeiro olhar de um cliente que compara.

Quais sinais mostram que a identidade atual não aguenta um site premium?

A identidade atual não aguenta um site premium quando ela só existe em formatos e situações de papel. Qualquer um dos sinais abaixo basta para que o site exponha a fraqueza da marca em vez de valorizá-la.

O primeiro sinal é o logo que só existe em JPG ou PNG. Sem vetor, ele não escala, não vira favicon decente e não aceita versão para fundo escuro. O segundo é a cor principal que não passa no contraste de 4,5:1 sobre branco nem sobre preto: ela fica proibida nos textos e botões, e a marca some das partes que mais importam. O terceiro é a fonte sem licença conhecida, ou licenciada só para desktop.

O quarto sinal é a ausência de versão reduzida: se o logo precisa de toda a largura para ser lido, o menu do celular vai mostrá-lo minúsculo ou cortado. O quinto é a paleta de uma cor só, sem tons de apoio, sem neutros definidos e sem regra para texto sobre foto; o site precisa de hierarquia, e uma cor não faz hierarquia. O sexto é o manual que não mostra nenhuma aplicação em tela, só cartão, fachada e uniforme.

Nada disso exige refazer a marca inteira. Um ajuste de identidade, com vetorização, pares de contraste, versão reduzida e definição de fontes, resolve a maior parte dos casos e cabe no orçamento de um projeto de site. Refazer de verdade só faz sentido quando o problema é de posicionamento, não de arquivo. Os sinais de que o site em si precisa mudar são outros, e estão em 7 sinais de que seu site precisa de redesign.

A primeira impressão é rápida, como mostram os estudos revisados em design vende?, e uma marca que chega torta a esse momento não é corrigida por um site bom; é ampliada por ele.

Perguntas frequentes

Posso fazer o site antes da identidade visual?

Pode, mas vai pagar duas vezes. O site vai precisar de cores, fontes e logo provisórios, e a marca que vier depois ou se adapta a eles ou obriga a refazer o site. O caminho que evita isso é fechar o sistema visual da marca (logo, paleta, tipografia) antes do design do site, mesmo que o manual completo seja finalizado em paralelo.

Preciso de um manual de marca completo para fazer o site?

Não precisa do manual completo; precisa das entregas digitais: logo em SVG com versões, pares de cor com contraste verificado, fontes com licença web e os pesos definidos. Isso cabe em poucas páginas ou num arquivo de tokens. Aplicações de papel, sinalização e uniforme podem vir depois, sem atrasar o site.

O designer da marca e o de site precisam ser a mesma empresa?

Não, mas precisam trabalhar com o mesmo briefing e se falar antes de fechar cores e fontes. Peça ao designer de marca a tabela de contraste, o SVG e as licenças. Nós fazemos site e, quando a marca não existe, montamos o sistema visual junto; se a empresa só precisa de um logo para cartão e Instagram, um designer de marca basta.

Posso usar fontes do Google Fonts na identidade visual e no site?

Pode, desde que a fonte esteja sob a SIL Open Font License, que cobre uso comercial, logo e webfont sem licença adicional. Confira a licença de cada família na página da fonte antes de usar. A OFL proíbe vender a fonte sozinha e usar o nome reservado em versões modificadas, o que não afeta o uso normal em marca e site.

Quanto tempo leva para fazer identidade visual e site juntos?

Depende do escopo e, sobretudo, do tempo de aprovação do cliente; não há pesquisa com prazo médio. A sequência que não muda é esta: briefing comum, sistema visual fechado, design do site a partir dele, manual finalizado em paralelo. Prazo apertado existe, mas as páginas de orçamento registram que ele costuma custar mais.

Conclusão

Identidade visual e site são o mesmo projeto visto de dois lados: a marca decide, o site aplica e testa. A ordem é marca primeiro, com o site no briefing desde o início, porque é a tela que mais exige da marca.

O que o manual entrega ao site é concreto: pares de cor com contraste medido, fontes com licença para web, logo em vetor com versões, favicon e imagem de compartilhamento, tokens que o desenvolvedor lê. O que o site devolve à marca é a prova de que ela funciona onde o cliente a vê.

Se a sua empresa precisa de marca e site, fale com a Brave Cross e comece pelo briefing comum