Tokens de Elevação
Design System · Arrow DS · Dimensão 05 Elevação
Versão: 1.0 · Status: Validado
Âncora base: #081128 (Midnight Neutral 900) cor base de todas as sombras
Depende de: Dimensão 01 Cor
Usado por: Todos os componentes de UI, arquitetura de camadas da interface
Princípios da Dimensão
Elevação é a dimensão silenciosa.
Cor grita. Tipografia fala. Espaço respira. Elevação organiza sem que o usuário perceba que está sendo organizado.
Em um produto como a Effecti denso em tabelas, prazos, ações e dados a profundidade é o mecanismo que impede a interface de virar ruído. É ela que diz, sem palavras: isso está embaixo, isso está em cima, isso requer sua atenção agora.
Três princípios guiam a construção:
Profundidade como comunicação, não decoração. Cada nível de sombra existe porque um elemento ocupa uma camada funcional diferente não porque ficou mais bonito com sombra.
A sombra é da marca. A cor base de todas as sombras do sistema é o Midnight Neutral #081128. Sombras pretas genéricas não existem aqui.
O pressed afunda, não flutua. Estados de pressão em elementos interativos removem a sombra o elemento recua em vez de se elevar.
Fundação
As sombras primitivas são construídas em escala logarítmica de blur e opacidade cada nível tem exatamente o dobro do blur do anterior. Todas as sombras usam camada dupla: uma sombra de ambiente e uma sombra direta.
| Propriedade | Valor | Descrição |
|---|---|---|
| Cor base | #081128 | Midnight Neutral 900 a cor mais profunda da Effecti |
| Método | Camada dupla | Sombra de ambiente + sombra direta em cada nível |
| Escala | Logarítmica | Blur dobra a cada nível; opacidade cresce em progressão controlada |
| Teto de opacidade | 16% | Conservador suficiente sem competir com cor e tipografia |
css
:root {
--shadow-color-base: 8, 17, 40; /* #081128 em RGB Midnight Neutral 900 */
}Primitivos
| Primitivo | Valor CSS | Descrição |
|---|---|---|
shadow-0 | none | Sem sombra ausência de elevação ou estado pressed |
shadow-1 | 0px 1px 2px rgba(8,17,40,0.06) | Sombra mínima separação sutil de superfície |
shadow-2 | 0px 2px 4px rgba(8,17,40,0.08), 0px 1px 2px rgba(8,17,40,0.04) | Sombra leve card em superfície base |
shadow-3 | 0px 4px 8px rgba(8,17,40,0.10), 0px 2px 4px rgba(8,17,40,0.06) | Sombra média hover, dropdown |
shadow-4 | 0px 8px 16px rgba(8,17,40,0.12), 0px 4px 8px rgba(8,17,40,0.08) | Sombra forte sticky, popover, FAB |
shadow-5 | 0px 16px 32px rgba(8,17,40,0.16), 0px 8px 16px rgba(8,17,40,0.10) | Sombra máxima modal, drawer |
css
:root {
--shadow-0: none;
--shadow-1: 0px 1px 2px rgba(8,17,40,0.06);
--shadow-2: 0px 2px 4px rgba(8,17,40,0.08), 0px 1px 2px rgba(8,17,40,0.04);
--shadow-3: 0px 4px 8px rgba(8,17,40,0.10), 0px 2px 4px rgba(8,17,40,0.06);
--shadow-4: 0px 8px 16px rgba(8,17,40,0.12), 0px 4px 8px rgba(8,17,40,0.08);
--shadow-5: 0px 16px 32px rgba(8,17,40,0.16), 0px 8px 16px rgba(8,17,40,0.10);
}Tokens Semânticos
Estrutura de cada token
elevation.{família}.{papel}
└── box-shadow (valor via alias do primitivo)
Exemplo:
elevation.surface.sm → var(--shadow-1)
elevation.interactive.hover → var(--shadow-3)
elevation.overlay.modal → var(--shadow-5)Família 01 elevation.surface
Papel: Elementos estáticos que habitam a página. A arquitetura de fundo.
| Token semântico | Primitivo | Intenção |
|---|---|---|
elevation.surface.flat | shadow-0 | Card sobre superfície colorida, linha de tabela |
elevation.surface.sm | shadow-1 | Card padrão sobre color.surface.base |
elevation.surface.md | shadow-2 | Card sobre color.surface.raised, painel lateral |
css
--elevation-surface-flat: var(--shadow-0);
--elevation-surface-sm: var(--shadow-1);
--elevation-surface-md: var(--shadow-2);Família 02 elevation.interactive
Papel: Elementos que respondem ao toque. A elevação que comunica estado.
| Token semântico | Primitivo | Intenção |
|---|---|---|
elevation.interactive.resting | shadow-1 | Botão em repouso elevação discreta |
elevation.interactive.hover | shadow-3 | Botão ou card em hover eleva para confirmar a intenção |
elevation.interactive.pressed | shadow-0 | Pressionado o elemento afunda. Remove a sombra. Fisicalidade. |
css
--elevation-interactive-resting: var(--shadow-1);
--elevation-interactive-hover: var(--shadow-3);
--elevation-interactive-pressed: var(--shadow-0);Combinações recomendadas
elevation.interactive.resting + color.action.primary → botão primário em repouso
elevation.interactive.hover + color.action.hover → botão primário em hover
elevation.interactive.pressed + color.action.pressed → botão primário pressionado
elevation.surface.flat → botão disabled (sem sombra)Família 03 elevation.overlay
Papel: Elementos que flutuam acima da página. Camadas que interrompem ou complementam.
| Token semântico | Primitivo | Intenção |
|---|---|---|
elevation.overlay.dropdown | shadow-3 | Select, combobox, menu de contexto |
elevation.overlay.popover | shadow-4 | Tooltip rico, date picker, popover de informação |
elevation.overlay.modal | shadow-5 | Modal, dialog de confirmação camada máxima |
elevation.overlay.drawer | shadow-5 | Side sheet, drawer lateral |
css
--elevation-overlay-dropdown: var(--shadow-3);
--elevation-overlay-popover: var(--shadow-4);
--elevation-overlay-modal: var(--shadow-5);
--elevation-overlay-drawer: var(--shadow-5);Família 04 elevation.sticky
Papel: Elementos persistentes que permanecem visíveis durante o scroll. A âncora da interface.
| Token semântico | Primitivo | Intenção |
|---|---|---|
elevation.sticky.header | shadow-2 | Header fixo separação sutil do conteúdo |
elevation.sticky.fab | shadow-4 | Botão de ação flutuante |
elevation.sticky.toast | shadow-4 | Notificação toast deve ser percebida imediatamente |
css
--elevation-sticky-header: var(--shadow-2);
--elevation-sticky-fab: var(--shadow-4);
--elevation-sticky-toast: var(--shadow-4);Z-index Semântico
O fim dos números mágicos. Nenhum z-index: 9999 no código da Effecti.
| Token | Valor | Elementos |
|---|---|---|
z.base | 0 | Fluxo padrão do documento |
z.raised | 10 | Cards, painéis, elementos levemente elevados |
z.dropdown | 100 | Dropdowns, selects, menus de contexto |
z.sticky | 200 | Headers fixos, footers sticky, colunas fixas |
z.popover | 300 | Popovers, date pickers, menus flutuantes |
z.backdrop | 400 | Overlay/backdrop de modal |
z.modal | 500 | Modal, dialog acima do backdrop |
z.toast | 600 | Toast, snackbar — sempre visível acima de modais |
z.tooltip | 700 | Tooltip — camada mais alta (precisa furar modais e toasts) |
css
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-popover: 300;
--z-backdrop: 400;
--z-modal: 500;
--z-toast: 600;
--z-tooltip: 700;Regra de ouro: nenhum componente usa um valor numérico diretamente. Todo
z-indexaponta para um token.
Regras Globais do Sistema
Dark Mode Elevação
No dark mode, sombras perdem eficácia física. A solução é dupla: manter a sombra e complementar com variação de superfície.
| Nível | Light mode | Dark mode |
|---|---|---|
elevation.surface.flat | shadow-0 | shadow-0 + diferença de color.surface |
elevation.surface.sm | shadow-1 | shadow-1 com opacidade reduzida em 30% |
elevation.overlay.modal | shadow-5 | shadow-4 + borda color.border.default |
Relação sombra–z-index
| Família de elevação | Token de z-index correspondente |
|---|---|
elevation.surface.* | z.base ou z.raised |
elevation.interactive.* | z.base |
elevation.overlay.dropdown | z.dropdown |
elevation.overlay.popover | z.popover |
elevation.overlay.modal | z.modal |
elevation.sticky.* | z.sticky (toast usa z.toast) |
O que nunca fazer
| Proibido | Alternativa correta |
|---|---|
box-shadow: 0 4px 8px rgba(0,0,0,0.2) | var(--elevation-overlay-dropdown) |
z-index: 9999 | var(--z-toast) ou valor documentado |
| Sombra em botão desabilitado | var(--elevation-surface-flat) = shadow-0 |
shadow-5 em toast | var(--elevation-sticky-toast) = shadow-4 |
| Valores de z-index diretamente no código | Token semântico correspondente |
Decisões Estratégicas Registradas
Midnight #081128 como cor base de todas as sombras
Sombras pretas genéricas (rgba(0,0,0,*)) não existem no sistema. A cor base é sempre derivada do Midnight Neutral coerência cromática com a paleta da marca.
Pressed remove sombra o elemento afunda
Estados de pressão em elevation.interactive recorrem ao shadow-0. A remoção de sombra comunica fisicalidade.
Z-index semântico: nenhum número mágico no código
Toda referência de z-index no produto aponta para um token da escala.
Toast acima de tudo semprez.toast é o teto absoluto do sistema (600). Nenhum elemento pode ter z-index acima de toast, exceto por decisão explícita documentada.
Exemplos de Uso
Escala primitiva de sombras
shadow-0 → shadow-5 — distância perceptual uniforme
shadow-0
shadow-1
shadow-2
shadow-3
shadow-4
shadow-5
Estados interativos — o pressed afunda
elevation.interactive — resting · hover · pressed · disabled
resting · shadow-1
hover · shadow-3
pressed · afunda
disabled · sem elevação
Z-index semântico — escala de camadas
z.base → z.toast — hierarquia sem números mágicos
z.toast · 600toast, snackbar — acima de tudo
z.modal · 500modal, dialog
z.popover · 300tooltips, date picker
z.dropdown · 100selects, menus de contexto
z.base · 0fluxo padrão do documento
Arquivos de Output Dimensão 05
| Arquivo | Formato | Conteúdo |
|---|---|---|
effecti_elevation_tokens_v1.css | CSS | Custom Properties primitivos de sombra + tokens semânticos + z-index |
effecti_elevation_tokens_v1.dart | Dart | Tokens para Flutter/Material |
effecti_elevation_scale_v1.svg | SVG | Visualização da escala de elevação para validação no Figma |
Effecti Programa de Governança de Design System · Dimensão 05 · v1.0