Perception And Hierarchy Principles

Use this skill whenever color decisions matter — picking the brand primary, defining a neutral ramp, designing status semantics (success/warning/error), choosing chart palettes, selecting accent hues, supporting dark mode, ensuring colorblind-safe contrast, or auditing an existing UI for color noise. Trigger when stakeholders argue about palette, when WCAG contrast is in scope, when designing for global audiences (where color symbolism varies), or when a UI feels "too colorful" or "too monochrome." Color is one of the foundational principles in 'Universal Principles of Design' (Lidwell, Holden, Butler 2003).

Apply the Gestalt principle of Closure — the perceptual tendency to see incomplete shapes as whole. Use when designing icons (a few strokes can imply a closed shape), illustrations (negative space defines forms), logos (the IBM stripes, the WWF panda, the FedEx arrow), card layouts (cards don't need full borders to feel like containers), or any visual that benefits from suggested rather than fully drawn shapes. Closure lets you communicate more with less; the user's perception completes the form.

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.

Use this skill whenever a design has more than one element competing for the viewer's attention — which is essentially every design. Trigger when laying out a screen, page, slide, poster, dashboard, or any composition where you must decide what gets seen first, what supports it, and what recedes. Trigger when reviewing a design and the user says "everything looks the same," "I don't know where to look," "the page feels flat," or "what's the most important thing here?" Trigger when picking type sizes, when deciding which actions to emphasize among many, or when an MVP screen has gone from one button to ten and the screen has lost its focal point. Hierarchy is the most decisive visual principle; this skill teaches how to construct it deliberately, and routes to sub-aspect skills for typographic, spatial, and color/tone hierarchy.

Use this skill whenever the question is how to make a composition feel organized — what belongs with what, where groups end, how related items can be visually bound without resorting to borders or boxes. Trigger when laying out forms, tables, navigation, lists, cards, dashboards, or any composition with multiple distinguishable groups of content. Trigger when a layout "feels disorganized," when users are confused which label goes with which input, when grouping is being attempted with borders that look heavy, or when a designer is reaching for color to encode grouping. Proximity is the cheapest, most powerful grouping tool in design; this skill teaches how to use spacing as the primary grouping mechanism, with sub-aspect skills for forms, tables, and navigation.

Apply the principle of Legibility — the visual clarity of individual characters and short phrases, determined by typeface, size, weight, contrast, and spacing. Use when picking type for UI elements (buttons, labels, navigation), evaluating typography against rendering conditions (small sizes, low-contrast displays, distance viewing), choosing display vs. body type, or auditing accessibility. Legibility is the precondition for reading; if a user can't quickly distinguish "I" from "1" or "O" from "0," everything downstream from text fails. Distinct from readability, which is about sustained reading of prose.

Apply the principle of Readability — the ease with which sustained prose can be read, determined by line length, line height, paragraph rhythm, font choice for prose, and visual breathing room. Use when designing long-form content (articles, documentation, books, transcripts), writing email or report layouts, evaluating whether users can comfortably read paragraphs of text. Distinct from legibility (per-character clarity); readability is about the experience of reading sustained prose without fatigue. The two principles compose: readability requires legibility and adds prose-specific constraints.

Use this skill when constructing visual hierarchy through layout, position, size, and whitespace — not type, not color. Trigger when laying out a page or section and deciding what gets the dominant region, where to place the focal element, how much breathing room to give it, and how secondary elements should arrange around it. Trigger when reviewing a layout that "feels cramped" or "feels lost," when a hero's CTA is competing with surrounding content, or when a dashboard's primary KPI is the same size as everything else. Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

Use this skill whenever a design task involves visual perception, layout, hierarchy, grouping, scanning order, attention, color organization, or composition — regardless of framework, design system, or platform. Trigger when the user is laying out a screen, page, slide, poster, dashboard, mobile view, or print piece; choosing what to emphasize; deciding how things should group; picking type sizes, spacing, or color roles; reviewing why something "looks busy" or "feels empty"; or asking "where should the eye land first." Routes the model to the right perception principle in this plugin and surfaces the most-decisive ones for the surface in question. Framework-agnostic: applies to web, mobile, print, physical product, slide design, and information graphics alike.

Use this skill when a design has *too much* whitespace — when the SNR pendulum has swung from cluttered all the way to sparse, sterile, or "empty-feeling," and you need to add signal density without adding noise. Trigger when reviewing a UI that "feels thin," "feels under-built," or where users complain "I'm scrolling forever to get to anything." Also trigger when designing power-user surfaces (admin panels, IDEs, data tools) that need higher density than consumer defaults. Sub-aspect of `signal-to-noise-ratio`; read that first if you haven't already.

Apply specific visual cues to control figure-ground perception — shadow, elevation, scale, contrast, saturation, opacity, and texture. Use when designing layered interfaces, focus states, hover treatments, or any context where one element should clearly stand forward against others. Each cue contributes a portion of the figure-ground signal; combining cues strengthens the effect. The skill is selecting and calibrating cues for the desired level of separation.

Apply the Gestalt principle of Similarity — elements that share visual attributes (color, shape, size, orientation) are perceived as belonging together, regardless of their physical proximity. Use when grouping related items in a list, status indicators, dashboard cards, navigation, or any context where you want the user to perceive certain items as a set. Similarity is one of the strongest grouping cues; it works even when proximity says otherwise. Color is the strongest similarity cue, then size, then shape; orientation is weakest.

Use visual similarity to create perceptual groups — making related items look alike so users perceive them as a set. Use when designing lists with categorized items, navigation systems, status displays, dashboards with multiple data series, or any layout where you want users to see "these things go together" at a glance. The strongest grouping cues, in order, are color, size, shape, and orientation; combine multiple cues for the strongest grouping.

Use this skill when designing or fixing navigation — sidebars, top nav, footer nav, mobile menus, breadcrumbs, tab bars, command palette groupings. Trigger when grouping related links, deciding when to add section dividers, fixing a sidebar where every link feels like a separate item, or designing a mobile bottom-nav with multiple action groups. Sub-aspect of `proximity`; read that first if you haven't already.

Use this skill when deciding *how* to spend emphasis — color, weight, size, motion — across a design so that each instance lands. Trigger when picking the primary action among many CTAs, when status-color usage has multiplied across the app and lost meaning, when the brand color appears in too many places, or when a designer asks "should this also be highlighted?" and the answer is almost always no. Sub-aspect of `signal-to-noise-ratio`; read that first if you haven't already.

Use this skill when the question is specifically about how to construct visual hierarchy through typography — picking a type scale, ladders of weight, line-height steps, and the relationships between display, heading, body, and caption type. Trigger when designing type systems, choosing fonts, picking heading sizes, defining a design system's typographic tokens, fixing a "no clear focal point in the headline area" issue, or reviewing why a long-form page feels like a wall of text. Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

Use this skill when designing or fixing data tables and tabular layouts — row spacing, column spacing, header treatment, group separators, total rows, sticky headers, dense vs. comfortable variants. Trigger when the user is laying out a table, deciding density, debugging "rows that are hard to follow," picking when to add zebra striping, or arguing for/against borders. Sub-aspect of `proximity`; read that first if you haven't already.

Use this skill when laying out a form, fixing a confusing form, or building a form layout convention for a design system. Forms are where proximity failures are most visible: ambiguous label-input pairing, sections that bleed into each other, help text that orphans from its field. Trigger when designing sign-up, sign-in, settings, profile, billing, checkout, multi-step, or any structured-input surface. Sub-aspect of `proximity`; read that first if you haven't already.

Use this skill whenever a design has too much or too little visual content competing for attention — when a screen "feels noisy," "looks busy," "feels cluttered," "feels empty," or when the user can't find the meaningful information amid decoration. Trigger when reviewing dashboards, data tables, settings pages, marketing surfaces, or any layout under critique. Trigger when designing chart axes/legends/grids, when picking icon density, when deciding whether to add a divider/border/illustration, or when a design "passes" the requirements but doesn't feel right. Signal-to-Noise Ratio is the discipline of subtraction; this skill teaches what counts as signal vs. noise, how to audit and reduce noise, and the trade-offs of overcorrecting.

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.

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.

Use this skill when building or auditing a color system that encodes meaning — status colors (success / warning / error), category colors (department, product line, user segment), brand-role colors (primary, secondary, tertiary). Trigger when designing status badges, picking chart palettes, building a design-system color spec, or fixing inconsistent color use across surfaces. Sub-aspect of `color`; read that first.

Use this skill when the question is *what to delete* — running a structured audit of a UI to remove decorative elements that don't earn their pixels. Trigger when reviewing an existing UI for noise reduction, when a stakeholder pushback says "this feels too busy" but you don't know what specifically to cut, or when polishing a design pre-ship. This is the operational counterpart to `signal-to-noise-ratio`; it gives you a checklist and a procedure rather than a principle.

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.

Set line length (measure) for prose — capping the maximum width of body text so lines stay in the 45–75 character range that supports comfortable sustained reading. Use when designing article layouts, documentation, email templates, dashboard copy, or any container that holds paragraphs of prose. Line length is the most fundamental readability decision because it directly affects the reader's eye movement; lines that are too long or too short both cost reading comfort.

Apply deliberate dissimilarity (contrast) to distinguish elements that need to be perceived as different — primary vs. secondary actions, normal vs. error states, foreground vs. background, the one important thing vs. the rest. Use when you want to emphasize a single element, distinguish roles, or break up a too-uniform layout. Contrast is similarity's complement: similarity groups, contrast separates. The skill is calibrating contrast so it communicates what matters without creating visual chaos.

Use this skill when constructing visual hierarchy through color and tone (value, contrast, saturation) — picking which elements get full-color emphasis and which recede into greys, building a tone ladder, and deciding when color should *be* the hierarchy versus when it should *support* a size/weight hierarchy. Trigger when picking the primary color, building a neutral palette, designing a status badge system, or fixing a UI where color is "too loud" or "too flat." Sub-aspect of the broader `hierarchy` principle; read that first if you haven't already.

Apply the Gestalt principle of Figure-Ground Relationship — the perceptual separation of what's perceived as the figure (the focus, the object) from the ground (the surrounding context). Use when designing modals, overlays, focus states, hero elements, hover treatments, layered interfaces, or any context where one element should clearly stand forward against everything else. The user's perception always sorts the visual field into figure and ground; designs that reinforce the desired sorting feel clear, while designs that fight it feel confusing.

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 when designing color systems that must satisfy accessibility requirements, work in both light and dark modes, support high-contrast preferences, and remain meaningful for users with color blindness or low vision. Trigger when picking text colors, designing for global compliance (WCAG, EAA, ADA), supporting dark mode, or auditing an existing palette for accessibility. Sub-aspect of `color`; read that first.

Apply typeface and size choices for legibility — picking the right typeface for the use case (display, body, code, UI) and sizing it appropriately for the rendering context. Use when designing a type system for a product, choosing a brand typeface, evaluating an existing typeface against rendering conditions, picking sizes for body, headings, captions, code, or UI elements. The two most fundamental legibility decisions; everything else (contrast, spacing) is layered on top.

Apply paragraph rhythm and prose-level readability — calibrating leading, paragraph spacing, subheading frequency, and visual breathing room so that long-form text reads smoothly without fatigue. Use when designing article layouts, documentation, reports, transcripts, or any context with sustained prose. Beyond line length and legibility, the rhythm of prose layout — the rest points provided by paragraph breaks, the hierarchy provided by subheadings, the breathing room provided by margins — determines whether readers stay engaged with long content.

Apply contrast and spacing for legibility — calibrating color contrast between text and background, character tracking, and line leading so a chosen typeface and size actually render legibly. Use when picking text colors, choosing background colors that will carry text, evaluating accessibility against WCAG, fine-tuning typography for production rendering, or auditing why text "looks designed" but is hard to read. Even a perfect typeface at the right size will fail if contrast is too low, tracking too tight, or leading too cramped.

Apply figure-ground separation specifically for overlays — modals, dialogs, drawers, popovers, dropdowns, toasts. Use when designing or auditing the moments when a UI element appears over the underlying page and needs to clearly come forward. The most common figure-ground design problem; getting it right means users naturally focus on the overlay, getting it wrong means modals blur into the page or feel jarring.