Briefle words · UI design
Border soup
Also called boxitis
A layout where too many nested boxes, borders and backgrounds pile up, creating visual noise instead of structure.
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: A has a bordered card holding bordered, grey-filled sections holding bordered rows: three frames deep.
Related words
Room 1 · Essentials
Learn “Border soup” in a five-minute lesson