Design System · v1.0
Brenda Lima
Psicóloga · Terapia ACT
Referência visual e de voz para todos os materiais da marca — site, ebook, posts, landing pages e criativos.
Paletas de cor
Creme · neutros base
Terracota · primária · CTA
Musgo · secundária
Ink · texto
Proporção de uso
70% creme · 20% terracota · 8% ink · 2% musgo
Tipografia
Cuidar de si
Terapia de Aceitação
Como você está se sentindo?
Quando o corpo fala o que a mente cala
Um espaço para respirar, nomear e voltar pra si.
A terapia ACT não busca eliminar o sofrimento, mas transformar sua relação com ele — criando mais espaço para o que realmente importa.
Psicóloga · CRP 06/12345 · Terapia ACT
Brenda Lima
Você merece um espaço que seja seu.
Logos e identidade
Wordmark principal
Assinatura script
Ícone circular
Fundo escuro
Botões
Cards
Voltar pra si
Encontrar formas de sustentar o que você sente, sem precisar que tudo faça sentido agora.
O que importa pra você
Clareza sobre o que realmente guia suas escolhas — não o que deveria, mas o que é.
Um passo de cada vez
Agir na direção do que importa, mesmo quando o caminho ainda está se formando.
Quotes
Você não precisa estar bem pra pedir ajuda. Você pode pedir ajuda exatamente como está.
Nomear o que você sente não é fraqueza. É o primeiro passo para respirar de novo.
Formulários
Contexto · o que aparece nos campos
Regras de placeholder
- Convide, nunca ordene
- Use linguagem acolhedora
- Sem asteriscos ou "obrigatório"
- Labels em uppercase mono, secos
- Foco na borda terracota
Espaçamento e escala
Sombras & raios
Sombras
Raios de borda
4px
10px
18px
28px
999px
Tom de voz
Prefira estas palavras
- leveza · sustentar · funcionar
- colo · respirar · espaço
- voltar pra si · nomear · acolher
- sentir · estar presente · pausar
Evite completamente
- guerreira · empoderamento
- resiliência · mindset
- detox emocional · jornada
- "a mulher moderna" · coach
Identifica
Nomeia o que o leitor sente, sem presumir diagnóstico.
Nomeia
Dá nome às experiências sem julgamento ou hierarquia.
Convida
Abre espaço sem pressionar — nunca impõe urgência.
Regras essenciais
Proporção de cor
70% creme · 20% terracota · 8% ink · 2% musgo. Qualquer peça que invertê-la perde a identidade da marca.
Itálico serifa = emoção
O itálico em Cormorant Garamond é reservado para palavras-chave emocionais. Nunca use para decoração.
Script com parcimônia
Homemade Apple: máximo 1 linha por peça. É a "assinatura" — perde força se repetida.
Sem emojis
Nunca. A identidade é inteiramente tipográfica. Ícones, quando usados, são em stroke fino (1.2px).
Pronome "você"
Sempre "você" — nunca "tu", "a paciente", "a mulher moderna". Direto, próximo, sem presunção.
Paletas via data-palette
Troque o tema inteiro com data-palette="cream|moss|terracotta|ivory" no <body>. Nunca hard-code cores.
Como usar
Em qualquer HTML do projeto, carregue os arquivos do design system e defina a paleta no <body>.
<!-- Fontes --> <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;1,9..144,300;1,9..144,400&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&family=Homemade+Apple&display=swap" rel="stylesheet"> <!-- Design system --> <link rel="stylesheet" href="/design-system/tokens.css"> <link rel="stylesheet" href="/design-system/components.css"> <!-- Paleta --> <body data-palette="cream"> <!-- cream | moss | terracotta | ivory -->
Variáveis de cor
--cream-50 → --cream-300
--terra-400 → --terra-700
--moss-300 → --moss-700
--ink-300 → --ink-900
--line · --accent
Fontes
--f-serif — Fraunces
--f-display-alt — Cormorant
--f-script — Homemade Apple
--f-sans — Inter
--f-mono — JetBrains Mono