design tokens

espaçamento

Padrões de espaçamento são essenciais no design de uma boa interface. Eles podem construir ritmo, consistência, facilitar a leitura e aumentar a confiança na marca.

spacing

O espaçamento no design digital ajuda a criar hierquia correta e foco entre os elementos da tela. Para facilitar o uso e padronizar os valores de espaçamentos, utiliza-se uma escala linear como base, que cresce de com adição de 2px até 4px, de 4px até 16px, de 8px até 64px e de 16px até 256px.

base tokens

Lista de base tokens utilizados para compor os tokens de espaçamento.

spacing stack

O espaçamento stack é o valor entre os itens empilhados na vertical. Como exemplo, o espaço entre os componentes de texto, de texto e imagem e cards.

Wireframe de uma página web. Destaque para os valores de espaçamento que
separam cada elemento da interface, númerados de 1 a 4.”
  1. Espaço entre título e parágrafo.
  2. Espaço entre parágrafo e a lista de cards.
  3. Espaço entre o título do card e o texto.
  4. Espaço entre dois cards.

theme tokens

Lista de theme tokens para spacing stack.

spacing inline

O espaçamento inline é o valor da distância entre itens na horizontal. São exemplos o espaço entre um ícone e texto e também entre um campo de texto e um botão na horizontal.

Wireframe da página inicial de uma página web. Destaque para os valores de
espaçamento horizontal que separam cada elemento da interface, númerados de 1 a
2.
  1. Espaço entre botões.
  2. Espaço entre cards.

theme tokens

Lista de theme tokens para spacing inline.

spacing inset

O espaçamento inset representa o valor de margem interna de elementos. Nesse caso, o inset simples representa margem de igual valor vertical e horizontal.

Lista de cards ordenados verticalmente. Destaque para o espaçamento interno do card, que possui igual valor vertical e horizontal.Margem interna de um card.
Fundo escuro e uma modal em foco. Destaque para o espaçamento interno da modal, que possui igual valor vertical e horizontal.Margem interna de uma modal.

theme tokens

Lista de theme tokens para spacing inset.

spacing squished inset

O espaçamento squished inset é um espaçamento inset que tem valor maior na horizontal e menor na vertical.

Componente de campo de texto, com destaque no espaçamento interno da caixa de
texto. O espaçamento é maior nas laterais do que no topo e na base.

exemplo de spacing squished inset

theme tokens

Lista de theme tokens para spacing squished inset.

spacing stretched inset

O espaçamento stretch inset é um espaçamento inset que é menor na horizontal e maior na vertical.

Componente de área de texto, com destaque no espaçamento interno da caixa de
texto. O espaçamento é maior nas no topo e na base e menor nas laterais.

spacing stretched inset

theme tokens

Lista de theme tokens para spacing stretched inset.

conteúdo relacionado

Confira os artigos seguintes e entenda mais sobre tokens de espaçamento.