Knowledge RAG

Design Knowledge Base

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

192 published principles

Knowledge Architecture RAGscroll / overflow

Scroll Container Ownership Contract

Long pages, libraries, and workbenches must define one primary scroll owner; declare scroll ownership before combining nested `height: 100vh`, `overflow: hidden/auto`, and sticky panels.

Scrolling is not incidental browser behavior; it is a layout contract. Decide who owns page scroll, who owns local scroll, which panels are sticky, and how mobile reflows before implementation.

97%Knowledge Architecture RAGfacets / search

Global Facet Index Contract

Sidebar facets for knowledge, asset, and style libraries should come from the full index, not only the current result subset; the results area explains the active query and filters.

Faceted navigation is both a retrieval control and an information-architecture map. If facets are derived only from the current result set, users lose adjacent categories after searching and RAG cannot reliably discover neighboring knowledge.

97%Frontend Implementationmaterial / glass

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 Implementationai-ui / citations

AI Response Citation and Evidence Surface Contract

Citations in AI/RAG answers are not footer decoration. They are an evidence surface joining claims, sources, snippets, permissions, streaming state, copy/share behavior, and auditability.

Trustworthy AI interfaces let users see which claims have sources, whether sources are accessible, when evidence was generated, how to open or copy it, and how missing, stale, or low-confidence evidence is handled.

96%Frontend Implementationapi-reference / openapi

API Reference Endpoint Page Contract

An API endpoint page should combine method/path, auth, parameters, request body, response/error matrix, examples, try-it safety, and mobile schema reading into one executable documentation contract.

An API reference is not complete just because an OpenAPI schema is rendered. It is an operating surface for developers and must support discovery, first calls, auth setup, error recovery, copied examples, try-it safety, and version trust.

96%Frontend Implementationdeveloper-docs / code-block

Developer Docs Code Example and Copy Contract

Code blocks in developer docs must do more than look highlighted: they explain the task, copy safely, provide clear feedback, keep tabs keyboard-operable, and avoid breaking mobile page scrolling.

A code example is a product operation surface. It carries teaching, configuration, API calls, trust, and execution cost, so syntax highlighting, copy, placeholders, tabs, playgrounds, responsiveness, and accessible feedback need one component contract.

96%Frontend Implementationaria / components

ARIA Component Contract

Before styling a custom interactive component, define its native-first decision, name/role/value, ARIA/DOM states, keyboard matrix, focus path, visual states, and test assertions.

ARIA is not a magic semantic layer for divs; a component is implementable only when native semantics, keyboard behavior, accessible name, state attributes, and visual state agree.

96%Interaction Responsive Motionoverlay / dialog

Overlay Focus and Scroll Lock Contract

An overlay is not just a scrim; it is a contract across modality, initial focus, focus containment, dismissal, inert background, scroll locking, portal stacking, and mobile safe areas.

Whenever an overlay changes the interactive scope, keyboard, screen reader, pointer, scroll, and mobile behavior must be governed together; a visually covered but semantically reachable background is the most dangerous fake modal.

96%Design Systems Page Patternscommerce / catalog

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%Knowledge Architecture RAGrag / retrieval

RAG Retrieval Intent Coverage Contract

Every skill, knowledge, style, and asset entry should cover user phrasing, design-theory terms, component/state terms, implementation-risk terms, and source terms instead of relying only on the title.

RAG quality depends not only on content depth but on whether entries can be recalled. Retrieval queries are signposts for future agents and must cover multiple phrasings and task intents.

96%Design Systems Page Patternssearch / filters

Search 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 / settings

Design 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%Frontend Implementationupload / dropzone

File Upload State and Validation Contract

An uploader is not a dashed box. It is a state machine from selection, validation, upload, pause, failure, retry, and final file record; drag-and-drop is enhancement, not a replacement for accessible file selection and server validation.

File upload spans interaction, network, privacy, security, and accessibility. A healthy uploader defines file purpose, restrictions, API, states, and recovery before choosing react-dropzone, Uppy, FilePond, tus-js-client, or native input.

96%Frontend Implementationcomponents / states

Component State Matrix Contract

Before generating or adopting a component, define the state matrix, triggers, ARIA/DOM expression, visual tokens, and test path instead of only shipping the static default state.

