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

Categories

AllTypography Color Accessibility

Tags

accessibilityariaauthenticationbrandchartscognitive-loadcolorcontentcontrastcopydark-modeemphasiserrorsfeedbackfocusfont-pairingfont-weightformatting
Knowledge RAG

Design Knowledge Base

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

Submit principle
30 published principles
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 Accessibility
charts / 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%
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%
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%
Typography Color Accessibilitytouch-target / mobile

Accessible Interactive Targets

Buttons, links, menu items, and icon buttons need sufficient hit area, especially on mobile.

A visually small control does not need a tiny hit area; targets require stable size and clear feedback.82%
Typography Color Accessibilityaccessibility / color

Color Must Not Stand Alone

State, risk, category, and selection cannot rely on color alone; text, icon, shape, or position must help.

Color semantics weaken under color blindness, low vision, printing, and poor lighting.82%
Typography Color Accessibilitysurface / color

Readable Color on Surfaces

When surfaces change, text, borders, icons, and state colors must be recalibrated.

The same color value has different strength on different backgrounds and should not be reused mechanically.82%
Typography Color Accessibilityfocus / keyboard

Visible Focus States

Keyboard and assistive technology users need to know where focus is; focus states must not be reset away.

Focus state is part of the interaction path, not a browser default flaw.82%
Typography Color Accessibilityforms / accessibility

Accessible Form Feedback

Form feedback should sit near fields, explain why, and remain understandable before and after submission.

Error messages are not punishment; they guide users toward completion.82%
Typography Color Accessibilitysemantic-color / state

Semantic and State Colors

Success, warning, error, info, selected, and pending states need clear and stable visual language.

State colors are system feedback and should not be reused casually as decoration or brand emphasis.82%
Typography Color Accessibilitycontrast / accessibility

Legibility Contrast

Text contrast must serve reading first, especially for small text, disabled states, notes, and button labels.

Low contrast turns polish into unusability, especially on mobile and in difficult lighting.82%
Typography Color Accessibilitycolor / tokens

Color Role System

Define color roles before values so one color does not carry too many meanings.

Primary, background, border, text, status, and accent colors need stable responsibilities.82%
Typography Color Accessibilitytypography / font-pairing

Font Pairing by Function

Font pairing should start from product function: brand voice, long reading, numeric comparison, and controls have different needs.

Typeface differences need a clear purpose; decorative mixing can increase reading cost.82%
Typography Color Accessibilitytypography / font-weight

Font Weight Emphasis

Font weight creates emphasis; it should not make every label bold.

Too much bold text loses emphasis and makes dense interfaces feel heavy.82%
Typography Color Accessibilitytypography / readability

Line Height and Measure

Long text needs comfortable line height and measure; dense interfaces still need readable text.

Overwide lines lose place, tight line height feels cramped, and loose line height reduces useful density.82%
Typography Color Accessibilitytypography / hierarchy

Type Scale Hierarchy

Type scale should serve page structure and avoid hero-sized text in compact panels.

A clear type scale lets headings, labels, body text, and numbers each do their job.82%