The library, by discipline.

Seven disciplines

• 390WebsitesSite types, page anatomy, composition, type and measure, performance and honest proof.
• 95AppsiOS and Android conventions, navigation, screen states, touch targets and platform tells.
• 23PWAInstallability, offline shells, standalone display and the limits of each platform.
• 58Web appsApp shells, tables, dialogs, empty states, usage meters and admin consoles.
• 63Systems & dataTokens, components, charts, grouping and the evidence behind design psychology.
• 88MotionDuration and easing scales, reduced motion, performance and when not to animate.
• 21LessonsCross-cutting rules: page intent first, card walls, evidence grading, scanning.

Read these free, in full

The same text your agent gets from get_design_guidance. Free accounts get every free guide through their agent; Creator opens the premium ones.

• Lessons · PrinciplePage intent first: decide the page's job before choosing any componentDesign a page from its job, not from a template: classify the intent (brand impression, explain, teach, convert, search, portfolio, workflow, publish, trust), state the required decision fields, and pick a composition before any component.
• Lessons · Anti-patternAnti-pattern: card walls as a substitute for page architectureRepeated equal cards flatten hierarchy and make the reader do the design work. Cards are acceptable only for genuinely modular, comparable objects; for stories, processes, lessons, brand intros and explanations use editorial, timeline, proof-ladder or split compositions. Includes the four-question check and the replacement decision list.
• Websites · PatternSkip link, landmark regions and heading outline for every pageThe structural accessibility baseline: a visible-on-focus skip link to main, one banner/nav/main/contentinfo per page with labeled duplicates, all content inside landmarks, and a single h1 with a logical heading outline.
• Websites · Verification ruleCore Web Vitals targets and how to measure them for a marketing sitePass thresholds (LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 at the 75th percentile, mobile and desktop separately), how to combine lab and field data, and page-weight budgets that keep a marketing site inside them.
• Websites · Verification rulePre-launch design QA checklist for marketing and content sitesA single gate run on every public template before launch: content and claims, layout at four widths, type and color tokens, states, accessibility (automated + manual), performance budgets, SEO/metadata, forms and legal — each with a concrete pass condition and evidence.
• Apps · PrincipleEvery screen needs a state matrix: loading, empty, error, offline, partial, first-runA principle and checklist for designing all states of each app screen before styling the happy path, with the minimum content for each state and a state model that makes impossible combinations unrepresentable.
• Apps · PrincipleTouch target size and spacing for native appsMinimum and recommended hit areas (44×44 pt iOS, 48×48 dp Android, WCAG 2.2 AA 24×24 px floor), spacing between targets, using minWidth/minHeight rather than relying on hitSlop, and how to verify with Accessibility Inspector and Accessibility Scanner.
• Apps · PrincipleDestructive actions: prefer undo, confirm only the irreversibleA decision rule for delete/remove/reset in apps: routine reversible deletions get immediate action plus an Undo snackbar; rare, irreversible, or bulk actions get a specific confirmation with an action-named destructive button; the heaviest get typed confirmation.
• PWA · PatternInstallability criteria and the web app manifest, member by memberWhat makes a site installable on Chromium (HTTPS, a linked manifest with name/short_name, 192 and 512 px icons, start_url, display) versus Safari (no requirements since 26), why a service worker is no longer an install gate but still mandatory in practice, and a minimal correct manifest with id, scope, display_override, colours and icons.
• Web apps · PatternEmpty states: first-use, cleared, filtered-empty and error variantsNever leave a region blank: distinguish first-use (explain + create action), user-cleared (confirm success), filtered/no-results (show criteria + clear), and error (what failed + retry) empty states, each with one primary action.
• Web apps · PatternAccessible modal dialogs and drawers: focus in, trapped, and backImplement modals with native <dialog> or role=dialog + aria-modal, a visible title via aria-labelledby, deliberate initial focus, Tab trapping, Escape to close, background made inert, and focus returned to the trigger (or a logical successor).
• Motion · PrincipleReduced motion: reduce, don't remove meaningHow to implement prefers-reduced-motion across CSS, JavaScript libraries, WebGL and native apps: a mapping from each motion type to its reduced equivalent, keeping feedback and state changes intact.
• Motion · PrincipleDuration and easing scale: 100–500 ms, ease-out to enter, ease-in to leaveConcrete duration ranges and cubic-bezier curves for UI and marketing motion, grounded in Material 3 tokens and usability research, with rules for choosing by distance, size and frequency.
• Systems & data · ReferenceAuthoring design tokens in the DTCG format (2025.10 stable)How to write portable token files: any object with $value is a token, any without is a group; $type cascades from groups; aliases use {group.token}; colours are objects with colorSpace/components/hex; dimensions are {value, unit}; files end in .tokens.json. The spec reached its first stable version on 28 Oct 2025; Style Dictionary v4 reads DTCG, full 2025.10 support is in progress for v5.
• Systems & data · Anti-patternAnti-pattern: div buttons, div selects, and components with no keyboard pathClickable <div>/<span> elements without roles or key handlers, custom selects built from styled divs with only onClick, and sliders/carousels/expandable cards that work only by mouse or touch exclude keyboard and assistive-technology users entirely — and are the most common serious accessibility failures in component libraries.

Browse a sample

146 items from the library, 48 of them free. Premium items show only their authored abstract; the full guide is delivered to your agent within your plan's allowance.

• Lessons · ReferenceFree

  Evidence note: whitespace and density — what is supported and the '20% comprehension' myth

  No controlled study was found tying a whitespace percentage or density threshold to comprehension or preference. The widely repeated 'whitespace increases comprehension by 20% (Lin, 2004)' is a documented misattribution — the cited author denied it. What is supported is spacing as a grouping signal that improves scanning. Never cite the 20% figure.

• Lessons · PrincipleFree

  The transplant test and the seven moves real design makes

  A positive target for agents: if a layout would work for a SaaS, a dentist, a bakery and a portfolio by swapping words and colours, it is generic. Seven concrete moves (intent first, composition over components, real proof, type and space carry the page, colour restraint, meaningful motion, designed for every input) replace it.

• Lessons · Anti-patternFreeRead here

  Anti-pattern: card walls as a substitute for page architecture

  Repeated equal cards flatten hierarchy and make the reader do the design work. Cards are acceptable only for genuinely modular, comparable objects; for stories, processes, lessons, brand intros and explanations use editorial, timeline, proof-ladder or split compositions. Includes the four-question check and the replacement decision list.

• Lessons · PrincipleFree

  People scan, not read: distinct, descriptive headings and consistent grouping spacing

  Eyetracking shows an F-shaped default scan that misses content; a more efficient 'layer-cake' scan emerges only when headings are visually distinct and accurately describe their sections. Consistent spacing groups content; irregular spacing causes measurable backtracking. No whitespace percentage is evidenced.

• Lessons · WorkflowFree

  Classify the surface first: website, web app, PWA or native app

  A routing step that stops agents treating app screens, web apps, PWAs, landing pages and content sites as the same surface: classify by keywords and constraints, adopt the right vocabulary, answer the PWA questions, and reject hard-stop outcomes such as an app screen designed as a marketing page.

• Lessons · WorkflowFree

  Evidence grades for design claims: how to cite, how strong is 'strong', and what never to repeat

  A five-level grading vocabulary (verified-primary-source, verified-official-source, verified-case-study, curated, unverified) with the weakest-link rule for derived design rules, the honest-gap convention, and the practice of recording counter-evidence and disconfirmed hypotheses.

