The 30 Best SaaS Websites in 2026 (Reviewed From Real Screenshots)

Most "best SaaS websites" lists are a scroll of screenshots with a paragraph of praise attached. The list is handpicked, the criteria are never stated, and the depth quietly collapses — the first example gets five hundred careful words and the twenty-eighth gets "clean design, great use of white space."

This one is built differently, because the underlying material is different. Every site below was captured by us — full page, mobile, and individual sections — and every observation comes from opening that capture and describing what is actually in it. Where a claim could not be supported by the image, the site was cut rather than padded out. One was cut mid-draft for exactly that reason.

How these thirty were chosen

The shortlist starts from the 355 sites in this catalog, not from memory or from other people's lists. From there:

Filter one — complete capture. A site needed a full-page desktop capture, a mobile capture at 390px, an extracted colour palette, detected typefaces and a detected tech stack. That removed sites where we could only describe half of what was going on. Of 355, 329 cleared this bar.

Filter two — spread, not ranking. The thirty were then selected to spread across category, tech stack and visual style, because a list of thirty dark developer tools would be a genuinely useless reference for someone designing an HR product. The final set covers eleven categories, seven different stacks, and roughly even numbers of light and dark designs.

Filter three — something specific to point at. Every site had to have at least one decision worth naming — a structural choice, an unusual section, a piece of copy doing real work. "Looks nice" was not sufficient. This is the filter that cut the most candidates.

What disqualified a site. Captures showing a rebrand in progress, a consent modal covering the fold, or a hero that had visibly changed since capture. Windsurf was on the shortlist until its capture turned out to show a "Windsurf is now Devin Desktop" transition banner — accurate at capture time, misleading as inspiration now.

The result is a reference set, not a leaderboard. There is no number one, and the order below groups sites by the approach they take rather than by rank.

Group one: the product is the hero

The most common pattern in the entire set. Rather than describing the software, these sites put a literal, labelled interface in the fold — usually populated with plausible fake data rather than lorem ipsum. If you only take one thing from this list, take this: the strongest sites trust the product to explain itself. It is the same conclusion the hero section hub keeps producing across a much larger sample.

Linear

Linear's headline is "The product development system for teams and agents," with "Purpose-built for planning and building products. Designed for the AI era." beneath it. The detail worth stealing is what is missing: there is no call-to-action button in the hero. The only conversion path in the fold is "Sign up" in the top-right nav. Instead of a button, the right side of the subhead row carries a small "New — Coding Sessions →" link, so the one piece of hero furniture is an announcement, not an ask.

Below sits a full-width Linear workspace: sidebar with Inbox, My Issues, Reviews and Pulse, an issue titled "Faster app launch" marked 02/145, and a detail panel showing In Progress, High, assignee jori. Floating over it is an agent window labelled "Linear Opus 4.8" reading "jori connected Linear to ENG-2703 / Examining the startup path… / Worked for 7s." The AI claim in the headline is evidenced in the same screen rather than asserted.

Built with Next.js. Palette is #5E6AD2 against #08090B, typeface Inter Variable — a dark, minimal design that has been widely imitated and rarely matched.

Attio

Attio opens with a pill link ("Explore GTM frameworks from operators like Elena Verna"), then "The revenue platform engineered for scale." and a subhead that does the specific work: "Attio is the AI CRM that builds pipeline, accelerates every deal, and compounds revenue around the clock." Two CTAs, filled "Start for free" and outlined "Talk to sales."

The structural move is directly below: a four-tab bar — Ask Attio, Data model, Workflows, Reporting — with Workflows selected. It lets one hero carry four product stories without four scrolls. The open tab shows a real workflow canvas in a workspace called Basepoint, with a "Run #70" node marked Running, and a right-hand rail listing Run #69 "Completed just now," #68 "2 min ago," #67 "3 min ago." Fake data, but data with a heartbeat.

Notably the palette is almost absent — #FEFEFE, #E7E7E8, #C7C7C9, #A7A8A8. A CRM in near-monochrome, letting the product UI supply every colour on the page.

Railway

Railway pairs two things that should not work together. The background is a painted night sky — clouds, stars, mountains, visibly illustrated rather than rendered — and the headline sits in a serif: "Ship software peacefully," with "With the all-in-one intelligent cloud provider" beneath, "intelligent" underlined as a link. Purple "Deploy →" and dark "Demo" buttons.

