Digital / UI FoundationsBase · 8px / Ajuste fino · 4px

As medidas por trás de cada tela.

Medidas e comportamentos para montar interfaces consistentes. Comece pelo espaçamento; depois escolha cantos, sombras e estados.

Espaçamento

Use múltiplos de 8px para organizar a tela. Reserve 4px para aproximar rótulos, legendas e pequenos detalhes.

  • 4px
  • 8px
  • 16px
  • 24px
  • 32px
  • 40px
  • 48px
  • 56px
  • 64px
  • 72px
  • 80px
  • 96px

8px entre ícone e texto; 16px entre itens; 24 ou 32px dentro de cards; 48 a 72px entre seções. No mobile, reduza o espaçamento mantendo a mesma base. Bordas e traços não seguem esta escala.

Raio

8px em controles, 16px em cards, 24px em blocos editoriais e 32px em grandes superfícies. Use o formato pílula em tags.

  • --radius-sm8pxBotões, chips e campos.
  • --radius-md16pxCards e painéis de produto.
  • --radius-lg20pxBlocos editoriais e diálogos.
  • --radius-xl28pxGrandes telas de marca.
  • --radius-pill999pxTags e indicadores.

Camadas

A ordem importa mais que o número. De 1 a 9 fica livre para empilhamento local dentro de um componente.

  1. 200--layer-skip-linkPular para o conteúdo — precisa vencer todo o resto.
  2. 100--layer-overlayBusca e lightbox de fotografia.
  3. 70--layer-drawerO menu em si.
  4. 60--layer-drawer-backdropVéu do menu em telas pequenas.
  5. 35--layer-sidebar-toggleBotão de recolher, que monta sobre a borda da sidebar.
  6. 30--layer-sidebarNavegação lateral fixa.
  7. 20--layer-stickyTopbar.
  8. 10--layer-floatingBarra de contexto que flutua sobre o conteúdo.

Elevação

Duas sombras, nomeadas pelo papel. Anel de foco, halo colorido e borda inset também são box-shadow, mas não são elevação.

--shadow-raisedSuperfície que sobe um pouco sobre o conteúdo.
--shadow-overlayDiálogo e skip link, que flutuam sobre tudo.

Movimento

Só movimento com função, entre 150 e 250ms. Tudo respeita prefers-reduced-motion.

  • --transition-fast150ms cubic-bezier(.22, 1, .36, 1)Hover, foco, troca de cor.
  • --transition-base220ms cubic-bezier(.22, 1, .36, 1)Sidebar, drawer e mudanças de layout.

Com movimento reduzido ativo, transições e animações caem para 1ms e os transform de estado somem — o estado continua legível, o deslocamento é que desaparece.

Estados

Todo controle interativo tem cinco. Nenhum deles pode depender só de cor.

  • PadrãoPeso 700, altura mínima de 48px.
  • HoverBorda escurece; a cor de fundo não muda de matiz.
  • ActiveEscala 0,97 — some com movimento reduzido.
  • FocusAnel de 3px na cor de foco, com 3px de afastamento.
  • DisabledOpacidade 0,72 e cursor de espera.