• Lessons · PrincipleFreeRead here

  Page intent first: decide the page's job before choosing any component

  Design a page from its job, not from a template: classify the intent (brand impression, explain, teach, convert, search, portfolio, workflow, publish, trust), state the required decision fields, and pick a composition before any component.

• Lessons · PrincipleCreator

  The aesthetic–usability effect and its limits: polish masks minor friction, not severe friction

  Perceived ease of use tracks aesthetic appeal more closely than measured ease of use, replicated across cultures. The effect forgives minor friction only, and it corrupts usability-test feedback — so a pretty interface is never a substitute for fixing defects, and facilitators must probe past 'it looks nice'.

• Lessons · PatternCreator

  Eight non-card content compositions and how to choose between them

  A catalogue of replacements for card grids — editorial spine, timeline spine, split narrative, immersive canvas, proof ladder, annotated demo, section bands, guided room — with a situation-to-layout matrix and two default page structures (high-craft landing, learning/platform page).

• Lessons · PrincipleCreator

  Novelty within typicality: advance the design only as far as recognisability allows

  Typicality and novelty are both strong predictors of aesthetic preference but suppress each other; preference peaks when novelty is added without breaking recognisability of the genre. Tested on industrial products, so treat the rule as a flagged cross-domain extrapolation for UI.

• Lessons · PrincipleCreator

  Imagery and credibility: real, relevant people and products earn trust; substitutes cost it

  Visual design is one of the documented factors in credibility judgments (Stanford, 4,500+ participants). For wearable products, real human models measurably raise purchase confidence while cut-outs leave fit unjudgeable and mannequins are judged negatively. Informational photos of real people are scrutinised; generic ones are ignored.

• Lessons · PatternCreator

  Choose an imagery regime: photography-led, type-led, artifact-led or illustrated abstraction

  Four coherent ways to carry a page visually — photography/owned video as the layout, type as the image, the product's real artifact as the hero, load-bearing illustrated abstraction — each with must/must-not signatures from an evidence-graded study of award-recognised sites. Mixing regimes or adding ornament to a photographic system is what reads as generic.

• Lessons · WorkflowCreator

  Getting real visual material with no photo budget: six moves ranked by evidence

  An art-direction playbook for pages that need real material and have no budget: tightly scoped commissioned video, real product capture, documents as imagery, typography as the image, narrowly used licensed stock, and disclosed photorealistic generation — each with the evidence behind it and the risk that comes with it.

• Lessons · WorkflowCreator

  Design critique against the goal, and the eight lightweight tests to run early

  A decision-process view of design: a discover–define–develop–deliver loop, ten critique questions that judge work against its job rather than taste, a visual-grammar vocabulary for review comments, and eight cheap tests (five-second, task walkthrough, keyboard, screen reader, phone, tablet, contrast, reduced motion).

• Lessons · WorkflowCreator

  Pre-build design gate: classification, composition choice, rejected defaults and the design note

  A gate to run before building any website page: fill the classification, choose one primary composition and one visual direction, borrow at most three moves from references, explicitly reject generic defaults, pick the stack by need, and output a design note the build must follow.

• Lessons · PatternCreator

  Annotated product proof: one real surface with numbered pins instead of a feature grid

  Show capability by rendering the actual product surface (or a faithful real-data mock) with numbered annotations that connect each claim to the place in the UI doing the work — one proof per viewport, real column names and states, readable static under reduced motion.

• Lessons · PatternCreator

  Eight checkable mechanics of a high-craft product marketing page (measured, generalised)

  Eight rules measured from a live design-tool marketing page (July 2026) and generalised into ranges: display weight 450–550 with −0.03 to −0.045em tracking and 1.0–1.1 leading; a 3–4 step surface ladder; one accent; hairline borders; a radius scale; muted product video with autoplay only in the hero; 300–400ms reveals with 30–60ms staggers; no decorative vector art.

• Lessons · PrincipleCreator

  First impressions form in ~50 ms and are driven by visual complexity and genre-typicality

  Aesthetic judgments of a web page form within 50 ms (partly by 17 ms) and correlate strongly with judgments after 500 ms. Two measurable drivers: visual complexity and prototypicality — conformity to the visual conventions of the page's own category. Low complexity plus high prototypicality scores highest; 'minimal but genre-breaking' is not what the evidence supports.

• Lessons · Anti-patternCreator

  Anti-pattern: decorative imagery and ad-shaped containers that users never look at

  A decade of eyetracking shows users almost never fixate on anything shaped like a display ad — ad or not — and ignore purely decorative or generic stock imagery even when large, while scrutinising informational images of real, relevant people and products. Do not put important content in ad-shaped boxes or rely on decoration for engagement.

• Lessons · PrincipleCreator

  House rule: no decorative vector ornament, gradients only as accents behind real content — and exactly how strong the evidence is

  House rule: no decorative CSS/SVG vector art or clip-art ornament; gradient blobs and glows only as accents behind real content, never the centrepiece or standalone, one per viewport. Real photos, disclosed photorealistic imagery and data made visible are permitted. Evidence: practitioner consensus plus decoration-blindness (ignored, not distrusted) and real-imagery trust data; not a tested ban.

• Lessons · PrincipleCreator

  AI-generated photographic imagery carries a measured trust cost in trust-sensitive contexts

  A peer-reviewed three-study experiment found people can tell real photographs from AI-generated images, real images produce higher trust, and in charitable contexts real images increased donation intention and amount via trust. A large industry survey points the same way but has a conflict of interest. Rule: prefer real photography where trust is load-bearing and disclose generated imagery.

• Websites · PatternFree

  Site-type pack: software product / SaaS / developer tool

  Design pack for software-product marketing sites: the product-walkthrough composition (numbered steps each revealing a real artifact), annotated proof, interactive demo and comparison flow options with must/must_not signatures; visual direction (precise, structured, one or two signal colors); card budget 1 (pricing only); named avoids.

• Websites · PatternFree

  Site-type pack: local business

  Design pack for local-business sites: the local trust path (the real premises, people and work as dominant media; full address and tel: link as designed content), service proof with honest price arithmetic, location proof, and a direct-action dock repeating one verb; card budget 1; avoid abstract heroes and stock photos.

• Websites · PrincipleFree

  Six award-tier composition norms that hold across site types

  Measured across a 29-site award study: two-color chrome with one nameable accent; evidence objects instead of adjectives; numbered spines instead of card walls for sequence content; per-figure attributed proof; fixed media geometry per artifact class; operational honesty as designed content. Deviation needs a written reason.

• Websites · PatternFreeRead here

  Skip link, landmark regions and heading outline for every page

  The structural accessibility baseline: a visible-on-focus skip link to main, one banner/nav/main/contentinfo per page with labeled duplicates, all content inside landmarks, and a single h1 with a logical heading outline.

• Websites · PatternFree

  Honesty band: design operational constraints into the page instead of hiding or dramatizing them

  Sold-out notices with restock schedules, split service hours, offline states, entry procedures, price arithmetic and discount rules stated with their mechanics in designed type. The opposite of manufactured urgency: award-tier sites disclose constraints as content; countdowns and shame toggles had zero instances.

• Websites · Anti-patternFree

  Anti-pattern: placeholder and fabricated proof residue in production

  Unreplaced template strings, self-awarded badges, placeholder or inconsistent name/address/phone data, stock-photo filenames in 'our work', 'JaneDoe' testimonials and leaked server notices — all found shipping on award-listed sites. Every instance is a hard defect that converts real proof into doubt; there is no replacement move, only removal.

