v1.0 — Abril 2026

Design System

Guia visual de referência para o novo site do Dr. Ricardo Saick.
Inspirado no Chuvision — sem vídeos de fundo. Mobile-first. Implementação em WordPress.

Paleta de Cores

Azul médico + branco. Referência Chuvision. Transmite confiança, modernidade e sofisticação clínica.
O dourado (--color-gold) é usado com extrema parcimônia — apenas como acento de prestígio.

Primárias

Navy 900
#041A34
--color-navy-900
Navy 700
#0C3460
--color-navy-700
Blue 500
#1A6FA3
--color-blue-500
Blue 300
#5BAFD6
--color-blue-300
Blue 100
#E0F1FA
--color-blue-100
Blue 50
#F2F9FD
--color-blue-50

Ação & Acento

CTA Primary
#1A6FA3
--color-cta-primary
WhatsApp
#25D366
--color-cta-whatsapp
Gold (prestígio)
#C9A96E
--color-gold
Stars
#F5A623
--color-stars

Tipografia

Cormorant Garamond (serif) em H1–H3 — elegância, autoridade, alta legibilidade em tamanhos grandes.
Inter (sans-serif) em H4–body–UI — clareza e neutralidade moderna.

Cormorant Garamond — Headlines

--text-6xl
60px / -0.02em
Cirurgia
--text-5xl
48px / 1.1
Cirurgia minimamente invasiva
--text-4xl
36px / 1.25
Por que escolher o Dr. Saick?
--text-3xl
30px / 1.3
Tratamentos minimamente invasivos
--text-2xl italic
24px / quote
"A cirurgia mudou minha vida completamente."

Inter — UI & Body

--text-xl
20px / 500
Subtítulo de seção com Inter Medium
--text-lg
18px / lead
Lead text — Há 10 anos proporciona melhor qualidade de vida por meio de métodos minimamente invasivos.
--text-base
16px / body
Médico e Neurocirurgião pela Escola Paulista de Medicina, com Mestrado em Tecnologias em Saúde pela UNIFESP. Membro titular da Sociedade Brasileira de Neurocirurgia.
--text-sm
14px / label
Labels, metadados — CRM 156.530 · RQE 73.970 · Moema, São Paulo
--text-xs caps
12px / 700
Neurocirurgião · Cirurgia de Coluna

Espaçamento

Sistema baseado em múltiplos de 4px. Usado em padding, margin e gap de forma consistente.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-6
24px
--space-8
32px
--space-12
48px — padding seções mobile
--space-16
64px — padding seções desktop
--space-20
80px — gap entre seções
--space-24
96px — seções grandes
--space-32
128px — hero padding

Bordas & Sombras

Raios e sombras padronizados garantem consistência visual em todo o site.

Border Radius

sm / 4px
md / 8px
lg / 16px
xl / 24px
pill / 100px
full

Sombras

sm
md
lg
xl

Botões

Todos usam border-radius pill, Inter 600, uppercase. Hover: leve elevação + sombra. Foco: outline azul acessível.

Variantes — Fundo Claro

Agendar Consulta Saiba Mais Ver Tratamentos 📱 WhatsApp Saiba mais

Variantes — Fundo Escuro

Tamanhos

Pequeno Normal Grande

Badges & Tags

Especialidades, procedimentos, certificados, convênios.

Neurocirurgia Cirurgia de Coluna SBN AOSPINE Minimamente Invasivo Endoscópico ✦ UNIFESP ✦ AMB

Formulários