Then the illustration gives way to a completely literal product canvas: breadcrumb "gravy-truck / production," tabs for Architecture, Observability, Logs, Settings, Share, a "1 unapplied change" bar with Details and "Deploy ⌘↵," and two service cards — "backend / Just deployed via GitHub" and "postgres / New / Ready to be deployed / pg-data." The bottom toolbar reads Deploy, Network, Scale, Monitor, Evolve.

The lesson is the sequencing. Atmosphere buys attention, the interface earns trust, and the site does not try to make one do both jobs. Tailwind CSS, IBM Plex Serif for display and Inter for body.

Ramp

Ramp runs the tightest headline in the set: "Time is money. Save both." Four words, a pun that actually means something for an expense product, and a subhead that lists the scope plainly — "Cards, expenses, bill payments, and banking* – in the blink of AI."

Two pieces of live data bracket the fold. Above the headline, a small label: "US CORPORATE PAYMENTS PROCESSED BY RAMP: 0.7367747%." Below the product shot, a full-width ticker — "AGENTS AT WORK TODAY: RECEIPTS PROCESSED 1,428,924 / ACCOUNTING FIELDS CODED 890,267 / AGENT INTERACTIONS 18,493 / EXPENSES REVIEWED 61,549." A percentage with seven decimal places is a flex, and it reads as one.

The conversion element is an inline email field with a yellow "Get started for free," not a button to another page. The product shot layers an invoice view for "Zain's Boba Shop INV# IN4434" with a physical black Ramp card and a phone showing bill approvals. Ramp's pricing page gets its own breakdown in our pricing teardown.

Unkey

Unkey inverts the standard composition, and it is the most interesting layout decision in the set. The headline does not sit at the top or centre — it sits at the bottom-left of the viewport, with the CTAs ("Start for free," "View on GitHub") on the same baseline at the bottom-right. Everything above is a dark network diagram.

That diagram is labelled like real infrastructure: nodes reading "i-c3d4 / Instance replica" and "i-g7h8 / Instance replica," region chips with flags for ap-southeast-2 and ap-southeast-1, a "user-1" node inside a dashed ring, and routing lines between them with one path highlighted in amber. The headline — "The Developer Platform for Modern APIs" — is almost redundant by the time you reach it, which is the point.

Next.js and Tailwind, near-black #08090B, GitHub star count ("5.3k") sitting in the nav as a trust signal, which is a convention worth noting across developer tools generally.

Exa

Exa leads with a funding announcement bar ("Exa raises $250M Series C to build the search engine for AIs"), then a short headline — "Web search, built for AI agents" — and a one-line subhead: "One API for search, crawling, and research agents." A single black CTA, "Try API for free."

The demo is a mock search console, and it is unusually honest about tradeoffs. A query reads "Latest open source LLMs." A LATENCY row offers Fast 450ms, Auto 1s, Deep ~10s. Category chips cover Full Web, News, Companies, Research, People, Financials. The output panel shows a "↓ 78% tokens" badge and four results with visible source domains — llmcheck.net, github.com, openlm.ai. Putting latency options and token savings in the fold is a pitch aimed squarely at an engineer costing out an API.

Flanking both edges are dozens of small drifting thumbnails — sky photos, charts, fragments of web pages — a literal picture of an index. Light, minimal, Next.js and Tailwind.

Liveblocks

Liveblocks sells infrastructure, which is hard to show. Its answer is annotation. The headline is "Realtime infrastructure for multiplayer apps and agents," the subhead names the actual problem ("handle concurrent edits on shared data, so people and AI agents can collaborate without breaking your app"), and the secondary CTA is a dropdown labelled "Install with AI."

Then a handwritten script line — "Your app with Liveblocks" — with a hand-drawn arrow curving down into a demo panel. Inside that panel, more handwriting: "Collaborate in realtime" pointing at a green cursor labelled Olivier, "Pinned comments" pointing at an avatar attached to a flow node, and a pink-outlined node marked "AI Copilot." A second cursor, Stacy, sits lower in yellow.

The handwriting does something a caption cannot: it marks which pixels are the product. For an SDK whose whole value is invisible, that is the entire design problem solved with a marker pen. The frame around the demo is a magenta noise texture, which keeps a very dark page from going flat.

Group two: your work is the hero