• Websites · Verification ruleFreeRead here

  Core Web Vitals targets and how to measure them for a marketing site

  Pass thresholds (LCP ≤ 2.5 s, INP ≤ 200 ms, CLS ≤ 0.1 at the 75th percentile, mobile and desktop separately), how to combine lab and field data, and page-weight budgets that keep a marketing site inside them.

• Websites · Verification ruleFreeRead here

  Pre-launch design QA checklist for marketing and content sites

  A single gate run on every public template before launch: content and claims, layout at four widths, type and color tokens, states, accessibility (automated + manual), performance budgets, SEO/metadata, forms and legal — each with a concrete pass condition and evidence.

• Websites · PrincipleCreator

  Pricing presentation ethics: anchoring, annual toggles and honest limits

  How to use anchoring, defaults and annual-discount toggles without deceiving: accurate reference prices, a default cadence that is disclosed, no fake strikethroughs or countdowns, limits visible before purchase, and cancellation as easy as sign-up.

• Websites · PatternCreator

  Sign-up and sign-in flows that meet WCAG 2.2 Accessible Authentication

  Account creation and login for marketing-to-product handoff: minimal fields, password-manager and paste support, show-password, email magic links or passkeys, pasteable one-time codes, no puzzle CAPTCHAs, and no redundant re-entry.

• Websites · PatternCreator

  Type-led identity: when typography carries the brand instead of imagery

  Make type the design layer: a house typeface used consistently at every scale; a single-weight wordmark and a two-weight hierarchy from scale and placement; lowercase systems for design-literate audiences; specimen-scale display type as a full-viewport argument; margins so generous the emptiness becomes composition; light-weight display type as authority. Each with its conditions.

• Websites · PatternCreator

  Let visitors try visual products inline: editable specimens, feature toggles, test downloads and living labs

  For fonts, themes, components and other visual goods: a contenteditable specimen the visitor types into, plain-language toggles that change the live rendering, full-featured test files downloadable without an account, and a dated chronological lab of working prototypes as the portfolio of interaction craft. The medium proves the message.

• Websites · PatternCreator

  Stat anchors: verifiable numbers with labels, sources and specific figures

  How to show numbers as evidence rather than decoration: 3–5 operationally verifiable metrics after the product explanation, each with a label and an adjacent source link; specific figures over round ones; clinical or outcome percentages with a method note and a link; a scale bar whose counts link to the collections they describe.

• Websites · PatternCreator

  Homepage chapters: named modules, mid-height vs full-viewport, and how many before the product

  Pace a brand homepage as named chapters with distinct visual registers; choose between full-viewport panels (brand-equity brands, 2–3 campaign panels before commerce, dual CTAs), mid-height editorial modules (balance immersion and browse speed), or a short four-to-five-module homepage that defers exploration to navigation. Rules for each and the failure modes.

• Apps · Anti-patternFree

  Anti-pattern: one identical UI shipped to every platform

  Pixel-identical iOS and Android builds — same navigation, components, back behaviour and icons — necessarily violate one platform's conventions; share brand, type voice, motion language and logic, but express navigation, components, back, gestures and system integration natively per platform. It is a hard-fail (HF-A6) in the composition rubric and a choice, not a framework limitation.

• Apps · PrincipleFree

  App category atlas: classify the product, then pick its navigation default and composition menu

  Ten app categories (finance, health, social, productivity, media, commerce, utility, travel, education, game) with synonyms, the navigation default and primary composition each starts from, its visual-language phrase and template budget — the index to the per-category guidance items.

• Apps · PrincipleFreeRead here

  Every screen needs a state matrix: loading, empty, error, offline, partial, first-run

  A principle and checklist for designing all states of each app screen before styling the happy path, with the minimum content for each state and a state model that makes impossible combinations unrepresentable.

• Apps · PrincipleFreeRead here

  Destructive actions: prefer undo, confirm only the irreversible

  A decision rule for delete/remove/reset in apps: routine reversible deletions get immediate action plus an Undo snackbar; rare, irreversible, or bulk actions get a specific confirmation with an action-named destructive button; the heaviest get typed confirmation.

• Apps · PrincipleFreeRead here

  Touch target size and spacing for native apps

  Minimum and recommended hit areas (44×44 pt iOS, 48×48 dp Android, WCAG 2.2 AA 24×24 px floor), spacing between targets, using minWidth/minHeight rather than relying on hitSlop, and how to verify with Accessibility Inspector and Accessibility Scanner.

• Apps · PatternFree

  Accessibility semantics in React Native: labels, roles, states, grouping

  The minimum accessibility contract for every React Native component: accessible names (accessibilityLabel/aria-label), roles (role/accessibilityRole), states and values, grouping rows into single elements, hiding decoration, and hints — with patterns for buttons, toggles, tabs, headers, and images.

• Apps · PrincipleFree

  Onboarding that gets people to first value without a tutorial wall

  When to skip onboarding entirely, how to reach first value before sign-up, how to use sample content, contextual tips and progressive disclosure instead of swipe-through tutorial decks, and what (little) belongs in a first-run flow.

• Apps · PrincipleFree

  Choose the app navigation architecture: tabs, stack, sidebar/rail, or drawer

  Decision rules for picking top-level navigation in a native or Expo app: visible tab bar for 2–5 peer destinations, stack for drill-down, sheets for scoped tasks, rail/sidebar on wide windows, and why the phone drawer is now a last resort.

• Apps · PatternCreator

  Material motion on Android: container transform, shared axis, fade through, spring MotionScheme and system gestures

  Match the transition to the relationship — container transform for connected elements, shared axis X/Z for sequential or hierarchical moves, fade through between unrelated destinations, fade for dialogs — use the spring MotionScheme (standard vs expressive), make custom transitions predictive-back-aware, treat edge gestures as the system's and pair every gesture with a visible affordance.

• Apps · PatternCreator

  Material 3 tokens: the 15-style type scale in sp, 26 colour roles, surface containers and tonal elevation

  Choose type by role (display/headline/title/body/label × large/medium/small; Roboto, Roboto Flex for Expressive) set in sp; theme by role and token — primary/secondary/tertiary/error with on- and container- pairs, surface and outline; build depth with the five surfaceContainer roles and tonal elevation (levels 0–5) rather than drop shadows; verify at 200% font scale and in dark/high-contrast.

• Apps · Verification ruleCreator

  Static hard-fail signatures: what a source-level app checker can and cannot detect

  The grep-level signatures behind each hard-fail flag (tab count, generic tab sets, FAB counts, onboarding pagers, colour/type literals, missing insets, PWA manifest/service-worker/safe-area, the three-leg template-uniformity signature and functional-truth lints), with their disclosed precision limits — the contract for an automated check tool.

• Apps · PatternCreator

  Utility and single-purpose apps: design direction pack

  Direction for one-job apps: one job, one screen, immediate primary action, often no tab bar at all; large glanceable type, high-contrast status-clear colour, instant feedback with a haptic, widgets/shortcuts/quick-settings entry points, and never an onboarding carousel for a one-tap tool.

• Apps · PatternCreator

  Loading feedback timing: nothing, skeleton, spinner, or progress

  Timing thresholds and component choices for waits in native apps — show nothing under ~300 ms, skeletons for screen-level content, inline spinners for components, determinate progress beyond ~10 s — plus minimum display time, optimistic UI, and accessibility busy states.

