Manual de Identidade
v1.0 · AGO 2026
Clique em qualquer cor
para copiar o hex
Clique em qualquer cor
para copiar o hex
Manual de Identidade
Manual de Identidade Visual · v1.0
Este documento é a fonte única de verdade da identidade da ads.inside. Serve para a equipe interna, para PJs de social media e para qualquer designer ou desenvolvedor que produza algo com o nosso nome.
O que a marca comunica antes de qualquer pessoa ler uma palavra.
O monograma in é atravessado por uma seta ascendente. A leitura é direta: o crescimento vem de dentro do negócio do cliente — a agência não é um fornecedor externo, é a estrutura que empurra a curva para cima.
O ponto solto acima do "i" é o único elemento que não toca a estrutura. Ele é o acento de cor da marca e o ponto de partida de toda a paleta.
| Atributo | Como isso aparece no visual |
|---|---|
| Transparência | Layouts limpos, dados legíveis, nada de gradiente decorativo escondendo informação. Se é número, tem que dar para ler. |
| Parceria estratégica | Tom sóbrio e adulto. Cinza escuro como base, verde só onde precisa apontar. Não somos uma marca "gritada". |
| Excelência técnica | Consistência obsessiva: mesmo verde, mesma fonte, mesmo espaçamento em toda peça. Descuido visual sugere descuido na campanha. |
| Premium acessível | Preto profundo + off-white + um único acento. O que faz parecer caro é a restrição, não o excesso. |
Regra que resume tudo: uma cor de acento, duas fontes, muito espaço em branco. Toda vez que uma peça parecer "poluída", o problema quase sempre é uma terceira cor que entrou sem permissão.
Duas assinaturas, três fundos. Nada além disso.
Uso padrão em apresentações, propostas, contratos, site, rodapés e assinatura de e-mail. Sempre que houver largura disponível, é esta a versão.
Atenção: sobre fundo verde use a versão 100% branca, nunca a versão branca com o ponto verde — o ponto some no fundo e o logo fica com um buraco.
Só onde a assinatura horizontal não cabe: avatar de rede social, foto de grupo do WhatsApp, favicon, selo em criativo, carimbo em relatório.
Formato quadrado ou vertical: não existe versão empilhada da assinatura. Quando o espaço não comporta o logo horizontal, a solução oficial é usar o símbolo sozinho. Não empilhe o símbolo com a palavra por conta própria.
Sem verde. Para impressão em uma cor, carimbo, gravação em brinde, documento enviado por fax ou digitalizado, e qualquer fundo que brigue com a cor da marca.
A margem mínima ao redor do logo é a altura do ponto verde do "i" (chamamos de X). Nenhum texto, imagem, borda ou botão pode invadir essa área. A medida vem do próprio logo, então funciona em qualquer tamanho.
| Aplicação | Digital | Impresso |
|---|---|---|
| Assinatura horizontal | 120 px de largura | 25 mm de largura |
| Símbolo | 32 px de largura | 10 mm de largura |
Abaixo disso a seta some e o logo vira uma mancha. Se o espaço for menor que o mínimo do símbolo, é melhor não aplicar logo nenhum.
Este é o conjunto completo. Se um arquivo não está nesta lista, ele não é oficial e não deve ser usado.
| Arquivo | Cores | Uso |
|---|---|---|
| Assinatura cinza | #4D4D4D #2ABFA9 | Padrão em fundo claro |
| Assinatura branca | #F9F9F9 #2ABFA9 | Fundo escuro ou foto escurecida |
| Assinatura 100% branca | #FFFFFF | Fundo verde e monocromático claro |
| Assinatura 100% preta | #000000 | Impressão em uma cor |
| Símbolo cinza | #4D4D4D #2ABFA9 | Espaço reduzido, fundo claro |
| Símbolo branco | #F9F9F9 #2ABFA9 | Espaço reduzido, fundo escuro |
| Símbolo 100% branco / preto | #FFFFFF / #000000 | Monocromático, favicon, carimbo |
| Avatar 1080×1080 | #0D0D0D #F9F9F9 #2ABFA9 | Perfil em WhatsApp, Instagram, GMN, Slack |
| Formato | Quando usar |
|---|---|
| SVG | Padrão para tudo que é digital. Vetor — nítido em qualquer tamanho, de favicon a banner de fachada. Site, landing page, e-mail, sistema interno. É o arquivo que você manda para desenvolvedor e para gráfica. |
| PNG | Quando a ferramenta não aceita SVG — algumas redes sociais, Canva no plano gratuito, upload de avatar. Sempre exportado a partir do SVG, nunca ampliado de outro PNG. |
| AI | Arquivo-mestre de edição, só para quem for alterar o desenho. Está em CMYK — foi montado para impressão. Se exportar direto dele para tela, o verde sai deslocado (dá #41B6A5 em vez de #2ABFA9). Para uso digital, use sempre os SVGs desta biblioteca, que já estão nos hexes corretos. |
Duas cores de marca, dois neutros e escalas completas para telas, dashboards e sistemas. Clique em qualquer amostra para copiar o hex.
Para estados de interface, fundos suaves, hover de botão e séries de gráfico. O 500 é a cor da marca.
Toda a estrutura de texto, bordas, fundos e divisórias sai daqui. O 700 é a cor da marca.
Existem para sinalizar estado — sucesso, alerta, erro, informação. Nunca use em peça de marca ou criativo de anúncio. A cor Elite é a única exceção estética: identifica o plano premium.
#2ABFA9 como texto sobre fundo branco. O contraste é de 2,3:1 — abaixo do mínimo de 4,5:1. Fica ilegível em tela de celular e em impressão. É o erro mais comum com esta paleta.
#186F62 (verde 700) como texto sobre fundo branco. Contraste 6,0:1. É o verde que você usa em link, título colorido e destaque de texto em fundo claro.
#2ABFA9 sobre #0D0D0D. Contraste 8,4:1. Em fundo preto o verde da marca brilha e funciona até em texto pequeno.
#2ABFA9 como preenchimento — botão, tarja, ícone, barra de gráfico, ponto de destaque. Aí ele é área de cor, não texto, e a regra de contraste que vale é a do texto em cima dele (use #0D0D0D).
Texto branco sobre #2ABFA9. Contraste 2,3:1. Em botão verde, o texto é preto — não branco. Vale a pena repetir isso para quem faz criativo.
Numa peça bem feita, o verde ocupa pouco espaço. Ele é o marcador de texto, não a folha inteira.
Três fontes, três funções. Todas gratuitas e disponíveis no Google Fonts e no Canva — ninguém fica travado por licença.
ads.inside
Atraímos clientes para o seu negócio todos os dias.
CPA R$ 42,80 · ROAS 4,1x
| Nível | Tamanho | Peso | Onde usar |
|---|---|---|---|
| Display | 44–58 px | Poppins 200 | Capa de proposta, hero de landing page |
| Título 1 | 30–36 px | Poppins 600 | Abertura de seção, título de slide |
| Título 2 | 22–24 px | Poppins 600 | Subseção, título de card |
| Título 3 | 13 px caixa alta | Poppins 600 | Rótulo de bloco, espaçamento de 0,1em entre letras |
| Corpo | 15–16 px | Poppins 300/400 | Texto padrão, altura de linha 1,6 |
| Apoio | 13 px | Poppins 400 | Legenda, nota de rodapé, disclaimer |
| Dado | 11–13 px | JetBrains Mono | Métrica, hex, tabela numérica |
Regra prática para social media: um post carrega no máximo dois tamanhos de fonte e dois pesos. Se precisar de um terceiro para caber a mensagem, o problema é o texto, não a tipografia.
Onde colar cada coisa nas ferramentas que a agência já usa. Clique nos blocos escuros para copiar.
Em Preferências → Visual → Tema personalizado. O Slack usa quatro campos de cor. Preencha assim:
| Campo | Cor | Por quê |
|---|---|---|
| Navegação do sistema | #252525 | Cinza 900 — escuro sem virar preto absoluto. Não use #4D4D4D: como fundo de barra inteira ele fica lavado, e o cinza da marca fica reservado para texto |
| Itens selecionados | #2ABFA9 | Verde da marca no canal aberto |
| Indicação de presença | #2ABFA9 | Bolinha de online |
| Notificações | #D4544C | Selo de menção. Precisa brigar com o verde, não combinar — se ficar verde também, a menção desaparece no meio da interface |
Ajustes de acompanhamento: deixe Barras laterais mais escuras marcado; teste Gradiente da janela desmarcado, porque ele mistura o verde no fundo e costuma embaçar; e defina o modo de cor como Escuro em vez de Sistema — no modo Sistema o tema muda junto com o sistema operacional de cada pessoa e o time deixa de ficar igual.
Depois de configurar, use Compartilhar para enviar o tema ao workspace: todo mundo aplica em um clique, inclusive as PJs de social media, sem precisar colar hex na mão.
Ordem fixa das cores de série. Assim todo relatório de cliente sai com a mesma leitura visual, independente de quem montou.
Fundo do relatório: #F9F9F9. Texto: #4D4D4D. Linhas de grade: #DFDFDF. Título de cartão: #252525.
Botão principal: fundo #2ABFA9, texto #0D0D0D, hover #1F8C7C, canto arredondado 10 px. Título #252525, corpo #4D4D4D, fundo de seção alternando #F9F9F9 e #FFFFFF. Seção de destaque com fundo #0D0D0D e o verde só no CTA.
O kit contém os 8 logos em SVG (não PNG — o Canva aceita vetor e mantém a nitidez), três paletas nomeadas (Marca, Verde — escala, Cinza — escala) e Poppins como fonte de título e corpo. As cores de apoio ficam de fora do kit de propósito: são de dashboard, e se estiverem ali alguém vai usar num post. Baloo Paaji também fica de fora — é fonte de logo, não de texto.
Dentro do kit, #186F62 está nomeada como "Verde — TEXTO" e #2ABFA9 como "Verde — FUNDO/BOTÃO". A regra de contraste fica dentro da ferramenta, no momento da escolha, em vez de depender de alguém lembrar do manual.
Imagem do grupo: símbolo branco sobre #0D0D0D, 1080×1080 (na pasta MARCA do Drive dos Modelos). Serve também como avatar de Instagram, Google Meu Negócio e perfil do Slack.
Assinatura horizontal cinza com 150 px de largura. Nome em Poppins 600 #252525, cargo em Poppins 400 #4D4D4D, divisória vertical #2ABFA9 de 2 px. Sem foto, sem banner promocional, sem frase motivacional.
Só o símbolo, versão branca sobre #0D0D0D, exportado em 512, 192, 180, 32 e 16 px. Em 16 px o símbolo já perde a seta — por isso ele precisa ser gerado a partir de vetor, não de PNG ampliado.
Cole no CSS de qualquer site, sistema interno ou app feito no Lovable.