Interface Lab
Knowledge RAG

Design Knowledge Base

Community-maintained principles reviewed before publication and retrieved as Agent design constraints.

Submit principle
8 published principles / 192 in library
Design Systems Page Patternsinformation-architecture / navigation

Information Scent and Link Label Contract

Navigation, card links, and inline links must help users judge destination, value, and effort before clicking; vague labels such as read more weaken findability and accessibility.

Information scent comes from link text, surrounding context, and users' prior knowledge. A design system should treat link labels as information architecture, not as late-stage button filler.95%
Frontend Implementationview-transition / navigation

View Transition Route Continuity

The View Transition API can make route, filter, and detail changes feel continuous, but it must preserve URL, focus, scroll, reduced-motion, and progressive enhancement boundaries.

Page transitions are not spectacle; they help users understand continuity of the same object across lists, details, filters, and state changes.94%
Design Systems Page Patternsportfolio / navigation

Conceptual 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 / navigation

Typographic 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 Motionkeyboard / navigation

Keyboard 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 Motionresponsive / navigation

Responsive Navigation Collapse

Responsive Navigation Collapse turns a frequent interface judgment into an executable constraint before generation.

Collapsing navigation is not hiding every entry; it reorders by task frequency and current location.85%
Interaction Responsive Motionnavigation / wayfinding

Navigation Landmarks and Current State

Users need to know where they are, where they can go, and what scope the current page belongs to.

Navigation is not a pile of links; it continuously communicates structure and current location.82%
Visual Foundationsscan / layout

Scanning Path Design

Pages should support predictable scanning instead of forcing attention to jump between focal points.

Attention moves through headings, key data, groups, and actions; layout should align with that path.82%