Home
Community
Library
Knowledge
Docs

KnowledgeCommunity design principlesOnly reviewed published knowledge enters Agent RAG.

Categories

All Interaction Responsive Motion Typography Color Accessibility

Tags

accessibility authentication controls errors feedback forms input inputs labels mobile placeholder progress readability redundant-entry toast validation wizard workflow

Knowledge RAG

Design Knowledge Base

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

Submit principle

11 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 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 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%

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.

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%

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

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

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%