Blocks for real pages

Split hero: badge, word-by-word headline, two calls to action and proof points on the left, a live product summary card on the right, over an animated grid.

Centered hero for developer tools: headline, two actions, package-manager install tabs and a terminal window with a light beam tracing its border.

Hero for AI products: a real prompt input on the left, and on the right a mock answer with a reasoning panel, a tool call and a streaming reply.

Split hero with a live pill, headline, two actions and headline stats beside a large draggable WebGL globe marking your regions.

Centered hero for a Mac app: shiny highlighted headline, download button and requirements, over a laptop whose lid opens into view on a live app window.

Centered hero over a slowly drifting colour mesh, with gradient headline words and product cards that bob and follow the pointer. Cards stack below the buttons on phones.

Centered hero with a browser frame that leans back and settles flat as you scroll. Ships a sample dashboard drawn with theme tokens; swap in a screenshot or your own UI.

Centered hero with an announcement pill, gradient headline, social proof and a product screenshot in a glowing frame under a slow aurora.

Quote-led hero: one big customer quote at a time with a measurable result, avatar tabs, arrow-key navigation and a pause button for automatic rotation.

Headline beside two rings of integration icons orbiting your logo, one ring turning each way. Static under reduced motion, with a hidden list of tool names for screen readers.

Download hero that picks the visitor's operating system after load, makes that build the big button, lists the other platforms, offers a copyable package-manager command and shows your app window.

Tabbed code editor (Node, Python, cURL) with token colours from your chart tokens and a Run button that streams the response. Keyboard-navigable tabs, left-to-right code in right-to-left pages.

Always-dark event hero: giant event name, date and place, a live countdown, ticket progress, speaker avatars and two actions over a slow gradient field.

Phone frame with an app screen, three floating notification cards that bob gently, store buttons and a star rating. Pass a screenshot or your own element for the screen.

Waitlist hero with a validated email form, a live count of people waiting and, after joining, the visitor's place in line with a copyable invite link to move up.

Typographic studio hero: enormous headline with a rotating gradient word, a clean intro row and a high-contrast ticker strip of services across the bottom.

Centered headline above an opening laptop with a phone overlapping its corner. Pass desktop and mobile screenshots or your own elements.

A slider-driven return-on-investment card beside the pitch: choose team size and see yearly savings, hours, value, cost and return multiple, formatted with a fixed locale.

Split hero with a bento grid of working widgets: a ticking revenue figure, toggles, a goal ring and status tiles that sell the product before the visitor scrolls.

Dark hero where the pointer is a flashlight: a coloured grid and a hidden giant word appear only inside the light. Touch devices get a slowly drifting light; reduced motion rests it in the centre.

Dark-grid hero with a working command palette: type to filter, arrow keys to move, Enter to choose. Shows keyboard-first products at their best.

Centered newsletter or waitlist hero: a pill email form with validation, loading, error and success states, and an infinite customer logo marquee below.

Full-bleed dark hero with a large headline in the lower left and a film card that opens the video in a dialog. A slow gradient shows when you have no backdrop picture.

Dark cinematic hero: a perspective grid floor sliding toward a striped sunset, oversized type with a sunset gradient and a row of hard numbers.

A segmented switch changes the headline, bullet points, call to action and picture for each audience, so one page speaks to teams, developers and founders.

Headline beside a tilted wall of screenshots drifting in three columns, two up and one down. Pauses on hover and focus, stills under reduced motion.

A huge counting number as the headline, supporting stats with trend lines beside it. Numbers are formatted with a fixed locale so server and browser agree.

Bento feature grid of spotlight cards in two sizes, with an animated stat and keyboard-shortcut hints mixed in for texture.

Six features in a hairline grid of numbered cells with an icon, title and one sentence each. Pass your own features array.

Integrations section: heading, description and checked benefits beside a hub diagram where animated beams flow between your product and six tools.

Bento feature grid for a desktop app: menu bar companion, keyboard shortcuts, privacy, iCloud sync and notifications, each with a small live visual.

Numbered steps on the left; as each scrolls into view, a sticky panel on the right crossfades to its picture. On phones every step carries its own picture.

Pill tabs with a sliding indicator switch between feature panels: heading, checked points and link beside a product picture. Tabs scroll sideways on phones.

A feature picker for menu bar apps: choose a feature and a miniature desktop shows the app's panel hanging from its menu bar icon, with quick capture, clipboard history, a focus timer and shortcuts drawn from tokens.

Drag or arrow-key a divider across two pictures to show a transformation. Built-in art shows without images; pass your own before and after.

A shortcut list that listens to the real keyboard: press the combination and the keys light up and the result appears. Adapts symbols to Mac or Windows.

Pick a feature on the left and a dark terminal types the matching commands on the right. Replay on demand; prints everything at once under reduced motion.

A vertical timeline of releases with version, date and typed changes (new, improved, fixed). Entries ease in as you scroll.

Cards with a slow travelling glow on the edge. Extra detail opens on hover or keyboard focus without moving the layout; always open under reduced motion.

Three rows of capability chips drifting in opposite directions (planning, integrations, enterprise). Pauses on hover and focus; still under reduced motion.

Tabs for Web, Mobile and Desktop swap the copy and screenshot. Proper tablist semantics, arrow/Home/End keys, right-to-left aware.

A row of feature cards that snaps as you scroll or use the arrows. The track is focusable and keyboard scrollable; arrows disable at the ends and flip in right-to-left.

