Guia de Identidade Visual — Ana e os dinheiros

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

pale

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

sage-pale

#DFE3D2

Só fundo: faixa de seção clara. Card cream por cima pede borda

Terracotta — acentos de ação (usar com parcimônia, momentos de peso)

O terracotta aquece. Sienna lidera a hierarquia de acentos e é a cor de todo CTA. Terracotta entra como detalhe (aspas decorativas, fio, forma, grafismo) e como botão grande com texto branco. Card, faixa e tag terracotta não levam texto, e terracotta nunca é cor de fundo dominante.

Sienna 1º ACENTO

#A85820

Primeiro na hierarquia de destaque

Terracotta Detalhe

#CD7C2D

Detalhe, e botão grande com texto branco

Tijolo Atenção

#A8391E

Chamar atenção, como fundo ou texto, nunca em excesso. Fica fora do tom sobre tom

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 400 Medium 500 Bold 700 Italic

Plus Jakarta Sans

Sans — UI, corpo, labels, navegação

Aa Bb Cc

Estrutura com sensibilidade.

Light 300 Regular 400 Semi 600 Bold 700 Extra 800

Lato

Sans alternativo — materiais educativos, e-mail, leitura longa

Aa Bb Cc

Legível, claro, humano.

Light 300 Regular 400 Bold 700 Black 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

Beth Ellen · manuscrita de acento

Acento, e não família. Não entra na conta das 2 famílias por peça. Faz o papel do que a Ana escreveria à mão na margem do caderno.

Sonho sem prazo fica guardado na gaveta.

viagem pra lisboa: março, 9 mil

Padrão sobre claro: sienna (4,76:1)

Clareza para decidir. Segurança para seguir.

com calma, uma decisão por vez

Padrão sobre escuro: sand (10,42:1)

Quantidade. No máximo uma frase manuscrita por peça, com até 8 palavras. No reels, até 3 destaques, com uma ou duas palavras manuscritas em cada.

Onde entra. Anotação, assinatura, destaque de um sonho ou de um valor, e os destaques da legenda do reels. Nunca em título, corpo, eyebrow, botão, preço de oferta ou na legenda corrida do vídeo.

Escrita. Sempre em minúscula. A maiúscula dela lê mal (o R de "R$" parece um D), então valor se escreve "9 mil".

Tamanho. Em peça de 1080px, 48px recomendado e 36px aceito, mas evitado. Na web, 24px recomendado e 18px aceito, mas evitado.

Cor. Qualquer cor da paleta com contraste de 4,5:1 ou mais sobre o fundo. Sand sobre sage (4,30:1) e sienna sobre surface-1 reprovam.

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."

H4 · Lora Italic 400
21px · lh 1.35
Cards, pull quotes

Planejamento Financeiro Comportamental

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?"

Quote · Lora Italic 400
22px · lh 1.45
Sobre fundo Forest

"Não é sobre cortar tudo. É sobre decidir melhor."

Quote · Lora Italic 400
22px · lh 1.45
Sobre fundo Sage

Escala Tipográfica — Tokens completos

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

Fundo Cream — versão clara

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).

04 — Sistema de Componentes

Componentes de UI

Botões — hierarquia de ação

Quero entrar no PSD → Garanta sua vaga Saiba mais Consultoria PSD

Ver programa completo Tirar dúvidas Ver depoimentos

Pequeno Padrão Grande — Quero meu plano financeiro

Quero entrar sem risco

Caso do botão terracotta: só com texto branco, e só em tamanho grande

Botão da marca usa Plus Jakarta Sans 600, e peso 600 não conta como negrito na regra de contraste. Por isso o botão terracotta só existe com texto a partir de 24px na web. Em peça de 1080px, que aparece reduzida no celular, isso equivale a 66px.

Quero entrar sem risco

Branco, LG (16px) · 3,22:1 · reprova

Quero entrar sem risco

Branco, display (24px) · 3,22:1 · aprovado, é a regra do botão terracotta

Quero entrar sem risco

Cream, LG (16px) · 2,98:1 · reprova, proibido

Quero entrar sem risco

Cream, display (24px) · 2,98:1 · reprova, proibido

