closure

Apply the Gestalt Closure principle to design icons, logos, and layouts.

6|3|Updated May 3, 2026
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill closure
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: closure
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/closure
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill closure

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Closure helps designers ensure that implied, partially drawn shapes (icons, logos, cards, and diagrams) are perceived as complete and intentional rather than broken, confusing, or ambiguous.

Core Features & Use Cases

  • Design icons with implied shapes: Use partial outlines or strategic gaps so the user’s perception completes the form (especially at small sizes).
  • Create logos using negative space: Communicate recognizable marks through implied contours (e.g., hidden shapes in gaps).
  • Imply containment in layouts: Make cards and containers feel distinct without heavy borders by relying on subtle cues (shadow/tint/spacing).
  • Troubleshoot closure failure: Detect when gaps are too large, the suggestion is too subtle, or the user audience can’t complete the form.

Quick Start

Apply the closure heuristic to your design by checking whether the implied form is recognizable at the actual size and whether users can complete it without guessing.

Frequently Asked Questions about closure

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What is Gestalt closure in UI and icon design?

Gestalt closure is a visual perception principle where the brain completes incomplete shapes. In UI and icon design, it allows users to perceive partial outlines or strategically gapped marks as whole, intentional forms without drawing the entire contour.

How do I design icons with implied shapes using negative space?

To design icons with implied shapes, define the intended form and calibrate the gap size strategically. Ensure the negative space suggests recognizable contours that users can complete visually, checking that the implied shape remains clear at actual rendering sizes.

Why do my incomplete visual marks look broken instead of intentional?

Incomplete visual marks look broken when closure fails due to gaps being too large or the suggestion too subtle. Troubleshoot by verifying the implied shape is recognizable and calibrating gap size appropriately for the rendering size and target audience.

How do I imply containment in UI layouts without heavy borders?

Imply containment in UI layouts by relying on subtle visual cues like shadow, tint, and spacing. These cues make cards and containers feel distinct without heavy borders, allowing users to perceive the boundaries through closure and layout structure.

When should I avoid using closure for clarity-critical UI elements?

Avoid using closure for clarity-critical UI elements when users cannot complete the form without guessing. Enforce anti-pattern guardrails for use cases requiring unambiguous recognition, ensuring gaps do not compromise the recognizability of essential visual marks.

Can I use closure principles for logo design with hidden shapes?

Yes, closure principles apply to logo design by communicating recognizable marks through implied contours in negative space. Define the intended implied shape and calibrate the gap size so the hidden shape remains recognizable to your target audience.