Home
Community
Library
Knowledge
Docs

KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.

Categories

All Visual Foundations

Tags

actions affordance alerts alignment assets attention balance boundary breakout cards charts clarity comparison complexity components composition consistency container

Knowledge RAG

Design Knowledge Base

Community-maintained principles reviewed before publication and retrieved as Agent design constraints.

Submit principle

30 published principles

Visual Foundationsdashboard / kpi

Dashboard KPI Triage

Dashboard KPI Triage turns a frequent interface judgment into an executable constraint before generation.

Metric cards are not number displays; they are triage entry points for operations.86%Visual Foundationscomparison / layout

Comparison Layout Clarity

Comparison Layout Clarity turns a frequent interface judgment into an executable constraint before generation.

Comparison value comes from visible differences along shared dimensions, not prettier object cards.85%Visual Foundationsdetail / object

Object Detail Layout

Object Detail Layout turns a frequent interface judgment into an executable constraint before generation.

Detail pages should organize around object identity, state, key attributes, and actions instead of displaying every field equally.

85%Visual Foundationsdata / charts

Data Ink Priority

Data Ink Priority turns a frequent interface judgment into an executable constraint before generation.

Visual ink in charts and metrics should serve data, thresholds, and exceptions before decorative grids.

85%

Visual Foundationshierarchy / focus

Focal Point Economy

Focal Point Economy turns a frequent interface judgment into an executable constraint before generation.

The more focal points compete, the weaker the real priority becomes; emphasis must be scarce and task-driven.85%

Visual Foundationsmedia / crop

Media Crop Intent

Media Crop Intent turns a frequent interface judgment into an executable constraint before generation.

Images are information objects, not texture; bad cropping harms trust and understanding.84%

Visual Foundationsmap / geospatial

Map and Geospatial Layout

Map and Geospatial Layout turns a frequent interface judgment into an executable constraint before generation.

Geospatial interfaces depend on synchronization between location, scope, objects, and selection state.84%

Visual Foundationscharts / dashboard

Readable Dashboard Charts

Readable Dashboard Charts turns a frequent interface judgment into an executable constraint before generation.

Operational charts are often scanned quickly; small-chart readability matters more than expressive form.84%

Visual Foundationsactions / context

Contextual Action Placement

Contextual Action Placement turns a frequent interface judgment into an executable constraint before generation.

Button placement signals scope: row-level, card-level, section-level, and global actions must not blur together.84%

Visual Foundationsdensity / content

Content Density Ladders

Content Density Ladders turns a frequent interface judgment into an executable constraint before generation.

Density is not a whole-page property; it is a ladder that changes with task depth.84%

Visual Foundationsgrid / breakout

Grid Breakout Regions

Grid Breakout Regions turns a frequent interface judgment into an executable constraint before generation.

A few breakout media or proof regions can create rhythm, but primary information should return to stable alignment.84%

Visual Foundationsmotion / hierarchy

Hierarchy Through Motion

Hierarchy Through Motion turns a frequent interface judgment into an executable constraint before generation.

Useful motion helps users understand what changed, where it came from, and where to look.84%

Visual Foundationslayout / container

Edge-to-Edge vs Contained Layout

Edge-to-Edge vs Contained Layout turns a frequent interface judgment into an executable constraint before generation.

Page width is an information architecture decision; not every region belongs in the same max-width container.84%

Visual Foundationsicons / affordance

Icon Text Affordance Balance

Icon Text Affordance Balance turns a frequent interface judgment into an executable constraint before generation.

Icons are not universal language; affordance comes from icon, label, placement, and feedback together.84%

Visual Foundationsempty-state / onboarding

Empty State Composition

Empty State Composition turns a frequent interface judgment into an executable constraint before generation.

An empty state is not illustration filler; it is the first step into the workflow.84%

Visual Foundationsdisclosure / layout

Spatial Progressive Disclosure

Spatial Progressive Disclosure turns a frequent interface judgment into an executable constraint before generation.

Progressive disclosure is not just hiding content; it spatially orders task entry, key results, and advanced options.84%

Visual Foundationsgrouping / labels

Visual Group Labels

Visual Group Labels turns a frequent interface judgment into an executable constraint before generation.

Complex pages need short group labels, stable placement, and scannable boundaries to reduce comprehension cost.84%

Visual Foundationsrhythm / sections

Section Rhythm Variation

Section Rhythm Variation turns a frequent interface judgment into an executable constraint before generation.

Long pages need variation in density, alignment, media ratio, and whitespace without changing the design system.84%

Visual Foundationscontainer / boundary

Edge and Container Clarity

Containers express objects and regions; they should not become the default decoration.

Borders, surface colors, and shadows all communicate hierarchy; too many containers fragment the page.82%

Visual Foundationsmodules / rhythm

Modular Rhythm and Repetition

Repeated modules reduce cognitive cost but need hierarchy and rhythm to avoid monotony.

Same structures suit same tasks; variation should come from content priority rather than random styling.82%

Visual Foundationsscan / layout

Scanning Path Design

Pages should support predictable scanning instead of forcing attention to jump between focal points.

Attention moves through headings, key data, groups, and actions; layout should align with that path.82%

Visual Foundationswhitespace / structure

Whitespace as Structure

Whitespace is not emptiness; it creates separation, breathing room, and attention paths.

Effective whitespace reduces reliance on borders, dividers, and decoration while clarifying section relationships.82%

Visual Foundationsdensity / dashboard

Information Density Control

High density is not clutter, and low density is not automatically premium; density must match task frequency and speed.

Operational tools need scannable density while marketing pages need narrative pacing; mixing them causes mismatch.82%

Visual Foundationsvisual-weight / balance

Visual Weight and Balance

Color, area, weight, position, and shadow create visual weight that must serve task priority.

Visual weight is not inherently better when stronger; it should allocate attention to the most important actionable area.

Visual Foundationsalignment / layout

Alignment Discipline

Alignment reduces effort by clarifying boundaries, belonging, and action targets.

Small alignment errors quickly make an interface feel unprofessional even when typography and color are correct.82%

Visual Foundationsspacing / rhythm

Spacing Scale and Rhythm

A small repeatable spacing scale makes pages calm, predictable, and less improvised.

Spacing should express structural relationships, not item-by-item guesswork.82%

Visual Foundationsgrid / layout

Grid as a Decision System

A grid is not decoration; it decides span, alignment, responsive recomposition, and density.

A stable grid reduces ad hoc placement and keeps complex pages structured across viewports.82%

Visual Foundationsgestalt / consistency

Similarity and Consistency

Elements that look alike should behave alike; different functions need visible differences.

Visual similarity is interpreted as functional similarity, so mixed styling creates confusion.82%

Visual Foundationsgestalt / grouping

Proximity Grouping

Distance communicates belonging: related items sit together, unrelated items separate.

Users infer grouping from spatial distance before reading labels or borders.82%

Visual Foundationshierarchy / layout

Information Hierarchy First

Define what users should see first, second, and act on before styling the page.

Good interfaces avoid equal emphasis and create a readable order through size, position, density, and contrast.82%