Identidade Visual
Os átomos do sistema visual. Cores, tipografia, espaçamento, bordas, sombras e motion formam a base de toda experiência Melhor Dermato.
Cores do sistema
Uma paleta cuidadosamente calibrada que equilibra sofisticação médica com acessibilidade e calor humano. Clique em qualquer swatch para copiar o hex.
Proporção de uso
Creme 45%
Fundo principal
Ouro 20%
Acento e destaque
Bege 15%
Superfícies
Carvão 10%
Texto e dark mode
Branco 10%
Cards e respiro
Semantic tokens
Tokens semânticos garantem consistência entre light e dark themes.
Cores semânticas de feedback
Cores funcionais que comunicam estados e resultados ao usuário de forma clara e consistente. Clique em qualquer swatch para copiar o hex.
Sistema tipográfico
Duas famílias tipográficas complementares: Cormorant Garamond para personalidade e hierarquia, Jost para legibilidade e conteúdo.
Cormorant Garamond
Display / HeadlinesAaBbCcDdEeFfGgHhIiJjKkLlMm
NnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789
Display 72px
Heading 1 / 40px
Heading 2 / 28px
Heading 3 / 22px
Jost
Body / UIAaBbCcDdEeFfGgHhIiJjKkLlMm
NnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789 !@#$%&*()+-=
Heading 4 / 18px Semibold
Body Large / 18px Regular -- Texto de destaque e leads
Body / 16px Regular -- Texto corrido principal, parágrafos
Small / 14px Regular -- Texto secundário, metadados
Caption / 12px -- Legendas, footnotes, timestamps
Label / 11px Bold -- Tags, section labels
Escala tipográfica completa
Todos os níveis com suas propriedades CSS
| NÍVEL | TAMANHO | PESO | TRACKING | LEADING | FONTE |
|---|---|---|---|---|---|
| Display | 4.5rem / 72px | 700 | -0.02em | 1.1 | Cormorant Garamond |
| H1 | 2.5rem / 40px | 700 | -0.01em | 1.2 | Cormorant Garamond |
| H2 | 1.75rem / 28px | 600 | 0 | 1.3 | Cormorant Garamond |
| H3 | 1.375rem / 22px | 600 | 0 | 1.4 | Cormorant Garamond |
| H4 | 1.125rem / 18px | 600 | 0 | 1.4 | Cormorant Garamond |
| Body LG | 1.125rem / 18px | 400 | 0 | 1.7 | Jost |
| Body | 1rem / 16px | 400 | 0 | 1.7 | Jost |
| Small | 0.875rem / 14px | 400 | 0 | 1.5 | Jost |
| Caption | 0.75rem / 12px | 400 | 0.02em | 1.4 | Jost |
| Label | 0.6875rem / 11px | 700 | 0.08em | 1.2 | Jost |
Hierarquia em ação
DERMATOLOGIA CLÍNICA
Sua pele merece o
melhor cuidado
Conectamos você aos dermatologistas mais qualificados do Brasil, com agendamento facilitado e avaliação transparente.
+2.400 especialistas verificados -- Atualizado em março 2026
Escala de espaçamento
Sistema de espaçamento baseado em múltiplos de 4px para ritmo visual consistente.
Sistema de grid
4 COLUNAS -- Mobile / Cards
12 COLUNAS -- Desktop / Layouts complexos
Raios, sombras e efeitos
Definições de profundidade e forma que criam hierarquia visual.
Border Radius
xs
2px
--radius-xs
sm
4px
--radius-sm
md
8px
--radius-md
lg
12px
--radius-lg
xl
20px
--radius-xl
2xl
28px
--radius-2xl
full
9999px
--radius-full
Sombras
sm
--shadow-sm
Elevação sutil, inputs, badges
md
--shadow-md
Cards, dropdowns, popovers
lg
--shadow-lg
Modais, dialogs, elementos flutuantes
glow
--shadow-glow
Efeito dourado, destaque premium
Glass Effect
card-bb-glass
Backdrop blur com transparência para overlays e cards em destaque. Utiliza .glass ou .card-bb-glass.
Animação e movimento
Motion design sutil e intencional que reforça a sensação premium sem distrair.
Curvas de animação
Spring
cubic-bezier(0.25, 1, 0.5, 1)
Entradas com energia suave, botões, toggles
Smooth
cubic-bezier(0.16, 1, 0.3, 1)
Transições gerais, reveals, navegação
Decel
cubic-bezier(0, 0, 0.2, 1)
Pousos suaves, elementos chegando
Accel
cubic-bezier(0.4, 0, 1, 1)
Saídas rápidas, elementos desaparecendo
Durações
200ms
Fast
Hover, focus, micro-interactions
400ms
Medium
Expansões, collapses, reveals
700ms
Slow
Page transitions, hero animations
Padrões de interação
Passe o mouse sobre cada elemento para ver o efeito em ação.
Hover Lift
.hover-lift
translateY(-4px) + shadow
Hover Scale
scale(1.05)
Zoom sutil em hover
Hover Glow
.gold-glow
Box-shadow dourado
Gold Underline
.gold-underline
Underline animado