The heading stays on the left while big cards slide up and stack on top of each other as you scroll. Pure CSS sticky, no scroll listeners.

A mosaic of picture tiles with titles over a gradient, some spanning two columns. Tiles can link; the whole tile is the hit target.

A calm panel of eight things every plan includes, with icons and a footnote that points to higher plans. Reduces pricing anxiety.

Six feature cards share one glow that follows the pointer across the whole grid, lighting borders and backgrounds where it passes. Switched off on touch.

Pick a skill (summarise, find, write, translate) and watch a sample question and a streaming answer. Honest about what the assistant can do.

A vertical list of steps, one open at a time, with a progress line that fills and moves to the next step. The picture crossfades. Pauses on hover and focus; has a pause control.

A real comparison table with a glowing column for your product. Ticks, crosses and partials carry hidden text; text cells work too. Rows highlight on hover.

Three cards with a counting headline number and a small animated chart each: bars, a drawing line or a progress ring. Charts draw once when scrolled into view.

Category chips and a search box filter a grid of capabilities with an animated layout and a live count. Shows breadth without a wall of text.

Real switches change a security score ring and add lines to an activity log. Teaches by letting the visitor try the controls.

Steps along a line that draws itself as the section scrolls into view; horizontal on wide screens and vertical on narrow ones.

Large alternating rows, each with a tag, headline, points, a customer quote and a picture slot. The classic long feature page, done carefully.

A public integrations directory: search that highlights matches, category filters with counts, cards showing what is connected, and a side sheet with what it does and a Connect button that handles waiting and failure.

Four large numbers in a hairline grid that count up on scroll, each with a change badge, a small trend line and one line of context. Heading and copy sit above.

Four counting numbers with a change note and a sparkline each, set in a single bordered grid.

A large uptime figure computed from ninety daily bars. Move through the days with arrow keys to read what happened on each.

Slide a team size and watch hours saved, money saved and return update. Assumptions are editable props and printed under the result.

A dotted world map beside regions with bars. Choose a region to highlight it and swap the big number.

Paired bars for each metric that grow when scrolled into view, with a how-many-times badge and a visible source line.

Customer logos as an endlessly scrolling row with faded edges, or a static grid with hairline dividers. Wordmarks brighten on hover.

A count of customers that ticks up, over two rows of logos moving in opposite directions with soft edges.

Eight logos in a bordered grid beside the heading. Hover or focus a logo to lift it and see what that customer achieved.

Industry tabs filter a grid of logos with animated layout changes, arrow-key tabs and a polite count.

Two rings of logos slowly circling a central statement and button. Logos stay upright and everything is still under reduced motion.

A wall of testimonial cards in three columns that scroll at different speeds in opposite directions, pausing on hover, with a plain list on phones.

One large quote at a time with the person, role and a highlighted result. A row of avatars switches quotes with arrow keys; optional gentle autoplay that pauses on hover and focus.

A masonry wall of quotes with topic chips, star ratings, one highlighted quote and a polite live count of what is shown.

Two rows of quote cards that scroll in opposite directions, with a visible pause button, pause on hover and focus, and a static scrollable row under reduced motion.

A single large quote with a result chip, switched by avatar tabs that follow the tabs pattern with arrow keys, Home and End.

Three customer cards led by a counting number, with the quote underneath and a link to the full story.

Large quotes in a scroll-snap row with previous and next buttons, a progress indicator, keyboard keys and a polite position announcement.

An average and rating bars you can click to filter, a sort menu and review cards with verified badges and a Helpful toggle.

Customer panels that open like an accordion on phones and widen side by side on desktop, each with a headline, quote and two numbers.

Customer reviews: an average with a bar for each star count that also filters, sorting, a verified-only switch, review cards with Read more, helpful votes that count at once and business replies. All figures are worked out from the reviews.

Customer stories for a marketing page: one featured story with its quote and results counting up, a grid of the others with a headline number each, an industry filter, and pictures drawn from each company's name.

A grid of team portraits with name, role, location and links. On hover or keyboard focus a bio slides up over the photo; phones show it inline. Initial tiles when there is no photo.

People cards with generated cover colours and avatars, team filters with counts, expandable bios with links and a hiring card.

A product-versus-alternatives table where your column is lifted into its own card, with yes, partly, no and text values and a row of headline results. Phones switch between alternatives.

A sticky-header comparison table with a highlighted column for you, group filters, a differences-only switch and computed feature counts.

Two pricing cards side by side with included and excluded features, a highlighted plan with a border beam and badge, and small print.

Three plan cards with a monthly/yearly switch. Prices roll to the new value, a savings badge and billed-total line update, and the middle plan is lifted with a border beam.

A feature-by-feature comparison table with a sticky plan header, collapsible groups and a highlighted column. On phones it becomes a plan switcher with one clean list.

A pricing section for Mac apps that sell both ways: a Buy once / Subscribe switch, license size cards and a cumulative-cost chart that computes the break-even year.

Three plans with a Monthly/Yearly switch where prices roll to the new number, a computed saving badge and a glowing featured plan.

Plan cards over a feature table where each row has an info button that opens a plain-language explanation. Pricing that teaches.

Good, better, best: the middle plan is drawn dark and raised above its neighbours with a badge, so the choice is obvious without shouting.

Choose a base plan, tick optional extras and watch an order summary and total update, with a yearly discount switch. A real quote builder.

Radio cards for credit packs with bonus credits and the real price per credit, an order summary, an auto top-up switch and a savings figure computed against the smallest pack.

