gestalt-ui-organisationlisted

# 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. ### 2. Similarity Elements that look alike are perceived as related. - Use consistent colour, shape, size, and iconography within a functional group - Differentiate groups through visual contrast (shape, fill, size) — not just position - Primary actions and secondary actions should look visually distinct from each other **Example:** Destructive actions (Delete, Remove) use a different colour than constructive actions (Save, Add), signalling different intent groups. ### 3. Common Region Elements enclosed in a shared region are perceived as a group. - Use cards, panels, or background fills to enclose logically related content - Avoid wrapping unrelated elements in the same container - Nested regions