A smaller group, and specific to products whose output is visual. Rather than showing the interface, these sites show what customers made with it — which is both more attractive and harder to fake.

Figma

Figma does not show the Figma canvas. The fold is a horizontal carousel of finished work — a dance studio site called Rhythm Dance, a gallery site called Gallerette, a yellow "FOOD WORKS" poster, a dark portfolio — with carousel controls in the bottom right.

The headline sits in a white card floating over that carousel: "Make anything possible, all in Figma," with a blue "Get started" button inside the card. The headline is composited as if it were one more object on the canvas, which is a quiet piece of art direction. Beneath, in small centred type: "Figma lets you turn big ideas into real products. Brainstorm, design, and build with your team."

Two CTAs live in the nav — "Contact sales" outlined and "Get started for free" in solid black — so the enterprise and self-serve paths are separated before you scroll. Next.js with CSS-in-JS, #4D49FC and #F7FC55 in the palette, the house typefaces figmaSans and figmaMono.

Cosmos

Cosmos is the purest version of this idea. The page is near-white and scattered with dozens of small image tiles, each rounded and tilted in 3D at a different angle and depth — photography, objects, textures, all of it user-saved content drifting across the viewport.

The centre is restrained to the point of austerity: small caps "COSMOS," the headline "Your space for inspiration," and two buttons — black "Sign up," white "Get the app." The genuinely smart part is the nav: a floating pill containing a search field with the placeholder "Try 'portraits using shadows'." For a discovery product, putting a suggested query in the fold demonstrates the retrieval quality better than any adjective, and it invites a first action that isn't signing up.

Next.js and Tailwind, #8AB6A9 against near-white, typeface cosmosOracle. A light, minimal design carrying an enormous amount of imagery.

Runway

Runway makes the least SaaS-looking hero here. The fold is a single full-bleed shot: two hands holding a tablet at a wooden dining table, with a glass of water and a fork beside it, and on the screen a 3D-animated character holding a birthday cake.

The framing choice matters. Showing generated video inside a player UI says "here is a tool." Showing it on a tablet at someone's kitchen table says "here is where this ends up." The headline sits low-left in plain white — "Building AI to Simulate the World" — with a single white pill, "Get Started ›."

Faintly overlaid down the centre is a list of segments: RUNWAY CHARACTERS, MEDIA AND ENTERTAINMENT, ROBOTICS AND AUTONOMY, GENERAL WORLD MODELS. Below the fold: "We partner with the world's leading organizations to advance their industries." Ambition first, product second — a positioning bet most AI companies do not have the results to make.

Krea

Krea writes its own name into the headline: "Krea.ai is the world's most powerful creative AI suite." Subhead: "Generate, enhance, and edit images, videos, or 3D meshes for free with AI." Two rounded CTAs, white "Start for free" and outlined "Launch App" — the second aimed at people who already have an account, which is unusual to prioritise in a hero.

The product shot is the interesting part. Rather than a flat screenshot, the app appears on a physical monitor, sitting on a desk with a keyboard and mouse, in a dim room with a bookshelf behind. Inside that screen, a canvas reading "Let's create something" over a mountain landscape, with generated thumbnails along the bottom.

The staging keeps a very dark page from feeling like a void, and the surrounding photograph supplies the only warm tones on the page. Built with Svelte and Tailwind — one of only ten Svelte sites in the catalog.

Group three: type carries it

These sites do the heavy lifting with letterforms. Little or no product UI in the fold, and in two cases almost nothing on screen at all.

Polar

Polar has the emptiest fold here, and it is a deliberate flex. A near-black page, a thin announcement line ("Introducing the Polar Startup Program →"), then a very large, light-weight headline: "Turn Usage Into Revenue." One subhead line: "A billing platform for the intelligence era." One white pill: "Get Started ›."

That is the entire fold. No product screenshot, no feature bullets, no secondary CTA. The only supporting element is a four-logo row — tailwindcss, speakeasy, Stilla, midday — chosen for credibility with a specific developer audience rather than for size.

It works because billing is a category where restraint reads as competence, and because four well-chosen logos say more to that buyer than forty generic ones would. We looked at that tradeoff in more detail across 93 logo clouds. Palette is #090909, #272728, #787878 — three greys and nothing else.

Resend

