Pular para o conteúdo principal

Semantic Spacing​

Os tokens semânticos de espaçamento definem distâncias para contextos específicos e devem ser usados somente nesses casos.

  • Quando não houver um token adequado, utilize um token primitivo.
  • Se a mesma necessidade não prevista se repetir, acione a equipe de Design System para avaliar a inclusão de um novo token.

Vertical​

Refere-se ao espaçamento entre seções e componentes dispostos verticalmente.

Entre Top Bar e Conteúdo​

Espaçamento entre a top bar e o conteúdo principal, criando separação visual sem desconectar os elementos.

Exemplo

Seções não relacionadas​

Conteúdos independentes exigem maior distância para reforçar a separação.


Seções relacionadas​

Conteúdos que devem ser percebidos como conectados.
Exemplos:

  • Uma seção e sua subseção;
  • Uma seção e os botões dentro dela.


Entre Conteúdo e Botão​

Quando um botão aparece logo abaixo de um conteúdo ou formulário (fora do footer), deve haver um mínimo de 16px para evitar cliques acidentais.

Exemplo

Entre Opções​

O espaçamento interno é definido dentro do próprio componente de opção.
Por padrão, o espaçamento entre opções externas é 0px, já que a área de toque deve ser ampla.

Exemplo

Horizontal​

O espaçamento horizontal se aplica a elementos posicionados lado a lado.

Entre Menu Lateral e Conteúdo​

Espaçamento maior é usado para diferenciar claramente o menu lateral do conteúdo principal.

Exemplo
Exemplo