Intro
Espaçamentos no Design System são elementos essenciais para criar interfaces visuais harmônicas e organizadas. Eles garantem a consistência do design, facilitam a legibilidade e contribuem para uma experiência do usuário agradável.
Unidade numérica
Unidade número são valores-base que são usados para contemplar a escala de espaçamento do Design System, e pode ser usado através dos tokens.
| Token | Regra | Valor |
|---|---|---|
| –ms-spacing-base | – | 4 |
| –ms-spacing-0 | –ms-spacing-base*0 | 0 |
| –ms-spacing-1 | – | 1 |
| –ms-spacing-2 | –ms-spacing-base*0 | 2 |
| –ms-spacing-4 | –ms-spacing-base*1 | 4 |
| –ms-spacing-8 | –ms-spacing-base*2 | 8 |
| –ms-spacing-12 | –ms-spacing-base*3 | 12 |
| –ms-spacing-16 | –ms-spacing-base*4 | 16 |
| –ms-spacing-20 | –ms-spacing-base*5 | 20 |
| –ms-spacing-24 | –ms-spacing-base*6 | 24 |
| –ms-spacing-32 | –ms-spacing-base*8 | 32 |
| –ms-spacing-40 | –ms-spacing-base*10 | 40 |
| –ms-spacing-48 | –ms-spacing-base*12 | 48 |
| –ms-spacing-56 | –ms-spacing-base*14 | 56 |
| –ms-spacing-64 | –ms-spacing-base*16 | 64 |
| –ms-spacing-72 | –ms-spacing-base*18 | 72 |
| –ms-spacing-80 | –ms-spacing-base*20 | 80 |
| –ms-spacing-88 | –ms-spacing-base*22 | 88 |
| –ms-spacing-96 | –ms-spacing-base*24 | 96 |
| –ms-spacing-104 | –ms-spacing-base*26 | 104 |
Há uma característica na escala que deixamos de usar alguns múltiplos de 4 para termos uma escala mais harmônica, os valores estão apagados em cinza na escala.
A regra para criar um valor da escala é simples caso precise basta pegar o valor base que é 4 e multiplicar pelo número inteiro escolhido, exemplo (4*7=28).
Gap
Gap é uma escala usada para espaçamentos entre elementos empilhados dentro de uma lista, seja ela vertical ou horizontal essa escala garante que tenha os espaços aplicados corretamente em todo o design.
| Token | Token complementar | Valor |
|---|---|---|
| –ms-gap-0 | –ms-spacing-0 | 0 |
| –ms-gap-1 | –ms-spacing-1 | 1 |
| –ms-gap-2 | –ms-spacing-2 | 2 |
| –ms-gap-4 | –ms-spacing-4 | 4 |
| –ms-gap-8 | –ms-spacing-8 | 8 |
| –ms-gap-12 | –ms-spacing-12 | 12 |
| –ms-gap-16 | –ms-spacing-16 | 16 |
| –ms-gap-20 | –ms-spacing-20 | 20 |
| –ms-gap-24 | –ms-spacing-24 | 24 |
| –ms-gap-32 | –ms-spacing-32 | 32 |
| –ms-gap-40 | –ms-spacing-40 | 40 |
| –ms-gap-48 | –ms-spacing-48 | 48 |
| –ms-gap-56 | –ms-spacing-56 | 56 |
| –ms-gap-64 | –ms-spacing-64 | 64 |
| –ms-gap-72 | –ms-spacing-72 | 72 |
| –ms-gap-80 | –ms-spacing-80 | 80 |
Novamente por ser uma escala aplicada aos espaçamentos entre elementos ele possuí uma escala menor de valores para serem aplicados, isso não quer dizer que não possa usar outro valor arbitrário, basta seguir a regra usando o token de –ms-spacing-base*número desejado e obter o valor mais adequado para seu design.