Radius, sombras, transições, overlays
Componentes
Tokens de forma, elevação, movimento e sobreposição.
Border radius
Small
3px
Arredondamento sutil
Medium
6px
Inputs, elementos pequenos
Large
16px
Cards, imagens, containers
Full
32px
Badges, tags
Ultra
48px
Elementos decorativos grandes
Pill
100px
Botões, pills, badges
Sombras
Card
Cards e elementos elevados
Soft
Elevação sutil
Sticky
Menus e interfaces
Dark
Modo serviços e modo escuro
Transições
| Componente | Propriedade | Duração | Curva |
|---|---|---|---|
| Botão | all | 0.15s | ease-in-out |
| Input focus | border-color, box-shadow | 0.2s | ease |
| Card hover | transform, box-shadow | 0.3s | ease-out |
| Modal entrada | opacity, transform | 0.3s | cubic-bezier(0.19,1,0.22,1) |
| Modal saída | opacity, transform | 0.2s | ease-in |
| Toast entrada | opacity, transform | 0.3s | cubic-bezier(0.19,1,0.22,1) |
| Drawer | transform | 0.3s | cubic-bezier(0.19,1,0.22,1) |
| Tooltip | opacity | 0.15s | ease |
| Collapse | height, opacity | 0.3s | cubic-bezier(0.19,1,0.22,1) |
Overlay patterns
| Contexto | Token | Blur | Z-index | Comportamento |
|---|---|---|---|---|
| Modal | midnight/55 | blur(10px) | 1055 | Clique fora fecha |
| Onboarding | midnight/80 | nenhum | 1060 | Só fecha por botão |
| Loading/Splash | Frost sólido | nenhum | 1090 | Auto-dismiss |
| Dropdown | transparente | nenhum | 1000 | Clique fora fecha |
| Toast | sem overlay | nenhum | 1090 | Auto-dismiss 3s |
| Drawer/Sidebar | midnight/40 | blur(2px) | 1045 | Clique fora ou swipe |
Efeitos
Blur leve
blur(5px)
Blur médio
blur(10px)
Border-radius imagem
16px