Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Translucent Material Readability Contract
Glass, acrylic, mica, smoke, and backdrop blur are not just style filters. They need explicit surface role, backdrop variability, hierarchy, contrast, user preferences, forced-colors behavior, and fallback.
The value of translucent material is connecting interface hierarchy with background context. If it weakens reading, state recognition, keyboard focus, or accessibility preferences, it should fall back to an opaque surface.96%Frontend Implementationscroll / motionScroll-linked Motion Implementation Boundaries
Scroll motion must distinguish CSS scroll timelines, GSAP ScrollTrigger, Lenis smooth scroll, and native scrolling; immersion must not break reading, anchors, keyboard behavior, or mobile feel.
Scroll is user-controlled reading rhythm, not the animator's timeline. Implementation should preserve native scroll semantics first, then bind lightweight motion to sections where it adds value.95%Frontend Implementationcontainer-query / responsiveContainer Query Component Contract
Responsive components should not only follow the viewport; cards, sidebars, charts, and resource cards should adapt density, hierarchy, and actions to their own container width.
Container queries move responsive decisions from page-level breakpoints into component context, letting the same component work inside grids, sidebars, drawers, modals, and dashboard slots.95%Frontend Implementationbackground-texture / cssBackground Texture CSS and Accessible Fallbacks
Background texture should enter as a secondary layer through tokens, CSS/SVG output, and fallback strategy while preserving readable UI in forced colors, print, mobile, and low-data conditions.
Background texture adds surface depth, brand tone, or redundant encoding; it should not steal information hierarchy. Production implementation must treat texture as a disable-able, compressible, replaceable surface layer.94%