02.04 — Espaçamento

ESPAÇO É DECISÃO. NÃO ACIDENTE.

Sistema baseado em múltiplos de 8px. Cada token tem um papel específico — não são intercambiáveis. Espaço negativo é ativo: menos elementos, mais impacto.

Escala Visual

4px

--space-xs

Espaço interno mínimo — gap entre ícone e label, padding de badge.

8px

--space-sm

Gap entre elementos inline — ícones, tags, botões lado a lado.

16px

--space-md

Padding interno de card, espaço entre label e conteúdo.

24px

--space-lg

Padding de card completo, gap entre itens de lista.

32px

--space-xl

Espaço entre blocos dentro de uma seção, padding lateral de página em mobile.

2XL

48px

--space-2xl

Separação entre seções de conteúdo, margem abaixo de títulos de seção.

3XL

64px

--space-3xl

Espaço entre seções principais de página, margin-top de headings H1.

4XL

96px

--space-4xl

Separação máxima — entre blocos de seção, padding vertical de hero.

Quando Usar Cada Step

Dentro de card

Padding: 24px (LG). Gap entre elementos: 8–16px (SM a MD).

--space-lg, --space-sm, --space-md

Entre cards no grid

Gap: 2px — borda visual entre cards. Nunca gap grande entre cards adjacentes.

2px (fixo — identidade visual)

Entre seções na página

Margem entre seções: 48–64px (2XL a 3XL). Consistente ao longo da página.

--space-2xl, --space-3xl

Padding de página

Padding horizontal: 40px no desktop, 20px no mobile.

40px (fixo — definido no layout)

Componentes de navegação

Padding interno: 12–16px vertical, 20–24px horizontal.

--space-md, --space-lg

Regras de Espaçamento

Use tokens — nunca valores arbitrários. 12px, 20px, 36px não existem no sistema. Só os 8 tokens mapeados.

Não use margin-top em cascata. Prefira gap no container pai. Margens em cascata causam colapso e imprevisibilidade.

Espaço negativo é intencional. Áreas vazias entre seções comunicam pausa, peso, hierarquia.

Não comprima o espaço para caber mais. Menos conteúdo com mais espaço tem mais impacto do que tudo comprimido.

Tokens CSS

src/styles/tokens.css — espaçamento

--space-xs:   4px;   /* mínimo: badge, ícone + label */
--space-sm:   8px;   /* inline: gap entre tags, botões */
--space-md:   16px;  /* padding de card, gap de lista */
--space-lg:   24px;  /* padding card completo, gap entre itens */
--space-xl:   32px;  /* entre blocos de seção, padding mobile */
--space-2xl:  48px;  /* entre seções de conteúdo */
--space-3xl:  64px;  /* entre seções principais */
--space-4xl:  96px;  /* separação máxima, hero padding */

Uso em CSS

/* Dentro de card */
.card {
  padding: var(--space-lg);          /* 24px */
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);              /* 8px entre itens */
}

/* Entre seções de página */
.section + .section {
  margin-top: var(--space-2xl);      /* 48px */
}

/* Grid de cards */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;                          /* gap fixo — identidade visual */
}

← AnteriorIconografia Próximo →Texturas