• Apps · PatternCreator

  Education and learning apps: design direction pack

  Direction for learning apps: a path-and-progress home, resumable lessons with 'continue where you left off', practice over passive reading, calm rhythm and generous reading measure, progress and milestone feedback, offline lessons, and no three-slide carousel gate or metric dashboard.

• Apps · Anti-patternCreator

  Anti-pattern: hiding primary navigation behind a hamburger or gesture

  Why putting 2–5 primary destinations in a drawer, overflow menu, or swipe-only pager hurts discoverability and task time on phones, and how to migrate to a visible tab bar or rail (Material 3 Expressive deprecated the navigation drawer).

• Apps · PatternCreator

  Mobile input types, autofill, and choice controls

  Mapping each field to the right keyboard (inputMode), autofill hints (autoComplete / textContentType), capitalization and autocorrect, secure entry, and when to replace typing with pickers, segmented controls, or toggles in React Native forms.

• Apps · PatternCreator

  Pull-to-refresh, pagination, and infinite loading in mobile lists

  When pull-to-refresh is meaningful, how to implement RefreshControl correctly, choosing infinite scroll vs load-more vs sections, end-of-list and error rows, and restoring scroll position.

• Apps · PatternCreator

  Collection screens: list vs grid, row anatomy, and sectioning

  How to choose list or grid for a collection, a reusable row anatomy with sizes, grouping into sections with sticky headers, sort/view controls placed on the screen they affect, and screen-reader-friendly rows.

• Apps · PatternCreator

  Screen-reader focus order, modal focus, and announcements in React Native

  Managing where VoiceOver/TalkBack focus goes on navigation, in sheets and dialogs, after deletions and errors; making modal content exclusive; logical reading order; and announcing status changes (4.1.3) with announceForAccessibility and live regions.

• Apps · PatternCreator

  Smooth 60/120 fps animation with Reanimated — and honouring Reduce Motion

  Animation rules for Expo/React Native: run on the UI thread with Reanimated, animate transform/opacity not layout, budgets per frame and component counts, 120 Hz enablement on iOS, and ReduceMotion.System/useReducedMotion behaviour with appropriate fallbacks.

• Apps · PatternCreator

  Health, fitness and medical apps: design direction pack

  Direction for health apps: capture-first logging as the home, progress and trends for review, guided program flows, live session glance via Live Activities or foreground service, large live numerals, supportive palette with alert colours reserved for real alerts, rhythm haptics, and zero template budget.

• Apps · PrincipleCreator

  Save model: autosave vs explicit save, and guarding unsaved changes

  Choosing between autosave (notes, local collections) and explicit Save/Cancel (multi-field records, anything with side effects), and implementing a consistent unsaved-changes guard for back, swipe-to-dismiss sheets, and Android back with usePreventRemove.

• PWA · PrincipleFree

  What a PWA is, and when it is the right call versus native or cross-platform

  A PWA is a website with a secure context, a manifest and (in practice) a service worker so it installs, launches and works offline; a six-step decision framework says when reach, footprint and update cadence win, when iOS install/push or a missing capability disqualifies the web, and three hybrid postures (PWA-first, wrapped, capability parity).

• PWA · PatternFreeRead here

  Installability criteria and the web app manifest, member by member

  What makes a site installable on Chromium (HTTPS, a linked manifest with name/short_name, 192 and 512 px icons, start_url, display) versus Safari (no requirements since 26), why a service worker is no longer an install gate but still mandatory in practice, and a minimal correct manifest with id, scope, display_override, colours and icons.

• PWA · Anti-patternFree

  Anti-pattern: the website in a shell — eleven tells that an installed web app is still a browser tab

  Manifest-only 'PWAs', white screens offline, content under the notch, bounce and accidental pull-to-refresh, broken back, hard cuts or fade-everything, the 300 ms tap delay, re-downloading the shell each navigation, permission and install nags on first load, Chromium-only dependencies that exclude every iPhone, and undisclosed wrapped web views — each with the fix.

• PWA · PrincipleFree

  The iOS web-app reality: install, push, storage eviction, missing capabilities and background limits

  Every iOS browser is WebKit, so these are platform limits: no install prompt (Share → Add to Home Screen; opens as a web app by default since iOS 26), push and badging only in an installed Home Screen app (16.4+; Declarative Web Push since 18.4), 7-day script-storage eviction for uninstalled sites, no background sync, and no Chromium-only device APIs.

• PWA · PatternCreator

  Caching strategies by request type: cache-first, network-first, stale-while-revalidate, cache-only, network-only

  Match each request class to a strategy — hashed static assets cache-first, feeds and article bodies network-first with cache fallback, avatars and images stale-while-revalidate, precached shell cache-only, writes and admin routes network-only — with hand-rolled implementations and the Workbox equivalents.

• PWA · ReferenceCreator

  Reference: Pinterest mobile web and Twitter Lite — feed PWAs that boot from cache and defend their budgets

  Two verified-case-study PWAs: Pinterest normalised client state so details render instantly from list data, split code by route (home JS ~490 KB → ~190 KB) and enforced budgets in CI with size alerts and a lint rule; Twitter Lite phased in service workers, held a ~600 KB transfer budget with PRPL, treated its <3% native footprint as a feature, and paired install with push for retention.

• PWA · PatternCreator

  Device capabilities for web apps: the broadly available set, the Chromium-only set, and the three-question test

  Build the core on capabilities that work everywhere (Web Share, Badging, Screen Wake Lock, Push where allowed, OPFS, Media Session); treat Chromium-only APIs (File System Access pickers, file/protocol/share-target handlers, Contact Picker, Bluetooth/USB/Serial/HID/NFC, Window Controls Overlay) as feature-detected enhancements with a working fallback — they are absent on every iOS browser.

• PWA · PatternCreator

  Install flow: capture beforeinstallprompt, show your own button after a value moment, hint on iOS

  Defer Chromium's beforeinstallprompt event, reveal an Install button only after the person has done something useful, call prompt() on tap, clean up on appinstalled, and show a dismissible 'Share → Add to Home Screen' hint to iOS Safari users because iOS has no install API — never a first-load banner, never a gate.

• PWA · PatternCreator

  Native scroll and touch for web apps: overscroll-behavior, touch-action, scroll-snap, pointer events and Android-only haptics

  Three CSS lines (overscroll-behavior: contain, touch-action: manipulation, user-select: none on chrome) fix the common scroll and tap tells; add scroll-snap, scroll-driven animations, content-visibility for long lists, Pointer Events with passive listeners, and feature-detected navigator.vibrate on Android only — iOS has no Vibration API.

• PWA · PatternCreator

  View transitions for app navigation: list-to-detail morphs, reduced-motion gating and the cross-document gap

  Give installed web apps spatial continuity: wrap route changes in document.startViewTransition with a feature-detect and prefers-reduced-motion fallback, morph the tapped card into the detail header with a shared view-transition-name, keep durations 200–300 ms, and treat cross-document (MPA) transitions as an enhancement because Firefox has not shipped them as of September 2026.

• PWA · ReferenceCreator

  Reference: Spotify Web Player — one SPA over iframe silos, web media standards, and a platform-abstraction layer

  A verified-case-study of a streaming client rebuilt from per-view iframes (re-downloading JS/CSS every navigation) into one React/Redux SPA, moved from Flash to Encrypted Media Extensions with the Media Session API for OS transport controls, placed a platform-abstraction layer between UI and runtime so one client runs as a PWA and inside a native desktop shell, and shipped every commit via CI/CD.

