Documentação
Espaçamento
Espaços ajudam a gerar agrupamentos de informações, organizam a tela e criam hierarquia. Toda a escala é construída sobre o grid de 8px.
Visão geral
O espaçamento é usado para construir todos os componentes do Atlas DS. Use o grid 8px como base para a definição das escalas.
8
16
24
32
40
48
64
Escala de espaçamento
Nossa escala é baseada em múltiplos de 4px e 8px, garantindo consistência visual em todo o produto.
Estruturas pequenas
space-1
4px
0.25rem
space-2
8px
0.5rem
space-3
12px
0.75rem
space-4
16px
1rem
space-5
20px
1.25rem
space-6
24px
1.5rem
space-7
28px
1.75rem
space-8
32px
2rem
Estruturas grandes
space-10
40px
2.5rem
space-12
48px
3rem
space-16
64px
4rem
space-20
80px
5rem
space-24
96px
6rem
space-32
128px
8rem
Exemplos práticos
Como os espaçamentos se comportam em layouts reais.
Stack (Vertical - space-y-4 / 16px)
Inline (Horizontal - gap-2 / 8px)
Inset (Padding - p-6 / 24px)
Conteúdo com padding de 24px
Ritmo vertical
Valores mínimos para tipos de conteúdo. Não use espaçamentos menores que os determinados.
Entre seções
48px
Separa blocos de conteúdo distintos.
Entre componentes
24px
Cards, listas e grupos.
Título → corpo
16px
Após um heading antes do parágrafo.
Label → input
8px
Formulários e campos.
Em Tailwind, use as classes da escala: p-2 = 8px, p-4 = 16px, p-6 = 24px. Padding lateral padrão (spacing-container): 24px (px-6).