Component quality is not the default-state screenshot. Every reachable state must remain understandable, recoverable, and testable across mouse, keyboard, touch, screen readers, loading, errors, and permission limits.

95%Frontend Implementationcopy-in / motion

Copy-in Motion Component Localization and Accessibility

After copying an external motion component, Lottie/Rive player, Motion/GSAP example, or registry block, localize copy, states, direction, duration, reduced motion, pause/stop/hide behavior, keyboard paths, and license source.

Once a motion component is copied into the repository, it is no longer a demo fragment. It becomes a local interaction asset that must satisfy brand voice, language direction, accessible fallbacks, performance budget, and source licensing.

95%Frontend Implementationaria / apg

ARIA APG Widget Pattern Contract

Before hand-rolling complex widgets, extract roles, states, properties, keyboard tables, focus strategy, and test assertions from WAI-ARIA APG; prefer native controls or mature primitives when they fit.

ARIA is a semantic and interaction contract, not magic attributes for divs. Custom comboboxes, dialogs, tabs, treegrids, menus, listboxes, and similar widgets must prove their keyboard, focus, and assistive-technology model first.

95%Interaction Responsive Motionscroll / horizontal

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 Motionmotion / scroll

Scroll Story Chapter Contract

The basic unit of scrollytelling is not an animation frame but a readable chapter: each chapter needs a question, text anchor, visual state, static fallback, and verifiable scroll behavior.

Scroll storytelling should break complex mechanisms into evidence chapters users can pause on, skip, and return to; motion connects chapters and states but should not become the only content layer.

95%Design Systems Page Patternsknowledge-base / library

Knowledge 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-viewport

Food 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 / trust

Public-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 / kpi

Dashboard 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%Frontend Implementationscroll / motion

Scroll-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%Interaction Responsive Motionmotion / reduced-motion

Motion Accessibility and Performance Triage

Before shipping motion, classify purpose, trigger, disable path, performance properties, and verification evidence instead of accepting it because it looks smooth.

Good motion explains change; bad motion adds burden. Triage turns every animation into an explainable, reducible, testable, cleanup-safe interface behavior.

95%Design Systems Page Patternsprogressive-disclosure / settings

Progressive 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%Frontend Implementationtables / responsive

Responsive Data Table Disclosure Contract

Complex data tables should not simply shrink text or force horizontal scrolling on mobile; define primary key, column priority, alternate presentation, header relationships, and batch/row action boundaries.

A data table is a comparison structure. Responsive treatment must preserve comparison relationships and accessible semantics, not only the desktop visual appearance.

95%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%Interaction Responsive Motionbulk-actions / tables

Batch Action Preview and Diff

Batch actions need selection scope, action object, affected count, failure branches, and undo/audit paths; dangerous bulk changes must show a diff before submission.

Batch actions increase efficiency and amplify mistakes. The interface must make current selection, action scope, invalid items, dangerous consequences, async progress, and recovery path explicit.

95%Design Systems Page Patternsaudit-log / evidence

Audit 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 / inbox

Notification 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 / roles

Permission 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%Data Visualizationmap / poi

Map POI Icon Attribution Boundaries

POI icon sets such as Maki solve map symbols, not map data, tiles, style, basemap providers, place labels, or interaction attribution.

Map symbols are one layer of visual encoding. Agents must govern icon set, sprite, map style, geodata, tile provider, legend, and accessible labels separately instead of treating icon license as map license.

95%Data Visualizationmaps / geospatial

Map Data Attribution and Alternatives

Map interfaces must separately record runtime library, tiles, styles, glyphs, sprites, geodata, and provider attribution, while providing list/table alternatives and keyboard-reachable paths.

A map is not a background image. It combines complex data visualization, interactive controls, and licensed materials; users must understand location, scope, selected object, data source, update time, and alternate access paths.

95%Data Visualizationaccessibility / charts

Accessible Chart Alternatives

Charts need takeaway titles, text summaries, redundant encodings, and data-table alternatives; Canvas or SVG alone is not automatically accessible.

Data visualization is non-text and often interactive content. It must give equivalent conclusions and data paths to people who cannot see the chart, distinguish colors, use a mouse, or read it at default size.

