O sistema de espaçamentos ajuda a manter um ritmo vertical e horizontal na interface, tornando-a mais fácil de usar, reduzindo a carga cognitiva.
Os componentes seguem um sistema de espaçamento compreendidos entre 2px e 120px. Definimos uma base de construção, com a finalidade estabelecer valores espaciais utilizados em todos os componentes. Ao seguir uma convenção espacial definida, diminuímos a complexidade do projeto e aumentamos a consistência.
A escala de espaçamentos é um conjunto de regras que nos permite medir, dimensionar e espaçar os elementos da interface do utilizador. O seu principal objetivo é reduzir a quantidade de decisões necessárias sobre o espaçamento e evitar inconsistências. A sua utilização permite-nos garantir uma construção coerente e funcional, que se propaga ao longo de todo o design e gera padrões.
| Escala | Valor em pixeis |
|---|---|
| 0 | 0px |
| 5xs | 2px |
| 4xs | 4px |
| 3xs | 8px |
| 2xs | 12px |
| xs | 16px |
| s | 24px |
| m | 32px |
| l | 40px |
| xl | 48px |
| 2xl | 56px |
| 3xl | 64px |
| 4xl | 72px |
| 5xl | 80px |
| 6xl | 96px |
| 7xl | 120px |
Exemplos de casos de uso:
o 5xs representa a escala que está na tabela acima, pode ser alterada por outro valor da tabela. O 2px representa o valor em pixeis da escala selecionada, nesse caso o 5xs.
.gra-margin-5xs {
margin: 2px;
}
<h1 class="gra-margin-5xs">GRA Design System</h1>
.gra-margin-y-5xs {
margin-top: 2px;
margin-bottom: 2px;
}
<h1 class="gra-margin-y-5xs">GRA Design System</h1>
.gra-margin-x-5xs {
margin-left: 2px;
margin-right: 2px;
}
<h1 class="gra-margin-x-5xs">GRA Design System</h1>
.gra-margin-top-5xs {
margin-top: 2px;
}
<h1 class="gra-margin-top-5xs">GRA Design System</h1>
.gra-margin-bottom-5xs {
margin-bottom: 2px;
}
<h1 class="gra-margin-bottom-5xs">GRA Design System</h1>
.gra-margin-left-5xs {
margin-left: 2px;
}
<h1 class="gra-margin-left-5xs">GRA Design System</h1>
.gra-margin-right-5xs {
margin-right: 2px;
}
<h1 class="gra-margin-right-5xs">GRA Design System</h1>
Exemplos de casos de uso:
o 5xs representa a escala que está na tabela acima, pode ser alterada por outro valor da tabela. O 2px representa o valor em pixeis da escala selecionada, nesse caso o 5xs.
.gra-padding-5xs {
padding: 2px;
}
<h1 class="gra-padding-5xs">GRA Design System</h1>
.gra-padding-y-5xs {
padding-top: 2px;
padding-bottom: 2px;
}
<h1 class="gra-padding-y-5xs">GRA Design System</h1>
.gra-padding-x-5xs {
padding-left: 2px;
padding-right: 2px;
}
<h1 class="gra-padding-x-5xs">GRA Design System</h1>
.gra-padding-top-5xs {
padding-top: 2px;
}
<h1 class="gra-padding-top-5xs">GRA Design System</h1>
.gra-padding-bottom-5xs {
padding-bottom: 2px;
}
<h1 class="gra-padding-bottom-5xs">GRA Design System</h1>
.gra-padding-left-5xs {
padding-left: 2px;
}
<h1 class="gra-padding-left-5xs">GRA Design System</h1>
.gra-padding-right-5xs {
padding-right: 2px;
}
<h1 class="gra-padding-right-5xs">GRA Design System</h1>