Quero entrar sem risco

Forest, LG (16px) · 5,11:1 · vetado pela marca

Quero entrar sem risco

Forest, display (24px) · 5,11:1 · vetado pela marca

CTA em Sienna (#A85820) com texto cream. Botão terracotta só em tamanho grande, com texto branco de 24px ou mais. Sempre border-radius pill. Hover: uma escala mais escura na mesma família.

Cards — variações de fundo

O Método · Módulo 1

Mulher Consciente

Raio-x financeiro, história com dinheiro e anti-autossabotagem. O ponto de partida real.

Método PSD

Mulher Planejada

Plano completo de curto, médio e longo prazo. O destino de quem passou pelo PSD.

Família verde

Cor principal · Sage

Orçamento Realista

Não é sobre cortar tudo. É sobre decidir melhor — com clareza sobre o que realmente importa.

Sage suave

Mulher Sonhadora

Lista de sonhos, valores e prazos. Quando o planejamento deixa de ser contenção e vira caminho.

Família marrom quente

Acento · Mahogany

Dinheiro como ferramenta

Para momentos de peso e profundidade. Raramente usado — impacto máximo quando aparece.

Forest Tint

Comente PARCELAS

Card de ação — forest-tint para CTAs dentro de seções escuras sem perder hierarquia.

Citação / Pull Quote (carrosséis e autoridade)

"Tem decisão que a gente não adia por falta de coragem. Adia porque não sabe quanto pode sustentar."

— Ana Flávia · @anaeosdinheiros

"Quero sair da casa dos meus pais, mas não sei se consigo."

— Dúvida real das clientes do PSD

Tags e Badges

Mulher Planejada Planejando seus dinheiros Comportamento Financeiro Vagas Abertas 4 meses PSD Turma 2026

Checklist — benefícios e etapas

✓Orçamento ajustado à sua realidade
✓Rotina e sistema financeiro pessoal
✓Lista de sonhos com prazos reais
✓Plano de curto, médio e longo prazo

✓2 sessões individuais com a Ana
✓Quintas do Planejamento (quinzenal)
✓Comunidade no WhatsApp
✓Ferramentas personalizadas

Divisórias ornamentais

Hairline com diamante — separação entre blocos

Ana e os dinheiros

Texto assinatura — fim de seção ou rodapé editorial

Hairline simples — separação sutil entre parágrafos

Campo de formulário

Seu nome

Seu e-mail

Sombras — sempre com base em Forest, nunca preto

XS1px

SM8px

MD24px

LG40px

XL80px

Border Radius

XS

4px

SM

6px

MD

10px

LG

16px

XL

24px

Pill

999px

05 — Personalidade Visual

Tom Visual e Personalidade

O território visual da marca é editorial + botânico + terroso + educativo + premium acessível. A sensação ideal é: quente, organizado e sereno.

Acolhedora

A marca abraça sem condescendência. Nunca julga — reconhece. O fundo cream e as fontes orgânicas criam calor humano genuíno.

→ Lora italic para citações que geram identificação imediata

Sofisticada

Paleta forest + cream remete à natureza e presença. Premium sem ostentação. Sem dourado, sem mármore, sem luxo distante.

→ Espaçamento generoso. A marca respira.

Clara

Tudo deve ser legível à primeira leitura. Hierarquia evidente. O terracotta/sienna aponta o caminho — não grita.

→ Nunca mais de 2 famílias tipográficas por peça (a manuscrita de acento não conta)

Firme

O forest âncora com autoridade. Tem estrutura sem ser rígido. Sem decorações desnecessárias. O método aparece no design.

→ Sage e forest para conteúdo de autoridade e método

Orgânica

As cores remetem a terra, folha, areia — não ao mundo bancário. Estética de outono profundo: madura, profunda, real.

→ Prefira texturas e tons off-white ao branco puro

Humana

A marca tem uma face, uma voz, uma história. Planejamento financeiro que cabe na vida real — não na planilha ideal.

→ Fotografias com luz natural, tons quentes, composição limpa

A marca parece funcionar quando:

madurolimpoquente terrosoorganizadoacolhedor confiávelhumanoelegante educativofácil de lercom respiro com cara de método

A marca não funciona quando parece:

friocolorido demaisfeminino óbvio infantilgenéricocoach bancocorretoratemplate pronto barulhentosofisticado distanterosa

06 — Messaging / Tom de Voz

Linguagem da Marca

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"

Os 5 Nomes Oficiais do Método — nunca adaptar

Etapa 1

Mulher Consciente

Raio-x + história + anti-autossabotagem

Etapa 2

Mulher Realista

Orçamento possível + limites claros

Etapa 3

Mulher Organizada

Rotina + sistema que sustenta

Etapa 4

Mulher Sonhadora

Sonhos com valor + prazo

Etapa 5 · DESTINO

Mulher Planejada

Plano vivo — curto, médio e longo

CTAs Reais — linguagem dos botões de ação

Quero usar meu dinheiro sem culpa Quero virar uma Mulher Planejada Ver como funciona em 5 etapas → Quero entrar sem risco Ver se o PSD faz sentido pra mim

✓ Palavras da marca

clarezasegurançamétodo plano possívelvida realsem culpa dinheirossonhosautonomia orçamento realistacom calmapróximos passos tranquilidadeconfiançarotina

✗ Palavras banidas

enriqueça fique rica disciplina financeira corte de gastos rentabilidade é simples assim apenas / só / basta você 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
Sienna com calor nos momentos de ação, terracotta só como detalhe
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."

Evitar urgência falsa, vermelho gritando, contagem regressiva agressiva
Evitar "última chance" com cara de pressão vazia
Evitar promessas exageradas ou estética de lançamento barulhenta

Critério prático para aprovar uma peça

Está claro?
Está bonito sem parecer genérico?
Está acolhedor sem parecer fofo demais?
Está sofisticado sem parecer distante?

Está organizado o suficiente para transmitir método?
Está humano o suficiente para não parecer banco?
Uma mulher insegura com dinheiro se sentiria mais calma?
A Ana conseguiria usar isso sem parecer "fantasiada"?

"Clareza com calor. Estrutura com sensibilidade. Sofisticação sem distância."

08 — Diretrizes

Do / Don't

✓ Fazer

✓Sage (#565E48) é a cor principal — presente em fundos, cards e identidade

✓Sienna antes de terracotta na hierarquia de acentos quentes

✓Lora italic para citações e pull quotes — é a voz emocional da Ana

✓Combinar fundo forest/sage com texto cream para seções de autoridade

✓Usar cream #F9F6EE (nunca branco puro) como fundo primário

✓Espaçamento generoso — a marca respira

✓Manter hierarquia clara: eyebrow → título → corpo

✓Sombras sempre com base em forest (não preto puro)

✓Sienna reservado para momentos de ação e CTA

✓Lato como opção em materiais de leitura longa e e-mails

✓Beth Ellen como acento: uma frase curta, em minúscula, com contraste nítido

✗ Não fazer

✗Nunca usar branco puro (#FFF) como fundo principal

✗Não usar a Allura nem outra caligráfica formal. A única manuscrita é a Beth Ellen

✗Nunca mais de uma frase manuscrita por peça, nem manuscrita em título, corpo, botão ou preço

✗Não tratar terracotta como cor dominante — ela é acento, não base

✗Evitar mais de 3 cores por composição

✗Não usar gradientes — a marca é plana e orgânica

✗Não misturar fontes extra-bold com Lora — quebra a suavidade

✗Nunca card, faixa ou tag terracotta com texto. Botão terracotta só grande e com texto branco

✗Nada de rosa, lilás, pastel, neon — paleta terrosa só

✗Sem ícones de cifrão genérico, cofrinhos ou gráficos de banco

✗Nenhum design que pareça template pronto de Canva ou coach

09 — Referência Rápida

Cheat Sheet

Cores — cópia direta

Nome	HEX	Token CSS	Uso
Sage ★	#565E48	--color-sage / --sage-base	Cor principal da marca
Forest	#15221B	--color-forest	Fundo escuro, headlines
Cream	#F9F6EE	--surface-0	Fundo primário
Sand	#D1D0A9	--color-sand	Texto s/ escuro, acentos
Sienna	#A85820	--color-sienna	1º acento, CTA principal
Terracotta	#CD7C2D	--color-terracotta	Detalhe, botão grande com texto branco
Sage Light	#7A8268	--sage-light	Sage suavizado
Sage Mist	#A8B190	--sage-mist	Labels s/ fundo escuro
Putty / S-5	#DDCEB9	--surface-5	Superfície areia quente
Peach Mist	#E5B98A	--color-peach-mist	Texto de apoio s/ escuro

Tipografia

Família	Peso	Tamanho	Uso
Lora 500	500	46–64px	Títulos, display
Lora Italic	400	21–30px	Citações, pull quotes, H4
PJS Bold 700	700	11px + ls 0.22em	Eyebrow / Labels CAPS
PJS Regular	400	15–17px	Corpo principal
PJS Light	300	18px	Lead / Subtítulos
Lato Regular	400	15–17px	Corpo alternativo, PDFs
Lato Bold	700	14px	Botões em Lato
beth ellen	400	24px web · 48px em 1080	Acento manuscrito, uma frase por peça
Georgia	normal	24–28px	Títulos em e-mail (Gmail)
Verdana	normal	14px	Corpo em e-mail (Gmail)

Tokens de Espaço e Forma

Token	Valor	Uso
--radius-pill	999px	Botões, tags, badges
--radius-xl	24px	Cards grandes, seções
--radius-lg	16px	Cards padrão
--radius-md	10px	Inputs, badges menores
--shadow-md	0 8px 24px rgba(21,34,27,.08)	Cards em destaque
--ls-eyebrow	0.22em	Labels uppercase
--rule	rgba(86,94,72,0.18)	Divisórias sobre claro
--rule-dark	rgba(209,208,169,0.2)	Divisórias sobre escuro

10 — Canais

Onde Aplicar

▦

Feed do Instagram

Carrosséis e posts estáticos. Fundo sage, forest ou cream. Quotes em Lora italic. Máx. 2 cores por slide.

Eyebrow sienna para identificar o tema
Citações de dores reais em H4 italic
Último slide sempre com CTA em sienna
Sem gradiente, sem filtros saturados
Hierarquia: eyebrow → título → corpo → CTA

▷

Stories

Formato 9:16. Fundo cream ou forest. Texto central, muito respiro. Sticker de interação sobre fundo limpo.

Cream + texto forest para clareza máxima
Pergunta/enquete com tag sienna
Fonte: Plus Jakarta Sans 700 ou Lora italic
Sem imagens de banco com estética genérica

◉

Reels / Vídeo

Identidade via cor, legenda e cards de texto. Paleta orgânica, nunca neon ou vibrante.

Cor: tarde dourada, com grão de filme
Legenda corrida: Filme (Lora itálico) quando o vídeo sente, Galeria (Plus Jakarta Sans Medium) quando explica
Cor da legenda medida pelo fundo do vídeo: cream, forest ou fita. A cor quente vai só na manuscrita
Destaques com Beth Ellen: até 3 por reels
Lower thirds: fundo sage ou forest, texto cream
CTA final: card sienna com botão pill
Transições simples. Queimado de filme só numa virada importante

Ver o guia do editor de reels →

✉

E-mail / Newsletter

Fundo cream, max 600px, Georgia+Verdana nativos. Sem dependência de fontes externas.

Header: fundo forest + wordmark
Botão CTA: sienna, border-radius pill
Divisórias ornamentais com ✦ ou — Ana
Assinatura Lora italic no rodapé

⬡

Página de Vendas

Seções alternadas cream/sage/forest. Hero com título Lora display. CTAs sienna pill em toda seção.

Eyebrow sienna antes de cada título
Depoimentos: fundo sage, quote italic cream
Checklist de benefícios com ícone sage
Footer sempre forest com links cream

◻

Materiais Educativos

PDFs, apostilas, planilhas. Estrutura de etapas clara. Design que transmite segurança e acompanhamento.

Capa: fundo forest, título em cream
Interior: cream S-0/S-1 como base
Lato Regular para corpo de leitura longa
Títulos de seção em Lora Medium
Destaques em sage ou sienna, nunca vermelho