Shadows, not borders
The order of tools for separating things is fixed: white space, then a change of surface, then a border. Most interfaces reach for the border first and end up as a grid of boxes.
A raised surface tells you it is above its neighbours; a border only tells you where it ends. On light surfaces a soft shadow with the colour of the surface tinted into it does the raising. On dark surfaces the ladder is lighter surfaces, not shadows: background, card, sheet, tooltip, each a step lighter, with the shadow tokens at none or near none.
On this site the glass controls carry one shadow token and one hairline edge, defined once and used everywhere. Cards in the collection carry a single soft shadow. There are very few borders, and the ones that exist are rules, not boxes.
- Separate with space; if that fails, change the surface; if that fails, a border
- Shadow colour is the surface tinted dark, never grey
- In dark mode, raised means lighter, never shadowed