Tabs for Individuals, Teams and Students and nonprofits swap in the plans that fit each, with arrow-key tabs and an eligibility note.

A timeline of what happens during the trial (today, a reminder, decision day) beside the price you pay afterwards. Removes fear of the unknown.

A slider chooses the number of seats; every seat moves to the tier price for that team size. Shows the tier table with your tier highlighted, the total and the saving.

Sliders for requests, storage and people produce a line-by-line bill estimate: base plan plus what you use beyond the included amounts.

A real comparison table with a sticky header, collapsible feature groups and, on small screens, a switch that shows one plan at a time.

A single plan with every feature included. The visitor picks monthly, yearly or longer terms and the price rolls; the full inclusion list sits beside it.

Preset amounts plus a custom field with validation, one-time or monthly, and a line that says what the chosen amount makes possible.

Three questions, one at a time, then a recommended plan with reasons while the matching plan card lights up. Fully replaceable scoring.

A currency switch shows each plan's real price in that currency, formatted for its locale. You enter every price yourself; nothing is converted on the fly.

Two self-serve plans beside a dark enterprise panel with a contact form: validation, loading, error and success states, all accessible.

A pricing estimator: sliders for seats, requests and storage, monthly or yearly, add-ons, and a dark summary that picks the cheapest plan that fits, rolls the total as you move, itemizes the sum and offers Talk to us beyond the plans.

An event page with its agenda: dates, venue and a countdown, the schedule by day with a filter per track, a star on each session to build your own schedule, a warning for overlaps, and a calendar file download.

A seat map for a cinema or venue: rows with walkways, price tiers, taken and wheelchair seats marked in words, a limit and running total, a best-seats-together helper, keyboard arrows, and a hold that survives a lost seat.

Frequently asked questions in an accessible accordion, with the heading and a help line in a side column on desktop.

Frequently asked questions with live search that highlights matches, topic filters with counts, a friendly empty state and a support prompt. Topics scroll sideways on phones.

A search box that filters questions and highlights the match, topic chips and an accordion. A friendly empty state links to support.

An accordion where each answer asks Was this helpful, next to a sticky support card with chat and email.

A closing call-to-action panel: large heading, one line of reassurance and two buttons, over a softly lit animated grid.

A waitlist or newsletter signup over rising light beams: heading, email field with validation, loading, success and error states.

A closing call-to-action for developer products: heading, two buttons and a copyable install command with package-manager tabs, over a soft dotted glow.

A calm card with a validated email form, busy and error states, a success message that takes focus and a row of avatars with a reader count.

Heading, two buttons, reassurances and a rating beside a picture slot (generated art by default).

A dark panel with a light that follows the pointer, a faint grid, two buttons and reassurances. Touch and keyboard users get a steady glow.

A live countdown to a launch date, a validated waiting-list form and a count of people already waiting. Shows a launched message afterwards.

A launch waitlist that grows by referral: an email form with a count of who is waiting, then the person's place in line, their own share link to copy, and a ladder of rewards that fills as friends join.

An editorial newsletter signup: topic chips, an email field with validation, loading, error and success states, avatar social proof, and a tilted sample issue card beside it.

Choose topics and how often, add an email, subscribe. A tilted sample issue sits beside the form, and a confirmation repeats the choices.

Sticky site header with brand, main links, sign-in and primary action, and an accessible mobile menu that closes on Escape or link tap.

Sticky header with brand, a mega menu of grouped links and a featured card, sign-in and primary actions. On phones the same links open in a slide-in sheet with accordions.

A top bar with menus that open full-width panels of grouped links and a feature card, with hover, click and arrow-key support, and a disclosure menu on phones.

A dismissible announcement bar above a floating pill header that shrinks as you scroll, with a moving highlight behind the hovered link and a phone menu.

Site footer with brand and tagline, an optional newsletter form, up to four link columns and a legal bar.

Brand, tagline and a live status pill beside three link columns, a legal bar with icon links, and an oversized wordmark that sinks into a fading gradient along the bottom.

Link columns, a short email signup, social and contact icons, legal links, a language picker, a live status pill and a large faded wordmark.

A company story page: a large two-tone statement and a wide picture, numbers that count up, the story beside a pull quote, value cards that light up under the pointer, a milestone timeline and a closing call to action.

An organization chart drawn as a real tree: connected person cards, a count toggle on every team, search that opens the path to a person, a details panel with manager and direct reports, and the standard tree keys.

A people directory: search across names, roles, teams and cities, department chips with live counts, a location filter, a grid and a compact list, each person with availability and their local time right now.

A locations finder on a dotted world map: pressable pins, a searchable list, filters by type, and a card for the chosen place with address, contacts, directions and whether it is open now in its own time zone.

A course page: a hero with a progress ring and a Continue button for the next lesson, expandable modules with their own progress, lessons you can open or mark done, locked ones with the reason, and a certificate that unlocks at the end.

A recipe you can cook from: change how many it serves and every amount scales the way a cook reads it, switch metric and US units, tick off ingredients and steps, and start a timer on the steps that need waiting.

A trip itinerary: destination, dates and a countdown, then day by day what is booked and when with copyable booking codes and unbooked items marked in words, a cost breakdown, per-person total, type filters and a packing list with progress.

A public status page: an overall banner worked out from the data, each service with a 90-day history you scrub by pointer or arrow keys, live incidents as a timeline of updates, two weeks of past incidents and a subscribe box.