• PWA · PatternCreator

  Update flow with consent: detect the waiting worker, offer 'Update ready', reload once on controllerchange

  Ship service-worker updates without breaking sessions: listen for updatefound, detect a worker that reached installed while another controls the page, show a polite live-region banner, post SKIP_WAITING only when the person taps Reload, and reload exactly once on controllerchange.

• PWA · PatternCreator

  Web push and app badging: subscribe after value, VAPID on the server, userVisibleOnly, iOS installed-only

  Push API delivers to the service worker even when the app is closed; Notifications API shows them and needs a permission requested from a user gesture. Subscribe with userVisibleOnly and your VAPID public key, keep the private key and endpoint secret, always show a notification per push, badge the icon with setAppBadge, and remember iOS requires the installed Home Screen app.

• PWA · ReferenceCreator

  Reference: Goibibo — closing the web-vs-native gap with targeted capabilities instead of a rewrite

  A verified-case-study travel/commerce PWA that mapped each funnel leak to the browser API that removes it — WebOTP for sign-in codes (+20% logged-in users), Contact Picker for booking for others (~15%), Web Share for acquisition (5% of new sessions), push for re-engagement (4× conversion on retargeted users) — for a 60% conversion lift, every capability an enhancement over a working baseline.

• PWA · PatternCreator

  Performance for app-like web: repeat-use budgets, route splitting, CI guardrails and INP

  A PWA is used repeatedly and interactively on mid-range phones, so beyond the Core Web Vitals thresholds it needs a written initial transfer budget, route-level code splitting with preloading, heavy work in workers/WASM, long tasks broken up with scheduler.yield() plus a setTimeout fallback, and bundle-size alerts and import lint rules that defend the budget in CI.

• PWA · WorkflowCreator

  Build a minimal installable PWA shell from scratch: six files, one hand-rolled service worker, tested offline

  A dependency-free starting point — index.html (shell, safe-area and no-bounce CSS), app.js (registration, install flow, consent-based update, connectivity, standalone class, view-transition helper), sw.js (precache, cache-first, network-first navigations, SWR, versioned cleanup), offline.html, manifest.webmanifest and icons — with the exact steps to run, test offline and adapt it.

• PWA · PatternCreator

  PWA icons: any, maskable and monochrome purposes, the safe zone, and screenshots for the richer install UI

  Ship 192 and 512 px 'any' icons plus true maskable variants with all essential content inside a centred circle of ≈80% diameter (≥10% padding) so Android does not letterbox your icon in a white blob; add a monochrome icon for badges; provide at least one screenshot per form factor (320–3840 px sides, ≤2.3:1) to unlock the store-style install sheet.

• PWA · ReferenceCreator

  Reference: Squoosh and Excalidraw — local-first, offline tools that do real work in the browser

  Two verified-official-source tool PWAs: Squoosh runs image codecs as WebAssembly in Web Workers so the UI stays at 60 fps, uploads nothing, works offline with a tiny shell and lazy-loaded codecs, and makes a live compare loop the product; Excalidraw autosaves to the browser with no login, caches the whole app, ships an open export format, and encrypts collaboration end to end.

• Web apps · PatternFree

  App shell: labeled side navigation with a stable workspace frame

  Structure a signed-in web app around a persistent, labeled left navigation (5–9 destinations), a slim top bar for account/workspace context and search, and a content region that recomposes—rather than shrinks—below 768px.

• Web apps · PatternFreeRead here

  Accessible modal dialogs and drawers: focus in, trapped, and back

  Implement modals with native <dialog> or role=dialog + aria-modal, a visible title via aria-labelledby, deliberate initial focus, Tab trapping, Escape to close, background made inert, and focus returned to the trigger (or a logical successor).

• Web apps · PrincipleFree

  Choosing the right feedback: inline, banner, toast, dialog or status region

  A decision table for system feedback in web apps: inline messages for field/section results, one page-level banner for account/system conditions, toasts only for low-stakes confirmations with persistent alternatives, dialogs only for decisions, and status/alert live regions for announcements.

• Web apps · PrincipleFree

  Design token architecture: primitive → semantic → component tiers

  Structure tokens in three tiers—primitives (raw scales), semantic roles (text, surface, border, status, focus, spacing, motion) and optional component tokens—stored in DTCG 2025.10 JSON, so themes, density and dark mode change values without touching components.

• Web apps · PatternFree

  Destructive actions: undo first, specific confirmations, typed confirmation for the irreversible

  Scale protection to consequence: reversible actions get immediate execution with undo; irreversible actions get a specific confirmation dialog naming object and consequence; catastrophic ones (delete account/project, withdraw release) require typing the name—used rarely to avoid habituation.

• Web apps · PatternFree

  Data tables: structure, sorting, density and alignment

  Build resource tables around the four table tasks (find, compare, inspect, act): human-readable first column, right-aligned numbers, sticky header, accessible sortable headers with aria-sort, density options, and a non-modal detail panel.

• Web apps · PatternFreeRead here

  Empty states: first-use, cleared, filtered-empty and error variants

  Never leave a region blank: distinguish first-use (explain + create action), user-cleared (confirm success), filtered/no-results (show criteria + clear), and error (what failed + retry) empty states, each with one primary action.

• Web apps · PatternCreator

  Long-running imports and jobs: per-item progress, resumable failure, redacted errors

  Show imports and background jobs as first-class objects with per-item counts (processed, succeeded, skipped, failed), determinate progress, resumable/retryable failures, redacted error details, and exports of unresolved items—never a spinner without evidence.

• Web apps · PatternCreator

  Keyboard shortcuts: conventions, discoverability and WCAG 2.1.4

  Add shortcuts for frequent actions only, prefer modifier combos or two-key sequences scoped to focus, never override browser/AT keys, expose a '?' shortcut sheet and tooltip hints, and let users turn off single-character shortcuts.

• Web apps · PatternCreator

  Audit logs: who did what, to what, when, from where—searchable and exportable

  Record immutable events with actor, action, target, timestamp, origin and reason; present them newest-first with structured filters (actor, action, target, date range), cursor pagination, human-readable summaries, and JSON/CSV export with a stated retention period.

• Web apps · PatternCreator

  Notification preferences: per-category controls, digests by default, self-sufficient messages

  Model every notification with an explicit category (billing, security, product updates, mentions, digest) and store per-user, per-category, per-channel preferences from day one; batch non-urgent categories into digests, never burst, honour quiet hours, and make each message understandable on its own.

• Web apps · PatternCreator

  Settings pages: choosing explicit save vs autosave and handling unsaved changes

  Use explicit save for declarative inputs (text, checkboxes, selects) and immediate save only for imperative toggles; one save button per form, visible dirty state, navigation guard, inline confirmation instead of toasts, and never a disabled Save.

• Web apps · PatternCreator

  Command palette (⌘K / Ctrl+K) for navigation and actions

  A global, keyboard-invoked dialog combining navigation, object search and actions: consistent shortcut on every screen, fuzzy matching with synonyms, context-aware ranking, shortcut hints in results, and a proper combobox + listbox accessibility model.

