Seven principles from studying Stripe, Linear, and Loom in detail, and what they teach us about premium SaaS design.

Why these three

Stripe, Linear, and Loom share a useful property: they're studied as design examples by far more people than they have actual customers. Stripe has millions of businesses on the platform; Linear, tens of thousands; Loom, hundreds of thousands. But their homepages get referenced as best-in-class by hundreds of thousands of designers and founders.

The reason isn't just that they're pretty. It's that each one operationalizes a small number of principles with extreme discipline. Stripe's discipline is typographic. Linear's is product-as-page. Loom's is product-is-the-demo. Below is what I've taken from studying each in detail.

Principle 1: One emphasis system, executed everywhere

The teacher: Stripe.

Stripe's homepage runs on italics. The hero headline italicizes a single phrase. Section headers italicize a phrase. Pull quotes italicize a phrase. The footer microcopy uses italic for category labels. No bold anywhere. No color tricks for emphasis. Just italic.

That's one emphasis system, applied with absolute consistency across thousands of pages of marketing surface. The result reads as a single voice, even though dozens of writers and designers have contributed over a decade.

Why this works. When you have one emphasis system, every emphasis decision is easy and consistent. When you have three (bold, italic, color), every page becomes a small typography war about which one to use. Single emphasis systems are slower to build and faster to maintain, and they read as confident because the visitor never sees the system seam.

Apply it. Pick one emphasis tool, italic, weight contrast, or a single accent color. Use it everywhere. Forbid the others. Watch how much faster you can ship copy when the choice is already made.

Principle 2: The homepage IS the product

The teacher: Linear.

Linear's homepage isn't a description of Linear. It's Linear running. A fake-but-functional issue (ENG-2703 "Faster app launch"), threaded Slack discussion, Codex agent terminal output, an embedded MP3 "Weekly Pulse" podcast you can actually play. The page feels alive because the page IS the demo.

The lesson is broader than "use working surfaces." It's that the homepage should make the visitor feel like they're already using the product. Not imagining it. Not watching it. Using it.

Why this works. Most SaaS sites describe a product. Linear demonstrates it. Description requires imagination from the visitor. Demonstration doesn't. Demonstration wins for the same reason "show, don't tell" wins in fiction: the reader stops imagining and starts experiencing.

Apply it. Whatever your product does, render a working version of it in the hero. If it's a database tool, show a fake working query returning fake data. If it's a CRM, show a fake working pipeline with fake deals. The page becomes the demo, and the demo never has to be scheduled.

