Espaçamento
O sistema de espaçamento do Yampi Prism garante consistência entre todos os componentes.
Escala de Espaçamento
| Nome | Valor | Pixels | Uso |
|---|---|---|---|
0.5 | 0.125rem | 2px | Micro gaps |
1 | 0.25rem | 4px | Gap mínimo entre ícones |
1.5 | 0.375rem | 6px | Padding interno compacto |
2 | 0.5rem | 8px | Gap padrão entre elementos inline |
3 | 0.75rem | 12px | Padding de botões small |
4 | 1rem | 16px | Padding padrão de componentes |
5 | 1.25rem | 20px | Gap entre seções internas |
6 | 1.5rem | 24px | Padding de cards |
8 | 2rem | 32px | Gap entre seções |
10 | 2.5rem | 40px | Margem entre blocos |
12 | 3rem | 48px | Seções de página |
16 | 4rem | 64px | Espaçamento de layout |
20 | 5rem | 80px | Seções de landing page |
24 | 6rem | 96px | Seções principais |
Border Radius
| Token | Valor | Uso |
|---|---|---|
--radius | 0.5rem (8px) | Padrão de componentes |
calc(var(--radius) - 2px) | 6px | Botões, inputs |
calc(var(--radius) + 4px) | 12px | Cards, dialogs |
9999px | Circular | Badges, avatares |
Sombras
| Token | Uso |
|---|---|
--shadow-sm | Botões, inputs |
--shadow-md | Cards, dropdowns |
--shadow-lg | Dialogs, sheets |
css
.card { box-shadow: var(--shadow-md); border-radius: calc(var(--radius) + 4px); padding: 1.5rem;}Boas Práticas
- Use a escala de 4px (0.25rem) como unidade base
- Mantenha consistência: use sempre os mesmos valores para os mesmos tipos de espaçamento
- Cards:
padding: 1.5rem, border-radius:calc(var(--radius) + 4px) - Botões:
padding: 0.5rem 1rem, border-radius:calc(var(--radius) - 2px) - Entre seções de página:
padding: 6rem 0(96px)