Uso interno — não publicar

Design System

jonassilvestri.com — Tipografia, paleta, componentes e tokens visuais.

Paleta de Cores

Sálvia #5F7261 --color-sage
Sálvia Claro #8FA894 --color-sage-light
Sálvia Pálido #E4EBE2 --color-sage-pale
Creme #F7F3ED --color-cream
Superfície #EDE8DF --color-surface
Carvão #28271F --color-charcoal
Cinza Quente #6A6457 --color-warm-gray
Mudo #9C9488 --color-muted
Terracota #8D7358 --color-tan
Borda #D8D2C6 --color-border

Escala Tipográfica

Display

Ansiedade tem tratamento.

Fraunces · weight 300 · clamp(3.5rem, 8vw, 6rem)

H1

Psicologia baseada em evidências

Fraunces · weight 400 · clamp(2.4rem, 5vw, 3.5rem)

H2

TCC e ACT no tratamento da ansiedade

Fraunces · weight 400 · clamp(1.8rem, 3.5vw, 2.4rem)

H3

Como funciona o atendimento online

Fraunces · weight 400 · clamp(1.35rem, 2.5vw, 1.75rem)

H4

Primeira consulta sem compromisso

Fraunces · weight 500 · clamp(1.05rem, 1.8vw, 1.25rem)

Body

A Terapia Cognitivo-Comportamental (TCC) é uma das abordagens mais estudadas da psicologia clínica. Ela parte do princípio de que nossos pensamentos, emoções e comportamentos estão interligados — e que mudar padrões de pensamento pode transformar significativamente a qualidade de vida.

Crimson Pro · weight 400 · clamp(1rem, 1.4vw, 1.125rem) · line-height 1.75

Small

Sessões de 50 minutos. Atendimento online para todo o Brasil.

Crimson Pro · 0.875rem

Caption / Eyebrow

Especializado em ansiedade

Crimson Pro · 0.75rem · letter-spacing 0.14em · uppercase

Blockquote
Não é possível ter coragem sem incerteza. A ACT nos ensina a agir com intenção mesmo quando o desconforto está presente.

Fraunces · italic · weight 300 · borda sálvia

Listas
  • Avaliação psicológica individualizada
  • Plano terapêutico baseado em evidências
  • Acompanhamento contínuo e flexível
  1. Agendamento da primeira consulta
  2. Avaliação inicial e definição de metas
  3. Início do processo terapêutico

Crimson Pro · body size

Inline

Leia mais sobre como funciona a TCC e sobre o uso de técnicas de exposição no tratamento da ansiedade.

Link sublinhado em sálvia · código com fundo sage-pale

Botões e Interação

Agendar consulta

Primário — fundo sálvia, texto creme, itálico Crimson Pro

Saiba mais

Secundário — borda sálvia, texto sálvia, fundo transparente

Ver artigo →

Terciário (texto) — link com underline animado

Tokens de Design

Display

Fraunces

Body

Crimson Pro

Border Radius

sm — 2px md — 4px lg — 8px

Easing

cubic-bezier(0.16, 1, 0.3, 1)