A blog index with a large featured post, topic filter chips and a three-column grid. Posts without a photo get a generated cover drawn from theme tokens, in five compositions.

A long-form article page: centered title and author row, cover, comfortable prose with pull quote and code, sticky table of contents with scroll spy, reading progress bar, author card and related posts.

A featured post, category chips, search and a grid of posts with a Load more button. A polite count says how many posts match.

A long-form article with a reading progress bar, a sticky contents list that follows your place, copy and share buttons, pull quotes and an author box.

A large lead story, two medium stories and four numbered headlines in a bordered strip.

A calm list of posts grouped by year with date, category, reading time, a small cover and numbered pagination that moves focus to the heading.

A writer's header with avatar, bio, links and three numbers, followed by their posts in Latest and Popular order.

Topic cards that open to list their posts, plus a tag cloud whose size follows how often each tag is used.

Building blocks for developer writing: an install command with package manager tabs, a copyable code block with line numbers, three kinds of callout and footnotes that link both ways.

A comment form with validation and a character count, replies one level deep, like buttons and sorting by newest, oldest or most liked.

A series panel with a progress bar, a list of parts, a Mark as read toggle and previous and next cards.

A release-notes page: a sticky version and date beside each release card, optional banner art for headline releases, typed changes with filters and counts, and a show-older button.

Releases on a timeline with filters for New, Improved, Fixed and Breaking changes, expand and collapse, and a copyable link to each release.

Planned, In progress and Shipped columns with area filters and vote buttons that re-rank cards.

A version picker that swaps a headline and three highlight cards with pictures and learn-more links.

Open roles grouped by team with team filter chips, live search and an empty state, then a hairline grid of perks. Every role row is one large link with location and type.

Open roles with team filters and counts, a remote switch and rows that open to show the summary, requirements and an Apply link.

A photo gallery: filter chips with counts, a gap-free masonry of tiles that fade in, and a lightbox with caption, counter, thumbnail strip, arrow-key and swipe navigation, and a link to the original.

A trust center: certification cards with dates, the security controls behind them, documents where audit reports ask for a request under a confidentiality agreement, a subprocessor table with change alerts, and a disclosure contact.

A contact section with a validated form (name, email, topic, message with counter, consent), loading, error and thank-you states, beside tiles for email, chat, phone and office with a response-time pill.

A message form with topic chips, validation and a character count beside email, phone, hours and offices, with a clear success state.

A month grid with arrow-key navigation, available times, and a short form, ending in a clear confirmation. Dates come from a today prop.

A help center home: a hero search that suggests articles as you type with highlighted matches, topic cards that light up under the pointer, popular articles, and ways to reach a person with who is online.

A search results page: a large search box, the type of result as a filter with live counts, a date filter and sort, results with a trail and highlighted words, and a no-results page that suggests what to try.

An error page with giant fading numerals whose zero is a ring with an orbiting moon, plain-language copy per status, home and back buttons, site search and helpful links.

One block for 404, 500, 403 and offline: a big code, a plain explanation, page search for 404, a copyable reference for 500, and sensible buttons.

The whole password-recovery flow in one card: request a link, check-your-email with a resend countdown, choose a new password with confirmation and strength, and a success screen. Focus moves to each new heading.

Centered sign-in card: SSO and email-link buttons, an email and password form with remember me, a loading submit and an inline error.

A split-screen sign-in: SSO and passkey buttons, validated email and password with show/hide, remember me and error state on one side, a soft colour mesh with a customer quote on the other.

A signup page: validated name, work email and password with a live strength guide, terms checkbox, SSO option and a check-your-inbox confirmation, beside a benefits list with social proof.

A code-entry screen: masked email, six slots that accept typing and pasting, automatic submit on the last digit, shake and alert on a wrong code, a resend countdown and an animated success state.

A calm sign-in card with provider buttons, email and password with a show button, remember me, field errors that take focus and a server error banner.

Name, email and a password with a four-step strength meter and a live checklist, plus a required terms checkbox and clear errors.

Six digit boxes backed by one real input, so paste and autofill work. Checks on the last digit, shows a wrong-code state and offers a resend with a countdown.

Ask for an email and send a sign-in link, then a check-your-inbox step with resend and a way back. An optional passkey button is disabled where the browser cannot use it.

Four steps in one block: ask for an email, a check-your-email confirmation that does not reveal whether an account exists, a new password with strength and confirmation, and a done state.

Work email first. If the domain uses single sign-on, offer that; otherwise ask for a password. A dark side panel carries reasons and a quote.

The page an invitation email opens: workspace tile, who invited you, your role and what it allows, the account being used, accept and decline, with welcome, declined and expired states.

A four-step setup wizard with a progress rail: name and address a workspace (auto-filled), pick goals as cards, invite teammates as removable chips, review, then a finish screen. Slides between steps.

Progress across four steps: about you, workspace (with an address made from its name), invitations and a review. Each step validates and moves focus.

Six cards to choose up to three goals, announced as you pick, with Skip and Continue.

A mock app with a dimmed backdrop and a moving highlight, and a tour card with Next, Back, Close, keyboard arrows and Escape. Restart when it ends.

Type or paste emails into one field that turns them into removable chips, flags bad addresses in words, pick a role and send. Seats left are counted.

A guided product tour: a spotlight lifts one part of your interface out of a dimmed page while a card says what it is for, with Next, Back, arrow keys, Escape, a progress bar, focus that follows the step, and a restart.

