01 / Paleta

Identidade cromática

cobre & tinta

Cobre como acento-âncora, autoridade, sofisticação, precisão cirúrgica. Cream aquecido como base. Tinta profunda para peso editorial.

Ocean Blue#1E56C8Acento · Logo · Itálico

Ice Blue#F2F5FBFundo primário

Parchment Blue#C8D8EEFundo cards

Deep Ink#080D18Headlines · Peso

Escala azul

100

300

500

600

700

800

900

02 / Tipografia

Duas vozes.

uma identidade.

Playfair Display para display, elegância editorial, autoridade cirúrgica. DM Sans para corpo e labels, clareza clínica.

FORMA

D I S P L A Y + I T A L I C O V E R L A Y

Precisão

em cada detalhe.

Amostra	Estilo	Tamanho	Uso
Forma	Display Bold	96–112px	Hero, Cover
que renova.	Display Italic	64–80px	Overlay, Acento
Cirurgia Bucomaxilofacial	Heading Semibold	48px	H1, Seção
Resultados naturais, precisão milimétrica.	Subheading	32px	H2, Lead
Cada procedimento é único. Análise técnica, olhar artístico e respeito à identidade do paciente.	Body Regular	17px	Parágrafos
B U C O M A X I L O F A C I A L P R E M I U M	Label Spaced	12px + 0.28em	Labels

03 / Mix Technique

Layering tipográfico

bold + italic sobrepostos

Display bold + italic sobreposto, a assinatura visual que posiciona o Dr. Humberto no segmento premium.

C

B U C O M A X I L O F A C I A L

Arte e ciênciaem equilíbrio.

Cirurgias da face com precisão técnica, olhar artístico e respeito à identidade natural de cada paciente.

Conhecer procedimentos →

H

P R O C E D I M E N T O P R E M I U M

Resultados naturais,técnica refinada.

Precisão milimétrica e profundo respeito à identidade e proporcionalidade de cada paciente.

Agendar consulta →

A

E S P E C I A L I S T A · C B M F

Medicina plásticade alta precisão.

Tecnologia de última geração aliada ao olhar clínico do HR Andrade.

Ver galeria →

04 / Cards

Procedimentos

cards editoriais

Proporção 3:4, tipo fantasma, numeração editorial.

01

R

P R O C E D I M E N T O

Rinoplastiapreservação estrutural

02

L

C I R U R G I A

Lifting de Faceritidoplastia

03

M

P R O T O C O L O

Lipo de Papadacontorno natural

04.5 / Interação

Antes e Depois

slider interativo

Componente para apresentar resultados dos pacientes. Arraste o slider para comparar. Touch-friendly em mobile.

Depoisresultado naturalA Q U I E N T R A A F O T O

Antesponto de partidaA Q U I E N T R A A F O T O

A N T E S D E P O I S

Arraste o slider para comparar · Touch-friendly em mobile

05 / Componentes

Elementos

derivados dos tokens

Botões, tags, formulários, zero improvisação.

B O T Õ E S

Agendar consulta

Conhecer procedimentos

Ver galeria

Saiba mais

T A G S

Bucomaxilofacial

Premium

Buco

Especialista

F O R M U L Á R I O

Nome completo

Solicitar consulta

C I T A Ç Ã O

"O objetivo não é mudar quem você é, é revelar a melhor versão de você."

P R O F . D R . H U M B E R T O A N D R A D E

06 / Aplicação

Página de captação

simulação real

Como o design system se aplica numa landing page real.

H R A N D R A D E · C I R U R G I A S D A F A C E

O resultado que vocêsempre imaginou.

Cirurgias da Face com técnica milimétrica e resultado que respeita sua identidade. Sem exagero. Só você, na melhor versão.

Agendar avaliação

Ver procedimentos

Especialista em Cirurgias da FaceProfessor · Membro do CBMF

FORMA

C I R U R G I A S D A F A C E·R I N O P L A S T I A·L I F T I N G D E F A C E·B L E F A R O P L A S T I A·L I P L I F T·L I P O D E P A P A D A· C I R U R G I A S D A F A C E·R I N O P L A S T I A·L I F T I N G D E F A C E·B L E F A R O P L A S T I A·L I P L I F T·L I P O D E P A P A D A·

R E S U L T A D O S R E A I S

O resultado fala

por si só.

Foto antes

Foto depois

A N T E SD E P O I S

Rinoplastia

Preservação estrutural · harmonia facial

Foto antes

Foto depois

A N T E SD E P O I S

Lifting de Face

Ritidoplastia · resultado natural

Foto antes

Foto depois

A N T E SD E P O I S

Blefaroplastia

Rejuvenescimento do olhar · resultado sutil

S O B R E O C I R U R G I Ã O

Dr. Humberto

Andrade

Professor e especialista em Cirurgias da Face com formação de excelência. Membro do CBMF e reconhecido por procedimentos que respeitam a identidade natural de cada paciente, com resultados harmoniosos e duradouros.

Conhecer trajetória

H

Procedimentosespecializados.

Cada procedimento planejado individualmente com análise técnica criteriosa.

01Rinoplastia preservação estrutural

Ver detalhes →

02Lifting de Face ritidoplastia completa

Ver detalhes →

03Blefaroplastia rejuvenescimento do olhar

Ver detalhes →

04Lipo de Papada contorno da mandíbula

Ver detalhes →

05Lip Lift aumento cirúrgico dos lábios

Ver detalhes →

06Lifting de Pescoço definição e contorno

Ver detalhes →

Pronto parasua transformação?

Agende sua consulta de avaliação. Confidencial, sem compromisso, com toda atenção que você merece.

Nome completo

Procedimento de interesse

Solicitar avaliação gratuita

HR Andrade @humbertoandradebr · CBMF Syra Digital, 2026

07 / Regras

O que fazer

e o que evitar.

Diretrizes para garantir consistência da identidade visual em todos os pontos de contato.

✓ F A Z E R S E M P R E

Usar Playfair Display nos títulos

Títulos principais sempre em Playfair Display bold ou italic, nunca sans-serif para headlines.

Cobre como acento único

Usar #C4935A como único tom de acento. Não introduzir cores secundárias saturadas.

Fundo ice blue como base

Fundo primário sempre ice blue (#F2F5FB). Zero fundo branco puro, destrói a elegância da marca.

Itálico como overlay emocional

O display italic em cobre é a assinatura visual. Sempre presente em headlines de hero e covers.

Espaçamento generoso em labels

Labels em caps com letter-spacing 0.22–0.30em. Define a elegância clínica da marca.

✗ J A M A I S F A Z E R

Fundo branco puro (#FFFFFF)

Sempre cream aquecido. O branco frio destrói a sofisticação e a identidade da marca.

Sans-serif em títulos principais

DM Sans é para corpo e labels. Playfair Display é obrigatório em toda headline de display.

Cores saturadas adicionais

Nenhuma cor além da paleta. Sem azuis ou verdes "médicos", o cobre define autoridade suficiente.

Border-radius em cards/seções

Ângulos retos transmitem precisão cirúrgica. Apenas botões usam border-radius (pílula 999px).

Texto pequeno demais

Body mínimo 16px. Labels mínimo 12px. Acessibilidade é parte da elegância.