From perception-and-hierarchy-principles
Design forms that exploit closure — suggesting shapes through partial outlines, negative space, or strategic gaps so the user's perception completes them. Use when designing icons that need to read at small sizes, logos that need memorability, illustrations with restraint, card layouts with implied containment, or charts with implied structure. The art is suggesting just enough that the user perceives the whole, without leaving so little that they perceive nothing.
How this skill is triggered — by the user, by Claude, or both
Slash command
/perception-and-hierarchy-principles:closure-implied-shapesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Designing for closure is the art of suggesting forms with the minimum visual that the user's perception can complete. A logo with hidden negative-space shapes; an icon with partial outlines that imply the whole; a card layout where containment is inferred rather than drawn.
Designing for closure is the art of suggesting forms with the minimum visual that the user's perception can complete. A logo with hidden negative-space shapes; an icon with partial outlines that imply the whole; a card layout where containment is inferred rather than drawn.
The work is calibration. Too little visual cue and the closure fails — users see fragments rather than wholes. Too much and you've drawn the form completely, foregoing the elegance and economy of suggestion.
The user's visual system completes incomplete forms automatically. Your job as a designer is to provide enough cues that the completion happens reliably.
The cues that aid closure:
Strategic gaps. A circle with small breaks in its outline still reads as a circle. The gaps shouldn't be so large that the form fragments.
Aligned terminations. When parts of a form end at a shared invisible line, the user's perception extends the line. A row of characters at the same baseline; a column of items aligned to the same edge.
Suggestive proximity. Forms close to each other are more likely to be perceived as parts of a single whole. Gestalt proximity reinforces closure.
Familiar forms. A familiar shape is easier to suggest than an unfamiliar one. The brain has a template to match.
Contextual support. Surrounding visual elements that prime the perception. A face is easier to perceive in a portrait orientation than in arbitrary positions.
Icons designed with the fewest possible strokes that still communicate the form. A house icon with just a triangle and a square; a mail icon with just an envelope outline; a search icon with just a circle and a stick.
The reduction works at most sizes because the form is familiar — the brain completes it. At very small sizes (8–12px), some forms break down; check the rendering at production sizes.
A logo that uses the negative space between elements to imply a third shape. The FedEx arrow (between E and X). The NBC peacock implied by the colored fan. Many other examples in modern logo design.
The hidden shape needs to be:
The "noticing" is part of the appeal — viewers feel a small moment of cleverness when they see the hidden shape, which builds memorability.
Cards that imply containment through:
No explicit border line is needed; the container is inferred. This produces a lighter, more modern card style than fully-bordered cards.
A chart with a thin baseline (or no baseline at all) and bars that extend upward from an inferred ground. The user perceives the chart's structure without explicit grid lines or axes.
The data needs to be clear enough that the implied baseline is unambiguous. For charts with data near zero, an explicit baseline may be needed; for charts with all values clearly above zero, the baseline can be inferred.
Illustrations using silhouettes, partial details, or abstracted shapes rather than fully-rendered subjects. A figure shown only in outline. A landscape implied by a few horizontal forms.
Modern editorial illustration heavily relies on this. The viewer engages with the illustration by completing the form, which creates a moment of attention that fully-rendered illustrations don't.
A row of related items with no visual separator (no line between them, no border around them) — but consistent spacing. The proximity (similarity in spacing, alignment to a common baseline) implies grouping. A separator isn't needed if the spacing does the grouping work.
The right level depends on context.
Familiar forms can be reduced more. A common shape (house, person, arrow, circle) can be reduced to very minimal cues because the brain has the template.
Unfamiliar or specialized forms need more. A specialty icon for a niche concept can't rely on the brain to complete it; provide more explicit visual cues.
Smaller rendering needs more visual structure. At small sizes, less of the form is visible. A reduction that works at 32px may break at 16px.
Higher-stakes contexts need more explicit forms. A "delete" icon that must communicate clearly should not be reduced to ambiguity.
Audiences with limited visual sophistication need more. Designers tend to over-reduce because they can complete forms easily; users may not.
A startup designs a logo. Initial version: a fully-rendered illustration of a phoenix, detailed feathers, complex coloring. It's beautiful but doesn't scale to 16px and is hard to remember.
Iteration 1: simplified to a stylized bird shape with three feathers. Recognizable as a bird, more memorable, scales better.
Iteration 2: further simplified to an abstract V-shape with a curve at the top. Implies a bird in flight without literally drawing one. The closure principle does the work; viewers see "bird" through the suggestion.
The final logo scales to any size, is memorable, and feels distinctively designed. The closure principle let the form become more confident through reduction.
A dashboard's cards initially have full 1px gray borders. The grid feels boxy and visually busy.
Iteration: replace borders with a subtle background tint (5% darker than the surrounding surface). The cards still read as containers (closure: the user perceives the boundaries) but feel lighter.
Further iteration: remove the background tint and use only consistent spacing and a subtle drop shadow. The cards now have minimal visual weight but still read as contained units.
The progression shows how closure can be exploited progressively to reduce visual weight without sacrificing the perceptual structure.
A list of items is loading. Instead of a blank screen, show pulsing rectangles in the shape of the upcoming items. The user perceives the structure that's coming; the wait feels productive rather than empty.
This is closure used temporally — implying a complete page that's still being constructed. Very effective for loading-state perception.
Over-reduction. Reducing a form past the point of recognizability. Common in trendy minimalist redesigns.
Hidden shapes that no one notices. A logo with a "hidden" arrow that's so subtle it's never seen. Closure requires the suggestion to be perceivable.
Closure in high-stakes UI. A "delete" icon reduced to ambiguity. Critical actions need explicit forms.
Minimal forms at the wrong rendering size. A logo that works at 200px and disintegrates at 24px. Test at the actual sizes.
Closure that depends on a specific context. A logo with a hidden shape that requires being viewed in a particular way to be seen. The shape needs to be discoverable in normal use.
When designing for closure, ask: Is the suggested form recognizable at the actual rendering sizes? Test, don't assume. Will users notice the suggestion? A hidden shape that's never seen is just decoration. Is the audience equipped to do the completion work? Familiar forms for general audiences; explicit forms for specialty contexts. Could over-reduction create ambiguity that costs users? In high-stakes contexts, lean toward explicit.
closure — parent principle on perceptual completion of forms.closure-completion-cost — sibling skill on when closure is the wrong choice.signal-to-noise — closure reduces visual weight through suggestion.iconic-representation — minimal icons rely on closure.gestalt-similarity — similarity often reinforces closure.references/closure-design-patterns.md — patterns for specific applications of closure.Provides UI/UX resources: 50+ styles, color palettes, font pairings, guidelines, charts for web/mobile across React, Next.js, Vue, Svelte, Tailwind, React Native, Flutter. Aids planning, building, reviewing interfaces.
Fetches up-to-date documentation from Context7 for libraries and frameworks like React, Next.js, Prisma. Use for setup questions, API references, and code examples.
npx claudepluginhub hdeibler/universal-design-principles --plugin perception-and-hierarchy-principles