SaaS website design examples and the values behind them

Software has no product photo, so the first decision in any SaaS website design is what stands in for one. The examples that work fall into four groups: the real interface, one object, a character, or type over a loop. Each comes with its own values, and the rest of the page, from proof to features to pricing to the footer, follows the same rules whichever you pick.

Pick the hero device before the palette, because it decides the layout, the motion budget and what the headline has to say. A product with a rich interface usually shows it. An API, an agent or an infrastructure product rarely has a screen worth showing, and an object or a character does the job better.

The examples below are real SaaS sites as they stood at the time of writing, next to designs from the Thanor library. For the complete section by section specification of a software page, the SaaS landing page values give the type ladder, palette and nine sections. This page is about the choices that make one SaaS site look unlike the next.

What the strongest SaaS websites decide first#

Four hero devices cover almost every good SaaS home page. Each one fits a kind of product and costs something specific.

Whatever the device, the same rules hold for the words around it. The headline names the category in eight words or fewer. There is one filled button and one text link, never two equal buttons. Proof sits directly under the hero, and the entrance settles within a second, which the hero section values set out as 720ms on cubic-bezier(0.22, 1, 0.36, 1) with short delays.

The device also sets the motion budget. An interface hero should barely move, because the frame is the evidence and evidence that fades in arrives late. Object and character heroes can move continuously, as long as one clock drives everything and a pause control exists.

SaaS examples where a character carries the hero#

A character only works when its gesture carries the pitch. Judgy is a budgeting app whose cream alpaca, Dolly, follows your cursor across the page with a slow side-eye. Her head is one film of a head turn, driven by the pointer's position across the window, so the whole page seems to judge your spending. Stat pills and a rail of glass budget cards sit beside her, so the interface still appears in miniature. On touch screens, dragging sideways turns her head instead.

Lorikeet sells incident alerting. Its film plays once: a rainbow lorikeet sweeps in, lands on a twig and calls, the copy enters in a single move during the flare of its wings, and when the film ends the giant word LORIKEET rises between the forest and the bird. The bird performs the headline, a small creature making a loud noise at the right moment, which is what the product does.

Rookery is the hero for an AI agent called Tuki. A baby emperor penguin, rendered in 3D and then turned into horizontal ink lines, blinks and settles on an eight second loop next to a chunky pixel headline. The page uses two colors only, ice paper and midnight ink, and every piece of text measures at least 10.92:1.

SaaS examples where one object carries the hero#

An object hero suits products whose interface is a terminal, an API or a dashboard nobody wants to look at first. Vercel's home page, at the time of writing, is black with its triangle mark glowing at the center, drawn live on a canvas, a two word headline at the left, three short lines about agents at the right, two buttons and a row of customer logos underneath. The object is the brand mark itself, which means the hero cannot be mistaken for anyone else's.

Caravan applies the same idea to a deploy platform with more color. A chrome hover caravan floats over a hot pink stage, its chrome reflecting the pink so the whole screen is one color world. One nine second clock drives the float, the shadow, the reflection, the thruster lights and four steps along the bottom (Push, Pack, Peek and Roll), so the last step lights on the frame the thrusters fire. It banks up to 6 degrees toward the pointer, and on touch screens it sways slowly by itself.

The values that make an object hero work are mostly about light and restraint: one light source, a contact shadow under the object, the object at roughly half the hero width, and motion on a single loop. The best 3D websites collect more objects that carry a page this way.

SaaS examples where the interface is the hero#

When the interface is the selling point, show it, and show it legibly. Linear's home page renders its own product as live HTML under a two line headline that names the category: an issue view with its activity feed, properties and labels, as sharp as the text around it. Each later section pairs one claim with one working fragment (a board, a roadmap timeline, an agent conversation, a review queue), so the page argues entirely in product.

Raycast takes the same approach with glass. Under a four word headline, its app windows are drawn as translucent panels with a 30px backdrop blur and its floating command pills at 24px, on a page that stays dark so the glass always reads. The glassmorphism values explain why a dark page lets glass get away with so little fill.

The rules for an interface hero are strict:

1. One view, not the whole app. Crop to the part that proves the claim.
2. Real data. Lorem ipsum in a product frame reads as a product that does not exist.
3. Legible at its final size. If the text in the frame drops below about 12px, crop tighter instead of scaling down.
4. Nothing in the frame animates on entrance. It can respond to the cursor, but it should be there when the page loads.

