Espaçamento

Todo o espaçamento é baseado em múltiplos de 4px. Isso garante consistência e alinhamento perfeito entre componentes.

Escala visual

spacing-1

4pxGap mínimo entre ícone e texto

spacing-2

8pxPadding interno de badges/tags

spacing-3

12pxGap entre elementos inline

spacing-4

16pxPadding interno de inputs/botões

spacing-5

20pxGap entre items de lista

spacing-6

24pxPadding de cards pequenos

spacing-8

32pxGap entre seções internas

spacing-10

40pxPadding de cards médios

spacing-12

48pxGap entre componentes de seção

spacing-16

64pxPadding vertical de seções

spacing-20

80pxGap entre seções principais

spacing-24

96pxPadding de seções hero

spacing-32

128pxEspaçamento máximo entre blocos

---

Exemplo de uso em componente

Visualização do espaçamento interno de um card típico (spacing-6 = 24px de padding, spacing-4 = 16px de gap):

ícone — 40px

título

descrição

padding: 24px (spacing-6)

gap: 16px (spacing-4)

---

Princípios

• Nunca use valores arbitrários fora da escala (ex: 13px, 22px)
• Prefira valores maiores para separar seções, menores para elementos internos
• Em mobile, reduza os valores de seção em 1 degrau (ex: spacing-16 → spacing-12)