Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Horizontal 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 Motion3d / storytellingImmersive 3D Storytelling Gates
WebGL, Three.js, and 3D motion should be split into understandable story gates: each stage answers one question and provides static, reduced-motion, and skippable paths.
Immersive 3D is valuable when it turns abstract concepts into a pausable, understandable, continuable chain of evidence instead of trapping users inside a scene.94%Visual Foundationscase-study / awwwardsAward Site Case Evidence Matrix
When analyzing Awwwards-style award sites, record layout, color, typography, interaction, motion, and usability evidence separately instead of saying only premium, immersive, or beautiful.
The value of case analysis is not copying surface style; it is translating verifiable design choices into reusable judgment and implementation constraints.94%Design Systems Page Patternsportfolio / navigationConceptual Duality Case Navigation
A brand concept can organize portfolio and service pages, but it must map to services, cases, team, menus, and CTAs instead of remaining an abstract slogan.
A concept-led site should decompose the brand claim into browsable evidence: how services express it, how cases prove it, how the team supports it, and what users should do next.93%Visual Foundationstypography / navigationTypographic Index Brand System
When a site uses large type, indexes, menus, and project lists as brand expression, typography must carry navigation, hierarchy, and information scent rather than acting only as a poster effect.
Expressive typography should turn brand voice into actionable structure: users should understand where they are, where to go next, and which items matter through type scale, placement, indexes, and states.93%Interaction Responsive Motionmotion / scrollAward Site Scroll Story Motion
Scroll motion should help users understand product state and narrative progress, not hide information inside uncontrolled spectacle.
Scroll motion in narrative pages must serve causality, hierarchy, and pacing: each motion segment should explain a state change or value proof.92%Interaction Responsive Motionportfolio / motionQuiet Motion in Portfolios
Portfolio motion should clarify selection, entry, comparison, and memory instead of making every element perform.
The interaction value of a portfolio is helping users judge craft: project selection, visual detail, case navigation, and contextual transitions matter more than decorative animation.90%