Design Knowledge Base
Community-maintained principles reviewed before publication and retrieved as Agent design constraints.
Commerce Browse Cart Checkout Funnel
Retail ecommerce needs a continuous decision system across product discovery, evaluation, add-to-cart feedback, cart review, guest checkout, address/payment recovery, and confirmation.
Ecommerce conversion is not optimized by a single PDP or checkout form; every step must answer whether users can find, compare, confirm total cost, recover from errors, and pay with confidence.96%Design Systems Page Patternssearch / filtersSearch and Filter UX Contract
Search, filters, facets, and sorting must explain the current result set together: query, scope, constraints, why results appear, and how to recover.
A retrieval interface is a state machine. Every query, facet selection, sort change, or reset should expose result count, active filters, matched excerpts, empty-result recovery, and shareable URL state.96%Design Systems Page Patternstokens / settingsDesign System Token Settings
Token settings pages must show semantics, aliases, modes, affected components, version diffs, and release risk together, not only color and number inputs.
Design tokens are design decisions that move across design tools, code platforms, and component libraries. A settings page does not only edit values; it explains how a value is referenced, how it changes by mode, and which components and versions it affects.96%Design Systems Page Patternsknowledge-base / libraryKnowledge Library Browse Pattern
Knowledge, asset, and pattern libraries need a stable browse flow that joins search, categories, filters, result counts, matched excerpts, empty results, and return paths.
A library page is not valuable because it shows many cards. It helps users move from fuzzy intent to a callable item while preserving source, quality, category, and next action.95%Design Systems Page Patternsfood-commerce / first-viewportFood Commerce Appetite-to-Order Path
Food, drink, and quick-commerce pages can be playful and animated, but the first viewport must turn appetite into menu access, price, ingredient/nutrition proof, and a stable order path.
Food-commerce expression works only when it serves selection, trust, and purchase; motion, oversized type, ingredient illustration, and brand color must return users to inspectable products and order actions.95%Design Systems Page Patternspublic-service / trustPublic-Service Trust Rails and Recovery
Public-service interfaces must make official identity, responsible organization, legal links, task title, form semantics, error summaries, and recovery paths into verifiable page structure instead of merely applying blue-white civic styling.
Trust in public services comes from an inspectable responsibility chain and recoverable task flow: users need to know whether the service is official, who is responsible, whether the connection is safe, why information is needed, how to fix mistakes, and where privacy/accessibility/oversight information lives.95%Design Systems Page Patternsdashboard / kpiDashboard KPI Alert Triage Contract
Operations dashboards should organize KPIs, alerts, thresholds, owners, evidence, and next actions into a scannable triage system instead of an equal-weight wall of charts.
A good dashboard first answers whether action is needed, severity, blast radius, ownership, and evidence path; charts are evidence layers that support triage.95%Design Systems Page Patternsprogressive-disclosure / settingsProgressive Disclosure for Complexity
Complex settings, forms, and admin pages should expose common tasks first, then place advanced, risky, rare, or conditional options in predictable secondary paths.
Progressive disclosure is not hiding things. It sequences visibility by task, risk, and frequency so novices make fewer errors while expert users can still find advanced controls.95%Design Systems Page Patternsinformation-architecture / navigationInformation 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%Design Systems Page Patternsaudit-log / evidenceAudit Log Evidence Chain
An audit log UI should support investigation, filtering, details, JSON/CSV export, and evidence explanation rather than only showing a chronological activity stream.
The value of an audit log is traceability and proof. Each record should answer who did what, when, from where, to which object, with what result, and where supporting evidence lives.95%Design Systems Page Patternsnotifications / inboxNotification Inbox Triage Model
A notification center should separate immediate feedback, deferred reading, actionable work, and system-level alerts, then organize triage by read state, severity, source, and batch actions.
Notifications are not merely a message list. They are an attention allocation system: when to interrupt, when to stay quiet, when to enter the inbox, how to archive, and how to return to the source object all need explicit rules.95%Design Systems Page Patternspermissions / rolesPermission Matrix Inheritance Preview
Permission interfaces must explain who gets which capability through which path, and preview inheritance, overrides, dangerous permissions, and bulk-change impact before saving.
A permission matrix is not an ordinary settings table. It joins security, organizational structure, resource scope, and audit responsibility; users must distinguish direct grants, role grants, team or group inheritance, defaults, external guests, and explicit denies.95%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%Design Systems Page Patternspatterns / flowReal Product Flows as Pattern Evidence
Pattern libraries should extract tasks, states, and copy from real product flows instead of imitating isolated screenshots.
Good UI patterns are not collections of visual screenshots. They are reusable evidence about task flow, state flow, constraints, and feedback.91%Design Systems Page Patternstokens / themeSemantic Theme Token Scope
Theme tokens should define scope and hierarchy so components consume semantic roles instead of scattered one-off color values.
A design system's theming power comes from a few predictable semantic controls: accent color, gray scale, panel background, scaling, radius, and component variants.90%Design Systems Page Patternsai / generationAI Generation Progress Pattern
AI Generation Progress Pattern turns a frequent interface judgment into an executable constraint before generation.
AI generation needs to show what the system is doing, what users can still do, and how to recover after failure.88%Design Systems Page Patternstokens / editorToken Editor Pattern
Token Editor Pattern turns a frequent interface judgment into an executable constraint before generation.
Token editors need to make design decisions, references, and impact scope visible.87%Design Systems Page Patternsdocumentation / design-systemDesign System Documentation Page
Design System Documentation Page turns a frequent interface judgment into an executable constraint before generation.
Design system docs must support finding, understanding, copying, and judging suitability.87%Design Systems Page Patternssettings / iaSettings Page Architecture
Settings Page Architecture turns a frequent interface judgment into an executable constraint before generation.
Settings should be grouped by user intent and risk, not database fields or internal org structure.87%Design Systems Page Patternscommunity / libraryCommunity Library Contribution Flow
Community Library Contribution Flow turns a frequent interface judgment into an executable constraint before generation.
Community resources need low contribution friction while review and source notes protect quality.86%Design Systems Page Patternsaudit-log / timelineAudit Log Timeline
Audit Log Timeline turns a frequent interface judgment into an executable constraint before generation.
Audit logs need to answer who, when, what object, what action, and what impact.86%Design Systems Page Patternssearch / filtersSearch Results and Facets
Search Results and Facets turns a frequent interface judgment into an executable constraint before generation.
Search interfaces need to explain why results appear and how to narrow or broaden scope.86%Design Systems Page Patternsgovernance / reviewComponent Governance Review Flow
Component Governance Review Flow turns a frequent interface judgment into an executable constraint before generation.
A design system needs to record why components are added, how they are reused, and when they are deprecated, not just list components.86%Design Systems Page Patternsai / promptPrompt Builder Interface
Prompt Builder Interface turns a frequent interface judgment into an executable constraint before generation.
Prompt builders should help users express goal, context, constraints, and output format instead of only offering a large textarea.86%Design Systems Page Patternsanalytics / drilldownAnalytics Drilldown Workflow
Analytics Drilldown Workflow turns a frequent interface judgment into an executable constraint before generation.
Analytics interfaces should move from anomalies and questions toward causes, not just show chart collections.86%Design Systems Page Patternsadmin / list-detailAdmin List Detail Pattern
Admin List Detail Pattern turns a frequent interface judgment into an executable constraint before generation.
Admin work often moves from filtered lists into detail handling, and both views must share state and action semantics.86%Design Systems Page Patternsnotifications / inboxNotification Center Pattern
Notification Center Pattern turns a frequent interface judgment into an executable constraint before generation.
Notification centers should help users judge importance, source, handled state, and next action.85%Design Systems Page Patternsdocs / tocDocumentation TOC Layout
Documentation TOC Layout turns a frequent interface judgment into an executable constraint before generation.
Long docs need to show current position, section structure, and related next steps.85%Design Systems Page Patternsempty-state / projectsEmpty Project Start State
Empty Project Start State turns a frequent interface judgment into an executable constraint before generation.
An empty project page should move users toward the first real outcome, not explain product features.85%Design Systems Page Patternspricing / comparisonPricing Plan Comparison
Pricing Plan Comparison turns a frequent interface judgment into an executable constraint before generation.
Pricing pages help users choose the right plan rather than stacking marketing adjectives.85%Design Systems Page Patternsonboarding / setupProgressive Onboarding Setup
Progressive Onboarding Setup turns a frequent interface judgment into an executable constraint before generation.
Onboarding should not ask for everything at once; it should get users to a usable result quickly.85%Design Systems Page Patternsaccount / profileProfile and Account Settings
Profile and Account Settings turns a frequent interface judgment into an executable constraint before generation.
Profile, login security, notifications, and billing have different risk levels and should be separated.84%Design Systems Page Patternsmarketplace / browseMarketplace Browse Pattern
Marketplace Browse Pattern turns a frequent interface judgment into an executable constraint before generation.
Marketplace pages need to support discovery, comparison, trust judgment, and install or purchase action.84%Design Systems Page Patternsassets / imagesVisual Assets by Page Type
Visual assets should reveal the real product, scene, gameplay, or person rather than only provide vague atmosphere.
When users need to inspect an object, imagery must be specific, clear, and relevant.82%Design Systems Page Patternsresponsive / stabilityResponsive Layout Stability
Fixed-format UI elements need stable dimensions and responsive constraints to avoid shifts or overlap.
Boards, toolbars, counters, and button groups need predefined sizing rules.82%Design Systems Page Patternsrag / agentRAG Retrieval to Generation Rule
Knowledge hits should become design constraints, not visible page copy copied from the knowledge item.
RAG improves decision quality and traceability; it should not make pages recite theory.82%Design Systems Page Patternspage-pattern / layoutPage Pattern Selection
First classify the page task as marketing, operations, reading, configuration, commerce, or creation, then choose the layout pattern.
The wrong page pattern makes good components serve the wrong goal.82%Design Systems Page Patternsecommerce / productEcommerce Product Decision Flow
Ecommerce pages should help users understand the product, compare differences, confirm trust, and purchase.
Purchase decisions need images, price, specs, stock, reviews, delivery, and return information together.82%Design Systems Page Patternslanding / heroLanding Page First-Viewport Signal
A landing first viewport must clearly show what the brand, product, person, or place is and hint at the next section.
The first viewport should not only create atmosphere; it should show identity, value, and the next exploration path.82%Design Systems Page Patternscrm / workflowCRM Workflow Pages
CRM pages should organize around leads, customers, stage, owner, and next actions rather than decorative sections.
CRM value comes from quick customer state judgment and next-step execution.82%Design Systems Page Patternsdashboard / alertsDashboard Hierarchy and Alerts
Dashboards should show status overview first, then anomalies, trends, details, and action entries.
More metrics are not better; the priority is helping users decide whether action is needed.82%Design Systems Page Patternssaas / crmOperational Tool Density Pattern
SaaS, CRM, and admin tools should prioritize repeated scanning, comparison, and action over marketing narrative.
Tool first screens should show work objects, state, and next steps rather than a full-screen promotional area.82%Design Systems Page Patternscopy / brandBrand Voice in Interface Copy
Interface copy should help users act, with brand voice applied carefully to buttons, states, and explanations.
Brand expression must not sacrifice clarity, especially for errors, payments, moderation, and destructive actions.82%Design Systems Page Patternscomponents / contractComponent Consistency Contract
Components need clear props, states, sizes, and disallowed combinations to stay consistent across pages.
A component is not a visual screenshot; it is a reusable set of behaviors and constraints.82%Design Systems Page Patternstokens / design-systemDesign Token Governance
Tokens should express roles and constraints, not merely store colors, type, and spacing.
Maintainable tokens need names, scope, defaults, and prohibited uses so humans and agents can share them.82%