Sistema de Elevação e Profundidade

O que Sistema de Elevação e Profundidade faz?

Propósito

O Sistema de Elevação e Profundidade fornece uma metodologia para gerenciar a dimensão vertical (eixo Z) de uma interface web. Ele utiliza pistas visuais como sombras, tratamentos de superfície e ordens de empilhamento para estabelecer uma hierarquia clara de camadas. Este sistema garante que os usuários entendam a relação entre elementos sobrepostos, possam identificar superfícies interativas e experimentem um ambiente previsível e tátil que imita a profundidade do mundo real.

Casos de Uso

• Definir uma escala de sombras consistente para um sistema de design.
• Projetar interfaces complexas de múltiplas camadas, como painéis ou IDEs.
• Estabelecer padrões de ordem de empilhamento (z-index) para evitar "conflitos" de UI.
• Fornecer feedback tátil para estados interativos (ex: um botão que se eleva ao passar o mouse).
• Distinguir entre conteúdo de página persistente e sobreposições temporárias.

Quando NÃO Usar

• Designs Planos/Brutalistas: Onde a estética intencional é 2D e carece de profundidade ou sombras percebidas.
• Conteúdo Puramente Baseado em Texto: Artigos ou documentos simples onde não há camadas sobrepostas ou superfícies interativas.
• Dispositivos de Baixo Desempenho Crítico: Onde o uso intenso de filtros CSS ou sombras complexas pode causar lentidão significativa na renderização.

Entradas

1. Estética da Marca: A profundidade é "Física/Material" (sombras realistas) ou "Gráfica" (deslocamentos sólidos)?
2. Inventário de Componentes: Uma lista de todos os elementos de UI que exigem elevação (Cartões, Barras de Navegação, Modais, Botões).
3. Fonte de Luz Primária: Geralmente assumida como vindo do topo ou centro-superior.
4. Sistema de Espaçamento: O sistema-de-espaçamento-fluido para alinhar a propagação das sombras com as margens do layout.

Saídas

1. Escala de Elevação (Sombras): Um conjunto de 5 a 6 tokens de sombra padronizados (ex: elevação-peq a elevação-gd).
2. Mapa de Contexto de Empilhamento (Z-Index): Uma escala definida de valores z-index categorizados por função da camada.
3. Paleta de Superfície: Definições de cores de fundo que mudam com base na elevação (ex: superfícies mais escuras "afundam", superfícies mais claras "sobem").
4. Especificação de Interação: Regras de como a elevação muda durante os estados de Hover, Ativo e Foco.

Fluxo de Trabalho

1. Estabelecer os Níveis de Empilhamento

Divida a interface em camadas funcionais, de baixo para cima:

• Nível 0 (Base): O fundo/tela da página.
• Nível 1 (Plano): Conteúdo que fica sobre a base (ex: cartões planos, divisores).
• Nível 2 (Elevado): Elementos interativos ou cartões primários que "flutuam" sutilmente.
• Nível 3 (Fixo/Flutuante): Cabeçalhos globais, FABs (Botões de Ação Flutuante).
• Nível 4 (Sobreposição): Modais, Gavetas e seus planos de fundo.
• Nível 5 (Sistema): Dicas de ferramentas, Notificações Toast e alertas críticos.

2. Definir a Escala de Sombras

Crie uma progressão de sombras que corresponda à distância da base:

• Pequena (2dp): Separação sutil para botões ou cartões pequenos.
• Média (4dp-8dp): Elevação padrão para menus suspensos e navegação.
• Grande (12dp-24dp): Elevação alta para modais e camadas flutuantes.
• Extra Grande (32dp+): Profundidade dramática para foco temporário ou alertas do sistema.

Nota: Use múltiplas camadas de sombra (ex: uma sombra "nítida" e uma sombra "suave") para um efeito mais realista e de alta qualidade.

3. Atribuir Cores de Superfície

Profundidade não é apenas sobre sombras; é também sobre reflexão de luz:

