Spacing

Escala de 4 pontos.

Escala

xs

4px

sm

8px

md

16px

lg

24px

xl

32px

searchToContent

44px

Tokens CSS

Token	Valor	Uso típico
`--spacing-xs`	`4px`	Gap entre ícone e texto, padding de badge
`--spacing-sm`	`8px`	Gap entre chips, padding interno de pills
`--spacing-md`	`16px`	Padding horizontal de cards, gap de seções
`--spacing-lg`	`24px`	Padding de telas, margin entre seções
`--spacing-xl`	`32px`	Padding de modals, espaçamentos maiores

Regra dos 4 pontos

Todos os espaçamentos devem ser múltiplos de 4: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48… Nunca use valores ímpares (3, 5, 7) ou não-múltiplos de 4 (6, 10, 14).

// ✅ Correto
paddingHorizontal: 16, // spacing.md
gap: 8,               // spacing.sm
marginBottom: 24,     // spacing.lg

// ❌ Evitar
paddingHorizontal: 15,
gap: 6,
marginBottom: 20,