95%Data Visualizationdata-transform / provenance

Visualization Transform Provenance

Charts must record filter, aggregate, bin, timeUnit, join, missing-value, and sorting logic; otherwise users cannot audit why the chart looks the way it does.

Data-visualization trust comes not only from graphics but also from an explainable transform chain. Every aggregation, filter, and derived field should be traceable.

95%Resource Licensingfigma / license

Figma Community License Intake

Figma Community is not one open-source repository; every file, plugin, widget, paid resource, and slide template needs per-resource license and redistribution review.

An asset library cannot treat 'from Figma Community' as a license. Downloading, duplicating, commercial use, modification, redistribution, and RAG/training reference are different questions.

95%Frontend Implementationcontainer-query / responsive

Container 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%Typography Color Accessibilityforced-colors / high-contrast

Forced Colors and High Contrast Support

High contrast is not dark mode; forced-colors can override many color properties, so components need system colors, real outlines, and non-color redundancy.

Accessible color systems should respect user-agent high contrast rendering instead of forcing brand color. Critical states must remain understandable when system colors take over, shadows are removed, and background images disappear.

95%Frontend Implementation3d / three.js

Web 3D Asset Runtime Pipeline

A Three.js page is not just a canvas; 3D assets need source licensing, glTF optimization, texture compression, loading states, interaction goals, fallbacks, and verification evidence.

Web 3D combines design, assets, runtime, and performance budgets. Agents can safely generate 3D experiences only after governing model source, geometry complexity, texture format, fallback path, and accessible explanation.

95%Resource Licensingavatar / placeholder

Deterministic Avatar Placeholder Governance

Avatar generators such as Boring Avatars and DiceBear work well for identity placeholders, but seed, style, license, private inputs, and accessible names must be recorded; generated avatars are not real likenesses or brand assets.

The value of a deterministic avatar is stable object recognition, not real identity. It combines visual distinction, privacy, licensing, accessible labeling, and cross-project reuse boundaries.

95%Interaction Responsive Motionforms / validation

Form Error State Contract

A form error state contract puts labels, helper text, validation timing, inline errors, error summaries, submit states, server failures, mobile keyboards, and ARIA wiring into one implementable model.

Form errors are not one red component; they combine field contracts, state machines, and recovery paths, and should route to narrower guidance for summaries, accessible feedback, persistent labels, and transactional recovery.

95%Resource Licensingpattern / texture

Pattern and Texture License Boundaries

Patterns, textures, and background generators must distinguish code license, exported-asset license, attribution, modification rights, and redistribution boundaries instead of treating free generation as unrestricted intake.

One resource can contain tool code, sample patterns, exported SVG, material files, author attribution, and platform terms. The asset library must record the actual reusable-asset layer.

95%Resource Licensingbrand-logo / trademark

Brand Logo Use Boundaries

Brand logos should be used only for real brand references, integrations, payment methods, customer or partner proof, or authorized collaboration. Confirm trademark and brand guidelines, avoid implied endorsement, do not alter shape or color casually, and provide accessible names.

A brand logo is not an ordinary icon. The code license of an open-source project, aggregator, or SVG package usually does not replace trademark, brand-guideline, endorsement-context, and usage-scope judgment.

95%Resource Licensingicons / license

Icon Set License, Trademark, and Accessibility Governance

Icons are not arbitrary decoration; primary icon sets, aggregated icons, brand logos, and icon-only controls need separate license, trademark, import, and accessibility rules.

Icon governance keeps symbols visually consistent, legally reusable, screen-reader understandable, tree-shakable, and prevents brand logos from becoming free decoration or implied endorsement.

95%Resource Licensingfonts / license

Webfont License and Loading Governance

Font intake is not only visual choice; it must confirm per-font licensing, delivery method, privacy constraints, CJK size, fallback, and loading performance together.

A font is both a brand asset and a runtime dependency. Agents should recommend a font only when its license is traceable, loading surface is controlled, fallback is stable, and privacy boundary is clear.

95%Resource Licensingvideo / motion

Stock Video Hero and Background Governance

Free stock video can make heroes feel more real, but each use must confirm item license, likeness/trademark/property rights, attribution, poster, pause control, reduced motion, and mobile performance.