• Web apps · PatternCreator

  Async actions in apps: busy buttons, double-submit guards, timeouts and optimistic updates

  Give every mutation immediate feedback within ~100–400ms, keep the triggering control in place with a busy label, prevent duplicate submission with idempotency rather than disabled forms, time out and recover instead of spinning forever, use optimistic updates only for reliably reversible actions, and move long work to background jobs.

• Web apps · Anti-patternCreator

  Anti-pattern: nagging, repeated prompts and intrusive interstitials

  Re-asking for notifications, ratings, upgrades or newsletter sign-up after the user declined, and full-screen pop-ups that cover content on arrival, override the user's goal and wear down resistance. Ask once in context, remember the answer with a long cool-down, and never block core content on entry.

• Web apps · Verification ruleCreator

  Verification rule: component state matrix for interactive UI

  Before shipping a component or screen, verify a state matrix—default, hover, focus-visible, active, disabled/inactive with reason, loading, error, empty, selected, read-only—across light/dark themes, 200% zoom and 360–1600px widths.

• Web apps · PatternCreator

  Accessible composite widgets: menu buttons, comboboxes, tabs

  Implement action menus, autocomplete comboboxes and tabs with the WAI-ARIA APG models—correct roles and states, roving focus or aria-activedescendant, arrow-key navigation, Escape behavior—and don't use menu roles for navigation.

• Web apps · Anti-patternCreator

  Anti-pattern: hidden subscription, forced continuity and surprise paywalls

  A 'free trial' or one-time-looking purchase that silently becomes recurring billing, and 'free' products that demand payment after the user has invested work, are the core ROSCA harm. Disclose price, cadence, renewal and cancellation before charging, require affirmative consent to recurring billing, and warn before a trial or usage limit ends.

• Web apps · PatternCreator

  Status labels, badges and semantic color

  Define a controlled status vocabulary per object, render each status with text + icon/shape + color from semantic tokens, keep colors meaning-consistent across the app, and never rely on color or icon alone.

• Web apps · PatternCreator

  Plan changes: symmetric upgrade/downgrade with proration shown before confirmation

  Upgrade and downgrade live in the same Billing location with the same plan matrix used at sign-up; before confirming, show the exact amount charged today (proration), the new recurring amount, the next charge date, and what features or limits change — including what happens to data over the new limit.

• Web apps · WorkflowCreator

  Failed renewal payments: dunning, grace period and access states

  Model past-due as an explicit internal grace state with a stored end time, tell the customer exactly what failed and until when access continues, route them to update the payment method in one click, and downgrade predictably without deleting data.

• Motion · PrincipleFreeRead here

  Duration and easing scale: 100–500 ms, ease-out to enter, ease-in to leave

  Concrete duration ranges and cubic-bezier curves for UI and marketing motion, grounded in Material 3 tokens and usability research, with rules for choosing by distance, size and frequency.

• Motion · PrincipleFreeRead here

  Reduced motion: reduce, don't remove meaning

  How to implement prefers-reduced-motion across CSS, JavaScript libraries, WebGL and native apps: a mapping from each motion type to its reduced equivalent, keeping feedback and state changes intact.

• Motion · PrincipleFree

  Give every animation a job: orientation, feedback, continuity, or a deliberate brand moment

  A gate test for deciding whether a UI or marketing-site animation should exist, what job it performs, and how loud it may be. Use before adding any motion so decorative effects never outnumber functional ones.

• Motion · WorkflowFree

  The seven-tier animation implementation ladder: CSS transition → keyframes → @starting-style → scroll-driven CSS → View Transitions → WAAPI → library

  Choose the lightest tier that expresses the motion and move down only when it cannot: plain transitions, @keyframes, @starting-style + allow-discrete for display:none enter/exit, guarded scroll-driven CSS, the View Transitions API, the Web Animations API, then a JS library for live gesture physics and framework-coupled orchestration. Baseline status per tier as of September 2026.

• Motion · PrincipleFree

  Animate transform and opacity; use will-change sparingly; never thrash layout

  Core performance rules for web animation: compositor-only properties, when will-change helps or hurts, layer-count and GPU memory costs, read-then-write DOM batching, and how these affect INP.

• Motion · Verification ruleFree

  Motion QA checklist for templates and landing pages

  A release gate for any motion-bearing template: purpose, timing, accessibility (reduced motion, pause, flashing, focus), performance, fallbacks and cross-device checks, with pass criteria an agent or reviewer can execute.

• Motion · PatternCreator

  Micro-interactions: button press, hover, toggle, copy, and success feedback

  Timing, easing and property recipes for small feedback animations — hover, press, focus, toggle, add-to-cart, copy-to-clipboard, form success — plus interruptibility rules and when not to animate.

• Motion · Anti-patternCreator

  Anti-pattern: binding scroll progress to an inherited global CSS custom property

  Writing a per-frame --progress onto html/body invalidates style tree-wide (a documented case: 8 ms/frame across 1,300+ elements) and always triggers paint even for compositor values. Fix: targeted style writes on the animated element, or @property with inherits: false, scoped as narrowly as possible.

• Motion · ReferenceCreator

  Reference: motion purpose taxonomies and the classic animation principles as review vocabulary

  Two purpose taxonomies (five functions: feedback, orientation, attention, causality, personality; six: causality, feedback, relationships, progression, physics, transition) and the twelve classic animation principles ranked for interface relevance — shared vocabulary so review comments are precise ('tone down the follow-through') rather than 'make it pop'.

• Motion · PatternCreator

  Film grammar for pages: the establishing shot that hands off to real footage, and the staged reveal

  Two structure-first footage patterns: open on an orienting wide (map zoom, aerial) and hand off to ground-level real footage as the scroll story proceeds; or conceal the subject, stage practical light, and reveal on scroll or interaction for a launch. Rules: the establishing render must hand off, reveals never gate information or navigation, and both need a static parallel.

• Motion · PatternCreator

  Background video hero: poster, autoplay rules, pause control and fallbacks

  Build a video-backed hero that loads fast, autoplays where allowed, degrades to a poster when blocked (iOS Low Power Mode, data saver, reduced motion), keeps text readable and meets WCAG 2.2.2.

• Motion · PatternCreator

  Accessible infinite marquee / logo ticker

  Seamless CSS-only marquee for logos, testimonials or keywords, with duplicate-content hiding, pause control and hover/focus pause, reduced-motion static layout and speed limits.

• Motion · PatternCreator

  Shared-element transitions: card to detail continuity on web and native

  How to morph a thumbnail/card into its detail view using view-transition-name, Motion layoutId, or Reanimated sharedTransitionTag — naming rules, aspect-ratio handling, durations and fallbacks per platform.

• Systems & data · PatternFree

  Chart selection by analytical question

  Name the question first — comparison, trend, distribution, relationship, part-to-whole or precise lookup — then pick the highest-accuracy encoding that answers it: bars for comparison, lines with markers for trend, histogram/boxplot for distribution, scatter for relationship, a single bar or a sparing pie for a dominant part-to-whole, and a table (not a chart) for exact values.

• Systems & data · WorkflowFree

  Per-component build vs adopt: native element → headless primitive → custom, in that order

  Before building any component, find its WAI-ARIA APG pattern; then prefer the native element (button, dialog, popover, details, customizable select where the browser matrix allows), next a headless primitive (Radix, React Aria, Base UI) styled by you, and only build from scratch when no accepted pattern exists and you will own the full accessibility burden.

