Foundations

Spacing .

Grid atômico de 4 px. Cada passo é um múltiplo inteiro da unidade base, garantindo alinhamento perfeito em qualquer composição de tela. Escolha sempre o token — nunca o valor bruto.

Escala

--space-1 4px

--space-2 8px

--space-3 12px

--space-4 16px

--space-5 24px

--space-6 32px

--space-7 48px

--space-8 64px

--space-9 96px

--space-10 128px

--space-11 160px

Ritmo fluido

Dois tokens de ritmo vertical complementam a escala para uso em blocos estruturais de página. Eles são fluidos — interpolam com a viewport — e nunca devem ser substituídos por um passo fixo.

--space-section

clamp(64px, 4vw + 32px, 104px)

Ritmo padrão de seção. Uso: padding-block de componentes Section com spacing="section".

--space-band

clamp(80px, 5vw + 40px, 128px)

Bandas full-bleed de destaque — hero, CTA band. Uso: spacing="band" no componente Section.

Regras de uso

Apenas tokens: Nenhum valor bruto de pixel em código de componente. Se um passo não existe, compose dois tokens.
Hierarquia por magnitude: Steps 1–4 (4–16 px) são micro-espaçamentos internos: gap entre ícone e label, padding de chip. Steps 5–7 (24–48 px) estruturam o interior de componentes e cards. Steps 8–11 (64–160 px) reservados para espaços entre blocos e seções maiores.
Composição vertical: Seções usam --space-section ou --space-band. Nunca empilhe dois blocos com padding independente sem verificar o gap resultante.