Elevação
As sombras são tingidas com o navy da marca em baixa opacidade, nunca preto puro. Isso faz com que superfícies elevadas pareçam coesas em fundos claros e sutis em fundos escuros.
A elevação serve à Verdade: ela sinaliza uma hierarquia honesta (o que está em foco, o que está atrás) sem simular uma profundidade que a interação não tem.
| Token | Utilitário Tailwind | Uso |
|---|---|---|
shadow.xs | shadow-vln-xs | Elevação mínima. inputs inline em repouso |
shadow.sm | shadow-vln-sm | Cards em repouso |
shadow.md | shadow-vln-md | Dropdowns, popovers |
shadow.lg | shadow-vln-lg | Sheets, drawers |
shadow.xl | shadow-vln-xl | Diálogos |
shadow.focus | shadow-vln-focus | Focus ring (Azul Ação a 40% de opacidade) |
shadow.xs
shadow.sm
shadow.md
shadow.lg
shadow.xl
shadow.focus
Evite
- Não use
shadow-mddo Tailwind padrão. é preto puro, fora da marca. - Não combine várias sombras no mesmo elemento. Escolha uma.