• Systems & data · PrincipleFree

  Gestalt grouping in interfaces: proximity, common region, similarity, continuity — checked at every breakpoint

  Elements near each other, inside a shared container, styled alike or aligned along a line are perceived as one group; grouping unrelated controls camouflages them. Make within-group gaps smaller than between-group gaps, enclose groups in cards or regions, style like things alike, and re-check every grouping when responsive layouts reflow.

• Systems & data · PrincipleFree

  Encoding accuracy: position and length beat angle, area and colour (Cleveland & McGill)

  People read position on a common scale most accurately, then length, slope, angle, area, volume, and colour/shading last. Use the highest-ranked encoding the task allows: bars, dots and lines for quantity; colour for category only, never for magnitude alone.

• Systems & data · Anti-patternFreeRead here

  Anti-pattern: div buttons, div selects, and components with no keyboard path

  Clickable <div>/<span> elements without roles or key handlers, custom selects built from styled divs with only onClick, and sliders/carousels/expandable cards that work only by mouse or touch exclude keyboard and assistive-technology users entirely — and are the most common serious accessibility failures in component libraries.

• Systems & data · ReferenceFreeRead here

  Authoring design tokens in the DTCG format (2025.10 stable)

  How to write portable token files: any object with $value is a token, any without is a group; $type cascades from groups; aliases use {group.token}; colours are objects with colorSpace/components/hex; dimensions are {value, unit}; files end in .tokens.json. The spec reached its first stable version on 28 Oct 2025; Style Dictionary v4 reads DTCG, full 2025.10 support is in progress for v5.

• Systems & data · PrincipleFree

  Reduce cognitive load: cut extraneous load, manage intrinsic load, offload work to the system, follow conventions

  Working memory is small (≈4–7 chunks). Cognitive Load Theory splits intrinsic load (manage by chunking, sequencing, progressive disclosure), extraneous load (eliminate clutter, inconsistency, unclear labels) and germane load (preserve capacity for it). Offload work to the system (autofill, computed totals, remembered state, recognition over recall) and follow conventions for standard components.

• Systems & data · ReferenceFree

  Reference: what is robust, contested and mythical in design psychology (evidence ledger)

  A graded ledger for justifying design decisions with psychology: robust (Gestalt grouping, Von Restorff, serial position, defaults, peak-end, aesthetic-usability, recognition over recall), contested (choice overload d≈0.02, ego depletion null, Zeigarnik, Cialdini effect sizes) and myths (8-second attention span, universal colour meanings, 7-item menu cap, 'design toward the F').

• Systems & data · PatternCreator

  Accessible charts: two-part text alternative plus a data-table fallback

  Every chart needs a short alt identifying it and a long description stating scales, values, relationships and the finding, reachable by all users — implemented as <figure role=group> with a <figcaption> containing a finding sentence and a real <table>. Never point aria-describedby at structured content, and make interactive chart controls keyboard-operable.

• Systems & data · PrincipleCreator

  Build, adopt, or hybrid: choosing how to source a design system

  Adopt a public system when brand tolerance and domain fit and the team is small; build custom when brand differentiation is a product requirement, three or more teams already duplicate decisions, and governance can be sustained; for most product teams the hybrid — unstyled primitives (Radix/React Aria/shadcn copy-in) themed through your own semantic tokens — is the right default.

• Systems & data · PrincipleCreator

  Maximise data-ink: remove chartjunk before adding emphasis

  Every pixel in a chart should carry data or be removed: strip default gradients, shadows, 3D bevels, heavy gridlines and redundant legends; keep axes only when no data labels exist. When something must stand out, subtract the decoration around it rather than adding bold or bright colour.

• Systems & data · Anti-patternCreator

  Myth correction: the 8-second attention span and 'design toward the F-pattern'

  The goldfish attention figure is fabricated, and the F-shaped scanning pattern is a symptom of badly formatted text that good design should counteract, not a layout target. Justify concision because users scan and satisfice; guide the eye with front-loaded headings, informative first words, bold key phrases and chunking to produce the layer-cake pattern instead.

• Systems & data · Case studyCreator

  Case study: Figma multiplayer — the simplest architecture that solves your problem

  Figma rejected Operational Transforms as unnecessarily complex, built a simpler server-ordered, CRDT-inspired model, prototyped the risky core in a throwaway simulator, applied edits optimistically with explicit anti-flicker handling, and derived undo semantics from a stated UX principle. Copy the method; do not invert it into 'CRDTs are bad'.

• Systems & data · PrincipleCreator

  Token naming levels and the 'promote after three consumers' rule

  Name tokens by purpose using a stable level order (namespace → object → base category/property → modifiers such as variant, state, scale, mode), keep flexibility-vs-specificity deliberate, and start new decisions component-scoped — promote to the semantic/global tier only once three or more components need the identical value.

• Systems & data · PatternCreator

  Versioning a design system and the warn → wait → remove deprecation sequence

  Use SemVer at library level by default (component-level only when whole-library majors become disruptive); never remove a token, prop or component in the release that first deprecates it — ship the warning in a MINOR, keep it working for at least one more MINOR, remove only in a MAJOR with a migration note.

• Systems & data · Case studyCreator

  Case study: Airbnb DLS — a design language as opinionated organisms

  Airbnb's DLS diagnosed why systems are needed (few physical constraints, many stakeholders, many platforms, software as a continuum), rejected free-combining atoms in favour of components with required and optional elements shared by design and code, and admitted under-scoping its highest-frequency component. Copy opinionated component APIs and extra care for frequent components.

• Systems & data · Case studyCreator

  Case study: GOV.UK / GDS — accessibility-first, evidence-based service patterns

  GDS runs on 11 published design principles (verified 2026-09-24), a governed design system with a named owning team, components tested with real assistive technology, whole-task patterns including error and unavailable states, and concrete do/don't accessibility rules. Copy the discipline and the whole-task patterns, not the deliberately plain aesthetic.

• Systems & data · Anti-patternCreator

  Anti-pattern: premature system-building and over-abstracted components

  A new single-team product invests in a full token pipeline, multi-tier architecture, Storybook and RFC governance before any real screens exist; or one component accumulates dozens of loosely related props trying to anticipate every need. Both pay cost without offsetting benefit. Build screens first, extract on the third repetition, prefer composition once the prop surface grows.

• Systems & data · PatternCreator

  Tabs activation mode and disclosure/accordion: when to use each and how to wire them

  Tabs: bidirectional aria-controls/aria-labelledby, roving tabindex, arrow-key movement, automatic activation only when panels are pre-loaded, otherwise manual (Enter/Space). Disclosure: a button with aria-expanded; an accordion is N disclosures plus optional exclusivity (native details name=). Use accordions only when users need a few of many sections or space is tight.

• Systems & data · PatternCreator

  Theming through the semantic layer: mode (light/dark/high-contrast) and theme (brand) as independent axes

  Implement light/dark/high-contrast and brand variants by swapping which semantic-token set is active (a data attribute or class scoping a variable block), never by branching inside components. Model mode and theme as orthogonal axes so a brand can have every mode without duplicated component code.

