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 MotionTypography Color AccessibilityVisual Foundations

Tags

accessibilityaccountactionsadminaffordanceagentaialertsanalyticsanimationariaassetsattentionaudit-logauthenticationbrandbreakoutbreakpoints
Knowledge RAG

Design Knowledge Base

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

Submit principle
96 published principles
Design Systems Page Patternsai / generation

AI Generation Progress Pattern

AI Generation Progress Pattern turns a frequent interface judgment into an executable constraint before generation.

AI generation needs to show what the system is doing, what users can still do, and how to recover after failure.88%Design Systems Page Patternstokens / editor

Token Editor Pattern

Token Editor Pattern turns a frequent interface judgment into an executable constraint before generation.

Token editors need to make design decisions, references, and impact scope visible.87%Design Systems Page Patternsdocumentation / design-system

Design System Documentation Page

Design System Documentation Page turns a frequent interface judgment into an executable constraint before generation.

Design system docs must support finding, understanding, copying, and judging suitability.87%Design Systems Page Patternssettings / ia

Settings Page Architecture

Settings Page Architecture turns a frequent interface judgment into an executable constraint before generation.

Settings should be grouped by user intent and risk, not database fields or internal org structure.
87%
Interaction Responsive Motionmodal / focus

Modal Focus Management

Modal Focus Management turns a frequent interface judgment into an executable constraint before generation.

Dialogs change interaction context and must manage focus, background reachability, and close paths.87%
Design Systems Page Patternscommunity / library

Community Library Contribution Flow

Community Library Contribution Flow turns a frequent interface judgment into an executable constraint before generation.

Community resources need low contribution friction while review and source notes protect quality.86%
Design Systems Page Patternsaudit-log / timeline

Audit Log Timeline

Audit Log Timeline turns a frequent interface judgment into an executable constraint before generation.

Audit logs need to answer who, when, what object, what action, and what impact.86%
Design Systems Page Patternssearch / filters

Search Results and Facets

Search Results and Facets turns a frequent interface judgment into an executable constraint before generation.

Search interfaces need to explain why results appear and how to narrow or broaden scope.86%
Design Systems Page Patternsgovernance / review

Component Governance Review Flow

Component Governance Review Flow turns a frequent interface judgment into an executable constraint before generation.

A design system needs to record why components are added, how they are reused, and when they are deprecated, not just list components.86%
Design Systems Page Patternsai / prompt

Prompt Builder Interface

Prompt Builder Interface turns a frequent interface judgment into an executable constraint before generation.

Prompt builders should help users express goal, context, constraints, and output format instead of only offering a large textarea.86%
Design Systems Page Patternsanalytics / drilldown

Analytics Drilldown Workflow

Analytics Drilldown Workflow turns a frequent interface judgment into an executable constraint before generation.

Analytics interfaces should move from anomalies and questions toward causes, not just show chart collections.86%
Design Systems Page Patternsadmin / list-detail

Admin List Detail Pattern

Admin List Detail Pattern turns a frequent interface judgment into an executable constraint before generation.

Admin work often moves from filtered lists into detail handling, and both views must share state and action semantics.86%
Interaction Responsive Motiongesture / mobile

Touch Gesture Alternatives

Touch Gesture Alternatives turns a frequent interface judgment into an executable constraint before generation.

Swipe, pinch, and long press cannot be the only way to complete a task.86%
Interaction Responsive Motionloading / skeleton

Skeleton Loading Hierarchy

Skeleton Loading Hierarchy turns a frequent interface judgment into an executable constraint before generation.

Skeletons should preview real content structure instead of adding extra visual noise.86%
Interaction Responsive Motiontables / bulk-actions

Table Bulk Action Model

Table Bulk Action Model turns a frequent interface judgment into an executable constraint before generation.

Bulk actions need to express selected count, scope, risk, and completion feedback clearly.86%
Interaction Responsive Motiondrag-drop / accessibility

Drag and Drop Alternatives

Drag and Drop Alternatives turns a frequent interface judgment into an executable constraint before generation.

Drag and drop is useful direct manipulation, but sorting, moving, and upload need non-drag alternatives.86%
Interaction Responsive Motiondanger / confirmation

Destructive Action Confirmation

Destructive Action Confirmation turns a frequent interface judgment into an executable constraint before generation.

Confirmation should protect irreversible or high-impact actions and explain object plus consequence.86%
Interaction Responsive Motionkeyboard / navigation

