Espaço para entender. Movimento que explica.

Uma escala. Relações diferentes.

Reutilize os passos existentes de 4–96 px. Um intervalo pequeno conecta detalhes; um maior separa decisões. Escolha o papel antes do número.

Espaço ao redor da mesma ideia.

Compare duas receitas de card sem mudar palavras ou tamanho de fonte. A compacta atende conteúdo repetido; a confortável dá mais espaço a uma introdução. Os valores são padding e gap, não alturas fixas.

.ds-spaced-card {
  padding: var(--ds-space-32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ds-space-24);
}
.ds-spaced-card > * { margin: 0; }

Um grid compartilhado, com espaço para adaptar.

Use 4, 8 ou 12 colunas conforme a tela cresce. Alinhe textos, imagens e ações relacionados às mesmas bordas. O contêiner para em 1200 px, sem contar as margens externas.

Colunas

12

Entre colunas

24 px

Margem externa

32 px

A partir da tela

1024 px

Este é um diagrama de grid em escala, não um simulador de dispositivo. Os números descrevem a receita CSS real. Cards empilham em telas pequenas, usam duas colunas em médias e três em amplas.

Mantenha o ritmo quando a tela mudar.

• Empilhe conteúdo na ordem de leitura. Não reorganize cards visualmente fora da ordem do teclado e do documento.
• Deixe o conteúdo determinar a altura. Textos longos, validação e rótulos traduzidos precisam crescer.
• Comece com 48 px entre seções em telas estreitas e 64–96 px em amplas. Elementos relacionados ficam mais próximos.
• Mantenha a mesma borda para título, corpo e ação. Centralize uma frase curta apenas quando a composição pedir.
• Mantenha controles confortáveis; use alvo de toque de 44 × 44 px como padrão piloto. Tamanho do ícone não é área de toque.
• Use áreas seguras dos templates de feed e Stories e as regras de respiro do logo. Um gutter web não substitui essas regras.

Camadas com uma ordem clara.

Estes valores piloto de z-index pertencem a um contexto isolado de componente ou página. Um número não escapa do contexto de empilhamento do pai. Prefira o comportamento nativo de dialog para modais.

1. 0

   Conteúdo

   Fluxo normal e elementos decorativos locais.

   --ds-layer-content
2. 10

   Navegação fixa

   Cabeçalho ou navegação, sem esconder conteúdo focado.

   --ds-layer-sticky
3. 20

   Menu contextual

   Menus próximos ao controle de origem.

   --ds-layer-popover
4. 30

   Fundo de modal

   Fundo que separa um diálogo do restante da página.

   --ds-layer-overlay
5. 40

   Diálogo

   Conteúdo modal; gerencie foco, Escape e retorno ao acionador.

   --ds-layer-dialog

Uma resposta, sem espetáculo.

Mantenha 220 ms com a curva existente como padrão. Use resposta mais rápida em controles pequenos ou um pouco mais de tempo em uma pequena revelação. A duração não atrasa a ação.

Curva compartilhada: cubic-bezier(0.4, 0, 0.2, 1)

O que fica parado também importa.

• Anime apenas propriedades que explicam o estado: cor, opacidade e um pequeno transform. Evite transition: all, revelações de altura fixa e mudanças que movem o alvo sob o ponteiro.
• Mostre foco de teclado imediatamente. Um efeito hover precisa de equivalente no teclado; não esconda ações até o hover.
• Não condicione leitura a uma revelação cronometrada. Evite paralaxe, loops saltitantes e carrosséis automáticos neste piloto.
• Com prefers-reduced-motion: reduce, remova transições, animações de entrada e deslocamentos. Preserve conteúdo final, rótulos e seleção.
• Em diálogos e menus, movimento é apenas parte do comportamento. Implemente foco, fechamento e semântica antes de animar.

Uma receita para sua equipe reutilizar.

Papéis de espaçamento, breakpoints, camadas e receitas de movimento estão em JSON, tokens com escopo e guia para IA. Copie exemplos com a regra de movimento reduzido.

Especificação piloto. As páginas existentes ainda precisam de auditoria de espaços e camadas; revisões amplas de teclado, zoom e movimento reduzido continuam abertas.