Espaçamento
Sistema de espaçamento, grid e layout do design system IARA. Utilize estes tokens para manter consistência visual.
Escala de Espaçamento
Baseada em múltiplos de 4px.
| Token | Pixels | REM | Visualização | |
|---|---|---|---|---|
space-0 | 0px | 0rem | ||
space-0.5 | 2px | 0.125rem | ||
space-1 | 4px | 0.25rem | ||
space-2 | 8px | 0.5rem | ||
space-3 | 12px | 0.75rem | ||
space-4 | 16px | 1rem | ||
space-5 | 20px | 1.25rem | ||
space-6 | 24px | 1.5rem | ||
space-8 | 32px | 2rem | ||
space-10 | 40px | 2.5rem | ||
space-12 | 48px | 3rem | ||
space-16 | 64px | 4rem | ||
space-20 | 80px | 5rem | ||
space-24 | 96px | 6rem |
Espaçamento Fluido
Valores responsivos usando clamp().
--pad-bodyPadding principal do body, responsivo
clamp(1rem, -1.125rem + 6.8vw, 3.125rem)--pad-heroPadding de seções hero
clamp(1.875rem, -1.25rem + 10vw, 5rem)Border Radius
Cantos arredondados padronizados.
Botão
--radius-button100px
Card
--radius-card16px
Grande
--radius-lg24px
Sistema de Grid
Layouts comuns usando CSS Grid.
2 Colunas
Layout básico 50/50
1
2
3 Colunas
Perfeito para cards
1
2
3
4 Colunas
Grid denso
1
2
3
4
12 Colunas
Sistema flexível
1
2
3
4
5
6
7
8
9
10
11
12
Breakpoints
Pontos de quebra para design responsivo.
| Prefixo | Min-width | Uso típico |
|---|---|---|
sm: | 640px | Smartphones landscape |
md: | 768px | Tablets |
lg: | 1024px | Laptops |
xl: | 1280px | Desktops |
2xl: | 1536px | Telas grandes |
Uso Recomendado
Guia rápido de espaçamento.
✓ Faça
- • Use tokens de espaçamento consistentes
- • Mantenha múltiplos de 4px
- • Use espaçamento fluido para responsividade
- • Agrupe elementos relacionados com menos espaço
✗ Evite
- • Valores arbitrários (23px, 17px)
- • Espaçamento inconsistente entre páginas
- • Misturar unidades (px com rem)
- • Ignorar breakpoints móveis