Terapia
Sessão individual
Um espaço seguro e acolhedor para escutar a si mesmo.
Um sistema visual acolhedor, calmo e humano — construído sobre o azul de confiança da marca, neutros quentes e respiro generoso. Profissional sem ser frio, moderno sem ser genérico.
Introdução
Visão & princípios
A identidade nasce do encontro entre o cérebro (intelecto e cuidado) e a borboleta (transformação e leveza). Cada decisão de design reforça esse encontro.
O que buscamos
Acolhedor
Cantos suaves, cores quentes e espaço para respirar.
Calmo
Paleta dessaturada, transições lentas, contraste gentil.
Confiável
O azul da marca conduz às ações importantes com firmeza serena.
Humano
A caligrafia Great Vibes assina cada toque pessoal.
O que evitamos
✕
Aparência hospitalar
Nada de branco clínico e cinzas frios — usamos marfim e neutros quentes.
✕
Visual infantil
Sem cores berrantes ou formas caricatas. Elegância contida.
✕
SaaS genérico
A assinatura manuscrita e os detalhes orgânicos personalizam tudo.
✕
Layout poluído
Espaçamento generoso e hierarquia clara acima de tudo.
Introdução
A marca & variações
Todas as versões têm fundo transparente e recorte rente ao conteúdo. Cada fundo pede a variação certa — escolha pela legibilidade e pelo contraste.
Acervo 100% vetorial (SVG)
Todos os logotipos — principal, símbolo, horizontal e selo — foram reconstruídos a partir dos arquivos vetoriais: nitidez infinita em qualquer tamanho, fundo transparente e independência de fonte. Cada peça tem 4 variantes (cor, duotone, mono e tokenizada). Veja a versão tokenizada ao final desta seção.
Lockup principal · vetorial SVG
Lockup horizontal · vetorial SVG
Símbolo & selo · ícones, avatar, redes sociais
Área de respiro (clearspace)
Mantenha sempre uma margem livre ao redor do logotipo equivalente à altura do símbolo. Nada de texto ou elementos invadindo essa área.
Usos indevidos
✕ Não distorça as proporções
✕ Não use a versão clara em fundo claro
✕ Não aplique sobre cores vibrantes
✕ Não reduza o contraste / desbote
Versão tokenizada · recolore sozinha avançado
O arquivo logo-vert-tokenized.svg troca as cores fixas por variáveis CSS. Ao ser embutido inline na página (não via <img>), uma única arte serve para light e dark — basta definir as variáveis no tema.
/* No SVG, as cores viram: */
fill: var(--logo-blue, #0f5dbf);
fill: var(--logo-ink, #000000);
/* No tema escuro, redefina: */
[data-theme="dark"] {
--logo-blue: #82abe4;
--logo-ink: #ffffff;
}
Recoloração por CSS · 1 arquivo, 2 temas
Status do acervo
Marca à prova de futuro ✓
As quatro peças (principal, símbolo, horizontal e selo) estão em SVG vetorial, cada uma com variantes cor / duotone / mono / tokenizada. Texto convertido em contornos — nenhum logotipo depende de fonte instalada. O único texto manuscrito que ainda é fonte viva é o decorativo da interface (títulos .ds-display), carregado do Google Fonts.
Fundamentos
Cores
Clique em qualquer amostra para copiar o valor. O azul oficial #0f5dbf é o coração do sistema; os neutros são intencionalmente quentes para evitar o aspecto clínico.
Cores da marca
Escala primária — Azul
50
100
200
300
400
500
600
700
800
900
950
Neutros quentes
50
100
200
300
400
500
600
700
800
900
Acento de apoio — Sálvia derivada
Cor complementar, fora do manual, usada com parcimônia em tags e micro-destaques. Evoca calma, natureza e transformação — sem competir com o azul.
50
100
200
300
400
500
600
700
Cores de feedback (dessaturadas)
Papéis semânticos (tokens)
| Token | Papel | Valor (tema claro) |
|---|---|---|
--color-bg | Fundo geral da aplicação | neutral-50 · marfim |
--color-surface | Cartões e painéis | #ffffff |
--color-text | Texto principal | neutral-900 |
--color-text-muted | Texto secundário | neutral-600 |
--color-primary | Ação principal | #0f5dbf |
--color-border | Bordas e divisores | neutral-200 |
--color-focus-ring | Anel de foco (a11y) | azul 45% alfa |
Fundamentos
Tipografia
Great Vibes assina momentos especiais (apenas display). Roboto sustenta toda a interface e leitura — em escala modular calma (~1.2).
Cuidar é transformar
Great Vibes · display · uso decorativo e assinatura
font-family: var(--font-display)
Escala (Roboto)
Regina Lafer
Título de página
Título de seção
Subtítulo
Destaque de bloco
Texto de apoio (lead)
Texto de corpo padrão para leitura confortável e prolongada.
Texto auxiliar, legendas e rótulos.
TERAPEUTA · RÓTULO
Fundamentos
Espaçamento
Escala de base 4px. O respiro generoso é o que mantém a interface calma e livre de poluição.
--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-6 · 24px
--space-8 · 32px
--space-12 · 48px
--space-16 · 64px
Fundamentos
Bordas & raios
Cantos arredondados e suaves transmitem acolhimento. Botões usam pílula completa; cartões e campos usam raios médios.
--radius-xs · 4px
--radius-sm · 6px
--radius-md · 10px
--radius-lg · 16px
--radius-xl · 24px
--radius-full
Fundamentos
Sombras & elevação
Sombras difusas, de baixa opacidade e com leve tinta azulada — para profundidade suave, nunca dura.
--shadow-xs
--shadow-sm
--shadow-md
--shadow-lg
--shadow-xl
Componentes
Botões
Formato pílula, alvo de toque de 44px e foco visível. Seis variantes e três tamanhos.
Variantes
Tamanhos · ícone
Estados
Componentes
Formulários
Campos amplos (48px), rótulos claros e mensagens de ajuda e erro discretas.
Usaremos para personalizar seu acolhimento.
Número incompleto.
Campos · estados: padrão, foco, erro, desabilitado
Componentes
Seleção
Checkbox, radio e switch com estado marcado em azul da marca.
Checkbox · radio · switch
Componentes
Cartões
Contêineres versáteis com mídia, corpo e rodapé opcionais.
RL
Próxima sessão
Quinta, 14h00
7 de 10 encontros concluídos no seu plano de cuidado.
Depoimento
"Encontrei leveza onde só havia peso."
— Paciente, 2025
Componentes
Badges & chips
Etiquetas de status e filtros selecionáveis.
Padrão
Neutro
Acento
Confirmada
Pendente
Cancelada
Destaque
Badges
Ansiedade ✕
Autoconhecimento
Relacionamentos
Luto
Chips / filtros
Componentes
Alertas
Comunicação contextual com tom gentil — cores dessaturadas evitam alarme.
Confirmação de agendamento
Você receberá um lembrete um dia antes da sessão.
Sessão confirmada
Tudo certo para quinta-feira às 14h.
Pagamento pendente
Conclua até 24h antes para garantir o horário.
Não foi possível agendar
O horário escolhido acabou de ser preenchido.
Info · sucesso · atenção · erro
Componentes
Tabela & paginação
Exibição organizada de dados — ideal para a área administrativa.
| Paciente | Data | Modalidade | Status |
|---|---|---|---|
| Ana Beatriz | 27/06 · 09h | Online | Confirmada |
| Carlos Henrique | 27/06 · 14h | Presencial | Pendente |
| Júlia Martins | 28/06 · 10h | Online | Reagendada |
Tabela · paginação
Componentes
Feedback & overlays
Progresso, carregamento, tooltip, toast e diálogo modal.
Progresso · spinner · tooltip · modal
Sessão agendada
Enviamos a confirmação por e-mail.
Toast
Padrões
Estados dos componentes
Todo elemento interativo cobre os mesmos cinco estados — para previsibilidade e acessibilidade.
| Estado | Quando | Sinal visual |
|---|---|---|
| Padrão | Repouso | Cor base do token |
| Hover | Ponteiro sobre o elemento | Tom mais escuro / fundo sutil |
| Ativo | No clique | Tom mais profundo + leve deslocamento |
| Foco | Navegação por teclado | Anel azul --shadow-focus |
| Desabilitado | Indisponível | Cinza quente, sem ponteiro |
| Carregando | Processando | Spinner, conteúdo oculto |
| Erro | Validação falhou | Borda e texto em vermelho dessaturado |
Exemplo aplicado ao botão primário
Padrões
Templates de tela
Composições completas que demonstram o sistema em uso. Abra em uma nova aba.