A public profile: cover and avatar art drawn from the handle, a verified badge, Follow that updates the count and undoes itself on failure, stats that count up, About, pointer-lit project cards and an Activity tab.

A product frame: workspace switcher, grouped navigation with badges that collapses to an icon rail, top bar with search, notifications and a ⌘K command menu, and a scrolling page slot. A drawer on phones.

A narrow icon rail opens a second panel of pages, with a collapsible panel, breadcrumbs and a scrolling page area. Becomes a top bar on phones.

A product top bar with navigation, search with a shortcut hint, a notifications menu and an account menu, then a page header with arrow-key tabs.

A sales dashboard page: a date-range switch that recomputes everything, four KPI cards with change and trend, a revenue area chart against the previous period, revenue by channel and a recent-orders table.

A web analytics page: a live-now pill, date range and compare switch, a visitors line chart against the previous period, traffic sources as a donut, devices, top countries and a top-pages table.

KPI tiles with trend lines, a revenue chart against the previous period, a quarterly goal ring that shows whether you are ahead of pace, best sellers and channel shares.

A semicircle quota gauge with a forecast arc, pipeline value by stage and the deals closing soon with their chance of closing.

Tickets opened and solved per day, answered-on-time against the target, customer satisfaction and a ranked team table.

A plain-language start-of-day page: four headline numbers each with the reason it moved, a good-news or worth-a-look cue, and a watchlist of drifting metrics.

Search, status filters, sortable columns, select-all with a partial state, a bulk action bar, pagination and a details panel for the open row.

A segmented usage bar with a text alternative, a drop zone that adds files (drag or choose), recent files by type and folders.

A progress ring, the next best action and expandable steps that can be ticked off. Fires onComplete once when everything is done.

A filterable feed grouped by day with unread markers and Mark all read, beside a list of who is online and what they are doing.

MRR movements as a stacked diverging bar (new and expansion up, contraction and churn down), retention and churn tiles, plan mix donut and a shaded cohort retention table.

Step bars with the share that continues and how many leave, a segment switch that recomputes everything, the biggest drop flagged and a plain-language estimate of what fixing it is worth.

A line chart that updates every second with a limit line, latency and error tiles and a service status list. Has a pause button; starts paused when interval is 0.

Income against expenses by month, net cash flow, runway in months from the average burn, and a list of upcoming bills with autopay status.

An orders-by-hour heatmap (keyboard navigable, with the busiest slot called out), sales by category with direct value labels, and the latest orders.

A sortable campaign table with return on spend, inline bars, trend lines and a flag for anything below your minimum return.

Sprint burndown against the ideal line with an honest 'will it finish' sentence, open risks by severity, and project cards with progress and health.

Machines sorted by severity with CPU trend and memory meters, a filter for what needs attention, and an incident timeline.

An analytics overview: a range picker, four figures with their change from the period before, a stacked area chart of new and returning visitors, top pages and a sources donut, each with a table view and CSV download.

A revenue report: monthly recurring revenue, annual run rate, what was added last month and the largest plan, then revenue by plan as stacked columns and net revenue retention as a line against the 100% mark.

Small multiples: one small area chart per metric with the latest value, its change over the period in words and an arrow, which direction is good news, and a written summary for screen readers.

A quarterly scorecard: goals met and average progress, concentric rings for the goals, a radar of the team against its targets and a ranked bar chart, with a table view and CSV download on every chart.

A conversion funnel: bars sized against the first step, joined by connectors that narrow as people drop away, with share kept and people lost at each step, the biggest leak written out, a group switch and a panel for any chosen step.

A cohort retention table as a heatmap: rows of people who started together, columns of later periods, each cell tinted by the share still active, with headline numbers, percent or people, a keyboard grid and a size-weighted average row.

A/B test results with the statistics done: each variant's rate with its 95% confidence interval on one shared axis, lift, chance to beat the control, and a plain verdict: a winner, no clear difference, or more traffic needed.

An account settings page: profile with username availability, sign-in details with a change-password dialog, language, time zone and appearance, a type-to-confirm delete, and a sticky save bar that appears only when something changed.

Notification settings that save as you go: digest frequency as radio cards, a grid of switches for each event and channel (cards on phones), and quiet hours with times and weekdays.

Team management: a seats meter, an invite form with role, role filters and search, a member list with role selects, pending invitations and a confirm-before-remove dialog. Stacks cleanly on phones.

An integrations page: search, category filters, connected ones first, Connect with progress and the reason when it fails, Manage, Disconnect after a confirmation, coming-soon entries and a request link.

An audit log of who changed what, by people, AI agents, API keys and the system: grouped by day, filtered by who, area and time, searched, each event opening to its IP, a before-and-after diff and raw details, exported as CSV.

A data and privacy page: request an export in JSON or CSV and watch it prepare, set how long messages are kept, and delete the account behind a typed confirmation with a grace period you can cancel.

A table of events by channel with switches, turn-all-on/off per channel, a digest choice, quiet hours and a save bar that appears when something changed.

Turn on two-step sign-in with a code check, sign out other devices with a confirmation, and create, reveal, copy and revoke API tokens.

A billing page: current plan and monthly cost, usage meters that turn amber near the limit, the card on file with an update dialog (formatted, validated), the billing contact and an invoice list with status and downloads.

A change-plan flow: billing interval, plan cards as radios, a seat stepper that respects the current team, and a sticky summary that works out the prorated charge, the credit and what is due today.