Background video is not moving wallpaper. It belongs in production only when it serves first-viewport signal, brand tone, or story evidence without weakening readability, accessibility, licensing, or performance.

95%Resource Licensingillustration / empty-state

Friendly Asset Governance for Empty States

Illustrations, emoji, and Lottie can make empty states friendlier, but they must first serve reason, next action, license record, alt text, and reduced-motion.

Friendly assets are not the main actor in an empty state. They reinforce tone, reduce anxiety, or aid understanding; the real interface value is clear reason, next action, and legally reusable asset metadata.

95%Resource Licensingattribution / license

Asset Attribution Surface Contract

License metadata should not live only in the catalog. CC BY, custom-licensed maps, photos, illustrations, Lottie files, and similar assets need readable, nearby, traceable attribution, license links, change notes, and commercial-use risk in the UI, export, or source notes.

Attribution is part of interface information architecture, not only an asset-catalog field. Any resource whose license requires credit needs a surface that users can find, reviewers can audit, and agents can trace.

95%Interaction Responsive Motion3d / storytelling

Immersive 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%Typography Color Accessibilitycharts / accessibility

Chart Accessibility Encoding

Chart Accessibility Encoding turns a frequent interface judgment into an executable constraint before generation.

An accessible chart is not a graphic with one alt sentence; its visual encodings, text summary, interaction states, and data alternative all carry the same evidence.

94%Typography Color Accessibilitybackground / texture

Decorative Background Readability

Textures, patterns, gradients, noise, and media backgrounds must serve text, controls, semantics, and performance instead of turning content into atmosphere.

A background is a support layer for hierarchy and mood; once it carries meaning, affects reading, or moves, it needs semantic alternatives, contrast evidence, motion fallback, and license records.

94%Visual Foundationscase-study / awwwards

Award 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%Data Visualizationchart-choice / data-relationship

Chart Question Before Chart Type

Define the data relationship users need to judge before choosing chart type and frontend library; do not start from wanting a pretty chart.

Good charts are not visual style collections. They are decisions that match data structure, user question, and visual encoding.

94%Data Visualizationdashboard / metric-card

Dashboard Metric Card Contract

A metric card is not decorative big-number UI; each card needs metric definition, time range, comparison baseline, unit, data state, and next action.

A dashboard first screen should answer what users should judge now, not compress all data into an equal chart wall. Metric cards are decision entry points and need semantics plus evidence.

94%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%Frontend Implementationa11y-testing / axe-core

Automated Accessibility Tool Triage

axe-core, Storybook a11y, Pa11y, Lighthouse, Accessibility Insights, and WAVE should be layered: automation catches common issues first, then humans verify task flows.

Automated accessibility testing is an early warning system, not complete compliance proof. A healthy process converts tool output into reproducible, fixable, retestable product-task defects.

94%Typography Color Accessibilityoklch / color

OKLCH Perceptual Color Scales

OKLCH lets agents generate more controllable theme scales around lightness, chroma, and hue, but still needs semantic mapping, gamut checks, and contrast matrices.

A color scale is not a hex color linearly tinted and shaded. Healthy theme scales control perceived lightness, saturation, brand tone, and usage semantics together.

94%Resource Licensinggenerated-assets / provenance

Generated Asset Provenance Record

AI-generated assets have provenance too: tool, model, prompt, source references, edit history, rights risks, and reuse boundaries must be recorded together.

An asset library cannot treat AI generated as a license or source explanation. Reuse depends on input rights, depicted subject, edit chain, verification signals, and usage context.

94%Interaction Responsive Motionforms / errors

Transactional Form Error Recovery

Error handling in high-trust forms is not about telling users they are wrong. It returns them to a recoverable state where they can continue without re-entering information.

Transactional service error recovery must handle visual placement, screen readers, focus, original input, error copy, and next action together.

94%Frontend Implementationbackground-texture / css

Background 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%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%Frontend Implementationcss-color / oklch

CSS Color Spaces and Gamut Fallbacks

Modern CSS supports OKLCH, P3, and relative colors, but production tokens still need to handle sRGB, older tooling, screenshot tests, and third-party renderers.

Frontend color implementation must separate design source, modern CSS output, and compatibility fallback; browser support does not mean every toolchain supports the same syntax.

