Higher layers are lighter surfaces
Aliases: lightness elevation · higher-is-lighter · dark surface scale
What it is
On a dark workbench the page is the darkest ground, cards one step lighter, a pop-up menu lighter again, the dialog lightest. What sits “in front” is what is brighter. The claim pins the direction of elevation: higher is lighter. A menu darker than its card, a dialog darker than its menu, and stack order will be read backwards.
Why it happens
In a dark field, attention treats brighter regions as figure — luminance pop-out, and also the everyday fact that upper surfaces catch more light. If a middle layer is darker than the one below, pop-out fights spatial memory and the dark layer is read as a hole, not a cover.
Monotonicity matters. If the L* sequence turns around mid-way, height stops being a scale you can infer and becomes several nameless greys. The light-theme habit of dimming the surround around a modal still points the right way in dark theme if the modal stays relatively lighter; making the modal darker and the surround lighter reverses the direction.
Studying it
Give three to five rectangles of different L* and ask for a front-to-back ranking. Independent variables: whether L* increases monotonically, size of adjacent gaps, insertion of one reversed patch. Dependent variables: correlation with intended elevation, how often the reversed patch is misplaced.
Interface version: swap the lightness of a real menu and a real dialog, and see whether “dismiss which layer?” gets the wrong target.
Where it stops holding
- Selected states and error fills may be lighter or more chromatic than their layer — that is status, not elevation. Do not file those bright patches into the elevation ladder.
- Photos and video are themselves light and will “overshoot” the ladder; a matte has to frame the media back onto its layer.
- Light themes run the other way (paper light, shadow dark). Do not take “higher is lighter” back onto light cards.
Applying it
- Write the surface sequence from window ground to the highest modal; L* may only rise.
- Components at the same elevation share one surface. Do not give a business card a back-door “VIP” lighter grey.
- When the surround must dim, dim the surround, not the modal.
- How to check: screenshot a screen, strip shadow and stroke, read stack order from dark to light. If that order disagrees with the interaction stack, change surfaces, not motion.