Fundação

Espaçamento

Base 4 px. Múltiplos de 8 px são o padrão — o valor 4 px existe apenas para micro-espaços dentro de componentes.

Escala

p-1 · gap-1 · m-1 4 px — micro espaço interno de chips, badges e ícones

p-2 · gap-2 · m-2 8 px — espaçamento mínimo entre elementos

p-3 · gap-3 · m-3 12 px — padding interno de chips, gap entre cards compactos

p-4 · gap-4 · m-4 16 px — padding horizontal de página, padding interno de cards

p-5 · gap-5 · m-5 20 px — padding de bottom sheets e modais

p-6 · gap-6 · m-6 24 px — espaço entre seções dentro de um card

p-8 · gap-8 · m-8 32 px — separação entre seções de página

p-12 · gap-12 · m-12 48 px — espaço entre blocos maiores (header + conteúdo)

Contexto	Token	Valor
Padding horizontal de página	`px-4`	16 px
Padding interno de card	`p-4`	16 px
Padding de bottom sheet	`p-5`	20 px
Gap entre itens de lista	`gap-3`	12 px
Gap entre avatar e texto	`gap-3`	12 px
Gap entre ícone e label	`gap-2`	8 px
Gap entre cards no feed	`gap-4`	16 px
Separação entre seções	`mb-8`	32 px
Altura mínima de tap target	`min-h-[44px]`	44 px (WCAG)
Padding vertical de botão	`py-3`	12 px
Padding horizontal de botão	`px-5`	20 px
Padding de chip	`px-3 py-1.5`	12 × 6 px

p-4 · 16px

gap-3 · 12px

Múltiplos de 8

Prefira sempre p-2 (8), p-4 (16), p-6 (24), p-8 (32). Valores como p-5 (20) são exceções documentadas.

4 px é exceção

p-1 / gap-1 só dentro de componentes — entre ícone e badge, entre estrela e contagem. Não como espaçamento entre blocos.

Não use valores arbitrários

Evite gap-[14px], px-[18px] etc. Se o valor da escala não servir, arredonde para o mais próximo.

Tap target mínimo

Qualquer elemento interativo deve ter área de toque de no mínimo 44 × 44 px (WCAG 2.5.5). Use min-h-[44px] min-w-[44px] se o visual for menor.