• Modo Claro: Elementos de elevação mais alta geralmente se tornam levemente mais claros ou mantêm o branco puro enquanto a base é off-white.
• Modo Escuro: Elementos de elevação mais alta DEVEM se tornar mais claros (usando sobreposições brancas semitransparentes) para simular que estão mais próximos da fonte de luz.
• Implementação: Use color-mix(in oklch, var(--superfície-base) 100%, branco X%) (ou uma função de token equivalente baseada em OKLCH) para gerar programaticamente a cor de superfície de cada nível de elevação, em vez de escolher manualmente um novo valor hexadecimal por nível. OKLCH mantém passos de luminosidade percebida uniformes entre os matizes, o que ajustes hexadecimais planos não garantem.

4. Criar "Elevações" de Interação

Aplique o sistema-de-estados-interativos ao eixo Z:

• Hover (Passar o Mouse): Aumente o desfoque e a propagação da sombra para simular o elemento se elevando em direção ao usuário.
• Ativo (Clique): Diminua ou remova a sombra para simular o elemento sendo pressionado contra a superfície.

5. Documentar a Estratégia de Empilhamento (Z-Index)

Evite "Guerras de Z-Index" usando uma escala de 10 ou 100 passos:

• 0: Padrão
• 100: Navegação/Cabeçalho
• 500: Planos de fundo (backdrops)
• 600: Modais/Gavetas
• 1000: Dicas de ferramentas/Notificações Toast

Regras de Decisão

• A Regra da Fonte de Luz: Todas as sombras no sistema DEVEM compartilhar a mesma fonte de luz implícita (geralmente de cima para baixo) para manter a lógica visual.
• Elevação é Igual a Importância: A informação temporária mais importante (ex: um Alerta) deve ter a elevação mais alta e a sombra mais dramática.
• Sombra vs. Borda: Use bordas para estrutura (Nível 0-1) e sombras para profundidade (Nível 2+). Não use ambos fortemente no mesmo elemento, a menos que a marca seja altamente "esqueumórfica".
• Elevação no Modo Escuro: No modo escuro, nunca use sombras escuras sobre fundos escuros. Use o clareamento da cor da superfície (mudanças de luminosidade) como a principal pista de profundidade.

Restrições

• Acessibilidade: As pistas de elevação (sombras) devem complementar, não substituir, as pistas estruturais. Garanta que os elementos tenham contraste ou bordas suficientes para serem identificáveis sem a sombra. Sobreposições elevadas (modais, menus suspensos) nunca devem renderizar sobre um indicador de foco de forma que o corte ou o oculte (WCAG 2.2 SC 2.4.11).
• Desempenho: Evite box-shadow em elementos que animam frequentemente ou estão dentro de containers de rolagem de alta frequência.
• Responsividade: Sombras grandes podem "vazar" para fora da tela em dispositivos móveis; reduza a propagação da sombra ou mude para bordas em viewports pequenas.

Padrões de Falha Comuns

• Fontes de Luz Inconsistentes: Ter algumas sombras indo para a direita e outras para baixo, criando uma interface "instável" ou fragmentada.
• Números "Mágicos" de Z-Index: Usar z-index: 99999 para resolver um problema, o que eventualmente leva a código não mantível.
• Sombras Turvas: Usar preto puro (#000) para sombras em vez de uma versão transparente da cor da superfície ou um neutro escuro.
• Sobreposições Planas: Projetar um modal sem sombra ou plano de fundo, fazendo-o se misturar com o conteúdo atrás.
• Super-Elevação: Dar a cada cartão uma sombra pesada, o que achata a hierarquia porque nada se destaca.

Critérios de Validação

• Uma escala de elevação consistente de 5 a 6 passos é definida e usada.
• Todas as sombras compartilham uma única fonte de luz consistente.
• Os valores de z-index são agrupados em níveis lógicos e documentados.
• O modo escuro usa mudanças de luminosidade da superfície para indicar profundidade.
• Os estados de interação (Hover/Ativo) incluem movimento vertical ou mudanças de sombra.
• As sombras não causam estouro horizontal ou vertical em dispositivos móveis.
• Os elementos são distinguíveis mesmo se as sombras forem removidas (verificação de A11y).
• Camadas de elevação mais alta nunca obscurecem os indicadores de foco em elementos abaixo ou dentro delas (WCAG 2.2 SC 2.4.11).