Spacing
El espaciado de Nimbus se basa en una grid de 4px, generando escalas de espaciado que pueden variar según las necesidades de cada interfaz, estas escalas utilizan la unidad de medida rem, que en nuestro sistema equivale 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 | - |