perception-and-hierarchy-principles

Use this skill when designing or evaluating a grid system — picking column counts, gutter widths, breakpoints, baseline grids, or modular grids. Trigger when designing a new layout system, when an existing layout feels disorderly, when picking responsive breakpoints, or when reviewing a design that "doesn't sit on a grid." Sub-aspect of `alignment`; read that first.

Use this skill when designing text-alignment and numeric-alignment decisions — choosing between left, right, center, and justified text; right-aligning numeric columns in tables; aligning labels relative to inputs; handling decimal alignment for currency. Trigger when laying out body content, designing tables with mixed types, or fixing alignment issues in dense data displays. Sub-aspect of `alignment`; read that first.

Use this skill whenever the design has more than one element on the page — every layout, every form, every table, every page header, every card. Trigger when designing a layout, picking a grid, fixing a UI that "looks off," debating left vs. center alignment for body text, or auditing why a design feels disorderly. Alignment is one of the most foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003) — every visible element's edge or center should fall on a shared axis with at least one other element. Misalignment by even a few pixels reads as disorder.

Recognize when closure is the wrong choice — when the perceptual completion work it asks of the user is too costly, ambiguous, or risky. Use when designing for accessibility audiences, novice users, high-stakes interfaces (medical, financial, safety), small rendering sizes that strain perception, or any context where the user shouldn't have to do completion work to understand the form. The skill is judging when explicit forms serve the user better than suggested ones, even at the cost of visual elegance.

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.