UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.
Contribute

Categories

AllDesign Systems Page PatternsInteraction Responsive MotionVisual Foundations

Tags

actionsalignmentbreakpointscomparisoncomplexitycontainercontextdecisiondetaildisclosuredocsempty-stategeospatialgridhierarchylayoutmapmobile
Knowledge RAG

Design Knowledge Base

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

Submit principle
19 published principles
Design Systems Page Patternsdocs / toc

Documentation 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 / actions

Mobile 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 / 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 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 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 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 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 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%
Design Systems Page Patternsresponsive / stability

Responsive 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 / layout

Page 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 / responsive

Breakpoint 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 / responsive

Mobile 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 / 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 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 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%