F3.4 · Fundações

Vertical Rhythm

Toda altura — parágrafos, títulos, chrome de UI — alinha-se a uma grade de 8px. Sem meias-unidades. O ritmo é o que dá ao guia uma cadência de leitura previsível.

Linha de base 8px

Cada elemento ocupa um múltiplo de 8 no eixo vertical. Line-heights são arredondados para os valores mais próximos da linha.

Elemento	Altura ocupada	Linhas de base
Body (1.6rem · LH 1.55)	24.8px → 24px	3
H3 (2.4rem · LH 1.3)	31.2px → 32px	4
H1 (6.0rem · LH 1.05)	63px → 64px	8
Botão md	40px	5
Input md	48px	6

Espaços entre seções

Dois ritmos: dentro da seção (compacto) e entre seções (gerador de respiro).

Contexto	Mobile	Tablet	Desktop
Subseção → subseção	32px	40px	48px
Seção → seção	56px	72px	96px
Capítulo → capítulo	96px	128px	128px

/* Utilitário de ritmo */
.rhythm > * + * { margin-top: var(--sp-6); }
.rhythm > h2 + * { margin-top: var(--sp-7); }
.rhythm > * + h2 { margin-top: var(--sp-9); }

Auditoria

Sobreponha grade de 8px sobre a página em desenvolvimento — qualquer elemento fora da linha é defeito.
Margens entre componentes irmãos sempre vêm do pai (gap), nunca do filho.
Nada de margin-top: 7px para "consertar alinhamento". O alinhamento se conserta no token.