Current plan with usage meters that turn to a warning near the limit, a banner naming what is close, a replaceable card and downloadable invoices with status.

An invoice you can read, print and pay: parties, dates and line items, totals worked out from the lines, a status from the dates (paid, due in N days, overdue by N days) and a Pay now that handles waiting and failure.

A working inbox: folders with an unread count, a searchable message list with stars and keyboard navigation, a reading pane with archive, delete, mark unread and reply, and a compose dialog. One pane at a time on phones.

A fast inbox: J and K move, E archives, S stars, # deletes, U marks unread and Z undoes. A status line announces every action and offers Undo.

One support ticket as an agent sees it: replies and private notes, a reply timer, a composer that switches between Reply and Internal note with canned replies, and a side panel for the customer, assignee, status and priority.

A notifications page grouped by day: unread marked by an accent, mentions and comments with excerpts, requests answered inline (Approve, Deny, Accept, Decline), keyboard triage and an Undo bar after archiving.

A team chat: channels and direct messages with unread counts and presence, messages grouped by person and day with a New divider, reactions, threads, @mentions that suggest people, and Retry when a message fails to send.

A threaded discussion: a composer where @ offers people, replies, emoji reactions that count and toggle, editing and deleting your own, resolving a thread, and a comment that appears at once and stays with Retry if it cannot be saved.

A project board: columns with counts, rich task cards (tags, priority, due date, comments, assignee), drag and drop with a drop indicator, keyboard pick-up and move with announcements, a Move-to menu, quick add and a person filter.

A board with lanes per person, work-in-progress limits per column, drag and drop and a Move menu on every card so it works without a mouse.

A tasks page: a progress ring and quick add, tasks grouped as overdue, today, upcoming and no date, a strike-through that draws itself, inline edit, reordering by button or Alt and arrow keys, shortcuts and Undo on delete.

A week calendar: a time grid with overlapping events placed side by side, an all-day row, a now line, a mini month and calendar toggles, event popovers and a new-event dialog. One day at a time on phones.

Rooms or people as rows, hours as columns, bookings as blocks and a line for now. Click or use the arrow keys on an empty time to hold an hour; release it again.

A weekly shift roster: a row per person and a column per day, shifts you set, change or mark as time off, hours per person with overtime and rest flags, a coverage row against what each day needs, weeks to page through and a publish step.

A project timeline: bars placed by real dates with a progress fill, milestones, dependency arrows, a today line, three zoom levels, a sticky task column, a details panel and a table of the same data for screen readers.

Objectives and key results for a period: progress worked out from start, current and target, a pace mark on each bar for where it should be today, on track, at risk or behind in words, overall progress, team filter and in-place updates.

A habit tracker: each habit with its streak (kept alive until today ends), best streak, this week against its goal, the last seven days to tick, twelve weeks as a grid, a ring for today, and ticks that go back if they fail.

A stock overview: stock value, lines low or out, units on the way, and every item with a bar against its reorder point, days of cover at today's pace, status in words, and an order form that suggests how many to buy.

A weekly timesheet: a row per project and a box per day, time typed the way people say it (1.5, 1:30, 90m), totals worked out as you type, daily bars that say when a day runs over, weeks to page through, and submit that locks the week.

An expense report you can finish: lines with category, amount and receipt, a total by category, rules checked as you go (receipt needed over a threshold, category limits), an add form, and Submit that lists what needs fixing.

A contact record for a sales team: the pipeline stage you can move, deal value, last contact and an overdue follow-up worked out from the day you pass, and a timeline of notes, calls, emails and meetings with a form to log the next.

A Markdown editor with live preview: a toolbar and shortcuts that wrap the selection, a preview built from safe elements, word count and reading time, and autosave that says Saved, Saving, Unsaved changes or Not saved with Retry.

A three-question feedback card: the 0 to 10 recommend question as big buttons, a follow-up that changes with the answer, an optional comment, a progress bar, Back that keeps answers, and a failed send that keeps what was typed.

A poll: pick one option or several, vote, and results appear with each share, the leader marked and your choice highlighted. Your vote counts at once and is taken back with the reason if it fails; change it until the poll closes.

A short quiz: one question at a time with progress, single or multiple answers, instant right or wrong with the reason, locked once checked, then a score against the pass mark with a review of every question and a retake.

An investment portfolio: total value and its change over a week, month or year, a line you scrub by pointer or arrow keys, an allocation ring, and sortable holdings with price, share, day change and a small trend line.

An upload manager: a drop area that reacts to dragging, validation that explains each rejection, and a list where every file has its own state (waiting, uploading with progress, finishing, done, or failed with a reason and retry).

A data import in four steps: choose a CSV, match its columns to your fields (found for you where names are alike), review which rows are ready and which have problems and why, then import with progress and a summary.

A developers page: a 14-day request chart with errors stacked, success rate and median time, API keys shown in full once and revoked behind a confirmation, and a request log with filter, responses and copy as curl.

A webhooks manager: endpoints with health from recent deliveries, signing secret and events, a delivery log with status codes and timing, payload and response per delivery with Send again, and an add dialog that validates.

An API explorer: a method, an address, headers and a JSON body, then the answer with its status in words, time and size and the body as a tree; a broken body is caught before sending, with history and Copy as cURL.

A feature flags manager: a switch per environment, a production rollout slider, flags fully on for months marked ready to remove, a confirmation before changing production, and failed saves undone with the reason.

