Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Award Site Case Evidence Matrix
When analyzing Awwwards-style award sites, record layout, color, typography, interaction, motion, and usability evidence separately instead of saying only premium, immersive, or beautiful.
The value of case analysis is not copying surface style; it is translating verifiable design choices into reusable judgment and implementation constraints.94%Visual Foundationstypography / navigationTypographic Index Brand System
When a site uses large type, indexes, menus, and project lists as brand expression, typography must carry navigation, hierarchy, and information scent rather than acting only as a poster effect.
Expressive typography should turn brand voice into actionable structure: users should understand where they are, where to go next, and which items matter through type scale, placement, indexes, and states.93%Visual Foundationsdashboard / kpiDashboard 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 / layoutComparison 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 / objectObject 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 / chartsData 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 / focusFocal 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 / cropMedia 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 / geospatialMap 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 / dashboardReadable 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 / contextContextual 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 / contentContent 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 / breakoutGrid 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 / hierarchyHierarchy 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 / containerEdge-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 / affordanceIcon 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 / onboardingEmpty 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 / layoutSpatial 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 / labelsVisual 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 / sectionsSection 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 / boundaryEdge 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 / rhythmModular 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 / layoutScanning 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 / structureWhitespace 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 / dashboardInformation 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 / balanceVisual 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.82%Visual Foundationsalignment / layoutAlignment 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 / rhythmSpacing 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 / layoutGrid 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 / consistencySimilarity 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 / groupingProximity 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 / layoutInformation 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%