Guia de Identidade Visual · v2.0 · Maio 2026 · @anaeosdinheiros
Ana e os dinheiros
Planejando seus dinheiros
Referência completa de marca para designers e criadores de conteúdo. Sistema de cores, tipografia, componentes, personalidade visual e diretrizes de aplicação.
O sistema de cores é organizado em três territórios: verde/forest como base de profundidade, cream como superfície de respiro, e terracotta como acento de ação — usado com parcimônia.
Marca Core — as três cores âncora
Sage ★ COR PRINCIPAL
#565E48 · rgb(86,94,72)
Cor dominante da marca. Texto de corpo, fundos de cards, identidade visual. É o verde que define o universo da Ana.
Forest FUNDO PROFUNDO
#15221B · rgb(21,34,27)
Autoridade e profundidade. Fundo de seções escuras, headlines sobre fundo claro, cards de destaque máximo.
Cream FUNDO BASE
#F9F6EE · rgb(249,246,238)
Superfície primária. Nunca branco puro — o cream dá calor e acolhimento à página.
Cream / Sand Scale — superfícies primárias
0
1
2
3
4
5
sand
surface-0
#F9F6EE
Cream — fundo de página
surface-1
#F2EDE3
Card sobre fundo cream
surface-2
#F0EBE0
Card ligeiramente mais escuro
surface-3
#EDE5D8
Bloco com tom
surface-4
#E8DFD0
Fundo areia-tinted
surface-5 / putty
#DDCEB9
Areia quente, destaque neutro
Sand
#D1D0A9
Acentos, divisórias, texto s/ escuro
Forest / Dark Scale — superfícies alternativas (o escuro funciona muito bem)
cream
mist
light
sage
tint2
tint1
dk2
forest
surface-dark
#15221B
Forest — bg modo escuro
surface-dark-2
#223028
Um tom acima do forest
forest-tint-1
#2E3C32
Cards sobre fundo forest
forest-tint-2
#3A4A3D
Hierarquia dentro do escuro
sage-base ★
#565E48
Cor principal da marca
sage-light
#7A8268
Sage mais suave
sage-mist
#A8B190
Tom difuso, labels sobre escuro
Terracotta — acentos de ação (usar com parcimônia, momentos de peso)
O terracotta aquece. Sienna lidera a hierarquia de acentos. Use para CTAs, destaques pontuais e momentos de ação — nunca como cor de fundo dominante.
Sienna 1º ACENTO
#A85820
Primeiro na hierarquia de destaque
Terracotta CTA
#CD7C2D
CTA primário, botões de ação
Clay
#823E21
Hover profundo, acento escuro
Mahogany
#6B3018
Tom quase-preto marrom, raro
Caramel
#C68A4F
Honey-amber, preenchimento 2°
Peach Mist
#E5B98A
Texto de apoio sobre fundo escuro
Peach Wash
#F2D9B8
Fundo muito suave, quase cream
02 — Tipografia
Tipografia
Três famílias com papéis distintos. Lora traz emoção e elegância editorial. Plus Jakarta Sans traz clareza e modernidade. Lato é a opção mais acessível para materiais de leitura prolongada e e-mails.
Lora
Serif — Display, títulos, citações, emoção
Aa Bb Cc
"Clareza com calor."
Regular 400Medium 500Bold 700Italic
Plus Jakarta Sans
Sans — UI, corpo, labels, navegação
Aa Bb Cc
Estrutura com sensibilidade.
Light 300Regular 400Semi 600Bold 700Extra 800
Lato
Sans alternativo — materiais educativos, e-mail, leitura longa
Aa Bb Cc
Legível, claro, humano.
Light 300Regular 400Bold 700Black 900
E-mail — Fallbacks seguros (Gmail)
Para e-mails HTML, use apenas fontes nativas para garantir renderização.
TÍTULOS
Georgia para títulos
Georgia, serif — nativa, elegante no Gmail
CORPO
Verdana para corpo de texto em e-mails.
Verdana, sans-serif — estabilidade total
Escala Tipográfica — exemplos renderizados
Clareza financeira.
Display · Lora 500 64px · lh 1.05 Hero / capa
Planejando seus dinheiros.
H1 · Lora 500 46px · lh 1.08 Título principal
Você não precisa escolher.
H2 · Lora 500 34px · lh 1.15 Títulos de seção
Orçamento Realista
H3 · Lora 500 26px · lh 1.2 Subtítulos
"Quero sair da casa dos meus pais, mas não sei se consigo."
Eyebrow · PJS 700 11px · ls 0.22em UPPERCASE labels
Faço planejamento financeiro comportamental para mulheres que se sentem perdidas, ansiosas ou culpadas com dinheiro.
Lead · PJS 300 18px · lh 1.7 Intro / subtítulo
Muitas vezes o problema não é a decisão. É o que falta caber na sua vida financeira hoje. Sem clareza, tudo parece arriscado demais. E aí você adia, adia, adia.
Body · PJS 400 17px · lh 1.65 Texto principal
Com Lato, o corpo também fica muito legível — ótimo para apostilas, relatórios e materiais educativos mais extensos.
Body alt · Lato 400 17px · lh 1.65 Materiais educativos
Planejando seus dinheiros · Turma 2026 · 4 meses
Caption · PJS 400 13px · fg-3 Notas, rodapés
"Tem uma decisão que você tá adiando por causa do dinheiro?"
Todos os tamanhos usam base 4px (1rem = 16px). Tokens importáveis diretamente do arquivo de design.
Token
rem
px
Fonte
Uso
Amostra
--fs-display
5.5rem
88px
Lora 500
Hero, capa — muito raramente
Aa
--fs-h1
4rem
64px
Lora 500
Título principal de página
Aa
--fs-h2
2.875rem
46px
Lora 500
Título de seção — posts e landing
Aa
--fs-h3
2.25rem
36px
Lora 500
Subtítulo — carrossel, stories
Aa
--fs-h4
1.875rem
30px
Lora Italic 400
Pull quote, card principal
Aa
--fs-h5
1.5rem
24px
Lora 500
Título de card, módulo
Aa
--fs-h6
1.25rem
20px
PJS 600
Label destaque, subtítulo sans
Aa
--fs-body-lg
1.125rem
18px
PJS 300
Lead, intro de seção
Texto
--fs-body
1.0625rem
17px
PJS 400 / Lato 400
Corpo padrão — principal
Texto
--fs-body-sm
0.9375rem
15px
PJS 400
Corpo secundário, listas
Texto
--fs-caption
0.8125rem
13px
PJS 400
Legendas, metadados, rodapé
Texto
--fs-eyebrow
0.6875rem
11px
PJS 700 · ls 0.18em
Labels UPPERCASE, eyebrows
LABEL
Line-heights
--lh-tight
1.05
Display, hero
--lh-display
1.12
H1
--lh-snug
1.25
H2–H5, cards
--lh-normal
1.45
Pull quotes, captions
--lh-relaxed
1.6
Corpo principal
--lh-loose
1.75
Corpo educativo, e-mail
Letter-spacings
--ls-tight
-0.02em
Display grandes
--ls-display
-0.01em
H1, H2
--ls-normal
0
Corpo, demais textos
--ls-caps
0.06em
Caps leves, H6
--ls-eyebrow
0.18em
Labels UPPERCASE
03 — Logo e Assets
Logo e Variações
Identidade visual baseada em tipografia — wordmark com Lora como elemento central. Abaixo, os padrões de uso por fundo e os grafismos ornamentais da marca.
Logo — versões sobre diferentes fundos
Fundo Forest — principal
Ana e os dinheiros
Fundo Cream — versão clara
Ana e os dinheiros
Variações completas de logo
Cada arquivo já inclui o fundo correto — exibidos como-são, sem sobreposição de cor.
Forest
Cream
Variação 3
Variação 4
Variação 5
Variação 6
Grafismos ornamentais — paleta de cores
Contraste firme (verde escuro em cream, bege em forest) · tom-sobre-tom intencional onde o grafismo aparece como textura sutil.
Verde · fundo cream
Bege · fundo forest
Telha · fundo sand
Verde · fundo cream
Tom-sobre-tom · bege em sand
Tom-sobre-tom · verde em forest
Tom-sobre-tom: o grafismo aparece como textura sutil — uso em fundos de post, overlays, elementos decorativos sem peso visual.
Fotografia de marca — estilo editorial
Monograma — Ícone Solo (avatar, favicon, perfil)
10 variações de monograma. Cada arquivo é 1920×1080 com o A centralizado — exibidos abaixo com corte quadrado para simular uso em avatar e app icon.
mono 1
mono 2
mono 3
mono 4
mono 5
mono 6
mono 7
mono 8
mono 9
mono 10
Me diga quais números funcionam melhor como avatar e app icon — atualizo o guia com os escolhidos em tamanhos de uso real (48px, 80px, 160px).
Copy real extraída da página de vendas do PSD. Use esses padrões como referência de tom — tanto para escrever quanto para definir o que cada peça deve comunicar.
Taglines e Frases-Chave da Marca
TAGLINE PRINCIPAL
Clareza para decidir. Segurança para seguir.
Presente em assinaturas, rodapés e materiais de apresentação da Ana
HEADLINE PRINCIPAL — PÁGINA DE VENDAS
Planeje seus sonhos sem abrir mão do presente — e use seu dinheiro com tranquilidade, não com culpa.
PROVA SOCIAL / SUBTÍTULO
+300 mulheres planejadas que realizam seus sonhos e gastam sem culpa
Padrão de Contraste — "Não é X. É Y."
A linguagem da Ana opera por contraste — desfaz uma expectativa errada e entrega a verdade do método. É um padrão que aparece em todo o site e deve se repetir em peças de conteúdo.
"Você não precisa ganhar mais. Precisa de método."
"Não é sobre cortar tudo. É sobre decidir melhor."
"Não é planilha rígida. É um orçamento que respeita sua vida."
"Não é falta de inteligência. É falta de sistema."
"Você não entra no PSD organizada. Você constrói essa organização."
"Tô aqui não pra te julgar. Pra te ajudar a assumir o controle."
Dores Reais do Público — linguagem exata
Essas são as palavras que o público usa para se descrever. Use-as em peças de identificação, capas de carrossel e headlines de Stories.
"trava na hora de decidir""resolvendo o mês""medo de errar""tenta se organizar, mas não sustenta""oscilando entre controle e improviso""dinheiro parado por medo""sonhos sempre pra depois""culpa depois de gastar""ansiedade com dinheiro""ganha bem, mas sente que falta"
enriqueçafique ricadisciplina financeiracorte de gastosrentabilidadeé simples assimapenas / só / bastavocê está errando
07 — Briefing para Designers
O que um designer precisa saber antes de começar
A Ana já tem uma identidade visual com personalidade. O trabalho aqui não é reinventar a marca nem criar uma estética nova do zero. É organizar, refinar e aplicar melhor um universo visual que já existe.
"A marca da Ana deve parecer uma combinação entre uma marca editorial sofisticada, uma casa organizada e acolhedora, e uma metodologia financeira madura, segura e profundamente humana."
O que a marca precisa fazer as pessoas sentirem
"eu consigo entender minha vida financeira"
"tem um caminho possível"
"isso é sério, mas não precisa ser assustador"
"aqui existe cuidado, método e profundidade"
"não estou sendo julgada"
"essa pessoa sabe o que está fazendo"
"minha vida financeira pode ficar mais leve"
A estética não deve gerar pressa, grito, urgência artificial ou ansiedade. A marca da Ana vende clareza, não adrenalina.
O território visual
Pensar em —
uma mesa bonita com caderno, café e planejamento aberto
uma casa organizada e quente
um material de estudo elegante
um relatório financeiro claro, mas não frio
uma marca feminina madura, sem clichê
uma consultoria sofisticada, mas próxima
Não pensar em —
banco, corretora, fintech
curso genérico de infoproduto
mentoria de enriquecimento
coach de prosperidade
estética rosa feminina óbvia
luxo ostensivo com dourado
Paleta: usar com intenção
Verde escuro/forest para autoridade e profundidade
Sage como identidade dominante da marca
Marfim e cream para respiro e acolhimento
Verdes musgo e oliva para continuidade visual
Terracotta e sienna com calor — momentos de ação
Não deixar tudo pesado nem tudo apagado
O verde escuro dá sofisticação
O marfim dá leveza
O terracotta aquece — use com parcimônia
O bege organiza
Evite paletas muito abertas ou vibrantes
Nunca pastel, neon ou candy color
Layout: respiro, hierarquia e método
Boa hierarquia: eyebrow → título → corpo
Ordem de leitura evidente
Poucos elementos competindo
Espaçamento generoso entre seções
Destaque visual para o que realmente importa
Sensação de progresso em materiais educativos
Mesmo emocional, não pode ser caótico
Mesmo educativo, não pode parecer apostila fria
Um bom layout da Ana parece: cuidado, calmo e intencional
"simples, mas pensado"
A beleza aqui não é decoração — é ferramenta
Imagens e elementos gráficos
Funciona bem
Elementos botânicos discretos
Texturas suaves de papel
Ilustrações orgânicas
Linhas finas, molduras editoriais
Formas arredondadas, não infantis
Fotos com luz natural, tons quentes
Cards organizados, tags/pílulas
Evitar
Ícones financeiros genéricos (cifrão em excesso)
Mulher segurando cofrinho
Notebook com gráfico fake
Fotos corporativas frias
Banco de imagem artificial demais
Excesso de folhagem decorativa
Mockups usados só para "encher"
Vendas: desejo sem agressividade
Uma peça de venda da Ana não deve parecer apelativa. O desejo vem de clareza, identificação, segurança, método e transformação realista.
"O design deve dizer: existe um caminho estruturado para você se sentir mais segura com seu dinheiro. Não: compre agora ou sua vida vai dar errado."