Grid e alinhamento

Um dos sinais mais subconscientes de "essa tela não foi bem cuidada" é o desalinhamento — nem sempre a pessoa consegue apontar exatamente o que está errado, mas ela sente. A regra prática por trás disso é simples de enunciar e fácil de esquecer no dia a dia: nada numa tela deveria "flutuar" sem se alinhar a alguma coisa — uma borda, uma coluna, o centro de outro elemento próximo.

Alinhamento como continuidade

Isso conecta direto com o princípio de continuidade da Gestalt (lição 5): o olho espera que elementos numa mesma região sigam uma linha imaginária. Quando um título começa 2px mais à esquerda que o parágrafo abaixo dele, ou um ícone não está centralizado com o texto ao lado, essa linha imaginária quebra — e é exatamente essa quebra sutil que o olho detecta como "errado" sem conseguir nomear.

Grid de 8px (ou 4px) pra espaçamento consistente

Uma prática comum pra evitar espaçamentos arbitrários (13px, 22px, 7px espalhados pelo projeto) é adotar uma escala de espaçamento em múltiplos de 8px (ou 4px pra mais granularidade). Isso não é regra técnica do CSS — é uma convenção que faz os espaçamentos se relacionarem entre si de forma previsível, então elementos parecem pertencer ao mesmo sistema, em vez de terem sido ajustados "no olho" um por um.

--space-1: 4px;
--space-2: 8px;
--space-3: 16px;
--space-4: 24px;
--space-5: 32px;
--space-6: 48px;

/* em vez de margin-bottom: 13px, usa-se var(--space-2) ou var(--space-3) —
   o valor mais próximo da escala, nunca um número solto */

Grid de colunas pra estrutura da página

Além do espaçamento, uma grade de colunas (por exemplo, 12 colunas) dá aos elementos maiores — seções, cards, blocos de conteúdo — pontos de alinhamento comuns. Um card que ocupa 4 de 12 colunas e outro que ocupa 8 de 12 continuam alinhados nas bordas externas da grade, mesmo tendo tamanhos diferentes — é isso que faz um layout com elementos de tamanhos variados ainda parecer organizado, em vez de aleatório.