Spacing
Os espaçamentos ajudam a estruturar conteúdos e manter a leitura mais confortável. Esta página reúne as regras e escalas oficiais do sistema.
Não use espaçamentos soltos — como
13px, gap-[7px] ou margin: 17px. Use os tokens da escala spacing documentados abaixo.Boas Práticas
Quando usar
Aplicar padding, margin e gap seguindo a escala definida pelo sistema.
Priorizar a escala padrão antes de recorrer a ajustes específicos.
Manter consistência de espaçamento entre componentes e seções similares.
Seguir esta referência para preservar ritmo e hierarquia visual.
Quando não usar
Utilizar valores fora da escala definida.
Aplicar espaçamentos diferentes sem uma necessidade clara.
Misturar padrões de espaçamento na mesma interface.
Utilizar espaçamentos que prejudiquem a hierarquia da interface.
Spacing
Escala oficial de espaçamento utilizada para definir margens, paddings e gaps de forma consistente.
spacing
| Name | Desktop |
|---|---|
| 2 | |
| 4 | |
| 6 | |
| 8 | |
| 10 | |
| 12 | |
| 14 | |
| 16 | |
| 18 | |
| 20 | |
| 22 | |
| 24 | |
| 26 | |
| 28 | |
| 30 | |
| 32 | |
| 34 | |
| 36 | |
| 40 | |
| 44 | |
| 48 | |
| 56 | |
| 64 | |
| 80 | |
| 96 | |
| 112 | |
| 128 | |
| 144 | |
| 160 | |
| 176 | |
| 192 | |
| 208 | |
| 224 | |
| 240 | |
| 256 | |
| 288 | |
| 320 | |
| 384 |
Escala visual
| Name | Pixels | Size | Preview |
|---|---|---|---|
| 0.5 | 2px | 0.125rem | |
| 1 | 4px | 0.25rem | |
| 1.5 | 6px | 0.375rem | |
| 2 | 8px | 0.5rem | |
| 2.5 | 10px | 0.625rem | |
| 3 | 12px | 0.75rem | |
| 3.5 | 14px | 0.875rem | |
| 4 | 16px | 1rem | |
| 4.5 | 18px | 1.125rem | |
| 5 | 20px | 1.25rem | |
| 5.5 | 22px | 1.375rem | |
| 6 | 24px | 1.5rem | |
| 6.5 | 26px | 1.625rem | |
| 7 | 28px | 1.75rem | |
| 7.5 | 30px | 1.875rem | |
| 8 | 32px | 2rem | |
| 8.5 | 34px | 2.125rem | |
| 9 | 36px | 2.25rem | |
| 10 | 40px | 2.5rem | |
| 11 | 44px | 2.75rem | |
| 12 | 48px | 3rem | |
| 14 | 56px | 3.5rem | |
| 16 | 64px | 4rem | |
| 20 | 80px | 5rem | |
| 24 | 96px | 6rem | |
| 28 | 112px | 7rem | |
| 32 | 128px | 8rem | |
| 36 | 144px | 9rem | |
| 40 | 160px | 10rem | |
| 44 | 176px | 11rem | |
| 48 | 192px | 12rem | |
| 52 | 208px | 13rem | |
| 56 | 224px | 14rem | |
| 60 | 240px | 15rem | |
| 64 | 256px | 16rem | |
| 72 | 288px | 18rem | |
| 80 | 320px | 20rem | |
| 96 | 384px | 24rem |
Regras de aplicação
Cada espaçamento segue uma escala baseada em múltiplos de 4px, garantindo consistência e previsibilidade. A escala acompanha a estrutura da interface, começando em grupos internos de componentes e aumentando conforme os elementos se agrupam em blocos e seções maiores.
Prefira tokens com valores inteiros e valide com o time o uso de valores fracionados apenas quando necessário.
Exemplos de uso
<!-- Card com padding padrão -->
<div class="p-4 gap-4 flex flex-col">...</div>
<!-- Lista compacta -->
<ul class="space-y-2">...</ul>
<!-- Seção com respiro -->
<section class="px-12 py-6">...</section>