Fundação
Elevação
Elevação é expressa com cor de superfície, não com sombra. Quanto mais claro o fundo, mais elevado o elemento — confiável em qualquer brilho de tela.
Superfícies
Nível 0 ·
#0f0f0f
Fundo da aplicação. Toda tela começa aqui.
Nível 1 ·
#1a1a1a
Cards, inputs, bottom sheets, painéis, sidebar do DiSco.
Nível 2 ·
#2a2a2a
Hover state, bordas divisórias, separadores, skeletons.
Nível 3 ·
#333333
Drag handles, elementos interativos sobre cards, pressed state.
Card · nível 1
Input · nível 2
Hover · nível 3
Z-Index
| Camada | z-index | Tailwind | Exemplos |
|---|---|---|---|
| Conteúdo base | 0 | z-0 | Fundo, cards estáticos |
| Elementos flutuantes | 10 | z-10 | Botão FAB, sticky header |
| Dropdown / popover | 20 | z-20 | Menus de contexto, tooltips |
| Bottom nav | 30 | z-30 | Barra de navegação inferior |
| Bottom sheet | 40 | z-40 | Sheets deslizantes, drawers |
| Modal / widget | 50 | z-50 | FeedbackWidget, DiSco search overlay |
| Toast / notificação | 60 | z-[60] | Toasts, snackbars (acima de modais) |
Regras
Sem sombra
Não use
shadow-* para criar elevação visual. Sombras escuras são invisíveis em tema dark. Use diferença de superfície.Sem valores intermediários
Não crie cores fora dos 4 níveis:
#141414, #1f1f1f, #252525 etc. Se precisar de mais contraste, adicione borda border border-[#2a2a2a].Sobreposição de overlay
Quando um sheet ou modal aparecer, o fundo usa
bg-black/60 (overlay semitransparente) — não muda o nível de superfície do conteúdo abaixo.Z-index em saltos de 10
Nunca use
z-11, z-31 etc. Os saltos existem para deixar espaço para novas camadas sem reordenar tudo.