Design System v2.0

Medicina de precisão,
design de confiança

Uma linguagem visual única para o ecossistema HealthNet — tokens, tipografia e componentes prontos para escalar.

Ver paletaTipografia

Paleta de cores

Cada swatch mostra o valor no modo claro (esquerda) e no modo escuro (direita).

#0A2540
#F4F7F6

g-color-base-primary

#206095
#4A90E2

g-color-base-secondary

#C5A880
#D4B88E

g-color-accent

#F8F9FA
#121A21

g-color-surface-light

#FFFFFF
#1A242F

g-color-surface-card

#1A2B3C
#E2E8F0

g-color-text-main

#5A6B7C
#94A3B8

g-color-text-muted

#E2E8F0
#2A3A4A

g-color-border-subtle

Escala tipográfica

12px → 56px · Inter para texto, Montserrat para títulos · pesos 400/500/600/700

g-font-size-xs · 12px / 0.75remDr. Herlon Moura — 56 5x 4g
g-font-size-sm · 14px / 0.875remDr. Herlon Moura — 56 5x 4g
g-font-size-base · 16px / 1.0remDr. Herlon Moura — 56 5x 4g
g-font-size-md · 20px / 1.25remDr. Herlon Moura — 56 5x 4g
g-font-size-lg · 24px / 1.5remDr. Herlon Moura — 56 5x 4g
g-font-size-xl · 32px / 2.0remDr. Herlon Moura — 56 5x 4g
g-font-size-2xl · 44px / 2.75remDr. Herlon Moura — 56 5x 4g
g-font-size-3xl · 56px / 3.5remDr. Herlon Moura — 56 5x 4g

Botões

Tokens de componente: c-button-primary-bg, c-button-gold-bg, raio 6px.

Cards

c-card-bg · c-card-border · raio 12px · shadow 0 4px 20px.

Angiologia

Diagnóstico e tratamento de doenças vasculares com tecnologia de ponta.

Cirurgia Vascular

Procedimentos minimamente invasivos com recuperação acelerada.

Trombose Venosa

Avaliação de risco e protocolos personalizados de prevenção.