01
Foundations
A base fixa do sistema: containers, escala de espaçamento, tipografia funcional, cores de leitura, radius e sombras.
Containers
Quatro larguras resolvem praticamente todos os cenários.
Default1200 pxMaioria das seções
Text720 pxIntroduções e textos
Medium860 pxFAQ e conteúdo central
Wide1360 pxUso visual excepcional
Spacing scale
A IA deve usar somente a escala oficial, evitando valores aleatórios.
4 px8 px12 px16 px24 px32 px48 px64 px80 px96 px
| Uso | Desktop | Tablet | Mobile |
|---|---|---|---|
| Seção padrão | 96 | 64 | 48 |
| Seção compacta | 64 | 48 | 32 |
| Gap entre colunas | 48 | 32 | 24 |
| Gap entre cards | 24 | 24 | 16 |
| Padding card | 32 | 24 | 24 |
Tipografia
A fonte de títulos pertence à identidade do médico. A fonte funcional é sempre Inter.
H1 · 56 / 48 / 38
Título principal
H2 · 42 / 36 / 30
Título de seção
H3 · 28 / 26 / 22
Título de card
Body · Inter · 17 / 17 / 16
Textos permanecem próximos do preto para garantir leitura confortável e consistente.
| Elemento | Desktop | Tablet | Mobile | Line-height |
|---|---|---|---|---|
| H1 | 56 | 48 | 38 | 1.10 |
| H2 | 42 | 36 | 30 | 1.15 |
| H3 | 28 | 26 | 22 | 1.25 |
| H4 | 22 | 20 | 18 | 1.30 |
| Body | 17 | 17 | 16 | 1.65 |
Cores funcionais
As cores de marca mudam, mas a legibilidade textual permanece controlada.
#1F1F1FTexto principal
#555555Texto secundário
Radius e sombras
8 pxSmall
12 pxMedium
16 pxLarge
24 pxXL
shadow-smCards discretos
shadow-mdCards principais e imagens
shadow-lgUso raro