Depth and Elevation
01 Why Depth Creates OrderFree preview Interfaces are stacks, and elevation cues — shadows, overlaps, scrims, surface color — tell users what floats, what blocks, and what belongs together. 02 Light Comes From AboveFree preview One light source above the screen — raised elements catch light on top and cast shadow below; sunken elements do the reverse. 03 Shadows Encode Elevation A shadow's size and softness tell users how far an element floats — tight and modest near the surface, larger and more transparent as it rises. 04 Two-Part Shadows A tight contact shadow grounds the element; a soft ambient one gives it height. Tune crispness with the first, elevation with the second. 05 Depth Without Shadows Lighter surfaces read as closer, overlap states stacking outright, and borders, scrims and blur each carry elevation with no shadow at all. 06 Interaction and Elevation A small lift with a grown shadow on hover, a sink on press, full height only while dragging — movement and shadow always change together. 07 Fewer, Deliberate Layers Two or three occupied levels, shadows only on what's genuinely above its surroundings, and a named scale instead of one-off box-shadows. 08 Building an Elevation System (+ AI Prompt) Three levels, two-part shadows, one light source — and in dark mode, a lightness ladder instead. As tokens, a prompt, and a five-question audit.