Elevação
Elevation é a distância entre duas superfícies ao longo do eixo z.
Shadow
A elevação pode ser representada por sombras projetadas com diferentes intensidades de acordo com a elevação em que o elemento se encontra. O uso de sombras auxilia na percepção da altura do elemento em relação a uma determinada superfície. É um aspecto importante na organização do layout pois auxilia na percepção do usuário em relação a hierarquia entre diferentes elementos na tela.
Eficiência e clareza
O efeito de elevação deve fazer com que os elementos pareçam empilhados uns sobre os outros mas que não possam passar entre si.
Lei da impenetrabilidade
Dois corpos distintos não podem ocupar o mesmo lugar no espaço e ao mesmo tempo. Prevenir isso usando elevações diferentes.
Ítens que se encontram em uma mesma camada não podem ocupar o mesmo espaço na tela.
O elemento com maior relevância ou destaque deve se encontrar na elevação mais alta, como por exemplo, uma caixa de diálogo que aparece temporariamente sobre os demais elementos da tela. Não utilize apenas como elemento decorativo sem a intenção de destacar ou dar relevância, o objetivo de usar shadow é fornecer uma hierarquia significativa entre elementos dentro da interface. A elevação de uma camada não é adicionada ao conteúdo (imagine as camadas sem espessura).
Escala de elevações
Cada camada sobreposta está em um nível, 0 (superfície), 1, 2, 3, 4, 5, 6. Quanto maior o nível, mais distante a camada se encontra da superfície. As elevações, +1dp, +2dp, +3dp ou +4dp, não são vinculadas ao nível que o componente está, um elemento no nível 4 pode receber +1dp de elevação.
Um componente com elevação +1dp está mais próximo da superfície do que um elemento em +3dp, e assim por diante. Essa sobreposição de elevações cria uma hierarquia espacial entre os componentes, de forma sutil, permite que o usuário consiga perceber quais elementos têm maior relevância na tela. As elevações também podem ser representadas através das cores.
Veja mais no tópico: 🔗 - Como elevar?.
Recomendações
Quando elevar?
Mais perto = mais foco (hierarquia)
Elevar elemento quando:
Sempre que for um elemento fixo no scroll;
Tiverem conteúdo mais importante (como modais);
Quando eles controlarem os elementos atrás deles (como a app bar);
Precisarem reagir à alguma interação (como itens arrastáveis ou clicáveis);
Quanto maior o número(nível), mais alto, mais importante o elemento é.
Como elevar?
Adicionando sombra;
Usando overlays/scrims;
Mostrando animações alterando tamanho ou posição (para interações);
Aumentando o tom de fundo
↳ Em alguns casos a elevação pode ser representada com cor e sem shadow, apenas subindo a escala da cor.
Exemplo:
No dark mode, nem sempre a elevação dos elementos consegue ser resolvida e ter o destaque necessário apenas com shadow, por isso, pode ser necessário usar cores para criar a sobreposição das camadas.
Estilos
As sombras são divididas em quatro estilos: soft, heavy, candy e header.
Soft - sombras difusas de cor neutra;
Heavy - sombras mais duras de cor neutra
Candy - sombra colorida.
Header - sombra mais difusa e neutra, de uso exclusivo do componente de header.
0
+1
+2
+3
+4
Aplicações
-
Page content
Button Card
Input
List
Index bar
Footer
Disclaimers
0
-
kosmos-shadow-soft-2dp
Elementos maiores que tenham maior destaque em casos comparativos
+2dp
Soft
kosmos-shadow-header
Header
+3dp
Header
kosmos-shadow-heavy+1dp
Button hover
Button candy
Card hover
List hover/drag
Dropdown
+1dp
Heavy
kosmos-shadow-heavy+2dp
Tab bar
Bottom app bar
Song progress bar
+2dp
Heavy
kosmos-shadow-heavy+3dp
Menus
Bottom sheets
Snackbars
Fixed buttons
+3dp
Heavy
kosmos-shadow-heavy+4dp
Modal
Barra de busca
+4dp
Heavy
kosmos-shadow-academyCandy+2dp
Aplicação em elementos de interface que precisam de maior destaque visual
+2dp
Candy
Header
Header
Web: kosmos-shadow-header App: kosmos.shadow.header
Drop Shadow 1 X: 0 Y: -16 Blur: 80 Spread: 20
kosmos-ref-shadowColor-headerShadow1
Soft
+2dp
Web: kosmos-shadow-soft-2dp App: kosmos.shadow.soft.2dp
Drop Shadow: X: 0 Y: 6 Blur: 60 Spread: 0
kosmos-ref-shadowColor-soft2dpShadow1
Aplicação em elementos maiores que tenham mais destaque, sombra mais difusa
Heavy
+1dp
Web: kosmos-shadow-heavy+1dp
Drop Shadow 1: X: 0 Y: 8 Blur: 20 Spread: -8
kosmos-ref-shadowColor-hard1dpShadow1
Drop Shadow 2: X: 0 Y: 0 Blur: 10 Spread: 0
kosmos-ref-shadowColor-hard1dpShadow2
Aplicação em elementos de interface
+2dp
Web: kosmos-shadow-heavy+2dp
X: 0 Y: 16 Blur: 24 Spread: -10
kosmos-ref-shadowColor-hard2dpShadow1
X: 0 Y: 1 Blur: 15 Spread: 0
kosmos-ref-shadowColor-hard2dpShadow2
Aplicação em elementos de interface
+3dp
Web: kosmos-shadow-heavy+3dp
X: 0 Y: 24 Blur: 28 Spread: -12
kosmos-ref-shadowColor-hard3dpShadow1
X: 0 Y: 2 Blur: 20 Spread: 0
kosmos-ref-shadowColor-hard3dpShadow2
Aplicação em elementos de navegação
+4dp
Web: kosmos-shadow-heavy+4dp
Drop Shadow 1: X: 0 Y: 32 Blur: 32 Spread: -14
kosmos-ref-shadowColor-hard4dpShadow1
Drop Shadow 2: X: 0 Y: 3 Blur: 25 Spread: 0
kosmos-ref-shadowColor-hard4dpShadow2
Aplicação em itens que aparecem acima de elementos de navegação
Candy
Academy+2dp
Web: kosmos-shadow-candyAcademy2dp
Drop Shadow: X: 0 Y: 8 Blur: 22 Spread -12
#AD00FF 80%
Aplicação em elementos de interface que precisam de maior destaque visual
Neutral +2dp
Web: kosmos-shadow-candyNeutral2dp
Drop Shadow: X: 0 Y: 8 Blur: 22 Spread -12
#111111 80%
Aplicação em elementos de interface que precisam de maior destaque visual
Histórico de Atualizações
Atualizações por data
Agosto 2025
04/08/2025
Adição de documentação do Figma
Maio 2025
06/05/2025
Atualização no Gitbook e na tabela de cores
Mudança do shadow "+3dp" para "Header" no Gitbook e o Kósmos - Colors
Adição dos tokens de cor dos shadows na Kósmos Colors
Outubro 2024
31/10/2024
Mudança do nome do shadow "+3dp" para "Header"
Criação e organização de todos os tokens de cor para os shadows, considerando os modes de light e dark
Agosto 2024
14/08/2024
Mudanças de atributos do shadow +3dp
Um token de cor do shadow +3dp que muda do light para o dark
Percebeu um erro, ficou com dúvida ou tem uma sugestão?
Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.
Atualizado