An automation builder as a vertical flow: a trigger, then conditions, waits and actions you add, reorder and delete, each opening to its settings, and a test run that shows every step as done or where a condition stopped it.

A leaderboard: a podium with the leader raised, ranked rows with bars against the leader's score, movement written in words, a week, month and all-time switch, a search, and your own place highlighted and pinned.

A complete assistant screen: collapsible conversation sidebar, model picker, messages with reasoning and tool calls, streaming replies, copy and regenerate, and a prompt with attachments.

A chat that builds things: conversation list, streaming replies, suggestion chips and a side panel with Preview and Code tabs, version history, copy and download. The panel overlays the chat on narrow screens.

A conversation with tool-call chips, numbered sources, suggestions and a model picker. Documents the assistant writes open in a side panel with a plain-text view and copy.

One AI agent run as it happens: the task and status, the plan beside it, every note, tool call and approval request in order, approvals that pause the run, the result with copy, and a follow-up box.

An agent console: the conversation with each tool call as a step you can open to see what was asked and what came back, Stop while it works, Enter to send, and a clear Take over and Hand back so a person is never mistaken for the agent.

One inbox for every action AI agents are waiting on: requests with their risk, the full request beside the list, Approve and Deny with A and D, J and K to move, and approve all low-risk requests at once.

AI agent runs with status, time, tokens and cost, filtered and searched, and a trace waterfall for the selected run: model calls, tool calls and retrieval, each span with input, output and error.

A prompt playground that runs one prompt on two models side by side: system prompt, {{variables}} that become fields, Run with ⌘Enter, each answer with time, tokens and cost, ratings and Pick this one.

Evaluation results for a prompt or model change: a verdict that calls out regressions, each metric against the baseline with which way is better, cases filtered to regressions or improvements, and both answers side by side or as a diff.

What an AI assistant remembers about someone: a ring splitting memory by kind, a switch to pause it, each memory with its source and use count, edited in place, pinned or forgotten with undo, and Forget everything.

An agent builder: instructions and model, each tool set to off, ask first or allowed, the knowledge it may read, guardrails, and a live preview that changes with every setting. Publishing shows submitting, success and error.

A knowledge manager for an AI agent: a health bar across its sources, each source with sync progress or failure and a retry, a switch for whether the agent may use it, and a panel showing which passages come back for a question.

How much an AI agent may do alone: a plain-words autonomy level, spend caps per run and per day, a step limit and the tools it may use, with a warning for risky mixes and a save bar that holds edits until saved.

An audit log you can search: who did what to what, when and from where, filters with counts, failed attempts written out, rows that open to show exactly which values changed, show-more paging and an export of what the filter shows.

A periodic access review: each person's role and last use, Keep, Reduce or Remove with lower roles only, people idle for months flagged in words, a keep-everyone-active shortcut, progress, and a confirmation before anyone loses access.

An on-call rota for the week: who is on call now per layer, a grid of days by primary and secondary, days nobody covers called out in words, and a selected shift you can take or ask the person on it to swap.

The page for people fixing an incident: severity and status in words, the impact, who holds commander, comms and ops, a form that posts an update with its new status, updates newest first, and a Resolve button that asks first.

One run of a deploy pipeline: the commit, each stage as a step with its status written out and duration, logs one click away, an approval gate that says who can approve, and a failed stage that offers to run again from there.

The queues behind a product: jobs waiting, arrival and finish rates, the age of the oldest job, a queue that is filling faster than it drains called out in words, failed jobs with their errors to retry or discard, and a pause switch.

Service level objectives as cards: the goal, how it is going, error budget left in percent and minutes as a labelled meter, burn rate in words, a chart with the target drawn on it, risky ones listed first, and a filter by service.

The scheduled jobs of a product: each schedule in plain words beside its cron expression, an on and off switch, the last run written out, the next runs, and a Run now button that asks first.

Where the cloud bill goes: the total against last period and the budget in words, spend by service as a treemap, a waterfall of what changed since last period, and unusual costs with their cause to mark as looked at.

Service health by region: 30-day availability for every service in every region as a heat grid, each cell good, warning or problem in words and an icon, what is below the line listed, the last incident per cell and a team filter.

A runbook to follow under pressure: ordered steps with a tick each, the next step marked, commands to copy but never run for you, cautions read before the step, minutes left, and Finish only when every step is done.

How long until each resource runs out: usage against the limit as a meter, growth per day, the days of runway written as words, the soonest first, a button to ask for more, and a plain 'Not growing' for resources that are not.

An inventory of secrets that never shows a value: name, environment, owner, what reads it, when it was last read and how long since it changed, old ones called out in words, search, filters and Rotate behind a confirmation.

The alert rules of a monitoring setup: what each watches, severity, where it notifies, and firing, muted or fine in words, firing first, switch off, mute for an hour, four hours or a day, send a test, all undone with the reason if it fails.

The deploy history of a product: version, what changed, who shipped it and when, how it ended in words, one environment at a time, the live version marked, and a confirmed rollback to any earlier version that succeeded.

A clinic's day: a column per provider, a row per quarter hour, appointments at their real time and length with status written out, one button to move a patient on, and a privacy switch that shows initials only.

A kitchen display: a column per station with the oldest ticket first, items with their changes, allergies always spelled out, late and due-soon tickets written in words, a Bump button and a one-step Recall.

A law firm's matters: deadlines that cannot be missed first with overdue and due-soon in words, then each matter with client, lead and status, hours against the month's budget, search, a practice area filter and a show-closed switch.

