Briefle words · UI design
Surface
A background layer that holds content, like the page itself or a card or sheet placed on top of it.
Say it to an AI
Plan & usage billing card with Plan, Usage (seat and storage bars) and Billing sections. Build it as one surface: group the sections with whitespace, small uppercase headings and at most a hairline divider, no boxes around sections or rows. No border soup; the numbers should be the loudest thing.
How an expert would brief the stronger version of “Plan & usage”.
See it
Try it as a puzzle →Billing overview in the workspace settings of a design collaboration tool.
Why: B uses one white surface with a soft shadow; A stacks a white card, grey section surfaces and white row surfaces.
More ways experts use it
Itinerary with a light grey page and white booking cards on top, so the surfaces separate through background contrast. Give each card a hairline border and a barely-there shadow for elevation; don't rely on white-on-white.
Trip itinerary · UI design
Related words
Room 1 · Essentials
Learn “Surface” in a five-minute lesson