ACHEI ESSA
PROMO 🔥
PROMO 🔥
Arrasta pra cima
● Identidade Visual · Perfis Instagram
Brand
Brand
Book.
O manual do nosso rosto na internet. Como construir avatares que param o feed: bandeira do Brasil, contorno branco e a cara de quem acabou de ver a promoção.
Role para começar
01 / CONCEITO
A grande ideia
Um avatar reconhecível em 0,3 segundo. Quatro ingredientes fixos criam uma assinatura visual que funciona em qualquer página, em qualquer idioma.
Bandeira do Brasil
Verde + losango amarelo. Brasilidade instantânea e cor que salta na timeline.
Rosto recortado
Pessoa real, recorte limpo com contorno branco — efeito figurinha que destaca do fundo.
Cara de surpresa
Olhos arregalados, sobrancelhas pra cima. A reação que comunica "olha isso!".
Quadrado 1:1
Formato perfeito pra foto de perfil. Sujeito sempre centralizado e enquadrado do ombro pra cima.
02 / O FUNDO
Construindo
a bandeira
O fundo nunca muda. Campo verde, losango amarelo girado a 45° e centralizado. O rosto entra exatamente onde ficaria o círculo azul — o protagonista ocupa o lugar do céu.
VERDE #008325
LOSANGO #FFC700 · 45°
- CampoVerde sólido #008325Ocupa 100% da arte como base.
- LosangoAmarelo #FFC700, girado 45°Centralizado; pontas laterais quase tocando as bordas.
- CantosQuatro triângulos verdesSempre visíveis — não deixe o amarelo invadir os cantos.
- CentroReservado ao rostoOnde seria o círculo azul da bandeira.
03 / CORES
Paleta
Duas cores mandam: verde e amarelo. Branco e tinta seguram o contraste. Clique em qualquer cor para copiar o código.
Verde Brasil
Primária · fundo
#008325 copiar
Amarelo Ouro
Primária · losango
#FFC700 copiar
Branco Contorno
Recorte do rosto
#FFFFFF copiar
Tinta
Texto · contraste
#101014 copiar
Azul Bandeira
Apoio · detalhes
#002776 copiar
Ciano Vibe
Acento opcional
#11C6C8 copiar
A cor da roupa é livre (ciano, preto, o que for) — desde que contraste com o fundo. O que não muda é o verde do campo e o amarelo do losango.
04 / O AVATAR
Anatomia
da foto
A fórmula passo a passo. Repita isso e qualquer pessoa vira um avatar da marca.
enquadramento ombro→topo
contorno branco
olhar pra câmera
rosto sobre o losango
Recorte a pessoa
Foto bem iluminada, fundo removido. Sem sombra dura e sem cortar o topo da cabeça.
Aplique o contorno branco
Stroke branco contínuo de ~12–16px (numa arte 1080px) em volta de todo o recorte.
Monte sobre a bandeira
Centralize o rosto no losango. Cabeça e ombros preenchem boa parte do quadro.
Cara de surpresa
Olhos bem abertos, sobrancelhas erguidas, olhando para a câmera. Energia alta.
Exporte 1080×1080
PNG/JPG quadrado. Confira como fica dentro do círculo do perfil.
05 / EXPRESSÃO
A cara certa
A expressão é metade da marca. Surpresa e bom humor sempre — seriedade e pose nunca.
Faça
Surpresa genuína
- Olhos arregalados, sobrancelhas pra cima
- Reação espontânea, como se algo incrível tivesse aparecido
- Olhando direto pra câmera
- Iluminação clara, sorriso ou boca aberta
Evite
Pose séria / corporativa
- Rosto neutro, sério ou "foto 3x4"
- Olhando para o lado / longe da câmera
- Foto escura, desfocada ou de baixa resolução
- Fundo diferente da bandeira ou sem contorno branco
06 / TIPOGRAFIA
Letras
Para chamadas em posts e stories: títulos em fonte pesada e condensada, texto de apoio numa grotesca limpa.
Títulos · Impacto
Anton / Archivo Black
OLHA
ISSO!
ISSO!
ABCDEFGHIJKLM 0123456789
Texto · Apoio
Archivo
Promoção
imperdível
imperdível
Regular
SemiBold
ExtraBold
Black
abcdefghijklmnop 0123456789
07 / APLICAÇÕES
Na prática
Como o sistema vive no perfil, no feed e nos stories. Mesma fórmula, sempre reconhecível.
Perfil
248kseguidores
1.2kposts
@barone
🇧🇷 As melhores promoções do Brasil🔥 Achados todo dia · link na bio 👇
OFERTA
DO DIA
DO DIA
-50%
CUPOM
Story
08 / TÉCNICO
Especificações
Os números que mantêm tudo nítido e padronizado na hora de exportar.
1:1
Proporção
Sempre quadrado para foto de perfil
1080px
Exportação
1080×1080 px · PNG ou JPG de alta qualidade
~14px
Contorno
Stroke branco proporcional (≈1,3% da largura)
320px
Mínimo visível
Teste a leitura dentro do círculo pequeno
09 / ASSETS
Downloads
Tudo pronto para usar: os avatares para os perfis e a identidade visual em código, para construir páginas web e outras criações.
Imagens
avatar-01.jpg
avatar-02.jpg
Identidade para desenvolvimentoweb · apps · materiais
barone.css
{ }
barone-tokens.json
</>
Variáveis CSS