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 Motionscroll / horizontalHorizontal Scroll Portfolio Boundary
Horizontal scrolling works for bounded portfolios, galleries, and project sequences, but not for long prose, documentation, or core task flows.
Horizontal scroll must be an explicit content format: users can see the next item, operate it with keyboard and touch, reflow on narrow screens, and read core text without hunting on the horizontal axis.95%Interaction Responsive Motionmotion / scrollScroll Story Chapter Contract
The basic unit of scrollytelling is not an animation frame but a readable chapter: each chapter needs a question, text anchor, visual state, static fallback, and verifiable scroll behavior.
Scroll storytelling should break complex mechanisms into evidence chapters users can pause on, skip, and return to; motion connects chapters and states but should not become the only content layer.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%Interaction Responsive Motionmodal / focusModal Focus Management
Modal Focus Management turns a frequent interface judgment into an executable constraint before generation.
Dialogs change interaction context and must manage focus, background reachability, and close paths.87%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 Motiondrag-drop / accessibilityDrag and Drop Alternatives
Drag and Drop Alternatives turns a frequent interface judgment into an executable constraint before generation.
Drag and drop is useful direct manipulation, but sorting, moving, and upload need non-drag alternatives.86%Interaction Responsive Motionkeyboard / navigationKeyboard First Navigation
Keyboard First Navigation turns a frequent interface judgment into an executable constraint before generation.
An interface that works from the keyboard is usually clearer because focus order reveals the real task structure.86%Interaction Responsive Motionmotion / animationRestrained Motion With Purpose
Motion should explain state change, spatial relationship, or feedback instead of adding noise.
Excessive motion interrupts tasks, especially in dense tools.82%