Resend sets "Email for developers" in a high-contrast didone serif across two lines, at enormous size. For a developer tool, in a category where Inter is close to compulsory, that is the whole brand argument in one typographic choice.

The rest is deliberately quiet. A pill above the headline ("Announcing Resend Forward"), a subhead that states the job — "The best way to reach humans instead of spam folders. Deliver transactional and marketing emails at scale." — a filled "Get started," and a plain text link to Documentation. No button, just the word, which tells you which visitor they expect.

The only imagery is a dark 3D exploded cube on the right, rendered so low-contrast it is nearly invisible against the black. Almost every other developer tool in this list fills that space with UI; Resend leaves it as texture. Next.js and Tailwind, #00A3FF used sparingly against #040404.

Gumroad

Gumroad's headline is "Go from 0 to $1" — set enormous, and the smallest ambition claim in this entire list. That is the point: every competitor promises six figures, and a first dollar is the promise a nervous first-time seller actually believes. The subhead keeps the register: "Anyone can earn their first dollar online. Just start with what you know, see what sticks, and get paid. It's that easy."

Two unusual choices sit either side of it. The primary CTA is paired not with a secondary button but with a "Search marketplace …" field, acknowledging that half the traffic is buyers rather than sellers. And the nav carries a GitHub star badge reading "9.2K ★," with "Contribute or fork on GitHub" repeated under the CTA — open-source signalling on a consumer marketplace.

Big pink "G" coins tumble around the fold on an off-white ground. Tailwind CSS, typeface ABC Favorit.

fal

fal is the loudest page here and the most disciplined about it. A saturated cyan ground carries black type reading "Generative media platform for developers." across three lines, at a size that leaves almost no margin. The subhead is entirely concrete: "The world's best generative image, video, and audio models, all in one place. Develop and fine-tune models with serverless GPUs and on-demand clusters."

The decoration is specific rather than generic. Yellow and purple bars cross at angles behind the type, and dithered pixel-art blobs in lime and purple spill from the left and right edges — low-resolution artefacts used as ornament by a company whose product is image generation. That is a joke with a point.

CTAs are black "Get started" and white "Contact Sales." Palette #99EBFF, #FEFF01, #AB76FE, #152759 — and it still passes as colorful without becoming unreadable, because the type stays black and the layout stays on a grid.

Turso

Turso writes its headline as two complete sentences in mint on near-black: "Millions of Databases. One Architecture." The full stop in the middle is the design. It states a problem and a resolution in six words, and the subhead fills in the mechanism: "Built on SQLite. Lightweight enough to multiply, fast enough to run anywhere. Spin a database for every user, agent, and tenant."

Above the headline sits a positioning pill — "The Database for the Age of AI Agents" — and above that, an announcement bar for concurrent writes. One CTA only: "Start for free now," in mint, repeated from the nav.

Below, an eight-logo grid: KIN, mastra, val town, Prisma, Drizzle ORM, deco.chat, BÆRSkin, Spice AI. For a database company, Prisma and Drizzle carry more weight with the target reader than a household brand would. Next.js and Tailwind, #4FF7D1 against #182528.

beehiiv

beehiiv sets an all-caps, tightly-tracked headline over three lines — "POWERING THE INTERNET'S BEST NEWSLETTERS" — with a rating pill above it: five pink stars, "4.9/5 from 28,479 customers." Putting a precise review count above the headline is a choice most brands save for lower down the page.

The genuinely notable decision is the CTA pair. The primary button is "Sign up with Google" with the Google mark, and the secondary is "Sign up with email." Not "Get started," not "Book a demo" — an OAuth button, in the hero, as the main conversion element. Under it: "Get started for free. No credit card required."

The right side floats an exploded dashboard — Active subscribers 20,002, Open rate 15.22%, Click through rate 8.61%, "Subscriber growth +18,794," a "Publish newsletter" button with a cursor labelled "You." A logo strip follows: Exec Sum, TIME, ramp, Newsweek, Adobe, Boston Globe Media.

Group four: proof before persuasion

Fifteen of the thirty sites run a logo strip or a named customer quote within the first scroll. These six make proof the structural centre of the fold rather than a footnote beneath it.

Stripe

Stripe puts a single line above its headline: "Global GDP running on Stripe: 1.66358926%." Eight decimal places, ticking. It is the most confident stat placement in this list, and it does something a logo row cannot — it makes scale feel continuous rather than historical.

