Interface Lab
Knowledge RAG

Design Knowledge Base

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

Submit principle
8 published principles / 192 in library
Design Systems Page Patternsnotifications / inbox

Notification Inbox Triage Model

A notification center should separate immediate feedback, deferred reading, actionable work, and system-level alerts, then organize triage by read state, severity, source, and batch actions.

Notifications are not merely a message list. They are an attention allocation system: when to interrupt, when to stay quiet, when to enter the inbox, how to archive, and how to return to the source object all need explicit rules.95%
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%
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 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 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 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%
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%