Group with space, color and motion.

Look first

The clip starts with dots and no words. Don't read anything. Just notice which dots seem to go together, and watch that change.

The name for it

You can't switch this off. Your eyes sort a scene into groups before you think about it. So every layout already says "these belong together." The only question is whether it says the right thing.

Six signals

Space is the strongest and cheapest. Color and shape work when they repeat. A border wins over almost everything. Smooth lines read as one path, even when they cross. Your eye always picks a figure and a background. And things that move together look like one thing.

Same buttons, two layouts

Here are twelve toolbar buttons. The order is the same in both rows. The only change is the space between them.

The second row adds no ink. It adds gaps. Now you see five tools instead of twelve buttons: history, text style, alignment, lists and insert.

Check a layout of your own

1. Write down the groups you want people to see.
2. Squint at the layout until you can't read it. Count the groups you see.
3. If the counts don't match, fix the space first. Then color. Add a border only if those fail.

You can hand the same check to your agent:

Review the layout below for Gestalt grouping.
1. List the groups a viewer should see, based on what belongs together in meaning.
2. List the groups the layout actually creates, using proximity, similarity, enclosure, continuity, figure and ground, and common fate.
3. For every mismatch, suggest the smallest fix. Prefer changing space over adding color, and color over adding borders.

Layout (HTML, CSS or a description):
[paste here]

What good output looks like: two lists you can compare line by line, and fixes like "add 16 px between the alignment buttons and the list buttons" instead of "make it cleaner."

This page uses the same trick. Each signal has its own card, the cards share one grid, and the gaps between sections are bigger than the gaps inside them.