Built for products that billions of people touch.

Chrome that floats over the user’s own content or wallpaper — a media player, a camera control, a home-screen widget — where you want the surface to admit what is behind it rather than hide it. Works only when the backdrop is something you control or can measure.

Never as a substrate for text you have not scrimmed. Two measurements, both taken here: the backdrop under this panel ranges 1.11 : 1 to 16.41 : 1 across one wallpaper, and the composited glass itself, rendered in Chromium and read back at five positions, ranges 1.25 : 1 to 7.51 : 1 — so the surface narrows the range and never rescues it. Never inside an ancestor that isolates or flattens — isolation, transform, filter, will-change, opacity below 1, or a z-index on anything positioned, each collapse it to a near-black slab, so fading one in destroys it for the length of the fade. z-index is on that list because it collapsed four of the five components below during this build — stacking one glass element above another is the obvious thing to reach for, and it is the thing that breaks it. Never more than a couple per view: blur(20px) is a full-surface GPU pass.

The panel is a real focusable control: arrow keys move it 12 px (48 with Shift), and the readout is an aria-live="polite" region so a screen-reader user gets the same contrast verdict a sighted one reads. Where backdrop-filter is unsupported the whole layer stack is dropped for an opaque panel — degrading to legible, not to decorative.

Any glass surface carrying text over content you do not control — user wallpaper, a photo, a video frame, a map. Also the honest answer to “can we use the glass style here?”: yes, if it is guarded.

Not a substitute for choosing a legible design — a guard that fires on most of the screen is telling you the surface is wrong for the content, not that it needs a bigger scrim. Do not sample on every animation frame; sample on settle. And do not let the guard flip repeatedly while dragging: a label that strobes between glass and scrim is worse than either.

The decision and the measured ratio are both exposed as text in a polite live region, so the guard is auditable rather than magic. The scrim is a real opaque layer behind the text, not a lowered text opacity. Threshold is 4.5 : 1 for body text and it is a floor, not a target; hysteresis stops the flip from oscillating on the boundary.

Primary navigation in a content app where the scroll should read as continuous — feeds, libraries, maps. Best when the content behind it is your own layout and you can keep a predictable tone under the bar.

Never let it float over content it can hide: the scroller needs bottom padding equal to the bar plus the safe-area inset, or the last row is permanently unreachable. Never over user photos or video without the guard. Not on a form screen — a floating bar over a keyboard-adjacent field is a tap the user did not mean.

Real <button>s, one carrying aria-current="page"; the active item is marked by an opaque fill and a filled icon, never by tint alone. Targets are 60×44 px. The bar sits above env(safe-area-inset-bottom), and the scroll container reserves room for it rather than letting it overlap the last item.

A short, focused decision that benefits from keeping its context visible — share, sort, a quick confirm. The translucency earns its place when the thing behind is what the decision is about.

Never without the scrim: on glass alone the sheet stops being modal, and the text sits on whatever happened to be underneath. Not for long forms — if it scrolls, it is a screen. Not for destructive confirms where the wording must be unmissable; that gets an opaque dialog.

role="dialog" with aria-modal="true"; focus moves to the sheet on open and returns to the trigger on close; Tab is contained while it is open and Escape closes it. The scrim is clickable and does the same thing as Cancel. Body copy sits on its own opaque panel, so the readable part never depends on the backdrop. Reduced motion drops the slide.

Two to four mutually exclusive views of the same content, where switching is cheap and instant — a filter, a density, a chart range. On a glass surface it keeps chrome to one row.

Never for actions — a segment is a choice, a button does a thing. Not past four segments or with labels that wrap; that is a select. And never signal the selection with opacity or tint on glass: over a pale backdrop a translucent selected pill and an unselected one look identical.

role="radiogroup" with role="radio" and aria-checked — a radiogroup, not a tablist, because it filters content rather than swapping panels. Arrow keys move the selection, Home and End jump to the ends, and only the selected segment is in the tab order. Selection is carried by an opaque fill and a mark, so it survives greyscale.

Transient, non-blocking feedback over a lock screen, home screen, or full-bleed media — where an opaque bar would feel like a system error and the glass reads as part of the surface.

Never for anything the user must act on, and never for errors that need a decision — a toast that disappears is not a place to put consequences. Never rely on the glass for legibility: the backdrop is a photograph the user chose. Never auto-dismiss faster than the text can be read, and never at all while it has focus or the pointer is on it.

A polite live region — announced without stealing focus. Content sits on its own opaque inner panel, so the ratio is a property of the component and not of the wallpaper. Dismiss is a real 44 px button, not a swipe-only gesture; hover, focus, and reduced motion all pause or remove the timer.

Accent for the one primary action per view and for selected states. Semantic green/red/amber only for outcome, danger, and caution. Everything else stays neutral so content owns the saturation.

Never use red for emphasis — it is reserved for destructive and error meaning. Never encode a state by color alone; pair with an icon, weight, or label (streaks, unread, live all double-encode here).

Text tokens hold ≥ 4.5:1 against their surfaces in both themes; large text and icons ≥ 3:1. Both themes ship from the same token names — components never reference a raw hex.

Display face (Inter Tight, −0.03em and tighter) only for hero and section moments. Body is the system stack at 16px minimum — it renders instantly, matches the OS, and never needs a font download to be readable.

No display face below 20px — tight tracking collapses at small sizes. Never justify body text, never letter-space lowercase body copy, never ship text in images.

All sizes in rem so user font-size preferences scale the whole system; layouts survive 200% zoom (WCAG 1.4.4) and reflow at 320px (1.4.10). Numerals in prices and counters are tabular.

Scale steps only — 4, 8, 12, 16, 24, 32, 48, 64. Related things sit one step apart, unrelated things two. Section rhythm comes from consistent vertical steps, not from dividers.

No off-scale values to "make it fit" — if a layout needs 13px, the layout is wrong. Don't add dividers and spacing; pick one separator per level.

Interactive targets are at least 24×24 CSS px (WCAG 2.5.8); where a visual is smaller, the spacing exception applies — a 24px circle centred on it must not intersect another target's circle, which is a centre-to-centre rule, not a clear-gap one. List rows pad to a 44px minimum touch height.

Level 1 for resting cards, level 2 for raised or hovering elements, level 3 only for overlays that float above the page (sheets, toasts, menus). Glass for chrome that must show content scrolling beneath it.

Glass never carries body text over unknown content without a contrast fallback. No stacked glass — one translucent layer per screen region, or blur costs melt low-end phones.

Every glass surface declares a solid fallback color for browsers without backdrop-filter, and text on it still meets 4.5:1 against the worst-case underlying content in the fallback.

Enter/exit of overlays, state changes the user caused, and continuity between views. The spring — cubic-bezier(0.32, 0.72, 0, 1) — is shared by everything, so the product feels like one object.

No ambient looping animation near reading content. No motion longer than 480ms on the critical path — the user came to do something, not to watch the interface perform.

prefers-reduced-motion is a contract: transitions collapse to opacity or nothing, parallax and auto-playing movement stop. Nothing flashes more than three times per second, ever.

Recognition-level concepts only — search, share, settings, play. Filled variants mark selected state against outlined resting state (the tab bar pattern).

Icon-only buttons for irreversible actions are forbidden — "delete" gets a word. Never invent a metaphor a first-time user must decode; if it needs a tooltip to be understood, it needs a label instead.

Every functional icon carries an accessible name (aria-label or visually-hidden text); decorative icons carry aria-hidden. Minimum functional icon target: 44px including padding.

Haptics confirm what the eye might miss: a toggle landing, a pull-to-refresh arming, a payment succeeding. Sound is rarer still — reserved for messages arriving and capture moments.