93%Resource Licensinglicense / assets

Asset License Metadata Record

Asset-library intake must record license, commercial-use judgment, attribution needs, download method, and RAG keywords at the specific resource level, not just the platform name.

The value of an asset library is not volume. It is legal reuse, traceability, downloadability, and accurate agent retrieval. Aggregators and marketplaces especially require per-resource license decisions.

93%Frontend Implementationcomponents / radix

Primitive Component Selection

When an interaction involves focus, keyboard behavior, overlays, arrow keys, or screen-reader semantics, start from a mature primitive and apply local visuals.

The risk in complex interactive components is usually not styling. It is focus management, keyboard paths, ARIA semantics, portals, collision positioning, and mobile scroll locking. Primitives stabilize that behavior first.

92%Interaction Responsive Motionmotion / scroll

Award 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%Typography Color Accessibilitycolor / contrast

Contrast-Generated Color Tokens

Generating color scales from target contrast ratios can improve theme accessibility, but the output must still map to semantic tokens and state roles.

Accessible color systems should not audit contrast only after design. Contrast targets should shape color-scale generation and token naming from the start.

92%Frontend Implementationshadcn / component-governance

Copy-in Component Governance

Copy-in components such as shadcn/ui become local assets once added, so they need token mapping, a state matrix, upgrade policy, and license records.

The advantage of copied source components is control and adaptability. The cost is that the project owns consistency, upgrades, license notices, and design-system adaptation.

91%Design Systems Page Patternspatterns / flow

Real 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 / theme

Semantic 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%Interaction Responsive Motionportfolio / motion

Quiet 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%Frontend Implementationloading / skeleton

Loading Skeleton Progress Contract

Loading states should choose skeletons, inline loading, spinners, progress bars, or stage feedback based on duration, scope, and measurability, backed by a frontend state machine for accessibility, stability, and recovery.

The goal of loading feedback is not to decorate waiting; it tells users whether the system responded, what region is changing, whether they can still act, whether wait time is knowable, and how recovery works after failure. Different wait scenarios require different feedback modes.

90%Interaction Responsive Motionempty-state / recovery

Empty State Recovery Contract

Empty states should explain system status and cause before offering an action that resolves that cause, instead of filling silence with illustration.

An empty state is completed system feedback: users need to know why content is absent, whether the request has finished, what they can do, and whether access, configuration, retry, or waiting is required.

90%Design Systems Page Patternsai / generation

AI 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 / editor

Token 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-system

Design 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 / ia

Settings 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%Interaction Responsive Motionmodal / focus

Modal Focus Management

Modal Focus Management turns a frequent interface judgment into an executable constraint before generation.

Dialogs change interaction context and must manage focus, background reachability, and close paths.87%Design Systems Page Patternscommunity / library

Community 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 / timeline

Audit 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 / filters

Search 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 / review

Component 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 / prompt

Prompt 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 / drilldown

Analytics 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-detail

Admin 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%Interaction Responsive Motiongesture / mobile

Touch Gesture Alternatives

Touch Gesture Alternatives turns a frequent interface judgment into an executable constraint before generation.

Swipe, pinch, and long press cannot be the only way to complete a task.86%Interaction Responsive Motionloading / skeleton

Skeleton 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%Interaction Responsive Motiontables / bulk-actions

Table Bulk Action Model

Table Bulk Action Model turns a frequent interface judgment into an executable constraint before generation.

Bulk actions need to express selected count, scope, risk, and completion feedback clearly.86%Interaction Responsive Motiondrag-drop / accessibility

Drag and Drop Alternatives

Drag and Drop Alternatives turns a frequent interface judgment into an executable constraint before generation.

Drag and drop is useful direct manipulation, but sorting, moving, and upload need non-drag alternatives.86%Interaction Responsive Motiondanger / confirmation

Destructive Action Confirmation

Destructive Action Confirmation turns a frequent interface judgment into an executable constraint before generation.

Confirmation should protect irreversible or high-impact actions and explain object plus consequence.86%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%Typography Color Accessibilityforms / input

Touch Keyboard and Input Purpose

Touch Keyboard and Input Purpose turns a frequent interface judgment into an executable constraint before generation.