The headline itself is unusually long, and set in a gradient that runs from near-black into blue and violet across four lines: "Financial infrastructure to grow your revenue. Accept payments, offer financial services and implement custom revenue models – from your first transaction to your billionth." Most teams would cut that to eight words. Stripe uses the length to enumerate product lines while the ribbon gradient carries the visual energy.

One CTA, "Request an invite ›," with "Contact sales" in the nav. Immediately below: OpenAI, amazon, NVIDIA, Ford, coinbase, Google, shopify. Next.js, typeface sohne-var.

ClickHouse

ClickHouse writes the shortest positioning line in the set — "The leading database for AI" — and backs it with the densest proof. The subhead is a specification, not a slogan: "Powering agentic systems with millisecond queries at petabyte scale." Yellow "Start free cloud trial," outlined "Contact sales."

What follows in the same scroll is a lot. First an acquisition card: "Langfuse is now part of ClickHouse," with a paragraph on LLM observability. Then a yellow eyebrow, "CLICKHOUSE IS TRUSTED BY," and sixteen logos across two rows — Meta, ebay, Microsoft, Spotify, lyft, HubSpot, LangChain, Anthropic, character.ai, ramp, Cognitiv, Statsig, DiDi, Prefect among them.

The nav also carries a GitHub count ("48.0k"), making three separate proof mechanisms — corporate logos, open-source traction, and an acquisition — visible before you scroll twice. Yellow on near-black is an unusual accent for infrastructure and it makes the page instantly identifiable.

Deel

Deel splits the fold into two cards. The left is deep indigo: a pill reading "Skip the sales call. Hire your first employee now," then "Hire, manage, pay, & equip anyone, anywhere." with the final word in light purple, a subhead naming the scope ("Payroll, HR, IT, and immigration for every worker type"), and a single white "Book a demo ›."

The right half is the interesting decision. It is not a product shot — it is a testimonial carousel. A monitor displays the ElevenLabs logo on a magenta gradient, with a pause control and an "ElevenLabs" label, and overlaid beneath: "Deel enables us to hire and support exceptional talent anywhere." — Mati Staniszewski, CEO, ElevenLabs. Four carousel dots sit below.

Giving half the hero to a rotating customer quote, with a named CEO and a recognisable logo, is a stronger play than a generic dashboard for a product bought on trust. We looked at what separates a usable quote from a decorative one across 29 testimonial sections.

Gusto

Gusto runs a serif headline — "Hire, pay, and grow your team wherever you show up" — over a full-bleed photograph of a soccer team celebrating on the pitch. The photograph is not stock: it is the Oakland Roots, a named Gusto customer, and both the announcement bar and the subhead say so ("The Oakland Roots have been one of them since day one").

Layered over that photograph is a genuinely detailed product UI. A "Run Payroll" card for Feb 14–27 reads "Confirm $28,976.77 withdrawal and submit payroll," with a table of Total payroll $31,517.13, Withdrawal amount $28,976.77, Bank account Checking XXXX1724, Withdrawal date Wed Mar 5, Employee payday Fri Mar 7. Smaller cards cover Hiring tools, Time off, Benefits and Time tracking with named employees and approved hours.

Photograph for emotion, interface for credibility, and a real customer doing both jobs at once. Teal "Create free account" plus white "How Gusto works." Gusto also runs one of the clearer pricing pages we have looked at.

Lattice

Lattice leads with a positioning statement rather than a product claim: "People + AI: Succeeding Together." The subhead front-loads scale — "Join 5,000+ forward-thinking teams using Lattice's HR and AI tools" — and the CTAs are "Request a demo" and, more unusually, "Take a tour," an option between reading and talking to sales.

The right side holds a review interface inside a card with a green-to-pink-to-blue gradient border: an employee named Bethany Hale, prompts reading "What are strengths this employee demonstrates?" and "What could this employee do to increase their impact?", an Updates rail by week, and a dark tooltip that says "building better habits and fairer evaluations."

Directly beneath the fold: greenhouse, Robinhood, loom, duolingo, Discord, brooklinen, npr, gusto. Eight logos a people-ops buyer will recognise instantly. Built in Webflow, which is worth noting given how often that platform is assumed to cap out below this level of polish.

Pitch