A property page: a photo gallery with buttons, thumbnails and arrow keys, price and the facts that matter, description and features, and a viewing request form with times to choose from, field errors and a clear result.

A weekly class timetable people book from: classes grouped by day, places left written out, one button that does the right thing (book, join the waiting list, cancel, leave), a kind filter, and changes undone with the reason if they fail.

A repair work order: customer, item and reported fault, five steps with one button to advance, parts and labour with subtotal, tax and total, a line form, one-click customer messages, and the history so far.

A dispatch board for field work: waiting jobs with urgent ones first and named, a lane per technician with their jobs in time order, assignment by a labelled select instead of a drag, take-back, and changes undone with the reason.

A restaurant floor plan: tables where they stand, worded as free, seated, reserved or needs clearing, a waiting list, seat a party at a table that fits, clear or clean a table, all undone with the reason if it fails.

A teacher's gradebook: students down, assignments across, type a score and the weighted average and letter grade update, ungraded work is left out rather than counted as zero, failing students are marked in words, a bad score is refused.

A field inspection checklist: pass, fail or not applicable on each item with what to look for, a required note when something fails, progress through each section, and a submit that says exactly what is missing.

A fleet overview: each vehicle with where it is, status in words, fuel or charge, distance to the next service, and faults, filter by status, message the driver, book a service, all undone with the reason if it fails.

A booking page for a salon or clinic: choose services (time and price add up), a stylist or anyone, then a day and a time that stylist is free, a live summary, and a confirmation that says exactly what was booked.

A donation page for a charity: what each amount does, once or every month, which cause, an optional card-fee cover, anonymous giving, a progress bar to the goal, and a thank you that says exactly what was given.

A rental booking page: choose an item, the days and extras, see price, refundable deposit and pay-today, a clash with days already out named by date, and a reservation that says exactly what was booked.

An insurance claim tracker: each claim and its stage in words, a line of five stages that stops at the decision when a claim is declined, and the things still needed from the customer with a place to answer each.

A product grid with category, price and colour filters, sorting, a wishlist heart and a quick add button. A live count says how many products match.

A thank-you page with a copyable order number, a four-stage tracker, items, totals, address and payment summary.

Past orders with status filters and counts, search, expandable details, a track link and Buy again.

Choose up to three products and compare them in a table with a sticky first column, a differences-only switch and add buttons.

Height and weight sliders and a fit preference give a suggested size and highlight its row in a size chart. Your chart is a prop.

A countdown to the end of the sale, a copyable code, and deals with the percent off and a bar showing how much stock is claimed.

A scroll-snap row of products with previous and next buttons that disable at the edges, arrow-key paging and a quick add on each card.

A product page with a photo gallery, colour and size pickers built on real radio buttons, a quantity stepper, an add to bag button with success and error states, and collapsible details.

A grid of products where each opens a dialog with a larger picture, a size choice and an add button, without leaving the page.

A store bar with a bag button that opens a side drawer: quantities, remove with undo, a free-delivery progress bar, subtotal and checkout.

A full cart with steppers, a promo code field that validates, delivery choices and a live summary of subtotal, discount, delivery, tax and total.

A bento of collection tiles with pictures, counts and arrows. The whole tile is one link.

Pick pieces to complete a set. The price updates, a saving appears once enough are chosen, and one button adds the bundle.

Enter a postcode to see delivery methods with real dates counted in working days, plus returns and payment reassurances.

Contact, address, delivery and payment on one page with an error summary that takes focus, field errors and a sticky order summary. Card fields come from your provider through a slot.

A working Mac desktop for your landing page: wallpaper, a menu bar with menus and a clock, draggable and resizable windows, desktop widgets and a magnifying dock that launches and relaunches them.

A Mac app download section: app icon and version, an Apple silicon or Intel choice that swaps the file, copyable checksum and Homebrew command, install steps and release notes you can flip between.

Platform tabs that pick your device, builds with sizes and copyable checksums, requirements and an earlier versions table.

A lineup of laptop, tablet, phone and watch frames with their own token-drawn screens, scaled as one picture. Buttons underneath bring a device forward and dim the rest.

The Settings window of a Tauri or Electron app: toolbar tabs on macOS, a side nav with setting cards on Windows. Launch at login, menu bar, appearance, a global shortcut recorder and update settings that apply as they change.

The panel of a menu bar app on macOS or a tray flyout on Windows: a clipboard history with search, pins, a pause switch, keyboard selection and Preferences and Quit, with loading, empty and error states.

The update window of a desktop app, the whole cycle: checking, a new version with release notes, downloading with progress, ready to relaunch, up to date and failed. Buttons follow each platform's order and wording.

Licence activation for a paid desktop app: a trial meter, a key field that cleans up pasted keys, activation that shows why a key failed, the licensed view with deactivate, and a trial-ended mode.

The first-run permissions window: why each one is needed, Allow for ones not asked yet, the exact System Settings path for ones turned off, a re-check on return, and Continue once required ones are on.

The About window of a desktop app: icon, name, version and build with a copy button, links, open-source acknowledgements and Check for updates. Small and centered on macOS, a dialog with OK on Windows.

The window a desktop app opens with when nothing is open: name and version, ways to start (new, open, clone) with shortcuts, and recent projects to search, open with Enter and remove from the list.

A shortcuts editor: commands grouped and searchable by name or by pressing the keys, a recorder on each row, a warning with Replace when keys are taken, reset per command, Restore defaults, and each platform's notation.