• Systems & data · WorkflowCreator

  Design-system governance: named owner, proposal criteria, publication criteria, and a maturity rubric

  A minimum governance kit for any shared system: a named decision body, an evidence-first proposal path checked against Useful/Unique, a publication gate checked against Usable/Consistent/Versatile (GOV.UK's published criteria), a 'local first, promote later' escape valve, and a 0–4 rubric across tokens, components, docs, governance, adoption and accessibility.

• Systems & data · WorkflowCreator

  Token pipeline: DTCG JSON → Style Dictionary → CSS variables → Tailwind v4 @theme + shadcn semantics

  A build chain that turns one token source into CSS custom properties, then exposes them to Tailwind v4 utilities through @theme and to shadcn-style components through semantic variables under :root/.dark. Includes the Figma side: Variables carry values, Code Connect maps components, and a plugin bridges to DTCG.

• Websites · PatternCreator

  Hero action group anatomy: announcement pill, headline, one supporting line, a weighted CTA pair and the reassurance line

  The conventional opener built as a component: an optional announcement pill that is a real, dated link; one H1; one supporting sentence; a primary action with at most one visibly subordinate secondary; and a one-line reassurance note that states true terms. Specifies widths, spacing, alignment, 360px stacking, states, LCP-safe motion and the checks that stop it becoming the centered vague hero.

• Websites · PatternCreator

  Split-screen pages: a pinned media half beside a scrolling message half, ratio choice, chapter swaps and the mobile collapse

  Build the page-level split: two vertical halves scanned independently, at 50/50 for duality or 60/40 and 40/60 to weight media or message; a sticky media half beside scrolling chapters, optionally swapping media as each chapter enters. CSS grid plus position: sticky, per-half crops, reading order that follows the text, no layout shift on swap, and media-first stacking on narrow screens.

• Websites · PatternCreator

  Integrations and ecosystem pages: status-labelled directories, chip grids, coverage strips and hub diagrams with a list equivalent

  Compatibility is a claim that needs names, statuses and a path to setup. Build the full directory (filters with URL state and counts, consistent entry anatomy, featured row, search past ~30 entries) and the homepage-scale displays (chip grids, edge-faded fields, numbered coverage strips, hub diagrams). Never imply a partnership you do not have; every entry must exist and link to docs.

• Websites · ReferenceCreator

  Archetype: fintech, insurance and crypto sites — licences and money flows as proof, dated rates, plain exclusions and honest risk

  Money products earn trust with checkable facts: licence and registration numbers, deposit or policy protection stated precisely, fee tables, money-flow diagrams, rates with dates and conditions. Insurance adds quote flows, coverage tables with exclusions and a claims path; crypto adds dated audits, risk warnings and wallet-connection honesty. One signature colour, no implied guarantees.

• Websites · PatternCreator

  Dark-first pages: a near-black surface ladder, elevation without shadows, off-white type and imagery graded for black

  Design a page that is dark by default, not a toggled light site. Build a 4–5 step near-black surface ladder with elevation from lighter steps and hairline borders, three text tones that all pass AA, lighter-weight type in off-white against halation, and imagery graded for black. Two variants: pure monochrome, or near-black plus one action-only accent.

• Websites · PatternCreator

  Feature-stack pages: one block anatomy, rotated treatments, chaptered colour acts and a per-block motion budget

  Build a multi-capability landing page as a stack of self-contained blocks: one shared anatomy (eyebrow, claim, short explanation, one proof visual, optional link), three or four permitted treatments rotated so no two neighbours match, priority order with the most novel capability first, an optional chaptered variant with per-act backgrounds and neutral breathers, and motion spent on few blocks.

• Websites · ReferenceCreator

  Archetype: e-commerce storefronts and single-product stores — collection pages, the product-detail anatomy, cart honesty and the one-product page

  Storefront anatomy from home to checkout: an editorial campaign then categories; collection pages with URL-state filters and one image ratio; a product-detail page with zoomable gallery, named variants, stock, one buy action and delivery and returns up front; a cart that shows the full cost early. The single-product store variant leads with name, price and one full-width buy button.

• Websites · ReferenceCreator

  Archetype: magazine, newsletter and media-company sites — typographic identity, article template, honest paywalls and ads that look like ads

  Reference archetype for publications where the content is the product: front page and section fronts, a complete article template (headline, dek, byline, date, read time, figures, pull quotes), issue covers, subscription offers and meters that disclose their limits, embeds behind facades, and ad slots that reserve space and are labelled. Identity lives in a display face plus a readable text face.

• Motion · PatternCreator

  Showcase switchers and spatial galleries: role-indexed state, backdrop colour swaps, orbit paths, 3D cylinders and drag marquees

  For small curated sets (a release, a collection, day and night states), derive every item's role from one active index and let the scene answer: backdrop recolours, items travel an orbit or cylinder, content flies out and in along one axis. Content is real data, controls are buttons with announced position, nothing auto-advances without pause, and reduced motion cuts or crossfades.

• Motion · PatternCreator

  Pointer-scrubbed hero video: hover or drag playheads on short-GOP clips, seek queuing, and keyboard, touch and reduced-motion fallbacks

  Let horizontal pointer movement drive a paused hero clip: pick hover or drag mapping, encode with a very short GOP, confine the scrub zone to the media, queue seeks on the seeked event, and read presented frames with requestVideoFrameCallback. A labelled range slider serves keyboards; touch, small screens and reduced motion get the poster or a pausable loop.

• Motion · PatternCreator

  The one-time hero entrance: media settle, alternating line slides, a single overshoot and a single sheen, then stillness

  Compose one load-time hero sequence from a small vocabulary (media settling from oversize or Ken Burns, headline lines from alternating sides, one overshooting UI fragment, one CTA sheen fired on entrance end), finish content-bearing motion within about 900 ms, then go completely still. Never fade the LCP image from zero, never loop, never replay on client navigation.

• Motion · PatternCreator

  Hover signatures built right: label roll, underline grow, fill slide, icon turn and image zoom with focus parity and hover gating

  Construction manual for common hover moves using transforms only: a duplicated, aria-hidden label roll, a scaleX or background-size underline, a pseudo-element fill slide, a fixed icon turn and a clipped image zoom. Rule: one signature for buttons, one for links, every hover state also on focus-visible, hover rules gated to hover devices, and reduced motion keeps the state.

• Motion · PatternCreator

  Cutout-layer dioramas: real material cut into depth planes, curtain parts, split photos and section bridges on one scroll progress

  Build a scroll diorama from 3 to 5 alpha cutouts (≤ 4 moving) of real material in DOM paint order, driven by one eased progress variable on a sticky stage. Covers curtain parts, split-photo depth, section bridges and nested scroll-plus-idle wrappers, with travel limits, overscale for edges and byte budgets. Floating decorative shapes are the misuse; reduced motion gets a flattened still.

• Motion · PatternCreator

  Gesture-stepped stages: the decision test for intercepting scroll, and the contract that makes a few-state stage safe

  When wheel or swipe gestures step a single-screen stage through a few states instead of scrolling: a four-question decision test, then the build contract. Intercept only mid-sequence, normalise and debounce trackpad inertia, add visible controls and keys, inert hidden states, use replaceState, and fall back to a stacked document on small screens, at zoom and under reduced motion.

• Motion · PatternCreator

  Scroll-linked media framing: inset-to-full-bleed clips, capped pushes, camera moves on one still, portal zooms and video-to-slot handoffs

  Change one media element's framing with scroll using transforms and clip-path only: rounded inset opening to full-bleed, a capped slow push, a pan-and-push across an oversized still, a portal zoom around an opening, and a video shrinking into a grid slot then dissolving into its final-frame still. Map linearly, measure rects on resize, one move per view, end framing for reduced motion.

Nothing in the sample matches. Your agent searches all of it with search_design_knowledge.