Hairlines, not boxes
Most apps look the same because everything sits in a card inside a card. Take the boxes away and the content gets louder.
In 20 seconds
Why boxes inside boxes make every app look the same.
How your brain groups things without borders.
When a surface is actually earned.
Deploys
Why so many apps look the same
Open ten dashboards and you'll find the same thing: a card, inside a card, inside a section with its own border. Each box brings a border, a background and some padding, and your eye has to read all of that before it gets to the actual content.
I think this is the biggest reason AI-built and template-built apps feel alike. It's not the colors. It's the boxes.
Same content, two ways
One settings panel, built both ways. Same words, same switches. Notice where your eye lands first in each.
Bad: Four layers of borders and backgrounds around three settings.
Bad: Every row is shouting \
Bad: at the same volume.
Bad: The words you came for are the quietest thing on screen.
Good: One thin line between rows does the grouping.
Good: A small label on top names the group.
Good: The settings themselves are the loudest thing.
How your brain groups things anyway
Your brain groups things that sit close together, all on its own. It's one of the oldest findings in perception research. Put a bit more space between groups than inside them, and people see the groups instantly. No box needed.
To be fair to boxes: putting things inside a shared region does group them too, and strongly. That's exactly why boxes are tempting. The problem is stacking them. More edges and fills means more visual clutter, and clutter makes it slower to find what you're looking for.
Space does the grouping for free. Every border you add is extra stuff to look at. Use the cheapest tool that works.
Every box is a little tax on attention.
How to group without boxes
Space first. Make the gap between groups clearly bigger than the gap between rows inside a group.
One hairline between rows, in a very light line color. It separates without boxing.
A small label on top names the group, so it doesn't need a header bar.
Surfaces only for floating things: popovers, menus, dialogs, toasts. Because nothing else has one, they stand out instantly.
There's an old idea from chart design that fits here: ink that doesn't carry information is noise, so remove it. Borders around borders are mostly noise.
Mistakes I see a lot
A card for every row. Rows already line up. Let the line do the work.
A border and a shadow and a background. Pick one, or none.
Equal spacing everywhere. If everything is the same distance apart, nothing is grouped.
Shadows on things that don't float. Then nothing looks like it's on top anymore.
Sources
[1] Untersuchungen zur Lehre von der Gestalt II (Laws of organization in perceptual forms). Max Wertheimer. Psychologische Forschung, 1923.
[2] Common region: A new principle of perceptual grouping. Stephen E. Palmer. Cognitive Psychology, 1992.
[3] Measuring visual clutter. Ruth Rosenholtz, Yuanzhen Li and Lisa Nakano. Journal of Vision, 2007.
[4] The Visual Display of Quantitative Information. Edward Tufte. Graphics Press, 1983.
| GreedUI | ||
|---|---|---|
| I can explain why card-in-card layouts feel busy. | I know how space and thin lines group things without boxes. | I'd save surfaces and shadows for things that float. |
| One thin line between rows does the grouping. | A small label on top names the group. | The settings themselves are the loudest thing. |
| Put each one in its own card | Space them close together with a label and thin lines | Give the group a colored background and a shadow |
Full component index: llms.txt