Focus ring azul (#1A6FA3). Bordas sutis. Labels acima. Textarea redimensionável verticalmente.


Cards

Todos os cards possuem hover com elevação suave. Cada tipo é usado em uma seção específica da landing page.

Card Stat — Seção Credibilidade

10+
Anos de experiência
500+
Cirurgias realizadas
★ 4.9
Avaliação Google
3
Filiações internacionais

Card Condição — Seção Patologias

🦴
Hérnia de Disco
Cervical, torácica e lombar. Tratamento endoscópico sem grandes incisões.
🫀
Estenose do Canal
Descompressão vertebral minimamente invasiva com recuperação acelerada.
⚕️
Espondilolistese
Estabilização vertebral com técnicas modernas e laser de precisão.

Card Diferencial — Seção Por Que o Dr. Saick? (fundo escuro)

⏱️
10 anos de experiência
Há uma década devolvendo qualidade de vida com métodos minimamente invasivos.
🎓
Formação Internacional
Equipe formada nos maiores Centros de Cirurgia de Coluna do mundo.
📡
Tecnologia Avançada
Sempre atualizado com as técnicas mais avançadas para máxima segurança.

Card Processo — Seção Como Funciona

01
Consulta inicial
Avaliação clínica completa com análise de exames e histórico. Presencial ou telemedicina.
02
Diagnóstico preciso
Identificação da condição com exames de imagem. Explicação detalhada das opções terapêuticas.
03
Tratamento personalizado
Plano cirúrgico ou conservador sob medida, com acompanhamento pós-operatório completo.

Card Review — Seção Avaliações

★★★★★
"Fui operado pelo Dr. Saick e minha recuperação foi incrível. Em menos de 3 semanas já estava andando normalmente."
👤
Marcos Andrade
Hérnia Lombar · Google Reviews
★★★★★
"Atendimento humanizado, cirurgia precisa. Dr. Saick explicou todo o processo com calma. Recomendo com toda certeza."
👤
Ana Carvalho
Estenose Cervical · Google Reviews

FAQ — Accordion

Exibido sobre fundo navy-900. Transição suave de max-height. Clique em qualquer pergunta.

Confira as principais dúvidas

Com técnicas minimamente invasivas atuais, as cirurgias de coluna são muito mais seguras. O Dr. Saick utiliza endoscopia e microcirurgia, reduzindo riscos e tempo de recuperação.
Depende do procedimento. Em cirurgias endoscópicas, muitos pacientes retornam às atividades leves em 1 a 2 semanas. Cirurgias mais complexas podem demandar 4 a 6 semanas.
Trabalhamos com os principais convênios. Entre em contato pelo WhatsApp para verificar a cobertura do seu plano. Também atendemos particular.
Em muitos casos, sim. O Dr. Saick sempre avalia opções conservadoras primeiro — fisioterapia, infiltração e bloqueio da dor — antes de qualquer procedimento cirúrgico.

WhatsApp Flutuante

Fixo no canto inferior direito em toda a página. Pulse ring sutil. Z-index 9999. Respeita prefers-reduced-motion.


Previews de Seções

Mockups das 11 seções da landing page na ordem final. Placeholders indicam onde entram as fotos novas.

Header (sticky)

01 — Hero

Cirurgia minimamente invasiva da coluna

Há 10 anos devolvendo qualidade de vida com técnicas endoscópicas e a laser. Formação UNIFESP, membro SBN e AOSPINE.

📸 Foto editorial\nDr. Saick (jaleco branco)\nFundo escuro · iluminação dramática

02 — Credibilidade / Números

10+
Anos de experiência
500+
Cirurgias realizadas
★ 4.9
Avaliação Google
3
Filiações internacionais

04 — Por que o Dr. Saick? (fundo navy-700)

Por que escolher o Dr. Ricardo Saick?

⏱️
Experiência comprovada
10 anos proporcionando melhor qualidade de vida por meio de métodos minimamente invasivos.
🎓
Formação internacional
Equipe especializada formada nos maiores Centros de Cirurgia de Coluna do mundo.
📡
Tecnologia avançada
Sempre atualizado com as técnicas mais avançadas para máxima segurança e eficiência.

05 — Sobre o Médico

📸 Foto editorial\nDr. Saick (terno escuro)\nFundo azul profundo · dramático
✦ Neurocirurgião UNIFESP

Dr. Ricardo
Pagung Saick

CRM 156.530 · RQE 73.970

Médico e Neurocirurgião pela Escola Paulista de Medicina (UNIFESP), com Mestrado em Tecnologias em Saúde e Título de Especialista em Neurocirurgia pela AMB/MEC. Referência em cirurgia minimamente invasiva da coluna vertebral.

SBN AOSPINE Eurospine
Ver formação completa

10 — Contato

📸 Foto outdoor urbana\nDr. Saick (terno)\nAmbiente de cidade · approachable

Fale conosco

Agende sua consulta ou tire suas dúvidas.

Av. Lavandisca, 741 · 10º andar · Moema, São Paulo

📱 WhatsApp