Pão de Açúcar // Design System [Landing Pages] v.01/2025
Pão de Açúcar // Design System [Landing Pages] v.01/2025
No contexto de um design system, o uso de espaçamento é crucial para garantir consistência e harmonia visual em interfaces de usuário. A base de espaçamento utilizada neste sistema é de 1rem, que equivale a 16px. Este valor base proporciona uma unidade de medida flexível e responsiva, permitindo que o design se adapte a diferentes tamanhos de tela e resoluções.
Para manter a coerência em todo o sistema, os valores de espaçamento são definidos em múltiplos de 8. Esta abordagem modular facilita o cálculo e aplicação de espaçamentos, simplificando o processo de design e desenvolvimento. Por exemplo, os valores de espaçamento podem ser 8px (0.5rem), 16px (1rem), 24px (1.5rem), 32px (2rem), e assim por diante. Cada incremento adiciona 8px ao valor anterior, formando uma progressão sequencial que é fácil de seguir e aplicar.
Embora o design kit completo considere espaçamentos até 264px, nesta seção estamos focando nos valores até 104px. Isso cobre uma ampla gama de necessidades de espaçamento comum, desde pequenos ajustes entre elementos até margens e preenchimentos maiores que estruturam a layout de uma página.
| Token | Multiplicador | Valor em rem | Valor em px | Visual |
|---|---|---|---|---|
| --rem-base-4 (quark) | 0.25 | 0.25rem | 4px | |
| --rem-base-8 (nano) | 0.5 | 0.5rem | 8px | |
| --rem-base-12 | 0.75 | 0.75rem | 12px | |
| --rem-base | 1 | 1rem | 16px | |
| --rem-base-24 | 1.5 | 1.5rem | 24px | |
| --rem-base-32 | 2 | 2rem | 32px | |
| --rem-base-40 | 2.5 | 2.5rem | 40px | |
| --rem-base-48 | 3 | 3rem | 48px | |
| --rem-base-56 | 3.5 | 3.5rem | 56px | |
| --rem-base-64 | 4 | 4rem | 64px | |
| --rem-base-72 | 4.5 | 4.5rem | 72px | |
| --rem-base-80 | 5 | 5rem | 80px | |
| --rem-base-88 | 5.5 | 5.5rem | 88px | |
| --rem-base-96 | 6 | 6rem | 96px | |
| --rem-base-104 | 6.5 | 6.5rem | 104px |