surface-separation

# Surface Separation A surface — a card, a panel, a toolbar, a row — needs to read as distinct from whatever sits behind it. There are exactly three ways to achieve that, and the mistake is almost always using more than one at full strength rather than choosing badly between them. ## Pick One Strategy Per Surface | Strategy | Mechanism | Reads as | Best for | |---|---|---|---| | **Border** | 1px line at the boundary | Precise, drawn, documentary | Dense UI, tables, forms, anything where the edge itself carries meaning | | **Elevation** | Shadow implying height | Floating, temporary, above | Modals, dropdowns, popovers, drag states | | **Fill** | Contrasting background tone | Grouped, embedded, part of the page | Sections, sidebars, alternating rows, inline callouts | Each answers a different question. A border says *where the surface ends*. An elevation says *how far above the page it sits*. A fill says *what it belongs to*. Choose based on which question the user actually has. **The rule:** never combine all three on the same surface. A card that carries a visible border, a drop shadow, and a background tone distinct from the page is stating its boundary three times. Nothing is emphasised because everything is. This is the most common single cause of a UI that someone describes as "busy" or "heavy" without being able to point at why. ### The Legitimate Pair Border and elevation together are correct in one specific case: a light surface on a light page, where a subtle ...