# Espaçamento — Fundação do Design System Phorte

> A escala de espaço: os degraus `espaco-N`, em pixels, e qual faixa usar dentro de um elemento, entre elementos e entre seções.

- Página: https://phorte-design-system.vercel.app/styleguide/fundacao/espacamento
- Ficha no Storybook: https://main--69b4847d498a9bd8659db9ba.chromatic.com/?path=/docs/foundation-spacing--docs
- Índice do design system: https://phorte-design-system.vercel.app/llms.txt

Cada degrau é um token (`--spacing-espaco-N` no `app/globals.css`) e vale em qualquer propriedade de espaço: `gap-espaco-4`, `p-espaco-6`, `mt-espaco-8`. O número é o mesmo da escala do Tailwind (`gap-4` = `gap-espaco-4` = 16px). Fora da escala, não use valor de espaço.

## A escala

| Token | Variável | Valor |
| --- | --- | --- |
| `espaco-0-5` | `--spacing-espaco-0-5` | 2px |
| `espaco-1` | `--spacing-espaco-1` | 4px |
| `espaco-2` | `--spacing-espaco-2` | 8px |
| `espaco-3` | `--spacing-espaco-3` | 12px |
| `espaco-4` | `--spacing-espaco-4` | 16px |
| `espaco-5` | `--spacing-espaco-5` | 20px |
| `espaco-6` | `--spacing-espaco-6` | 24px |
| `espaco-8` | `--spacing-espaco-8` | 32px |
| `espaco-10` | `--spacing-espaco-10` | 40px |
| `espaco-12` | `--spacing-espaco-12` | 48px |
| `espaco-16` | `--spacing-espaco-16` | 64px |
| `espaco-20` | `--spacing-espaco-20` | 80px |
| `espaco-24` | `--spacing-espaco-24` | 96px |

## Como escolher

| Degraus | Onde | Exemplos |
| --- | --- | --- |
| `espaco-1 a espaco-3` | Dentro de um elemento | Ícone e rótulo, chip e texto, itens de uma mesma linha. |
| `espaco-4 a espaco-8` | Entre elementos | Campos de um formulário, cards de uma grade, itens de lista. |
| `espaco-10 a espaco-16` | Entre seções | Blocos de uma página, separação de assuntos diferentes. |