# Espaçamento e tamanhos

Fonte: Figma do Design System T2 (extraído em 2026-10-12, última edição do arquivo em 2026-10-09). Site: https://design.t2.com.br.

space/*: padding e gap. Base 4px; 2, 6 e 10 são meios-passos para controles compactos. Todo espaçamento é múltiplo de 4 ou 8 (space/4 … space/80).

## Espaçamento

| Token | Valor | Variável CSS | Tailwind v4 (arbitrário) |
| --- | --- | --- | --- |
| `space/0` | 0px | `--midas-space-0` | `p-(--midas-space-0)` |
| `space/2` | 2px | `--midas-space-2` | `p-(--midas-space-2)` |
| `space/4` | 4px | `--midas-space-4` | `p-(--midas-space-4)` |
| `space/6` | 6px | `--midas-space-6` | `p-(--midas-space-6)` |
| `space/8` | 8px | `--midas-space-8` | `p-(--midas-space-8)` |
| `space/10` | 10px | `--midas-space-10` | `p-(--midas-space-10)` |
| `space/12` | 12px | `--midas-space-12` | `p-(--midas-space-12)` |
| `space/16` | 16px | `--midas-space-16` | `p-(--midas-space-16)` |
| `space/20` | 20px | `--midas-space-20` | `p-(--midas-space-20)` |
| `space/24` | 24px | `--midas-space-24` | `p-(--midas-space-24)` |
| `space/32` | 32px | `--midas-space-32` | `p-(--midas-space-32)` |
| `space/40` | 40px | `--midas-space-40` | `p-(--midas-space-40)` |
| `space/48` | 48px | `--midas-space-48` | `p-(--midas-space-48)` |
| `space/56` | 56px | `--midas-space-56` | `p-(--midas-space-56)` |
| `space/64` | 64px | `--midas-space-64` | `p-(--midas-space-64)` |
| `space/80` | 80px | `--midas-space-80` | `p-(--midas-space-80)` |

Não existem valores fora desta escala: se algo não cabe, a escala é revista aqui, não no componente. Nunca use 13px ou 19px.

## Altura de controles

size/control/* define a altura de todos os controles: componentes equivalentes no mesmo tamanho têm a mesma altura. size/icon/* segue o grid 24 do Tabler.

| Token | Valor | Variável CSS | Uso |
| --- | --- | --- | --- |
| `size/control/xs` | 24px | `--midas-size-control-xs` | Densidade máxima: tabelas, toolbars. Só desktop. |
| `size/control/sm` | 28px | `--midas-size-control-sm` | Compacto: filtros, chips, ações densas. |
| `size/control/md` | 32px | `--midas-size-control-md` | Padrão da interface. |
| `size/control/lg` | 40px | `--midas-size-control-lg` | Formulários e ações principais; mínimo em mobile. |
| `size/control/xl` | 48px | `--midas-size-control-xl` | Destaque, mobile e touch confortável. |
| `size/control/2xl` | 56px | `--midas-size-control-2xl` | CTA de landing/onboarding. |
| `size/control/3xl` | 64px | `--midas-size-control-3xl` | Hero e telas de aprendizagem. |
| `size/control/4xl` | 72px | `--midas-size-control-4xl` | Excepcional: totens, apresentações. |

## Ícones

| Token | Valor | Variável CSS |
| --- | --- | --- |
| `size/icon/xs` | 12px | `--midas-size-icon-xs` |
| `size/icon/sm` | 16px | `--midas-size-icon-sm` |
| `size/icon/md` | 20px | `--midas-size-icon-md` |
| `size/icon/lg` | 24px | `--midas-size-icon-lg` |
| `size/icon/xl` | 32px | `--midas-size-icon-xl` |