Keyboard First Navigation

Keyboard First Navigation turns a frequent interface judgment into an executable constraint before generation.

An interface that works from the keyboard is usually clearer because focus order reveals the real task structure.86%
Typography Color Accessibilityforms / input

Touch Keyboard and Input Purpose

Touch Keyboard and Input Purpose turns a frequent interface judgment into an executable constraint before generation.

Mobile input fields should use the right keyboard, autocomplete, and input purpose to reduce errors and effort.86%
Typography Color Accessibilitymotion / reduced-motion

Reduced Motion Accessibility

Reduced Motion Accessibility turns a frequent interface judgment into an executable constraint before generation.

Animation and transitions need to respect reduced-motion preferences and provide non-motion information paths.86%
Typography Color Accessibilityforms / labels

Persistent Form Labels

Persistent Form Labels turns a frequent interface judgment into an executable constraint before generation.

Form labels should remain visible before and after input so users can confirm meaning and context.86%
Typography Color Accessibilitycharts / accessibility

Chart Accessibility Encoding

Chart Accessibility Encoding turns a frequent interface judgment into an executable constraint before generation.

Charts cannot rely on color alone; categories and states need text, shape, line style, or direct labels.86%
Typography Color Accessibilitystatus / aria

Status Message Announcement

Status Message Announcement turns a frequent interface judgment into an executable constraint before generation.

State changes conveyed only by color, toast, or visual movement can be missed by some users.86%
Typography Color Accessibilityauthentication / accessibility

Accessible Authentication Flow

Accessible Authentication Flow turns a frequent interface judgment into an executable constraint before generation.

Secure flows still need low cognitive load, helping users complete rather than testing them.86%
Typography Color Accessibilityforms / errors

Error Summary Pattern

Error Summary Pattern turns a frequent interface judgment into an executable constraint before generation.

Users need to know how many errors exist, where they are, and how to fix them without hunting for red text.86%
Typography Color Accessibilitytarget-size / touch

Target Size and Spacing

Target Size and Spacing turns a frequent interface judgment into an executable constraint before generation.

Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.86%
Typography Color Accessibilityfocus / keyboard

Focus Order and Reading Order

Focus Order and Reading Order turns a frequent interface judgment into an executable constraint before generation.

A mismatch between visible layout and assistive navigation order breaks orientation and comprehension.86%
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%
Design Systems Page Patternsnotifications / inbox

Notification Center Pattern

Notification Center Pattern turns a frequent interface judgment into an executable constraint before generation.

Notification centers should help users judge importance, source, handled state, and next action.85%
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%
Design Systems Page Patternsempty-state / projects

Empty Project Start State

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

An empty project page should move users toward the first real outcome, not explain product features.85%
Design Systems Page Patternspricing / comparison

Pricing Plan Comparison

Pricing Plan Comparison turns a frequent interface judgment into an executable constraint before generation.

Pricing pages help users choose the right plan rather than stacking marketing adjectives.85%
Design Systems Page Patternsonboarding / setup

Progressive Onboarding Setup

Progressive Onboarding Setup turns a frequent interface judgment into an executable constraint before generation.

Onboarding should not ask for everything at once; it should get users to a usable result quickly.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%
Interaction Responsive Motionfeedback / toast

Toast vs Inline Feedback

Toast vs Inline Feedback turns a frequent interface judgment into an executable constraint before generation.

Feedback placement should match the object; toast fits short global status, while inline feedback fits fields and local fixes.85%
Interaction Responsive Motionwizard / progress

Wizard Stepper Progress

Wizard Stepper Progress turns a frequent interface judgment into an executable constraint before generation.

Wizards need to show current position, remaining work, reversibility, and save state.85%
Interaction Responsive Motionfilters / state

Filter Query State Preservation

Filter Query State Preservation turns a frequent interface judgment into an executable constraint before generation.

Filter results are user-built work context and should persist across refresh, back navigation, and sharing.85%
Interaction Responsive Motionresponsive / navigation

Responsive Navigation Collapse

Responsive Navigation Collapse turns a frequent interface judgment into an executable constraint before generation.

Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.85%
Interaction Responsive Motionundo / editing

Undo Redo Reversibility

Undo Redo Reversibility turns a frequent interface judgment into an executable constraint before generation.

