Shadow Scales With Elevation
SHOULD: Scale a shadow to the surface's size and elevation — never reuse one flat shadow at every size. Map the tier to how high it sits: chip → shadow-sm, card → shadow-md, popover → shadow-lg, dialog/sheet → shadow-xl. Shadows read weakly on dark backgrounds, so lean on a border for elevation there.
Bigger, higher surfaces cast larger, softer shadows — never reuse one flat shadow at every size
<span class="shadow-sm">chip</span>
<div class="shadow-xl">dialog / sheet</div>Bad
Good
Why it matters
A shadow is a claim about height. A chip resting on the surface throws a tight, near shadow; a sheet or dialog floating well above the page throws a large, soft, spread one. Reuse a single shadow token at both sizes and the physics contradict the geometry — the small element looks like it is hovering too high, the large one looks pasted flat against the page.
This is distinct from two neighbours in this corpus: "Layered Shadows" is about realism within one shadow (ambient + direct light), and "Use Tailwind Default Shadows" is about staying on a consistent scale; this principle is about which rung of that scale a surface earns — proportional to its size and elevation. Practically: map the shadow tier to how high the surface sits (chip → `shadow-sm`, card → `shadow-md`, popover → `shadow-lg`, dialog/sheet → `shadow-xl`), and remember shadows read weakly on dark backgrounds, where a border often carries the elevation instead (see "On Dark, Borders Beat Shadows").