Design SystemFoundations
Raio e elevação
Radius global, bordas hairline e sombras semânticas.
Radius
| Token | Valor |
|---|---|
--radius / md | 8px |
--radius-sm | 6px |
--radius-lg | 10px |
Tailwind: controles padrão usam rounded-md (calc(var(--radius) - 2px)). rounded-lg fica para overlays maiores (dialog/sheet/alert).
Bordas
Padrão hairline: --border-width-hairline (0.5px). Evitar bordas grossas.
Shadows
| Token | Uso |
|---|---|
--shadow-sm | Elevação mínima |
--shadow-md | Hover de card / toast |
--shadow-lg | Dialogs / overlays |