MSDR Design System

Elevação

Sombra representa elevação, não decoração. Um card não ganha sombra por ser um card — ele se separa por superfície, borda e espaçamento.

Níveis

shadow-none
Cards, seções, toolbars, sidebar
shadow-low
Dropdown, hover card, select
shadow-medium
Popover, command palette
shadow-high
Elementos flutuantes persistentes
shadow-overlay
Dialog, sheet, drawer

Hierarquia sem sombra

A ordem de preferência é: superfície, tonalidade, borda, espaçamento — e só então sombra.

Card sobre containerEste card não tem sombra. A separação vem do contraste entre a superfície do card e a do container, mais o anel de 1px.

No dark mode as sombras são recalibradas junto com o contraste das superfícies: ficam mais densas, porque no escuro a elevação é percebida principalmente pela superfície mais clara, não pela sombra.