gestalt-laws-detailed

Gestalt Laws in UI Design

Scope: Comprehensive Gestalt Laws with Real-World Examples and Modus Design System Integration for Angular

The Gestalt Laws are fundamental principles of visual perception that explain how humans naturally organize visual elements. When applied to UI design, these laws create intuitive, user-friendly interfaces that feel natural and reduce cognitive load.

---

1. Law of Proximity

Definition: Elements that are close together are perceived as related or grouped together.

Real-World Example: In a contact list, the name, phone number, and email address for each person are grouped closely together with small gaps (gap-2), while each contact is separated by larger gaps (gap-6 to gap-8) from other contacts.

Implementation:

<!-- Contact list example -->
<div class="space-y-6">
  @for (contact of contacts(); track contact.id) {
    <div class="flex items-center gap-2 p-4 bg-card border-default rounded-lg">
      <modus-avatar [name]="contact.name" size="md" />
      <div class="flex flex-col gap-1">
        <div class="text-foreground font-medium">{{ contact.name }}</div>
        <div class="text-foreground-60 text-sm">{{ contact.email }}</div>
        <div class="text-foreground-60 text-sm">{{ contact.phone }}</div>
      </div>
    </div>
  }
</div>

Key Rules:

• Use gap-2 for related elements within a group
• Use gap-6 to gap-8 for separation between different groups
• Group form labels with their inputs using gap-2
• Separate different sections with gap-6 or larger

---

2. Law of Similarity

Definition: Elements that look similar (same color, shape, size, or style) are perceived as related or belonging to the same category.

Real-World Example: In a dashboard, all primary action buttons use the same color="primary" style, all secondary actions use color="secondary", and all destructive actions use color="danger". This creates visual consistency that users can quickly understand.