Principle 3: The product is the demo (different from #2)

The teacher: Loom.

Loom's homepage demonstrates the product by being the product. The hero is an autoplaying Loom video. The visitor presses play, and they're watching a Loom, using Loom. They've consumed the product before they've decided to sign up.

This is the most elegant version of self-demonstration. Loom's product is video communication. The homepage uses video communication to communicate. It's so obvious it's invisible, and so few products execute it.

Why this works. If your product is communication, communicate. If your product is design, show beautiful design. If your product is analytics, show analytics. The product should be its own first marketing asset. The homepage shouldn't have to translate.

Apply it. Ask: what would it look like if my product was used to make my homepage? Then make that. A no-code tool whose homepage was built in the no-code tool. A video tool whose hero is a video. An AI writing tool whose copy was clearly written with the AI tool. The honesty signals confidence.

Principle 4: Restraint reads as confidence

The teacher: Stripe (with Vercel as a second example).

Stripe's homepage uses three colors total. Black text, white background, that signature purple-indigo accent (#635BFF). No gradients in the body. No drop shadows on cards. No decorative illustration. The complexity in the page comes from content, not chrome.

Vercel takes this further: total grayscale chrome, with color reserved exclusively for product output (real telemetry, live data, customer logos in their actual brand colors). Nothing in the visual system competes with the content.

Why this works. Visual restraint signals competence. A page that doesn't try too hard reads as a team that doesn't need to. Every decorative element you add is a small claim: "this needs to be here." A page where every claim is true reads as confident. A page packed with decoration reads as a team that didn't know what to do with the empty space.

Apply it. Before shipping any decorative element, ask: would Stripe ship this? If no, remove it. You'll be wrong sometimes, but the bias toward removal will produce a better page than the bias toward addition.

Principle 5: Type does the heavy lifting

The teacher: Linear (and Stripe).

Linear's homepage uses Inter Variable at 80–96px for headlines, with negative tracking (-0.022em), light weight (~500). Stripe uses Söhne with italicized accents at similar sizes. Both pages get their visual rhythm almost entirely from typographic scale and tracking, not illustration, not animation, not photo.

This is the harder craft. Anyone can add an illustration. Making typography carry an entire page requires a real type system, careful pairings, and disciplined hierarchy.

Why this works. Type is the cheapest premium signal you can buy. A perfect type system on a simple layout reads as expensive. A weak type system on an elaborate layout reads as cheap. The visitor doesn't know consciously that they're reacting to type, but their judgment moves with it.

Apply it. Spend an extra week on type. Pick a face you can defend. Define a 5-step scale (e.g., 14, 16, 20, 32, 64). Define exactly two weights you'll use (e.g., Regular and Medium, never Bold). Use tight negative tracking on large headings. Watch how much premium feel you get for free.

Principle 6: Social proof immediately, not eventually

The teacher: Loom (with Stripe as a second example).

Loom puts a 25+ logo wall immediately under the hero. Stripe puts a scrolling marquee directly below the headline. Both choices are deliberate: visitors get social proof before they have a chance to bounce.

CXL's eye-tracking research validates this, social proof works best near a CTA or at a point of friction. The hero is a point of friction (visitor deciding whether to keep reading). Logos there work. Logos in the footer don't.

Why this works. Trust is a precondition for engagement. The visitor's first internal question is "are these people real?" Customer logos are the fastest answer. Place them where the question is being asked.

Apply it. Move your logo bar above the fold. If you don't have a logo bar, use a single inline testimonial in the Vercel style ("Runway build times went from 7m to 40s"). If you don't have either, use a specific number ("100,000 customers" / "50+ engineering teams"). Anything that says "we're real" in the first scroll.

Principle 7: One sentence carries the entire pitch

The teacher: all three.

Stripe's hero subhead: "Accept payments, offer financial services, and implement custom revenue models, from your first transaction to your billionth." One sentence, doing five jobs at once.

Linear's hero: "The product development system for teams and agents. Purpose-built for planning and building products. Designed for the AI era." Two short sentences, identifying the audience, the category, the differentiator, and the trend frame.

Loom: "One video is worth a thousand words. Easily record and share AI-powered video messages with your teammates and customers to supercharge productivity." One memorable headline + one functional subhead.

In each case, the hero copy is doing extraordinary work. It's not pretty filler. Every word is earning its place.

Why this works. Most visitors only read the hero. If the hero doesn't carry the entire pitch, the visitor leaves without seeing the rest. The discipline of compressing the full pitch into the hero is the discipline of writing a deck cover slide, and it's the most-underestimated writing task in SaaS.

Apply it. Write the hero last, after you know everything else the page will say. Then cut everything in the hero that the page below already handles. The hero should be the irreducible minimum: who you are, who you're for, why they should care.

The meta-principle

The thread connecting all seven: each of these sites does fewer things, better. Stripe doesn't have a more elaborate emphasis system than its competitors, it has a more disciplined one. Linear doesn't have more product features in the hero, it has one feature, executed at extreme depth. Loom doesn't have a more impressive logo wall, it has the right logos, placed at the right moment. Premium design is about removing, not adding.

What these three don't teach you

Worth naming, because copying these sites without understanding their context is how a lot of bad imitations get made:

• They don't teach you positioning. All three started with sharp positioning. The homepage executes positioning that already exists. If your positioning is unclear, copying their homepage layout won't help.
• They don't teach you about scale-stage SaaS. Stripe has thousands of marketing people. Linear has dozens. Loom is part of Atlassian. Their constraints are different from yours.
• They don't teach you about your specific audience. Stripe sells to every business. Linear sells to product engineers. Loom sells to anyone who explains things at work. Your audience may want a totally different vibe, and the answer might be more illustration, more color, more personality, not less.

The principles above transfer. The visual style might not.

Apply this week

Quick wins from this article you can ship in a few hours:

1. Audit your emphasis system. Are you using one tool consistently, or three inconsistently? Pick one. Remove the others.
2. Check your hero against the "carry the whole pitch" test. If the visitor only read the hero, would they get the full pitch? If not, rewrite.
3. Move your logo bar above the fold. If it's not above the fold, that's likely your single highest-leverage change.
4. Remove three decorative elements. Walk through your homepage and find three things that aren't earning their space. Cut them.
5. Run your type scale. Are you using two weights or four? Two is better. Lock it down.

None of these require a redesign. All five can be done in a day.