Never haptic on scroll, on every keystroke, or to celebrate the app itself. Duplicate meaning, don't invent it — a buzz with no visible counterpart is noise with extra steps.

All haptic and audio feedback is redundant to a visible change — deaf and haptic-off users lose texture, never information. System silent-mode is always respected.

Actions — buy, send, save, continue. One primary per view region; secondary and ghost carry everything else. Full-width primaries live at the thumb edge on mobile.

Navigation is a link, not a button. Danger styling is for destructive actions only — never for urgency theatre ("Buy now before it's gone" does not get to be red).

44px minimum height. Loading sets aria-busy and disables the control — a double-tap on "Place order" is a duplicate charge. Focus ring is restyled, never removed.

Free-form single-line entry with a permanent label above and helper text below. The right inputmode and autocomplete attributes are part of the component, not an optimisation.

Placeholder-as-label fails the moment typing starts. If the answer is one of five things, use a select or segmented control — don't make thumbs spell what a tap can choose.

Error text is tied via aria-describedby and never conveyed by border color alone. Fields never clear on error. Labels are real <label> elements — tapping them focuses the field.

Whenever the collection exceeds what one screen can browse. Results update as-you-type where the corpus allows; recent searches fill the empty field's dropdown.

Don't ship search as an apology for bad navigation on a five-item menu. Never hide the only path to content behind an icon-only collapsed search on desktop.

type="search" with a visible clear affordance; role and results count announced to screen readers via a live region ("14 results"). Zero results always offers a next move.

Five to fifteen mutually exclusive options. Below five, use a segmented control or radios so all choices are visible; above fifteen, use search-in-a-sheet.