Pitch replaces the primary button with a prompt input. The field is pre-filled with "Generate a sales presentation for a digital marketplace," has a "＋" attachment control and a "Prompts" shortcut, and ends in a lavender "Generate ↑." The first action is using the product, not navigating to it.

The headline above is enormous and white on purple: "Create slides that win." Behind it, dozens of real presentation templates float at varying blur and depth — "Business Model Canvas," "THE EDITORIAL TEMPLATE," "CREATIVE BRIEF," "NEWBIE PARTNERSHIP PROPOSAL," "Strategic Planning." Blurred enough to read as texture, sharp enough to read as real work.

Proof arrives twice: the subhead sits below the input rather than above it ("From prompt to presentation, 4M+ teams create and deliver winning slides together in Pitch"), followed by a logo row of synthesia, Pentagram, KOLO, perplexity, Thrive Global, Cleveland Browns and Linear. Built with Framer.

Group five: atmosphere and craft

The last group is harder to categorise. Each of these seven wins on a single distinctive decision rather than a structural pattern.

Mercury

Mercury puts an office desk and chair in the middle of a misty mountain meadow, a laptop open on it, valleys receding behind. Centred over it: "Radically different banking," and "Apply online in 10 minutes to experience banking¹ unlike anything that's come before." Inline email field, blue "Open account."

Two details are worth copying. The superscript ¹ after "banking" is doing regulatory work in the middle of a marketing sentence, and it is styled so lightly that it does not break the line. And the fold ends with a legal disclaimer in a dark bar: "Mercury is a fintech company, not an FDIC-insured bank. Banking services provided through Choice Financial Group and Column N.A., Members FDIC."

Most regulated companies bury that. Mercury places it inside the first viewport, set as a deliberate element rather than a compliance afterthought — which, for a bank-adjacent product, is itself a trust signal. Palette #5266EB against #19242C.

Mintlify

Mintlify pairs documentation software with an illustrated landscape: a teal-to- cream sky, enormous golden cumulus clouds, green hills. White headline, "The Intelligent Knowledge Platform," subhead "Helping teams create and maintain world-class documentation built for both humans and AI," and an inline email capture with "Start now."

The demo below is a docs site rendered in near-full fidelity — sidebar items for Ask Assistant, Quickstart, Global Settings, AI optimization, Components and Themes, tabs for Guides, API Reference and Changelog, a "Search or ask ⌘K" field and an "✦ Ask AI" button. Content shows a "Quickstart Guide" with four cards, each carrying a mint line-art illustration.

The subtle move: further sidebar items — Navigation, Versioning, Custom Domain, Web Editor, Markdown Syntax, Code Blocks, Snippets — are rendered greyed out. Depth implied without clutter. Next.js and Tailwind.

Wispr Flow

Wispr Flow is the most literal illustration of a product's value in the set. The headline mixes two serif treatments in one line — "Don't type," in a lighter grey, "just speak" in a darker weight — over a cream ground, with a floating pill nav above.

Then the demonstration. Long ribbons of raw transcribed speech curve in arcs around the hero, set in running text: "…honestly the whole thing's been kind of chaotic, like nobody really knows what's going on. Can you check…" Beside them, a waveform capsule and a green "✓ Saved name" pill. The messy input is drawn literally, curling around the promise of clean output.

The CTA is platform-specific — "🍎 Download for macOS" — with a reassurance line underneath: "Available on Mac, Windows, iPhone, and Android." Committing the button to one OS while listing the rest in small type is a reasonable bet when most of your traffic is on a Mac. Built in Webflow.

Jasper

Jasper sets "Put AI agents to work for marketing" in a navy serif over a light ground, with a specific subhead: "Orchestrate intelligent agents to run end-to-end marketing workflows—delivering speed, control, and measurable impact." Outlined "Start Free Trial," red "Get A Demo."

Above the headline is the most interesting element: a pill tagged "GEO Diagnostic" reading "Find out what AI is saying about your brand. Get your score today!" A free diagnostic as the top-of-fold offer is a smart third path for visitors who will not book a demo yet.

Below, a photograph of a smiling man on a pink-and-yellow grid collage, with floating cards — "Scale a launch campaign into 8 markets within days," a red "+35% Pipeline" block — and a live AI Assistant chat panel bottom-right that has already written two paragraphs to you. One honest flaw: in our capture, a cookie consent banner sits over the middle of the hero, obscuring part of the collage. Worth noting precisely because most lists would crop it out.