Reversible actions let users explore with fewer confirmation interruptions.85%
Typography Color Accessibilitylinks / contrast

Link Contrast and Affordance

Link Contrast and Affordance turns a frequent interface judgment into an executable constraint before generation.

Links are navigation promises; users must quickly recognize clickable text in reading flows.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 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%
Design Systems Page Patternsaccount / profile

Profile and Account Settings

Profile and Account Settings turns a frequent interface judgment into an executable constraint before generation.

Profile, login security, notifications, and billing have different risk levels and should be separated.84%
Design Systems Page Patternsmarketplace / browse

Marketplace Browse Pattern

Marketplace Browse Pattern turns a frequent interface judgment into an executable constraint before generation.

Marketplace pages need to support discovery, comparison, trust judgment, and install or purchase action.84%
Interaction Responsive Motionlatency / microinteraction

Reduced Latency Microinteraction

Reduced Latency Microinteraction turns a frequent interface judgment into an executable constraint before generation.

Microinteractions should confirm input and state change, not make the interface feel busy.84%
Interaction Responsive Motionpagination / scroll

Infinite Scroll vs Pagination

Infinite Scroll vs Pagination turns a frequent interface judgment into an executable constraint before generation.

Browse lists can scroll continuously; task lists usually need position, selection, return, and count awareness.84%
Interaction Responsive Motionrealtime / collaboration

Realtime Collaboration Presence

Realtime Collaboration Presence turns a frequent interface judgment into an executable constraint before generation.

Collaborative interfaces need to show who is present, who is editing, and how conflicts resolve.84%
Interaction Responsive Motionfeedback / latency

Optimistic Update Feedback

Optimistic Update Feedback turns a frequent interface judgment into an executable constraint before generation.

Optimistic updates make interfaces feel fast while failure and rollback remain understandable.84%
Interaction Responsive Motioncommand / shortcuts

Command Palette Safety

Command Palette Safety turns a frequent interface judgment into an executable constraint before generation.

Command palettes are useful for speed, but scope, risk, and outcome must be explicit.84%
Typography Color Accessibilitycognitive-load / copy

Cognitive Load Copy

Cognitive Load Copy turns a frequent interface judgment into an executable constraint before generation.

Users should not need to remember system state, previous-screen information, or hidden rules to complete a task.84%
Typography Color Accessibilitycontent / plain-language

Plain Language

Plain Language turns a frequent interface judgment into an executable constraint before generation.

Understandability is part of accessibility; complex copy increases cognitive load for everyone.84%
Typography Color Accessibilitylocale / language

Language and Locale Formatting

Language and Locale Formatting turns a frequent interface judgment into an executable constraint before generation.

Dates, numbers, currency, units, and language direction should match the user's locale and avoid ambiguity.84%
Typography Color Accessibilityforms / placeholder

Placeholder Is Not a Label

Placeholder Is Not a Label turns a frequent interface judgment into an executable constraint before generation.

Placeholders are useful for examples, not as the only instruction or critical guidance.84%
Typography Color Accessibilityicons / aria

Icon Accessible Names

Icon Accessible Names turns a frequent interface judgment into an executable constraint before generation.

Icon-only buttons and statuses need accessible names, while decorative icons should be hidden from assistive technology.84%
Typography Color Accessibilitydark-mode / contrast

Dark Mode Contrast Tuning

Dark Mode Contrast Tuning turns a frequent interface judgment into an executable constraint before generation.

Dark mode is not color inversion; text, borders, state colors, and elevation need rechecking.84%
Typography Color Accessibilitytypography / spacing

Text Spacing Resilience

Text Spacing Resilience turns a frequent interface judgment into an executable constraint before generation.

Interfaces should tolerate adjusted line height, letter spacing, font size, or browser zoom without hiding content.84%
Typography Color Accessibilityforms / redundant-entry

Redundant Entry Reduction

Redundant Entry Reduction turns a frequent interface judgment into an executable constraint before generation.

Redundant entry increases cognitive load, errors, and abandonment, especially for assistive technology users.84%
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%
Design Systems Page Patternsassets / images

Visual Assets by Page Type

Visual assets should reveal the real product, scene, gameplay, or person rather than only provide vague atmosphere.

When users need to inspect an object, imagery must be specific, clear, and relevant.82%
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 Patternsrag / agent

RAG Retrieval to Generation Rule

Knowledge hits should become design constraints, not visible page copy copied from the knowledge item.

