Espaçamento

Princípio

Todo espaçamento de layout — padding, margin, gap — é múltiplo de 8. A base 8 divide e multiplica de forma uniforme em toda a grade, produz alinhamento consistente entre componentes de origens diferentes e elimina decisões ad-hoc. Os valores 2 e 4px existem como exceção para ajustes ópticos de glifo — não como unidades de layout.

Escala

Onze tokens, nenhum fora da escala documentada. Cada valor tem papel declarado; usar um token fora do papel preferido é sempre preferível a inventar um valor novo.

1. --space-2
   2px

   Ajuste óptico muito fino. Underline offset, espaçamento entre borda e conteúdo em casos de alinhamento de glifo. Nunca decisão de layout.

2. --space-4
   4px

   Ajuste óptico de glifo e gap interno de ícone. Exceção aceita da base 8 — apenas quando o alinhamento tipográfico exigir. Nunca em decisões de layout de componente.

3. --space-8
   8px

   Gap mínimo de layout. Espaçamento entre itens próximos dentro de um componente — ex.: gap entre ícone e texto num label, padding de chip, gap de itens numa lista densa.

4. --space-12
   12px

   Exceção documentada: metade de --space-24, necessária em composições de grade de 2 colunas com gap centrado via calc(50% - 12px). Não é múltiplo de 8 — uso restrito à situação documentada. Justificativa obrigatória em comentário quando aplicado fora desse contexto.

5. --space-16
   16px

   Padding médio e gap de itens. Espaçamento interno de componentes de porte médio — padding vertical de card compacto, gap entre itens de uma lista com respiro, margem entre um ícone e seu label em nav.

6. --space-24
   24px

   Padding de card compacto e gap de seções curtas. Separação entre blocos de conteúdo dentro de um card, margem entre cards num grupo, padding horizontal de componente de tamanho médio.

7. --space-32
   32px

   Padding interno de cards de destaque (size=lg) e margem entre blocos. Cards de destaque/card-mãe usam --card-padding = --space-32 via size=lg; cards padrão (size=md) usam --space-24. Fora de Card, --space-32 fica reservado a espaçamentos estruturais de página. (Default do --card-padding mudou pra --space-24 em Epic #517 S4 / D-Card-1.)

8. --space-48
   48px

   Padding de card largo e margem entre sections curtas. Padding horizontal do container de conteúdo em desktop, margem entre sections de conteúdo próximas em hierarquia — ex.: entre o dashboard e a lista de compromissos.

9. --space-64
   64px

   Padding vertical de section. Espaçamento interno vertical de seções de página — separa visualmente blocos de conteúdo distintos sem perder a coesão da tela.

10. --space-96
    96px

    Padding vertical de hero e section grande. Respiro de seção que precisa ancorar visualmente uma transição de narrativa — intro de onboarding, bloco de destaque em landing.

11. --space-128
    128px

    Padding vertical de hero de landing. Valor máximo da escala — reservado ao hero de comunicação externa onde o respiro tem função de impacto visual. Não entra em telas de produto.

Tokens semânticos de componente

Tokens que referenciam valores da escala de espaçamento mas declaram intenção de uso específica. Preferir estes tokens quando o contexto for um componente nomeado — a semântica do nome comunica a decisão de design; o valor subjacente continua sendo o da escala.

Exemplo de composição

Um Commitment Card padrão aplica padding, gap e border-radius todos saídos da escala de tokens. Os valores se combinam e produzem o ritmo visual sem nenhum número ad-hoc.