Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Scroll Container Ownership Contract
Long pages, libraries, and workbenches must define one primary scroll owner; declare scroll ownership before combining nested `height: 100vh`, `overflow: hidden/auto`, and sticky panels.
Scrolling is not incidental browser behavior; it is a layout contract. Decide who owns page scroll, who owns local scroll, which panels are sticky, and how mobile reflows before implementation.97%Visual Foundationscase-study / awwwardsAward 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%Design Systems Page Patternsdocs / tocDocumentation TOC Layout
Documentation TOC Layout turns a frequent interface judgment into an executable constraint before generation.
Long docs need to show current position, section structure, and related next steps.85%Interaction Responsive Motionmobile / actionsMobile Bottom Action Bar
Mobile Bottom Action Bar turns a frequent interface judgment into an executable constraint before generation.
Critical mobile actions should be thumb-reachable without covering content, errors, or system navigation.85%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 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 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 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 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 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%Design Systems Page Patternsresponsive / stabilityResponsive Layout Stability
Fixed-format UI elements need stable dimensions and responsive constraints to avoid shifts or overlap.
Boards, toolbars, counters, and button groups need predefined sizing rules.82%Design Systems Page Patternspage-pattern / layoutPage Pattern Selection
First classify the page task as marketing, operations, reading, configuration, commerce, or creation, then choose the layout pattern.
The wrong page pattern makes good components serve the wrong goal.82%Interaction Responsive Motionbreakpoints / responsiveBreakpoint Recomposition, Not Scaling
Responsive design should recombine layout relationships at breakpoints instead of scaling everything by viewport.
Scaling type and containers causes unpredictable overflow; recomposition is more stable.82%Interaction Responsive Motionmobile / responsiveMobile Priority Stack Layout
Mobile is not a smaller desktop; content and actions should restack by task priority.
Small screens need important information, controls, and feedback early without overlap.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 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 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%