Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Information Hierarchy First
Define what users should see first, second, and act on before styling the page.
Good interfaces avoid equal emphasis and create a readable order through size, position, density, and contrast.82%Visual Foundationsvisual-weight / balanceVisual Weight and Balance
Color, area, weight, position, and shadow create visual weight that must serve task priority.
Visual weight is not inherently better when stronger; it should allocate attention to the most important actionable area.82%Typography Color Accessibilitytypography / hierarchyType Scale Hierarchy
Type scale should serve page structure and avoid hero-sized text in compact panels.
A clear type scale lets headings, labels, body text, and numbers each do their job.82%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%Visual Foundationsdata / chartsData Ink Priority
Data Ink Priority turns a frequent interface judgment into an executable constraint before generation.
Visual ink in charts and metrics should serve data, thresholds, and exceptions before decorative grids.85%Visual Foundationsmotion / hierarchyHierarchy Through Motion
Hierarchy Through Motion turns a frequent interface judgment into an executable constraint before generation.
Useful motion helps users understand what changed, where it came from, and where to look.84%Interaction Responsive Motionloading / skeletonSkeleton Loading Hierarchy
Skeleton Loading Hierarchy turns a frequent interface judgment into an executable constraint before generation.
Skeletons should preview real content structure instead of adding extra visual noise.86%