Miro

Miro puts its product metaphor in the last place you would look: the announcement bar. The black strip carries two floating cursor labels — "Andrey" in pink, "Jeff" in blue — flanking the text "See collaborative AI in action — straight from the Canvas 26 keynote." Multiplayer presence, demonstrated in the topmost 40 pixels of the page.

The headline underneath takes a competitive position rather than describing the product: "The collaboration layer your AI tools are missing." Subhead: "Where teams and their agents think, plan and build together." Conversion is an inline work-email field with a blue "Get started free," and the whole page sits on Miro's own dotted canvas grid.

Below the fold the canvas frame begins, with another labelled cursor reading "Roadmap Sidekick." Built with Framer, typefaces Roobert PRO Medium and Roobert PRO SemiBold Italic.

Vercel

Vercel is the most typographically systematic page here. The fold sits on a faint grid with visible crop marks at the corners, like a print layout. Headline: "Build and deploy on the AI Cloud." Two CTAs, black "▲ Start Deploying" and white "Get a Demo."

Below sits the Vercel triangle in fine white line-art over a rainbow wash running orange through red to green — the only saturated colour on an otherwise white page, contained inside the grid.

The detail worth stealing is the line under it: "Develop with your favorite tools >_ / Launch globally, instantly ⊕ / Keep pushing ⑂" — three statements separated not by punctuation but by inline glyphs, a terminal prompt, a globe and a git-branch mark. It compresses three capabilities into one line and reads as typography rather than an icon row. Next.js and Tailwind, typeface Geist.

Tailscale

Tailscale has the most information-dense fold in the set, and it stays navigable because of one component. Headline: "A better network model for AI infrastructure." Subhead: "Identity-based connectivity for AI agents, GPUs, MCP servers, and internal systems." Dark "Secure AI with Tailscale," underlined "Contact sales."

Directly below, five icon cards act as a selector: Business VPN, Privileged Access, Securing AI, Infra access, Zero Trust networking — each with a one-line description. Business VPN is active, shown as a dark red card, and the panel beneath it changes accordingly: five bullets and a laptop mock with a floating "Tailscale Status" table reading Connection Online, Latency 23ms, MDM Integration Connected, Address 100.105.6.115, Uptime 36d 12h 13m.

That last table is the detail. Real-looking uptime and a real-looking tailnet address say more to a network engineer than any adjective. One flaw in our capture: a privacy consent modal covers the lower third. Tailscale's pricing page is covered in our pricing teardown.

What the thirty actually have in common

Patterns worth naming, counted across this set rather than asserted:

Real interfaces beat illustration, decisively. Twenty-two of thirty put a real interface, real generated output, or a real customer's screen in the first viewport. The pure-atmosphere heroes — Mercury's meadow, Runway's kitchen table — still place literal product beneath.

Two CTAs is the default; a button is not. One filled primary plus a lighter secondary is the most common arrangement. But six sites replace the primary button with an inline email field (Ramp, Mercury, Miro, Mintlify, Lattice's tour path, Pitch's prompt box), and three run a single CTA and nothing else (Polar, Turso, Runway). Linear has no hero CTA at all.

Proof is moving up the page. Fifteen of thirty show a logo strip or a named customer quote before any feature explanation. Three — Deel, Gusto, Lattice — build the fold itself around a customer.

Serif is not a fintech signal any more. Resend, Railway, Gusto, Jasper and Wispr Flow all use serif or mixed-serif headlines, and three of those are developer or AI products. Meanwhile Inter appears on 87 sites across the full catalog, which is what makes a serif headline read as a deliberate act.

Announcement bars are near-universal. Fourteen of the thirty run a bar or pill above the headline. Funding (Exa), acquisitions (ClickHouse), events (Tailscale, Lattice, beehiiv), product launches (Ramp, Polar, Pitch, Turso). It has become standard furniture.

Nobody in this set is winning on gradients. The differentiators here are structural: an inverted layout, a tab bar, a prompt box, a five-way selector, a percentage counter, handwriting. Visual polish is table stakes; the memorable choices are all about what goes where.

If you want the underlying numbers rather than thirty opinions, the tech-stack breakdown covers what these sites are built with across the full catalog, and every site above has a full page with its palette, typefaces and section-by-section captures.

At a glance