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%Typography Color Accessibilityforced-colors / high-contrastForced Colors and High Contrast Support
High contrast is not dark mode; forced-colors can override many color properties, so components need system colors, real outlines, and non-color redundancy.
Accessible color systems should respect user-agent high contrast rendering instead of forcing brand color. Critical states must remain understandable when system colors take over, shadows are removed, and background images disappear.95%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%Typography Color Accessibilityfocus / keyboardFocus Order and Reading Order
Focus Order and Reading Order turns a frequent interface judgment into an executable constraint before generation.
A mismatch between visible layout and assistive navigation order breaks orientation and comprehension.86%Visual Foundationshierarchy / focusFocal Point Economy
Focal Point Economy turns a frequent interface judgment into an executable constraint before generation.
The more focal points compete, the weaker the real priority becomes; emphasis must be scarce and task-driven.85%Typography Color Accessibilityfocus / keyboardVisible Focus States
Keyboard and assistive technology users need to know where focus is; focus states must not be reset away.
Focus state is part of the interaction path, not a browser default flaw.82%