Fundamentos — 03

Espaçamento

Grid de 4px. Use exclusivamente os tokens --sp-* nos componentes — jamais valores px avulsos.

03.1

Escala

12 passos, base 4px. A barra verde mostra proporção visual do valor.

--sp-14px

Gap mínimo entre ícone e label

--sp-28px

Padding interno de badges e chips

--sp-312px

Padding vertical de inputs

--sp-416px

Padding interno de botões, gap em listas

--sp-520px

Padding interno de cards pequenos

--sp-624px

Gap entre seções de card, padding de sidebar

--sp-832px

Margin entre componentes de seção

--sp-1040px

Padding de painéis, gap entre colunas

--sp-1248px

Padding de header, espaço entre seções

--sp-1664px

Margin de layout, espaço entre blocos grandes

--sp-2080px

Seção hero, espaço vertical de página

--sp-2496px

Margem máxima de layout de página

03.2

Como os tokens se traduzem em componentes e layouts reais.

Espaçamento interno de componente — Buttonpx --sp-4 (16px) · py --sp-2 (8px) · gap --sp-2 (8px)

Espaçamento de lista — gap --sp-2 (8px)Listas de itens com separação mínima

01 — Exército Brasileiro

02 — Marinha do Brasil

03 — Força Aérea

Espaçamento de card — padding --sp-6 (24px)Gap entre seções internas do card: --sp-4 (16px)

01 — Destaque

Card de Exemplo

Padding interno: 24px (--sp-6). Gap entre elementos: 16px (--sp-4).

Grid de layout — gap --sp-8 (32px)Separação entre colunas de conteúdo

FAB