Espaçamento & Layout

Tokens Nomeados, Escala Numérica, Pilha Z-Index e Breakpoints // 2026

Design System3 Seções2026

01Espaçamentos NomeadosEscala Semântica

--spacing-xs0.5rem / 8px

--spacing-sm1rem / 16px

--spacing-md2rem / 32px

--spacing-lg3rem / 48px

--spacing-xl4rem / 64px

02Escala Numérica14 Níveis · 0-180px

--space-00px

--space-14px

--space-28px

--space-312px

--space-415px

--space-520px

--space-630px

--space-740px

--space-860px

--space-980px

--space-1090px

--space-11120px

--space-12150px

--space-13180px

Espaço 0–3

Micro UI

Lacunas inline, padding de ícones, clusters apertados.

Espaço 4–6

Componentes

Padding de cards, espaçamentos de formulários.

Espaço 7–11

Seção / Layout

Padding de seções, divisões do grid mestre.

Espaço 12–13

Editorial

Grandes blocos editoriais, espaçamento hero.

03Camadas & BreakpointsZ-Index & Responsivo

--layer-nav100

Barras de Navegação Fixas

--layer-dropdown200

Dropdowns, Tooltips, Popovers

--layer-overlay300

Sobreposições, Camadas de Escurecimento

--layer-modal400

Modais, Caixas de Diálogo

--layer-toast500

Notificações Toast, Snackbars

--bp-mobile

767px

Largura Máx. Mobile

--bp-tablet

768px

Largura Mín. Tablet

--bp-desktop

1200px

Largura Mín. Desktop