Spacing
Os espaçamentos do Nimbus se baseiam em um grid de 4px, gerando escalas de espaçamento que podem variar de acordo com a necessidade de cada interface, essas escalas usam a unidade de medida rem que dentro do nosso systema equivalem a 16px.
Reference | Token name | Token usage | Role |
|---|---|---|---|
0.125rem | spacing-0-5 | 0-5 | Padding of small atomic elements such as labels or chips. |
0.25rem | spacing-1 | 1 | Internal spaces in atomic components such as buttons or links. |
0.375rem | spacing-1-5 | 1-5 | - |
0.5rem | spacing-2 | 2 | Separation of elements within a container or component padding. |
0.625rem | spacing-2-5 | 2-5 | - |
0.75rem | spacing-3 | 3 | - |
0.875rem | spacing-3-5 | 3-5 | - |
1rem | spacing-4 | 4 | Internal spacing of components such as containers or cards. |
1.125rem | spacing-4-5 | 4-5 | - |
1.25rem | spacing-5 | 5 | - |
1.5rem | spacing-6 | 6 | Separation of content blocks that are not related to each other. |
1.75rem | spacing-7 | 7 | - |
2rem | spacing-8 | 8 | Spacing between page elements and content. |
2.25rem | spacing-9 | 9 | - |
2.5rem | spacing-10 | 10 | - |
2.75rem | spacing-11 | 11 | - |
3rem | spacing-12 | 12 | - |
3.5rem | spacing-14 | 14 | - |
4rem | spacing-16 | 16 | - |
4.5rem | spacing-18 | 18 | - |
5rem | spacing-20 | 20 | - |