Never for two options (that's a toggle or radio pair), never for navigation, and never a custom-div dropdown when the native element would do — you inherit a decade of OS accessibility for free.

Keyboard type-ahead, arrow navigation, and screen-reader announcement come from the native element and are never re-implemented worse. The label is external and permanent.

Continuous or dense ranges adjusted by feel. Pair with a live output element; for money and quantities offer direct numeric entry too.

Not for precise required values (a date of birth on a slider is a usability crime) and not with fewer than ~10 steps — that's a segmented control.

Native input[type=range]: arrow keys step, Home/End jump, aria-valuetext gives units ("$120"). The 26px thumb clears WCAG's 24px floor with a 44px touch halo.

Binary settings with immediate effect: notifications, dark mode, autoplay. The label states the thing controlled, not the state ("Wi-Fi", never "On").

Not in forms that submit later — that's a checkbox. Never pre-flip a switch that spends the user's money or shares their data; defaults are a consent question, not a growth lever.

Built on a real checkbox input — Space toggles, state announces. Color is not the only state signal: the thumb position carries meaning in grayscale.

Checkbox for independent opt-ins and multi-select lists; radio when exactly one of 2–5 visible options must be chosen and the choice should be comparable at a glance.

Pre-ticked marketing checkboxes are a consent violation, not a conversion tactic. Radios with one option are a lie; radios with twelve are a select.

Native inputs with accent-color — full keyboard and screen-reader behaviour for free. Labels are clickable; groups get a fieldset/legend so the question travels with the answers.

2–5 short, mutually exclusive views or filters of the same content: List/Map, Weekly/Monthly, Delivery/Pickup. The selection changes the view immediately.

Not for actions (that's buttons) and not for navigation between unrelated destinations (that's tabs or a tab bar). Labels that truncate mean the control is the wrong choice.

Arrow keys move selection; the group carries a single tab stop. Selected state is encoded by the raised thumb and weight, not color alone.

Small integer adjustments with a sane range — cart quantities, tickets, guests. Bounds are enforced at the control: the minus disables at the minimum instead of erroring.

Not for large or unbounded numbers (use an input) and not for continuous values (use a slider). Removing the last item is a delete — hand off to a remove affordance, don't step to zero silently.

Buttons carry aria-labels ("Increase quantity"); the value is an output element announced on change. Both buttons hold the 44px target floor.

Filter sets, interest pickers, removable selections. Multi-select by default; a chip row scrolls horizontally on mobile rather than wrapping into a wall.

Chips are not buttons — they select, they don't submit. If only one may be active, show it as a segmented control or radio chips with explicit single-select semantics.

Toggle chips expose aria-pressed; removable chips make the ✕ its own labelled 24px+ target. Selection is encoded by fill inversion, not hue alone.

Status that changes decisions (Shipped, Refunded, New) and unread counts that clear when acted on. A count badge must always be dismissible by doing the thing it points at.

Never manufacture urgency — a permanently red "3" that never clears trains users to ignore every badge you'll ever ship. Marketing does not get to borrow the notification badge.

Counts carry accessible text ("3 unread messages"), truncate at 99+, and pair color with position and text — status badges always contain a word, never only a color dot.

Anywhere content has an author or a counterparty — posts, chats, reviews, orders ("packed by"). Deterministic gradient + initials when no photo exists, so the same user always looks the same.

Don't show presence unless it's real and consented — a fake "online" dot is a trust forfeiture. No avatars for system messages; robots get glyphs, not faces.

Images carry the person's name as alt text; presence pairs the dot with text nearby ("Active now"). Stacked groups expose a text count ("and 12 others").

Self-contained units in a browsable set — articles, places, playlists. The whole card is the link; inner actions stop propagation and get their own targets.

Not as a wrapper for everything — a settings screen of nested cards-in-cards is a spacing failure wearing borders. Sequential reading content wants a list, not a card grid.

One tab stop per card (the primary link), inner actions reachable after it. The lift transition is transform-only and disappears under reduced motion.

Homogeneous, vertically scanned items. The chevron means "more screen behind this"; a trailing control (switch, count) means the row is the whole story.

Don't mix row semantics in one group — navigation rows and toggle rows live in separate sections. Rich comparison shopping wants cards; lists are for scanning, not weighing.

Rows are ≥44px, entire row is the target, secondary text truncates rather than wraps at scan-breaking length. Semantics: a nav list is a list of links, not divs with click handlers.

2–6 sibling facets of one thing — Posts / Replies / Media on a profile. State survives switching; nothing is lost by looking.

Not for sequential steps (that's a stepper flow) and not as an overflow bin — a "More" tab is information architecture giving up.

ARIA tabs pattern: arrow keys move, the tablist is one tab stop, selection follows the roving focus. The underline is position-encoded, not color-encoded.

Outcomes that need acknowledgment but not action: saved, sent, added to bag. Pair destructive actions with an Undo toast instead of a pre-confirm dialog (see the Undo pattern).

Never for errors that require action — those need a banner or dialog that waits. Never stack three toasts deep; queue them. A toast with two buttons is a dialog in denial.

role="status" (polite announcement), pauses on hover/focus, and any action inside is reachable before timeout — WCAG gives users control over time limits, so Undo lingers.

Decisions that block everything else: discard unsaved edits, confirm a payment change, sign in to continue. Title states the decision; buttons state outcomes, never "Yes/No".

Marketing does not get modals. Mobile prefers a bottom sheet for anything with options. And a modal on page load — before the user has done anything — is the fastest trust burn in the catalog.

Focus moves in, cycles inside, and returns to the trigger on close. Esc closes, scrim-click closes non-destructive dialogs, and the page behind is inert to screen readers.

Contextual actions, filters, and details on mobile — anything a desktop popover would do. Detents (half, full) let content and control share the screen.

Not for blocking decisions (that's a dialog — a sheet is dismissible by design) and not nested: a sheet opening a sheet means the flow wanted a full screen.

Swipe-down, scrim tap, and Esc all dismiss; the grabber is decorative while a real close button carries the accessible name. Focus management mirrors the dialog contract.

Tooltip: naming icon controls on hover/focus, desktop only. Popover: a short menu of contextual actions anchored to a "…" trigger.

Tooltips don't exist on touch — anything a phone user needs cannot live in one. Errors never go in tooltips. A popover taller than half the screen is a sheet with the wrong name.

Tooltips appear on focus as well as hover, are dismissible with Esc, and stay hoverable (WCAG 1.4.13). Popover menus use the ARIA menu pattern with arrow-key navigation.

Bars for uploads and multi-step flows; rings for compact contexts; spinners for sub-2-second waits. Anything longer than ten seconds needs a cancel.

Never fake progress — a bar that crawls to 90% and parks is a lie the user physically feels. Don't spinner the whole page for one widget's fetch.

role="progressbar" with aria-valuenow; long operations announce completion via a live region. Spinners respect reduced motion by slowing, not vanishing.

Content with a predictable silhouette — feed items, cards, profiles — loading in 0.5–5 seconds. Skeleton geometry must match the real content, or the layout shift double-charges the wait.

Not for instant loads (flash of skeleton is worse than nothing) and not for unpredictable content where a spinner is more honest.

The container carries aria-busy="true" and a text status ("Loading feed"); the shimmer is decorative, aria-hidden, and static under reduced motion.

Pagination where position matters — search results, order history. Page dots for short swipeable sets (≤6 slides), always paired with swipe.

Feeds don't paginate (see Infinite Scroll pattern for the trade). Dots beyond six are noise — show a count ("3 / 12") instead.

nav landmark with aria-label="Pagination"; the current page has aria-current="page". Dots are buttons with slide names, not empty spans.

FAQs, size guides, shipping details — secondary content most people skip and some people need. Multiple panels may be open; users manage their own attention.

Never hide critical-path content (price, total, cancellation terms) behind a fold. Auto-closing siblings punishes comparison — leave panels where users put them.

<summary> is natively focusable and toggles with Enter/Space; the chevron flips as a state signal in addition to the disclosure itself.

First-run, cleared inbox, no results. Formula: what this space is for, why it's empty, one action that fills it. Zero-results always keeps the query editable and suggests a loosened filter.

Never a bare "No data". Never a dead end after a search — that's where shoppers leave. Don't guilt-trip ("It's lonely in here…") — charm, don't manipulate.

The heading is a real heading in the page outline; the illustration is decorative and aria-hidden; the action is a first-class button, not a text link whisper.

Conditions that remain true: payment method expiring, feature in beta, order delayed. Inline alerts attach to the thing they describe — a form error banner lives above the form it indicts.

Not for one-off confirmations (toast) and not stacked three deep — if everything is urgent, nothing is. Dismissible only if the condition is genuinely ignorable.

Errors use role="alert" (assertive), the rest role="status". Icon + word + color triple-encode severity; the dismiss button names what it dismisses.

Top-level destinations on wide screens, five or fewer. Wordmark left, destinations right, one active at a time. On mobile these same destinations become the tab bar.

A nav bar is not a junk drawer — utilities, legal links, and settings live elsewhere. Never hide primary navigation behind a hamburger on desktop when there is room to show it.

A <nav> landmark with aria-current="page" on the active item; a skip-to-content link precedes it. The glass carries a solid fallback for non-supporting browsers.

3–5 top-level, equally important destinations on mobile. Filled icon marks the active tab; each tab keeps its own navigation stack so switching never loses your place.

Never as an action bar — "Post" in slot three that opens a composer instead of a destination breaks the spatial model (if you do it, make it visually distinct and modal). Two tabs is a segmented control; six is a redesign.

Labels always visible — icon-only tab bars fail recognition tests everywhere they've been tried. Badges carry accessible counts. Safe-area padding is part of the component.

Secondary and account-level destinations, or the primary nav of dense multi-section products on tablet and desktop. Grouped, labelled, with the user's identity anchored at top.

Not as the only path to daily-use destinations on a phone — burying "Search" in a hamburger costs engagement measurably. Don't mirror the tab bar inside the drawer; duplicates confuse the map.

Opens as a modal region on mobile (focus trapped, Esc closes, scrim tap closes); on desktop it's a persistent nav landmark. The trigger announces expanded state.

Hierarchies three levels or deeper — Home → Women → Shoes → Sneakers. Every crumb but the last is a real link; the last names the current page and links nowhere.

Not on flat products, not on mobile where it wraps into noise, and never as a step indicator in checkout — that's a progress stepper with different semantics.

nav[aria-label="Breadcrumb"] with an ordered list; the current page carries aria-current="page". Separators are decorative and hidden from screen readers.

The single most common creative action of a screen: new message, add item, start workout. One per screen, thumb corner, persistent through scroll (or politely shrinking).

No FAB for destructive, rare, or ambiguous actions. Two FABs is zero FABs. If the action belongs to one list item rather than the screen, it belongs on the item.

56px target with a text label for screen readers ("Compose message"); never overlaps the last list item — scroll containers pad their bottom by the FAB's height.

Root screens of each tab — the moment of arrival. The large title gives the screen a name worth a headline; the condensed bar keeps it while content takes over.

Not on detail screens deep in a stack (content should lead) and not with titles longer than two words — "Order history & receipts" was never meant to be 34px.

The h1 exists once (the large form); the condensed bar mirrors it aria-hidden. The collapse is scroll-driven positioning, not animation — reduced motion changes nothing because nothing plays.

First launch only, ≤3 screens, each selling one outcome (not one feature). Progress dots show the end is near; the last screen lands on the primary action.

Never gate the product behind a tour a user can't skip. Don't ask for permissions here (see Permission Primer) and don't ask for registration before showing any value.

Skip is visible from screen one, tab-reachable first. Swipe advances but buttons exist for every gesture (WCAG 2.5.7). Seen-state persists — nobody sees the tour twice.

Offer the platform's native sign-in alongside any third-party login, then email. Order by user benefit, not by your data appetite.

Don't demand an account before demonstrating value — browse first, sign in to keep. Never dark-pattern the email option into 8px grey text to juice SSO adoption.

Buttons follow each provider's brand rules (their guidelines are contractual); autocomplete="email" and "current-password" keep managers working; errors never say which of email/password was wrong.

Verifying possession of an email or phone. Auto-advance per digit, paste fills all six, auto-submit on the last — the user should never hunt for a Verify button.

Don't use OTP as the only factor for high-value changes (SIM-swap is real); pair with passkeys where it matters. Resend appears after a countdown, not never.

autocomplete="one-time-code" lets the OS offer the code from SMS; inputs are labelled "Digit 1 of 6"; WCAG 3.3.8: no transcription puzzle — paste always works.

Right after a successful password or OTP sign-in — the moment the user has just felt the pain the passkey removes. One sentence of what, one of where it syncs.

Not during first-run before any sign-in exists, and never as a repeating nag — decline twice, stay quiet until the user visits security settings themselves.

"Not now" is same-size, adjacent, honest. The biometric icon row is decorative; the copy never claims biometrics leave the device — because they don't.

After account creation, one screen, only what the product needs on day one. Each request carries its reason inline ("your name appears on reviews").

No birthday "for your special offer", no gender without a product reason, no phone number as a growth hook. Data you can't justify inline is data you shouldn't collect.

Everything after the display name is skippable and says so. Photo upload has a keyboard path and never requires a camera. Progress persists — abandoning costs nothing.

Immediately before a system permission request, triggered by a user action that needs it — asking for location when they tap "Find stores near me", not at launch.

Never chain three permission asks at first launch. Never re-prompt after a decline with the same pitch — respect the no, offer settings later when the feature is touched again.

The primer states exactly what is accessed, when, and what saying no costs. "Not now" keeps the app fully usable — degraded gracefully, never punitively.

First visit where consent-based processing applies, and permanently reachable from settings and footer. Purposes are separated, written in plain language, and individually controllable.

No "Accept all" in bold against "Manage options" in grey whisper — asymmetric prominence is the textbook dark pattern EU regulators cite. No consent walls for content that doesn't require it.

"Reject all" and "Accept all" are visual equals on the first layer. Non-essential toggles default off. Withdrawing is one screen away forever (GDPR: as easy to withdraw as to give).

At the moment of premium intent — tapping a locked feature — not as an ambush at launch. Plans show total billed price and period; the trial states when it converts and how to cancel.

No fake countdown timers, no pre-selected annual masquerading as monthly pricing, no hidden ✕. "Free trial" that means "we bill you in 72 hours unless you remember" gets rejected — by review and by users.

Close is visible from render. Price per period appears exactly as billed ("$59.99/year", not "$4.99/mo billed annually" alone). Restore purchases and terms are reachable without scrolling tricks.

Grid and carousel browsing. Image, name, one line of context, price, rating — nothing else survives the cut. The card links to detail; only save acts inline.

Never bury the price to "get them to detail" — hidden prices read as expensive. No fake "3 left!" scarcity unless inventory is genuinely tracked and true.

One link per card with a name that includes the product ("Ceramic pour-over set, $48"); the wishlist button is a separate labelled target announcing its toggled state.

Tabular numerals everywhere money appears so digits align in lists. Compare-at prices show savings as both amount and percentage; unit prices accompany multi-size goods.

No drip pricing — fees revealed at the last step are the single most-cited dark pattern in FTC enforcement. No fictitious strikethrough anchors that were never charged.

Strikethrough prices carry accessible context ("was $64, now $48") — <s> alone is silent on most screen readers. Currency symbols travel with the number, locale-formatted.

Cart and order review. Thumbnail, name, variant, unit price, quantity stepper, line total. Remove is one tap plus an undo toast — not a confirm dialog.

Don't inject upsells between line items — cross-sell lives below the list. Never auto-add items (warranty, insurance) the user must notice and remove; that's an FTC unfairness case with a design file.

Quantity changes announce the new line total politely. Remove names its item ("Remove trail runners"). Price changes since adding are flagged, not silently swapped.

The right rail (desktop) or pre-pay screen (mobile) of checkout. Subtotal, shipping, tax, discounts, total — each row aligned, tabular, updated live as options change.

Never a "service fee" that appears only here — junk fees at the summary stage are the FTC's current enforcement centerpiece. Never collapse the breakdown behind a tap on mobile.

Live updates announce via a polite region ("Total updated: $53.24"). The pay button repeats the total — the last thing read before commitment is the number.

Checkout and settings. Each method shows its brand, its last four, and its expiry state. One is always selected; the default is the user's last successful method.

Never preselect a store credit line or BNPL the user didn't choose — payment defaults are a consent surface. Expired cards can't be selected, only fixed.

A real radio group: label reads "Visa ending 4242, expires 12/27". Adding a card uses autocomplete cc-attributes and never blocks paste.

Checkout, collapsed behind "Have a code?" so full-price buyers aren't invited to leave and hunt coupons. Applies without page reload; the summary updates in the same breath.

Don't auto-apply a worse code over a better one. Expired codes say expired — "invalid code" for a code that worked yesterday teaches distrust.

Uppercases as-you-type (display only), trims whitespace on paste, result announced via status region. The applied state shows the code and its effect together, removable in one tap.

Star input for collection (tap or drag, 1–5), star display plus count everywhere the product appears. Reviews sort by helpfulness with recency available.

Suppressing or reordering negative reviews violates the FTC's review rules — display practices are a legal surface now. No incentivised reviews without disclosure.

Display stars carry text ("4.6 out of 5, 1,942 ratings"); the input is keyboard-operable radios styled as stars. Half-star precision displays, never collects.

A heart on every product surface, toggling instantly with optimistic UI and a toast pointing at the list. Saved items remember price at save time so drops can be shown truthfully.

Saving must not require sign-in to feel instant — save locally, merge on auth. Never spam "items in your wishlist are selling fast!" pushes without explicit opt-in to that exact category.

The heart is a toggle button with aria-pressed and a name including the product; the fill change pairs with the pressed state so color isn't the only signal.

Post-purchase. Timeline of real states with timestamps, current state emphasized, delivery window as a range that narrows honestly as confidence grows.

No fake precision — "arriving 2:14 pm" from a model that knows ±3 hours erodes every future promise. A stuck state acknowledges being stuck and offers support before the user hunts for it.

The timeline is an ordered list; each step names its state and time. Status color is tripled with icons and text. Updates announce politely if the screen is open.

Any authored unit in a scrolling feed. Avatar + name + time anchor trust; the action row keeps to three or four verbs with live counts.

Sponsored posts wear the same anatomy plus an unmissable "Sponsored" label — camouflaged ads violate FTC endorsement rules and reader trust in the same move.

The post is an article with the author as its heading; action counts are part of each button's name ("Like, 1,204 likes"). Media carries author-provided alt text — the composer asks for it.

Discussion under any post or product. Bubble carries author + text; the meta row underneath holds time, like, reply. Deeper threads collapse behind "View 12 replies".

Don't autoplay into hostile territory — sort by "most liked" hides brigading better than "newest". Don't let the reply box push content; it stays docked.

Semantic list structure preserves thread relationships for screen readers ("reply to Ana"). Collapsed counts are buttons, not links-that-lie. Report is reachable on every comment.

Quick emotional response on posts and messages. Five or six options maximum — the palette is a vocabulary and vocabularies need to be memorisable.

Not for decisions or feedback with consequences (that's a survey or report). Don't A/B swap the emoji set weekly; meanings accrete through stability.

Long-press has a click/keyboard path (the bar opens from a labelled button too — WCAG 2.5.7). Each emoji button carries its name ("Love"). Selection announces and dismisses.

Any content worth leaving the app. On mobile, prefer invoking the OS share sheet; this custom grid is for in-app targets (send to a friend, add to story) layered above it.

Don't pack the first row with your own re-engagement targets while burying "Copy link" — link-copying is the most used share on every platform that measures honestly.

Grid is keyboard navigable; every target is named; "Copy link" confirms via toast and writes a clean URL — no fifteen tracking parameters that make the link unreadable.

1:1 and small-group messaging. Consecutive messages group under one timestamp; delivery state (sent, delivered, read) lives once at the thread's end, not on every bubble.

Read receipts are consent-gated and mutual — showing "read" to senders while hiding the setting is a dark pattern. Support bots must be visibly non-human.

The transcript is a log region; new messages announce without stealing focus. Bubble color carries ≥4.5:1 text; the typing indicator stills under reduced motion.

The in-app notification center. Group by day, batch same-actor events ("Ana and 3 others liked…"), and deep-link to the exact object, never the home screen.

Marketing does not wear the notification costume — "Someone might have viewed your profile 👀" as engagement bait poisons the channel that ships real information.

Unread is background + dot + bolded text (triple-encoded); items mark read on visit and support mark-all. Each row is one link with a complete sentence as its name.

Profiles, suggestions, discovery cards. Unfollowed is filled and inviting; following turns quiet secondary with the label changed — never just a color swap.

No confirm dialog on unfollow (it's reversible; asking makes it feel surveilled). Never follow anyone automatically — imported contacts get suggestions, not silent edges.

aria-pressed carries the state; the label text changes (Follow ↔ Following) so screen readers and grayscale users read the same truth. Optimistic update, quiet rollback on failure.

Ephemeral content rails. Ring = unseen, gray = seen, no ring = no story. Your own slot leads with an explicit + affordance for creation.

Don't reset seen-state to farm taps — users notice, and the ring stops meaning anything. Don't put non-expiring content in the expiring costume.

Each story is a button: "Ana's story, unseen, 2 hours ago". Seen state is encoded by ring treatment plus order (unseen first), not color alone. The rail is keyboard-scrollable.

Any owned playback surface. Controls fade after 3s of playback, return on tap/hover/focus. The scrubber shows buffered vs played; ±10s skips beat frame-precise dragging on touch.

Never autoplay with sound — muted autoplay with visible captions is the honest compromise. Don't hide captions behind a settings submenu; CC is a first-class control.

Full keyboard map (space, arrows, C for captions, F for fullscreen); controls are real buttons with names; fading controls never fade while focused (WCAG 2.1.1, 1.4.13).

Continuous audio/video while browsing elsewhere. Persistent across navigation, dismissible by swipe with a real stop — dismissing pauses, it doesn't secretly keep playing.

Not for content the user hasn't started. It never covers the tab bar or the last row of content — layouts reserve its height when active.

The bar is a region ("Now playing"); controls are named; the expand affordance is a real button as well as a tap surface. Swipe-dismiss has a button equivalent.

Photo sets — products, listings, albums. Square grid crops for rhythm; the lightbox shows true aspect with pinch/double-tap zoom and swipe between images.

Don't lightbox single inline images that are already big enough. Don't trap scroll — reaching the end of a lightbox swipe returns to the grid, not to the first image forever.

Grid items are buttons naming their image; the lightbox is a dialog with arrow-key navigation, Esc close, and position announced ("Photo 3 of 8"). Zoom always has button + keyboard paths.

Browsable peers where order is soft — featured collections, related items. The 82% slide width leaks the next card: visible continuation beats any arrow.

Never auto-rotate a carousel of content people read — rotation steals the thing they were reading. Critical content doesn't go in slide 3; nobody sees slide 3.

Native scroll means keyboard and screen-reader access come free; slides are list items with names. Any autoplay (hero promos only) pauses on hover, focus, and reduced motion.

Actually-live streams and events, on thumbnails and in players, paired with a viewer count when it's meaningful. Red, uppercase, pulsing dot — the convention is universal; keep it.

Never on premieres, reruns, or "live-style" drops — "LIVE" on recorded content is a trust forfeiture regulators call deceptive. Ended streams switch to "Streamed 2h ago" instantly.

The badge is text, not just color ("LIVE"), announced as part of the title. The pulse is decorative and stops under reduced motion without losing the label.

All published video. Default on when the device is muted. Position bottom-center, lifting above controls when they're visible.

Auto-generated captions without a correction path aren't accessibility, they're liability diffusion — label them auto-generated and let creators fix them.

User-adjustable size and background opacity, honoring OS caption preferences where exposed. ≥4.5:1 against any video via scrim. Max two lines, ~42 chars each.

Activation journeys with 3–5 real steps toward the product's core value. The endowed-progress head start (one item done at signup) is honest: they did create the account.

Steps that serve you, not them — "enable notifications" and "invite 3 friends" are not setup, they're acquisition wearing a checklist. Completion never gates paid-for functionality.

Progress announced on change ("2 of 4 complete"); dismissible for good once completed or explicitly hidden; each item deep-links to the actual task.

Genuine practice loops — learning, fitness, journaling — where consistency serves the user's own goal. Streak freezes and grace days are part of the component, not a paid add-on.

Not on consumption ("7-day shopping streak" serves nobody but the funnel). No guilt copy on breaks — "your streak is hurt 😢" notifications at 11pm are the pattern this entry exists to forbid.

The count carries text ("14-day streak, 5 of 7 days this week"); flame color pairs with the number. Celebration animation is one-shot and reduced-motion-gated.

After a moment of earned delight (first great order, milestone hit). State both rewards, the code, and the terms link — the whole deal, no asterisk archaeology.

Never auto-import and mass-message contacts; every invite is user-sent. No fake "3 friends joined!" social proof. Referral rewards that expire in 48 hours are pressure, not generosity.

Copy confirms via toast and status region; the code is selectable text, not an image; share uses the OS sheet with a clean pre-filled message the user can edit.

At the first moment a notification would have helped ("your order shipped" beats any launch-time ask). Category toggles first, OS prompt second.

Never at first launch before value exists. Never re-prompt on a schedule. And the category promises are binding — routing marketing through the "order updates" channel is the lie that gets apps muted.

"Not now" is prominent and final until the user visits settings. Chosen categories map to real notification channels the OS exposes (Android) or the app respects (iOS).

After a success the user caused (finished workout, delivered order), rate-limited far below the OS caps. Use the platform's native review API — it handles the UI and the throttling.

No sentiment-gating ("Enjoying the app?" → happy to store, unhappy to a form). The FTC's review rule bans review suppression; Apple and Google both prohibit review gating explicitly.

The prompt is dismissible, never repeats within the cooldown, and never blocks a task in progress. Feedback and rating are separate, both always reachable from settings.

A single 0–10 or emoji-scale question after a completed experience, inline or as a quiet card — never a modal over a task. Follow-up text is optional and says so.

Not during first-run (nothing to rate yet), not after failures (measure that from support volume, don't make the wounded fill forms), and never twice in one quarter for the same person.

The scale is a labelled radio group with keyboard flow; endpoints carry meaning text. Submitting acknowledges once, quietly. Declining is remembered.

Meaningful user-facing changes after an update — new abilities, not refactors. One sheet per release maximum, dismissible instantly, revisitable from settings.

"Bug fixes and improvements" doesn't earn an interruption. Neither do upsells wearing a changelog costume — a "what's new" that's three premium pitches is an ad with a version number.

Standard sheet semantics (dismissible, focus-managed); each item is a real link; the seen-flag is per-version and survives reinstalls via account state.

On every piece of user-generated content and every profile, via the overflow menu. Reporting asks one clarifying question, confirms receipt, and says what happens next.

Don't bury it four screens deep to keep report volume flattering. Block never requires a reason — protection is not a form. Neither action notifies the reported party of who acted.

Block takes effect immediately and optimistically — the content vanishes now, the network catches up. Both flows are fully keyboard-operable and confirm via status region.

Sensitive-but-allowed media: graphic news, medical content, spoilers. The veil names the category specifically ("Graphic injury") so the choice is informed, not a dare.

Not as an engagement mechanic — mystery-blurring benign content to farm taps teaches users to ignore real warnings. Policy-violating content is removed, not veiled.

The reveal is an explicit button ("Show anyway"); the choice can persist per category in settings. The warning text is readable at full contrast on the blur.

Before collecting personal data where COPPA/GDPR-K applies, and before age-restricted content or purchases. Ask once, neutrally ("When were you born?"), without stating the passing age.

No "you must be 18, enter your age 😉" framing that coaches the answer. Failing users aren't offered a back-button retry loop — the session remembers.

Neutral field order (year first coaches less), no data retained from failed gates beyond the session flag, and the under-age experience degrades kindly, never mocks.

One screen from settings root. Each row: the data category, its plain-language purpose, its current state, and its control. Changes take effect immediately and confirm.

No euphemisms — "personalisation data" that means location history gets called location history. Controls that only pretend (off = still collected, just hidden) are the deepest dark pattern there is.

Rows are grouped by data type with real switches; every state change announces. The page itself never requires consent to view.

Account settings, one level deep. Export produces a machine-readable archive with an ETA. Deletion explains scope, offers a cooling-off window, and confirms completion out-of-band.

No retention theatre — five "are you sure" screens, surprise discount offers, and a mandatory phone call are the FTC's canonical obstruction examples. One honest confirm is the ceiling.

The typed-confirm (for irreversibility) accepts paste and screen-reader input; deadlines and grace periods are stated in dates, not "soon".

Next to display names of identity-verified accounts, consistently everywhere the name appears. Tapping it explains exactly what was verified and when.

If verification is purchasable, the affordance must distinguish paid from vetted — one glyph for two meanings collapses both. Never auto-verify advertisers.

The badge has a text name ("Verified account") in the accessible label of the name it decorates — not a mystery blue blob. It's never separable from the name in truncation.

Reachable from settings; surfaced gently after security events (new device, password change). Each row pairs a state with its one-tap remedy.

Never cry wolf — "your account is at risk!" for an unused promo email address burns the channel needed for real alarms. Upsells (VPN, premium monitoring) don't wear the security costume.

States triple-encode (icon + word + color); every fix lands on the exact screen that fixes it; completed items confirm and re-verify on return.

Time-ordered content the user plausibly wants fresher — feeds, inboxes, scores. The arrow flips at the arming threshold; a spinner holds until real content lands.

Not on content that doesn't change (settings) and never as the only refresh path — a visible refresh control exists for keyboards, switch access, and everyone the gesture excludes.

WCAG 2.5.7: single-pointer gesture with a button alternative. Completion announces ("Feed updated, 4 new posts"). Rubber-banding respects reduced motion.

Entertainment feeds with no meaningful end. Load-more happens ahead of the viewport; position restores perfectly on back-navigation — losing your place is the cardinal sin.

Goal-directed contexts — search results, order history, anything comparable — get pagination or "Load more" buttons: they preserve place, footer, and the feeling of progress. The footer must be reachable; content that flees the scrollbar fails WCAG and patience alike.

New batches announce count, focus is never stolen, and a "Back to top" affordance appears after two screens. Session-length nudges ("you're all caught up") are honest stopping points, not shame.

Reversible destructive actions: delete a message, archive a thread, remove from cart. The action executes optimistically; a toast holds the undo for ~6 seconds; the model really can restore.

Truly irreversible or high-stakes actions (delete account, send money, publish to everyone) keep a real confirm — undo is for the reversible, and pretending otherwise is worse than the dialog.

The undo control is focusable before timeout, the timer pauses on hover/focus, and the same action is also available in an activity/trash surface for the slow.

Every failure surface. The formula: plain-language what ("Couldn't send"), the stakes ("your message is saved as a draft"), the action ("Try again"). Input is never thrown away.

No error codes as headlines (keep them small, for support), no blame ("you entered an invalid…"), and no dead ends — every error screen has at least one button.

role="alert" for blocking failures; retry buttons debounce; after two failed retries the surface changes shape and offers support instead of hope.

A quiet banner when connectivity drops; cached content stays readable and marked fresh-as-of; outgoing actions queue visibly ("will send when online") instead of failing.

Don't block the whole app behind a full-screen dinosaur when 90% of it is cached and useful. Don't retry forever silently — surface the queue so users can cancel stale intents.

The state change announces once (not per-scroll); queued items are inspectable; reconnection syncs and reports ("2 messages sent"). Timestamps mark cached content honestly.

Subscriptions and memberships. Cancel lives where billing lives, works in-app end-to-end, states what's lost and when, and confirms in writing. One save-offer maximum, skippable in the same tap.

No retention mazes: chat-agent-only cancellation, guilt copy ("we'll miss you 😢" over a shrunken cancel link), surprise pause-instead defaults, or five-screen offer gauntlets. Each is an enforcement citation with a UI attached.

The path is discoverable by search ("cancel"), completable by keyboard, and ends in a dated confirmation ("Access until Aug 12, no further charges"). Resubscribing is equally easy — symmetry both ways.

Catalogs beyond one screen. Applied filters render as removable chips above results; a filter sheet batches complex refinement behind one "Show 142 results" commit button that always shows its count.

Never auto-apply filters the user didn't pick ("sponsored first" is a sort disclosure, not a default to hide). Zero results with active filters offers to loosen them, never a dead end.

Count changes announce politely; each chip's remove is a named target; "Clear all" appears at two or more filters. Filter state lives in the URL — shareable, restorable, honest.

Any date the user must supply: a booking, a birthday, a delivery window. Pair a text field with a calendar — the field is the fast path for people who know the date, the calendar is the browsing path for people who are choosing one. For a range — a stay, an availability window — a two-month grid that carries state on the days themselves: price, sold out, closed.

Never for a date the user already knows by heart and can type in three seconds (a birthday behind a twelve-tap calendar is hostile). Never a calendar-only control on mobile web where the native <input type="date"> already carries the platform's own accessible picker. Never a dropdown-triplet for a date of birth: typing “1994” beats paging back 360 months.

Grid is role="grid"; arrow keys move by day, PageUp/Down by month, Home/End to week ends. The focused cell is the only tab stop. Disabled dates state why. Locale decides day-of-week order and the DD/MM vs MM/DD reading — never the developer's timezone. Typed entry parses forgivingly — 3/7, 03-07 and “Mar 7” all land on the same day.

Photos, documents, avatars, receipts. Offer drag-and-drop and a real <input type="file"> button — on mobile the button also opens the camera, and on desktop it is the only path a keyboard user has. More than one file means a list, not a counter: each row carries its own state and its own Remove.

Never a drop zone alone. Never a spinner with no bytes-so-far on a large file — an indeterminate spinner on a 90 MB video is a lie about whether anything is happening. Never silently strip EXIF without telling a user you did, and never silently keep GPS EXIF without telling them either. Never state a limit only by failing — size, count and type belong on the zone before the pick, not in the error after it.

Drop zone is a labelled button; progress is role="progressbar" with a live percentage; failures name the reason (too large / wrong type / network) and keep the file selected so retry costs one click, not a re-pick. Cancel is available for the whole upload. Drag is an enhancement and never the only path (WCAG 2.5.7); Remove works mid-flight, not just after.

Forms with more than roughly ten fields, or with branching (identity → address → payment). Group by the user's mental model, not by your database tables. Name the steps rather than numbering them: “Delivery” tells a user what is coming, “Step 2” does not.

Never to hide length — a five-step flow that never showed “5” is a dark pattern with a progress bar on it. Never validate a step only on submit of the last one. And never make Back destructive: if going back loses what was typed, it isn't Back, it's Restart. Never validate step N against something the user only learns at step N+2, and never lock Back to protect a funnel metric.

Each step is a <form> with its own heading; focus moves to that heading on advance and the step is announced (“Step 2 of 4, Address”). Progress is a real role="progressbar". State persists across reload — a network blip is not the user's fault. The rail is an ordered list with aria-current="step", so position is structure rather than decoration.

Exactly one genuinely non-obvious affordance — a gesture, a hidden long-press, a new control in a place people already know. Trigger it on the screen where it is used, not on launch.

Never as a tour. A five-step carousel of coach marks on first launch is a confession that the interface failed, and nobody reads it — they tap Skip and now they've been taught that your hints are noise. Never to point at something you want to sell. Never twice. Never coach the obvious — a tip spent on “Tap search to search” teaches people to dismiss unread.

Focus moves into it and returns to the anchor on dismiss; Esc dismisses; it never traps. The dismissal is persisted per-user, not per-session. It is a non-modal role="dialog", so a screen-reader user is not silently stuck behind an overlay they can't perceive. It never covers the control it describes.

Any recurring charge. Show the plan, the exact next charge amount and date, the payment method, and the full charge history. Cancel sits on this screen — not three levels down, not in an email, not on a phone line.

Never let the renewal price differ from the price on this screen. Never bury cancel behind a chat widget or a “call us”. Never auto-upgrade a plan the user did not choose. Introductory pricing must state the price it becomes, and when — on the same screen, in the same size.

The next charge is a single unambiguous sentence, not a table the user must assemble. Cancellation is reachable in the same number of clicks it took to subscribe. A cancelled subscription still shows what remains paid-for and when access actually ends.

Every app that supports account creation. The entry point lives in account settings, not support. State what is deleted, what is retained and why (tax records, fraud logs, legal hold), and when access actually stops.

Never offer “deactivate” as the only option and call it deletion. Never require an email to support, a phone call, or a web page the app refuses to link to. Never delete silently: an active subscription, an outstanding balance, or shared content owned by others must be surfaced before the button, not discovered after.

This is the one place a confirm is right — deletion is irreversible, so undo does not apply. Confirm by re-authenticating, not by typing DELETE in a box. Offer the data export first. Send a confirmation to the address on file, with a real grace window.

Any open-ended AI surface. Show scope in the placeholder (“Ask about your orders” beats “Ask me anything”), show what it can see (attached context as removable chips), and give an explicit Stop while it is generating.

Never as a replacement for a control that already works — a chat box is a worse date picker than a date picker. Never claim “ask me anything” on a model that is scoped to your catalogue. Never send hidden context the user cannot see and cannot remove.

Enter sends, Shift+Enter is a newline, and the field grows to a cap then scrolls. Attached context is announced and each chip is individually removable by keyboard. Stop is focusable the instant generation starts — the ability to interrupt is part of the contract, not a nicety.

Any agentic surface with more than one kind of latency — a chat that sometimes reads context, sometimes calls a tool, sometimes writes code. Name the state in both a visual and a plain-language string ("Agent searching…"), so the indicator never has to be decoded to be understood.

Don't invent a state the backend can't actually report — a "reasoning" animation over a system that only ever waits is theatre, and theatre erodes trust faster than a plain spinner would. Don't run more than four or five states in one product; past that, users stop learning the vocabulary.

role="img" with an aria-label derived from the state's status text, not the state's internal id. Reduced motion freezes the current frame rather than hiding it — the state stays legible without motion. Off-screen and backgrounded instances stop animating; nothing here should cost a tab that isn't visible.

Any generation long enough that a spinner would feel broken. Stream tokens into a region that is visually live but aria-live="off", and announce the completed answer once, when it is done.

Never mark the streaming region aria-live="polite" — you will fire hundreds of announcements and make the answer less accessible than a spinner. Never stream a legal, medical or financial figure that could be misread mid-sentence. Never remove Stop.

“Generating” is announced via role="status"; the answer text is announced once on completion. Stop halts immediately and keeps the partial output — discarding what the user already read is a second failure on top of the first. Copy and Regenerate appear only when the answer is whole.

Whenever the answer is grounded in retrievable material. Attach the source to the claim, not to the bottom of the message, and let the user open the passage that produced it — not just the domain it came from.

Never render a citation the system did not actually retrieve. Never cite a source the model didn't use because it “looks about right”. And never show a bare favicon row as a proxy for grounding — an unlinked logo is theatre.

Each citation is a real link with a discernible name (not “[1]” alone), states the date the source was retrieved, and opens the exact passage. Ungrounded sentences are visually distinguished and labelled — not by colour alone.

Whenever the cost of being wrong is real: money, health, legal, safety, or an irreversible action. Route low-confidence answers to a human, a verified document, or a deterministic tool — and say which.

Never render a raw model probability as a percentage badge — it reads as calibrated precision the model does not have, and users treat “87%” as a fact. Never use confidence to hedge every answer; a system that always says “I might be wrong” has said nothing.

Uncertainty is expressed in words and shape, never colour alone. The escalation path is a real control with a real destination and a stated response time. The state is announced — a screen-reader user must not miss the one sentence that says this answer is not reliable.

Any synthetic or substantially AI-modified image, audio, video or text presented to a consumer; any chat interface where a person could reasonably think they are talking to a human. Attach provenance metadata (C2PA Content Credentials) as well as the visible mark.

Never bury the disclosure in a settings page or a footer. Never make it a hover-only tooltip. Never let it be strippable by a crop — the visible mark and the embedded credential are two mechanisms, and you need both because either alone can be defeated.

The disclosure is real text in the accessibility tree, not baked into a pixel. It is announced with the media, not after it. Tapping it explains what was generated and by what — a badge with no explanation is a shrug.

Before any action that spends money, sends something to another person, changes a permission, or cannot be undone. Show the exact effect — the amount, the recipient, the scope — not a summary of the intent. The user is signing the payload, not the plan.

Never gate reversible reads and drafts — a confirm on everything is a confirm on nothing, and you will train the user to press Approve without looking. Never let a gate be satisfied by the agent itself. Never batch ten irreversible actions behind one Approve.

Approve is never the default focus. The consequence is stated before the buttons and is announced. Editing the payload is possible from the gate — if the only options are Approve and Cancel, the user with a nearly-right action has to start over, and will approve the wrong thing instead.

Any agent that runs multi-step or in the background. Log what it read, what it did, what it was refused, and what it cost — with timestamps and a link back to each artefact it touched.

Never as raw chain-of-thought — it is not a log, it is unverified narration, and showing it invites the user to trust reasoning nobody checked. Log tool calls and effects, which are facts. Never omit the failed and blocked steps: a trace that only records successes is marketing.

The trace is a semantic list, newest-first, readable without expanding. Blocked steps state the rule that blocked them. Every entry is addressable, so a support conversation can point at a line rather than describe it.

On the empty state, and as follow-ups after an answer. Derive them from real capability and real user context — “Where is order #4821?” beats “Tell me a joke” on a retail app, because one is what the surface is for.

Never suggest something the system cannot do — the user tries it, it fails, and now every suggestion is suspect. Never make them the only path (the box must still take free text). Never use them to upsell: a “starter” that opens a paywall is an ad wearing a helpful hat.

Real buttons in a list, reachable by keyboard, each with a full accessible name (not truncated). Selecting one puts the text in the composer — editable, not sent — so the user keeps authorship.

On every generated answer. Offer a fast signal (helpful / not) and a real correction path — the user usually knows the right answer and is willing to type it if you make it worth two seconds.

Never let the thumbs be the only route for harm — harmful, unsafe, or defamatory output needs a Report path with a human at the end, not an aggregate metric. Never say “Thanks, this helps us improve” if it does not. Never treat the correction as training data without saying so.

Buttons are toggles with aria-pressed and unique names (“Mark this answer unhelpful”, not “thumbs down”). Submitting is confirmed via role="status". The correction is applied to the conversation immediately, so it is worth the effort now, not hypothetically in the next model.

Whenever the system carries anything across sessions. Every remembered item is a discrete, human-readable row — what it learned, when, and from which conversation — with a delete on the row itself.

Never store an inference the user never stated as if it were a fact they told you (“has children” inferred from a search is a guess, and it will be wrong about someone in a way that hurts). Never remember special-category data by default. Never make deletion “forget in future answers” while the row stays on your servers.

Memory is a list, not a paragraph. Deletion is immediate and confirmed via role="status". A global off switch exists and is honoured. New memories are announced when written, not discovered later in an answer.

Wherever user content can feed personalisation, training, or human review. Split the switches, because they are separate decisions with separate beneficiaries — and state the consequence of each in the row itself.

Never bundle training consent into the terms of service and call it a choice. Never default training on for minors. Never pre-tick. Never make opting out of training silently degrade an unrelated feature — that is a penalty dressed as a consequence, and consent obtained under it is not freely given.

Switches are symmetrical: on and off are the same number of taps, the same visual weight, no “are you sure you want to lose out?” interstitial. Each row states what changes. Changes take effect immediately and are confirmed.

When a query has a synthesisable answer across sources the user would otherwise open one by one. The summary sits above the results, not instead of them, and each claim links to the source that produced it.

Never for a query where being wrong is expensive (dosage, legal deadlines, financial figures) — show the source, not a paraphrase of it. Never summarise a source you are also burying. Never present a summary with no route to what it summarised: that is not search, it is a wall.

The summary is labelled AI-generated before it is read, is skippable by a screen-reader user in one keystroke (it is a landmark, not an unnamed div), and never occupies the entire first viewport on mobile — the results must be visible without scrolling past an answer the user did not ask for.

Regulated advice, safety-critical questions, disputes, distress, and anything the system has been instructed not to do. Say that it won't, say why in one plain sentence, and hand over to a path that actually resolves it.

Never refuse into a void — a refusal with no route is worse than an unhelpful answer, because the user now has neither. Never moralise. Never refuse a legitimate question because it merely resembles a forbidden one, and never make the user re-explain everything to the human you finally hand them to.

The escalation control is a real button with a real destination and a stated response time. Context transfers with the user — the human sees the conversation. If the topic is distress, the route to a person is offered immediately and is not buried under a policy paragraph.

Hands-busy, eyes-busy, or accessibility-first contexts. The mic state must be unambiguous and continuously visible — listening, thinking, speaking — and barge-in must work: the user can interrupt mid-sentence and the agent stops instantly.

Never hot-mic without an unmistakable indicator. Never keep a recording the user wasn't told about — in two-party-consent jurisdictions that is not a UX choice, it is a legal one. Never make voice the only channel: a person who cannot speak, or cannot be overheard, must have the same product.

A live transcript runs alongside the audio — deaf and hard-of-hearing users get the same product, and everyone else gets a record. State changes are announced. A visible Stop is always present, and the agent identifies itself as an AI at the start of the call, out loud.

Wherever an agent can touch user data or external tools. One row per grant, each stating its scope in operational terms — "read your calendar", "draft but never send" — with the narrowest scope as the offered default.

Never a single master toggle that bundles read, write, and spend. Never expand a grant silently in an update — new capability means a new ask. Payments and sends are never part of any bundle; they are always their own explicit grant.

Each grant is a labelled switch announcing scope and state; revoking takes effect immediately and is confirmed. Every grant change is written to the activity trace — permissions and audit are one system, not two.

Any agent task longer than a few seconds: research, multi-step bookings, batch edits. The user leaves, the task continues, completion notifies through the channel the user already approved.

Never run irreversible steps while unattended — those park the task in "needs you" until the gate is signed. Never show a spinner with no cancel: a task you can't stop isn't yours, you're its.

State changes announce politely; cancel is instant and keeps partial results; "needs you" deep-links to the exact gate. Estimated time is a range, honestly widened when unknown.

When modes differ in ways the user can feel: speed, depth, cost. Describe each in outcome language ("answers in seconds, may miss nuance") and show the price difference exactly where the choice is made.

Don't market version numbers to people who can't evaluate them — "v5-turbo-max" is noise wearing a spec. Don't default to the most expensive mode, and never switch modes silently mid-conversation to save cost (see Usage Meter: degradation is disclosed).

A radio group with outcome-labelled options; the active mode is visible in the composer at all times, not buried in settings. Changing modes announces and applies to the next turn, stated explicitly.

Completions in composers, reply suggestions, edit proposals. Ghost text renders in the suggestion style; Tab or a button accepts, Esc or typing through dismisses — both directions keyboard-first.

Never auto-commit a suggestion on blur, send, or timeout — an unaccepted suggestion that ships is the system putting words in the user's mouth. No suggestions in password, legal-name, or payment fields, ever.

The suggestion is distinguished by more than color — style plus an announced prefix ("Suggestion:") so screen-reader users hear the boundary sighted users see (WCAG 1.4.1). Accept and dismiss both have visible button equivalents on touch.

Any surface where an agent acts on the user's behalf in real time. A persistent banner states who's driving; take-over is one tap and instant; the agent announces intent ("filling shipping address") as it works.

Never let the agent keep driving on a screen the user has started touching — human input always wins the wheel. No invisible sessions: an agent acting with no banner is indistinguishable from a compromise.

Pause/take-over is keyboard-reachable at all times and works mid-action. On resume, the user gets a delta recap — what changed while the agent drove — before anything else happens.

Anywhere AI usage is limited or billed: credits, daily message caps, minutes. Visible from the surface that spends it, not three screens away — the cost of an action is part of the action.

Never let a user discover the cap by hitting it mid-task. Never silently degrade to a cheaper model at the limit — if quality drops at the cap, the meter says so where the choice is made (see Mode Picker).

The meter is a labelled progressbar with numbers, not just a bar; crossing 80% announces once. Reset timing is a date ("resets Aug 1"), never "soon". Paid top-ups state price before the tap.

Any generation the user will keep, edit, or share. The card carries version history (regenerate is a new version, not an overwrite), an openable provenance panel, and export that embeds the credential.

Never overwrite v1 because the user asked for a tweak — regret is a workflow, not an edge case. Never strip the provenance on export to make the output look hand-made; that's the disclosure rule inverted.

Versions are a labelled radio row; switching announces. Provenance (model, prompt, edits) is a disclosure panel, not a tooltip. The AI-made mark meets contrast on any artwork via scrim.

First run of any AI surface, and permanently reachable from its header. Capabilities in user outcomes, limits in plain sentences, and the data line links straight to the grants screen.

No "magic" framing, no ∞ sparkles promising everything — capability overclaim is an FTC deception issue now, not just a UX smell. Don't bury the limits below the fold of an unscrollable card.

Can and can't lists are real lists with icon + text (never icon-only); the card is dismissible and revisitable; the data line is one sentence with a working link, not a policy PDF.

The top of any profile: avatar, display name + handle, verified state, a two-line bio, three stats maximum, and the follow/message pair. Stats are tappable — a count you can't inspect is a boast.

Don't stack six stats — followers, following, and one domain number (posts, reviews, runs) is the ceiling. Never hide the handle in favor of display name only; the handle is the verifiable identity.

The header reads as one landmark: name is the page's h1, stats are labelled links ("1,204 followers"), and the follow button announces its state change. Bio links are real links.

Any messaging surface. Rows: avatar + presence, name, one truncated preview line, timestamp, unread count. A Requests folder holds non-connections — consent applies to attention too.

No promotional "conversations" from the platform injected into the inbox — a brand that fakes being your friend burns the surface for everyone. Muted threads never bubble to the top on new messages.

Unread is triple-encoded (dot + bold + count in the accessible name). Swipe actions (mute, archive) all exist in the long-press/overflow menu too — gestures are shortcuts, never the only door.

Quick opinion capture in feeds and stories, 2–4 options, with a visible close time. Results render as labelled bars with percentages and the total count — your choice stays marked.

Results are hidden until you vote (or the poll closes) — pre-voting visibility is a conformity machine. Never for consequential decisions wearing casual clothes; a poll is not consent, feedback, or a survey.

Options are a radio group before voting and a results list after; the flip announces ("You voted Trail. Trail 64%, Road 36%, 2,140 votes"). Bars pair width with printed percentages — never width alone.

Composer autocomplete triggers on @ and # with a ranked shortlist (people you know first). Rendered mentions and tags are real links with distinct styling that survives grayscale.

Mentioning is not consent to be dragged into anything — mass-mention spam is rate-limited and mentions from strangers are a notification setting, not a right. Never linkify inside code or quoted text.

The autocomplete is an ARIA combobox (arrow keys, Enter, Esc); inserted entities are single tokens — one backspace removes the whole mention. Mentioned users can untag themselves.