RAG improves decision quality and traceability; it should not make pages recite theory.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%
Design Systems Page Patternsecommerce / product

Ecommerce Product Decision Flow

Ecommerce pages should help users understand the product, compare differences, confirm trust, and purchase.

Purchase decisions need images, price, specs, stock, reviews, delivery, and return information together.82%
Design Systems Page Patternslanding / hero

Landing Page First-Viewport Signal

A landing first viewport must clearly show what the brand, product, person, or place is and hint at the next section.

The first viewport should not only create atmosphere; it should show identity, value, and the next exploration path.82%
Design Systems Page Patternscrm / workflow

CRM Workflow Pages

CRM pages should organize around leads, customers, stage, owner, and next actions rather than decorative sections.

CRM value comes from quick customer state judgment and next-step execution.82%
Design Systems Page Patternsdashboard / alerts

Dashboard Hierarchy and Alerts

Dashboards should show status overview first, then anomalies, trends, details, and action entries.

More metrics are not better; the priority is helping users decide whether action is needed.82%
Design Systems Page Patternssaas / crm

Operational Tool Density Pattern

SaaS, CRM, and admin tools should prioritize repeated scanning, comparison, and action over marketing narrative.

Tool first screens should show work objects, state, and next steps rather than a full-screen promotional area.82%
Design Systems Page Patternscopy / brand

Brand Voice in Interface Copy

Interface copy should help users act, with brand voice applied carefully to buttons, states, and explanations.

Brand expression must not sacrifice clarity, especially for errors, payments, moderation, and destructive actions.82%
Design Systems Page Patternscomponents / contract

Component Consistency Contract

Components need clear props, states, sizes, and disallowed combinations to stay consistent across pages.

A component is not a visual screenshot; it is a reusable set of behaviors and constraints.82%
Design Systems Page Patternstokens / design-system

Design Token Governance

Tokens should express roles and constraints, not merely store colors, type, and spacing.

Maintainable tokens need names, scope, defaults, and prohibited uses so humans and agents can share them.82%
Interaction Responsive Motioninputs / controls

Input Mode and Control Matching

Controls should match decision shape: toggles for binary, segmented controls for modes, menus for option sets, sliders for continuous values.

The wrong control adds cognitive cost and makes reversibility unclear.82%
Interaction Responsive Motiontables / responsive

Responsive Tables and Comparison

Tables support comparison, so responsive behavior must preserve columns, sorting, and key actions.

Turning tables into cards indiscriminately can destroy comparison; choose the pattern by data task.82%
Interaction Responsive Motionloading / performance

Perceived Performance and Loading Structure

Loading states should preserve layout skeletons so users know what will appear, instead of showing only a spinner.

Stable skeletons reduce waiting anxiety and avoid layout shift when content appears.82%
Interaction Responsive Motionmotion / animation

Restrained Motion With Purpose

Motion should explain state change, spatial relationship, or feedback instead of adding noise.

Excessive motion interrupts tasks, especially in dense tools.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%
Interaction Responsive Motionprogressive-disclosure / complexity

Progressive Disclosure by Task Risk

Low-frequency, risky, or advanced settings should be deferred while common tasks remain reachable.

Progressive disclosure does not hide functionality; it places complexity at the right decision moment.82%
Interaction Responsive Motionfeedback / states

Feedback States for System Continuity

Loading, saving, generating, review, and failure all need visible states so users know the system is responding.

Missing feedback causes repeated clicks or fear that data was lost.82%
Interaction Responsive Motioncards / panels

Card and Panel Density Affordance

Cards represent objects, panels represent tools or context; they need different density and affordance.

Clickable objects must be recognizable, while informational containers should not masquerade as buttons.82%
Interaction Responsive Motionbuttons / actions

Button Priority and Action Separation

Primary, secondary, destructive, and navigation actions need clear differences to avoid mistakes.

Button styling expresses decision cost and risk, not just visual preference.82%
Interaction Responsive Motionforms / workflow

Form Flow and Validation

Forms should follow the user's mental order and provide recoverable feedback at key moments.

Good forms split complex tasks into completeable steps rather than dumping every field at once.82%
Interaction Responsive Motionnavigation / wayfinding

Navigation Landmarks and Current State

Users need to know where they are, where they can go, and what scope the current page belongs to.

Navigation is not a pile of links; it continuously communicates structure and current location.82%