gestalt-ui-organisation

# Gestalt UI Organisation UI should be organised so that the visual structure communicates relationships — which commands, controls, and elements belong together — without requiring users to read labels or documentation. ## Core Gestalt Principles for UI Layout ### 1. Proximity Elements that are close together are perceived as a group. - Place related controls (e.g. Bold / Italic / Underline) close together with minimal gap between them - Separate unrelated groups with larger whitespace - Do not use lines or borders as the primary grouping mechanism — proximity alone should convey the relationship **Example:** A toolbar with `[Cut] [Copy] [Paste]` grouped tightly, then a wider gap before `[Undo] [Redo]`, communicates two distinct command groups without any visual divider. #### Prefer whitespace over separator lines Default to **whitespace, not divider lines**, for grouping. Most separators do work that spacing does better — they add noise and a "boxed-in" feel without adding information. Remove the majority and let proximity carry the grouping. Caveat: a line takes almost no space, so removing it leaves groups too close. **Removing separators usually means adding spacing** — budget the whitespace (occasionally a subtle background or heading) rather than just deleting the line and leaving the layout cramped. ### 2. Similarity Elements that look alike are perceived as related. - Use consistent colour, shape, size, and iconography within a functional group - Differentia...