Espaçamento
Espaços ajudam a gerar agrupamentos de informações, que organizam a tela e criam uma hierarquia que facilita a leitura e a compreensão.
Visão geral
O espaçamento é usado para construir todos os componentes do Tangram. Use o grid 8px como base para a definição das escalas de espaçamentos.
Estruturas pequenas
É a escala usada para construir as menores estruturas disponíveis, como por exemplo os componentes. Use valores de 8px até 24px, dependendo da necessidade da estrutura.
Estruturas grandes
É a escala usada em composições de 2 ou mais componentes em partes maiores, como patterns ou telas inteiras. Use valores acima de 24px, dependendo da necessidade da estrutura.
Ritmo vertical
Os espaçamentos especificados aqui são valores mínimos para determinados tipos de conteúdo e permitem o alcance do look and feel adequado para os produtos. Não use espaçamentos menores que os valores determinados.
Títulos
O espaçamento padrão utilizado entre os títulos e o conteúdo que vem logo abaixo deles deve ser de, no mínimo, 16px (--size-spacing-04).
Essa regra é válida quando o elemento abaixo do título é um texto ou algum outro componente. A regra não é válida quando abaixo de um título tiver outro título. Para este último caso, existe a regra abaixo:
Escala de espaçamento
A escala de espaçamento pode ser aplicada às propriedades de margin ou padding. Abaixo estão os espaçamentos existentes nos design tokens:
| Token | Valor |
|---|---|
--size-spacing-01 | 4px |
--size-spacing-02 | 8px |
--size-spacing-03 | 12px |
--size-spacing-04 | 16px |
--size-spacing-05 | 24px |
--size-spacing-06 | 32px |
--size-spacing-07 | 40px |
--size-spacing-08 | 48px |
--size-spacing-09 | 56px |
--size-spacing-10 | 64px |
--size-spacing-11 | 96px |
--size-spacing-12 | 160px |