Elevação & Profundidade

Visão ao vivo

Sombra em 5 níveis, todas usando a mesma cor-base, variando só o espalhamento — cresce junto com a escala de espaçamento. Escolha o nível pelo papel do elemento na hierarquia da página, não pela aparência:

Nível	Classe	`box-shadow`	Uso
5	`.mds-elevation--5` (ou `.elevation--5`)	`0 16px 24px rgba(22, 22, 23, 0.15)`	Elementos sobrepostos à página: toolbar
4	`.mds-elevation--4` (ou `.elevation--4`)	`0 8px 16px rgba(22, 22, 23, 0.15)`	Elementos de níveis sobrepostos ao conteúdo pai: modal, diálogos
3	`.mds-elevation--3` (ou `.elevation--3`)	`0 4px 8px rgba(22, 22, 23, 0.15)`	Elementos sobrepostos ao conteúdo: popover, dropdown, tooltips
2	`.mds-elevation--2` (ou `.elevation--2`)	`0 2px 4px rgba(22, 22, 23, 0.15)`	Cards clicáveis
1	`.mds-elevation--1` (ou `.elevation--1`)	`0 1px 1px rgba(22, 22, 23, 0.15)`	Botões
Sem elevação	—	`none`	Raiz e corpo do documento, planos de fundo e qualquer elemento que não seja elevado

No SCSS, aplique com @include elevation.apply(n) (mixins/_elevation.scss) ou @extend %elevation--n (foundations/_elevation.scss).

Blur (glassmorphism pontual — não é padrão de fundo): --mds-blur-xs 8px · --mds-blur-sm 16px · --mds-blur-md 32px · --mds-blur-lg 48px · --mds-blur-xl 64px, via .blur--{tam} (backdrop-filter).

Divisores: linha 1px sólida na cor de borda (não sombra) — usada em vez de elevação para separar seções de mesma superfície.

Motion: transições de estado (hover/active/expand) usam 0.2s com easing cubic-bezier(0.645, 0.045, 0.355, 1) — perceptível mas rápido, sem “bounce”.