F3.1 · Fundações

Spacing

Sistema incremental de 4px que rege todo afastamento entre elementos. Fora da escala, nada passa em auditoria — cada margem, padding e gap consome um token nomeado.

A escala

Doze patamares cobrem do micro (espaço entre ícone e label) ao macro (respiro entre seções de página). A base é 4px porque é o menor incremento que preserva alinhamento ótico em cada densidade de tela.

Token	Valor	Uso primário
--sp-1	4px	Espaço entre ícone e label, hairlines internos.
--sp-2	8px	Gap entre itens de lista densa, padding interno de pílulas.
--sp-3	12px	Padding vertical de input, gap entre tag e label.
--sp-4	16px	Padding base de card pequeno, margem entre parágrafos.
--sp-5	20px	Padding lateral de input, gap entre cards densos.
--sp-6	24px	Padding interno de card padrão, gap em grid base.
--sp-7	32px	Margem entre seções curtas, padding de hero compacto.
--sp-8	40px	Margem entre subseções, padding superior de página.
--sp-9	48px	Respiro entre blocos editoriais.
--sp-10	64px	Padding de página principal, margem entre seções.
--sp-11	96px	Respiro de hero, separação entre capítulos.
--sp-12	128px	Capa, slides de pitch, blocos editoriais grandes.

RegraNunca usar 6, 10, 14, 18, 22, 28 — esses são meias-unidades fora da grade. Se precisar deles, repense o componente.

Como aplicar

Use sempre var(--sp-N). Pixels literais aparecem em código antigo e devem ser substituídos progressivamente.

/* Bom */
.card { padding: var(--sp-6); gap: var(--sp-4); }

/* Ruim — valor literal fora da escala */
.card { padding: 22px; gap: 14px; }

Faça

Componha pares ritmados: --sp-4 interno + --sp-7 externo cria respiração.
Aumente o token (não dobre o valor) quando precisar de mais ar.
Mantenha verticais e horizontais coerentes — mesma densidade no eixo X e Y por contexto.

Não faça

Não use múltiplos arbitrários do mesmo token (ex: calc(var(--sp-4) * 1.5)).
Não combine espaços fora da escala em "valores especiais" — não existe exceção.
Não use margens negativas para corrigir alinhamento — corrija o token de origem.

Densidade por contexto

Três densidades canônicas. Toda interface escolhe uma e mantém.

Densidade	Onde usar	Padding base	Gap base
Compacta	Tabelas, dashboards de monitoramento.	--sp-3	--sp-2
Padrão	Páginas institucionais, dashboards comuns.	--sp-6	--sp-4
Editorial	Hero, capas, marketing, pitch.	--sp-10	--sp-7

Antes de adicionar um valor novo, pergunte se o problema não é hierarquia tipográfica.
Toda página passa por revisão automatizada que rejeita px diretos em margem/padding.
Tokens são compostos — não somados — para criar respiros maiores.