Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Public-Service Trust Rails and Recovery
Public-service interfaces must make official identity, responsible organization, legal links, task title, form semantics, error summaries, and recovery paths into verifiable page structure instead of merely applying blue-white civic styling.
Trust in public services comes from an inspectable responsibility chain and recoverable task flow: users need to know whether the service is official, who is responsible, whether the connection is safe, why information is needed, how to fix mistakes, and where privacy/accessibility/oversight information lives.95%Design Systems Page Patternsprogressive-disclosure / settingsProgressive Disclosure for Complexity
Complex settings, forms, and admin pages should expose common tasks first, then place advanced, risky, rare, or conditional options in predictable secondary paths.
Progressive disclosure is not hiding things. It sequences visibility by task, risk, and frequency so novices make fewer errors while expert users can still find advanced controls.95%Interaction Responsive Motionforms / validationForm Error State Contract
A form error state contract puts labels, helper text, validation timing, inline errors, error summaries, submit states, server failures, mobile keyboards, and ARIA wiring into one implementable model.
Form errors are not one red component; they combine field contracts, state machines, and recovery paths, and should route to narrower guidance for summaries, accessible feedback, persistent labels, and transactional recovery.95%Interaction Responsive Motionforms / errorsTransactional Form Error Recovery
Error handling in high-trust forms is not about telling users they are wrong. It returns them to a recoverable state where they can continue without re-entering information.
Transactional service error recovery must handle visual placement, screen readers, focus, original input, error copy, and next action together.94%Typography Color Accessibilityforms / inputTouch 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 / labelsPersistent 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 / accessibilityAccessible 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 / errorsError 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 / toastToast 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 / progressWizard 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 / placeholderPlaceholder 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-entryRedundant 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 / controlsInput 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 / workflowForm 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 / accessibilityAccessible 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%