Shadow, Elevation and Density

Mental model

Elevation is a lie the interface tells consistently. It works only when every element agrees on where the light is and how far off the surface it sits.

Three rules carry most of the weight:

• One light source. Top-center, slightly left in LTR. Every element at the same elevation casts the same direction of shadow. Two light sources destroy spatial coherence faster than any other single mistake.
• Layer, don't darken. A realistic shadow is two or three stacked shadows — a tight dark one for contact, a wide soft one for ambience. A single large blurred shadow reads as a sticker, not a raised surface.
• Never pure black. oklch(0 0 0 / a) at low alpha, or better, a shadow tinted toward the surface's own hue. Pure black at high alpha is the single most common reason a UI looks cheap.