Mobile input fields should use the right keyboard, autocomplete, and input purpose to reduce errors and effort.86%Typography Color Accessibilitymotion / reduced-motion

Reduced Motion Accessibility

Reduced Motion Accessibility turns a frequent interface judgment into an executable constraint before generation.

Animation and transitions need to respect reduced-motion preferences and provide non-motion information paths.86%Typography Color Accessibilityforms / labels

Persistent Form Labels

Persistent Form Labels turns a frequent interface judgment into an executable constraint before generation.

Form labels should remain visible before and after input so users can confirm meaning and context.86%Typography Color Accessibilitystatus / aria

Status Message Announcement

Status Message Announcement turns a frequent interface judgment into an executable constraint before generation.

State changes conveyed only by color, toast, or visual movement can be missed by some users.86%Typography Color Accessibilityauthentication / accessibility

Accessible Authentication Flow

Accessible Authentication Flow turns a frequent interface judgment into an executable constraint before generation.

Secure flows still need low cognitive load, helping users complete rather than testing them.86%Typography Color Accessibilityforms / errors

Error Summary Pattern

Error Summary Pattern turns a frequent interface judgment into an executable constraint before generation.

Users need to know how many errors exist, where they are, and how to fix them without hunting for red text.86%Typography Color Accessibilitytarget-size / touch

Target Size and Spacing

Target Size and Spacing turns a frequent interface judgment into an executable constraint before generation.

Interactive targets need enough size and spacing, especially on mobile, toolbars, and dense lists.86%Typography Color Accessibilityfocus / keyboard

Focus Order and Reading Order

Focus Order and Reading Order turns a frequent interface judgment into an executable constraint before generation.

A mismatch between visible layout and assistive navigation order breaks orientation and comprehension.86%Visual Foundationsdashboard / kpi

Dashboard KPI Triage

Dashboard KPI Triage turns a frequent interface judgment into an executable constraint before generation.

Metric cards are not number displays; they are triage entry points for operations.86%Design Systems Page Patternsnotifications / inbox

Notification 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 / toc

Documentation 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 / projects

Empty 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 / comparison

Pricing 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 / setup

Progressive 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%Interaction Responsive Motionmobile / actions

Mobile Bottom Action Bar

Mobile Bottom Action Bar turns a frequent interface judgment into an executable constraint before generation.

Critical mobile actions should be thumb-reachable without covering content, errors, or system navigation.85%Interaction Responsive Motionfeedback / toast

Toast vs Inline Feedback

Toast vs Inline Feedback turns a frequent interface judgment into an executable constraint before generation.

Feedback placement should match the object; toast fits short global status, while inline feedback fits fields and local fixes.

85%Interaction Responsive Motionwizard / progress

Wizard Stepper Progress

Wizard Stepper Progress turns a frequent interface judgment into an executable constraint before generation.

Wizards need to show current position, remaining work, reversibility, and save state.85%Interaction Responsive Motionfilters / state

Filter Query State Preservation

Filter Query State Preservation turns a frequent interface judgment into an executable constraint before generation.

Filter results are user-built work context and should persist across refresh, back navigation, and sharing.85%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 Motionundo / editing

Undo Redo Reversibility

Undo Redo Reversibility turns a frequent interface judgment into an executable constraint before generation.

Reversible actions let users explore with fewer confirmation interruptions.85%Typography Color Accessibilitylinks / contrast

Link Contrast and Affordance

Link Contrast and Affordance turns a frequent interface judgment into an executable constraint before generation.

Links are navigation promises; users must quickly recognize clickable text in reading flows.85%Visual Foundationscomparison / layout

Comparison Layout Clarity

Comparison Layout Clarity turns a frequent interface judgment into an executable constraint before generation.

Comparison value comes from visible differences along shared dimensions, not prettier object cards.85%Visual Foundationsdetail / object

Object Detail Layout

Object Detail Layout turns a frequent interface judgment into an executable constraint before generation.

Detail pages should organize around object identity, state, key attributes, and actions instead of displaying every field equally.

85%Visual Foundationsdata / charts

Visual weight is not inherently better when stronger; it should allocate attention to the most important actionable area.

82%Visual Foundationsalignment / layout