Judgy borrows this in miniature with its stat pills and budget cards, which is a useful middle path for an app whose full interface is too busy for a hero.

SaaS examples built on type and a loop#

A product with a short, ownable name can let the name carry the screen. Stripe's home page, at the time of writing, sets its headline over an animated wave drawn on a canvas, with a live figure for the share of global GDP running on Stripe ticking above it. The headline still names the category, financial infrastructure, so the motion behind it never has to explain anything.

Brisk, a money card and app, goes all the way. An enormous condensed black "BRISK" fills the middle of a lilac card, a looping film of pink clay curls behind it, and four cartoon stickers sit on the word's edges. The navigation pills roll up like cubes into their own colors on hover. On entrance the word shreds and reassembles letter by letter, and after that only the film and a thin ticker move.

For a type hero, size the word to the container rather than the viewport, keep the loop behind it under about ten seconds, and measure the type's contrast on the brightest frame of the loop. A short clip from animated backgrounds is a quick way to test whether your word holds up over moving color before commissioning anything.

The rest of a SaaS landing page: features, proof, footer#

The hero device changes; what follows it barely does. Four patterns from the same sites hold up:

• Features as evidence. Stripe introduces its product families as a bento grid of tiles 16px apart, each holding a working piece of interface rather than an icon.
• Proof with units. Stripe follows with a row of figures, such as more than 135 currencies and payment methods and 99.999% historical uptime. Every number has a unit and a scope.
• One claim per section. Linear's sections each make one argument and show one fragment, which keeps a long page scannable.
• A footer for evaluators. Linear's footer carries security, status and the changelog, the pages a buyer checks before signing up. Footer structures by site type has the values.

The order of those sections matters more than their styling, and the landing page structure gives the sequence with a word budget for each. Cursor and drag interactions, like Judgy's head turn or Caravan's banking, are covered with their fallbacks in the interactive website examples.

How to prompt a SaaS website with AI#

Ask a model for "a modern SaaS landing page" and it tends to return the average one, with a gradient, a headline, three feature cards and a testimonial carousel. Name the hero device and give every value it depends on, then the section order. A fragment for a scheduling API:

SaaS home page for a scheduling API.
Hero device: one object. A glass hourglass at the right, 48% of the
hero width, one soft light from the top left, a contact shadow; it
turns 15 degrees toward the pointer, eased over 400ms.
Headline at the left, 2 lines, max 22ch, naming the category.
Palette: #0E1A2B ink, #F4EFE6 paper, accent #FF6A3D on the primary
button only, with #0E1A2B text (6.14:1).
Type: ratio 1.25 from 16px; headline clamp(44px, 6vw, 88px), 600.
Entrance: 720ms cubic-bezier(0.22, 1, 0.36, 1), settled by 1000ms.
Sections: hero / six logos / the problem in 2 columns / 3 steps /
one feature with a cropped code view / pricing, 3 plans, model named /
security and migration questions / one call to action / footer with
status, security and changelog links.

The Claude Code prompts for UI apply the same approach inside an editor. If you work in Claude or Cursor, the Thanor MCP lets the assistant search the library and pull a design's whole art direction, so the model starts from a finished system rather than a description.

SaaS website mistakes to avoid#

• Three equal feature cards with icons. The count comes from the grid rather than the argument, one of the tells of a generated page.
• A dashboard shrunk to illegibility. It proves nothing and looks like a placeholder.
• A gradient blob where the product should be. It could belong to any company.
• Numbers without units or sources. A figure nobody can check costs more trust than it earns.
• A mascot with no job. If the character does not react to the visitor or act out the product, cut it.
• Two equal buttons in the hero. One filled, one text link.
• Every section fading up. Keep motion for the hero device and the moments that explain something.

Where to go from here#

Open Judgy and move your cursor from one side of the page to the other. It shows in a few seconds how a character can carry a SaaS hero while small pieces of interface still prove what the app does, which is the hardest balance on this page to describe in words.

Then browse the rest of the Thanor library for the device that fits your product. Each design comes with a prompt that states its palette, type, motion and section order as values your model can build from, and the plans are on the pricing page.