Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Overlay Focus and Scroll Lock Contract
An overlay is not just a scrim; it is a contract across modality, initial focus, focus containment, dismissal, inert background, scroll locking, portal stacking, and mobile safe areas.
Whenever an overlay changes the interactive scope, keyboard, screen reader, pointer, scroll, and mobile behavior must be governed together; a visually covered but semantically reachable background is the most dangerous fake modal.96%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 Motiongesture / mobileTouch 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 Motionmobile / actionsMobile 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 Motionresponsive / navigationResponsive 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 Motionmobile / responsiveMobile 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%