If you ask a designer for one site that “looks expensive without trying,” roughly 60% of them will name stripe.com. The other 40% will name Linear and then mention Stripe as the prior art. Stripe’s marketing site has been the reference implementation of premium product marketing on the web for the better part of a decade, and it has been copied (badly) by hundreds of teams who looked at it, saw a gradient and big type, and missed everything else.
This is a teardown of what’s actually happening on stripe.com. We’re going to be specific. Not “the typography is nice” but which faces at which sizes; not “it feels premium” but which four moves are doing that work; not “you should copy this” but which of those moves you actually can copy with a small team and which require the resources of a 7,000-person company to land.
Open stripe.com in a new tab. We’ll wait.
Move 1: the type spec is doing more than you think
Stripe runs a single proprietary face (Stripe Sans, commissioned from a small foundry; the practical reference for outsiders is GT Walsheim or, for the most current cut, the family they internally call Sohne-derived). The character of the face is sans-serif with very slightly humanist terminals: geometric enough to feel engineered, with enough warmth in the lowercase apertures to avoid feeling clinical. It is doing about 70% of Stripe’s brand identity work.
The spec to study, with the inspector open:
- Body copy: 16px / 1.55 line-height / 400 weight. This is a very specific choice. 16px is the default browser font size; most “premium” sites use 18px or larger to feel airy. Stripe staying at 16 communicates “we respect that you are here to read information, not to be impressed by it.”
- Subtle letter-spacing tightening at large sizes. Headlines have negative letter-spacing in the range of -0.015em to -0.025em. Body copy is at 0 (default). At large sizes you tighten because the rendering already gives you the size; at body size you don’t because tightening would harm readability.
- Variable-weight transitions in headlines. A Stripe headline is rarely a single weight. “Increase revenue, operate in the new economy, and build innovative business models”: the bold runs at 500 or 600 while the surrounding text runs at 400. The effect is rhythm. Most imitators set the whole headline at 600 and lose it.
The result is type that feels engineered without screaming about it. That phrase is doing a lot of work. Engineered-but-doesn’t-shout is the entire Stripe aesthetic, and it lives in the type spec before it lives anywhere else.
Move 2: the gradient is a brand asset, not decoration
The Stripe gradient is the second-most-imitated element on the modern web (behind only the dark-mode-with-glow look). The imitators reach for the same purple-pink-orange spectrum, slap it on a hero, and wonder why it looks like a Bootstrap template.
Here’s what’s actually happening on stripe.com.
The gradient is rendered in WebGL as an animated noise field. It is not a CSS gradient, not an SVG, not a video. The animation is deliberately slow (the noise field cycles roughly every 8 seconds), the saturation is dropped below what feels intuitive (Stripe’s hero is closer to 70% saturation, while imitators push it to 100%), and the gradient is masked through a 3D ribbon shape. It doesn’t fill the hero rectangularly; it sits inside a curved form that does the actual visual heavy lifting.
The ribbon is the brand asset. The gradient is the surface treatment on the ribbon. The order of operations matters: imitators copy the surface treatment without the form underneath, and the result reads as decoration. Stripe’s reads as a logo.
If you’re a small team that wants the “Stripe feel” and you don’t have a 3D animation engineer: drop the gradient entirely. Run a single solid color or a flat duotone. You will get closer to Stripe’s character with a flat, considered color choice than with a low-fidelity imitation of the WebGL ribbon. Discipline reads as Stripe; effort that fails reads as a Bootstrap template.
Move 3: microcopy that respects you
Stripe’s microcopy is the third quietly-doing-the-work element, and it’s the most stealable one.
Read three buttons on stripe.com and three on a competitor’s site back to back. Stripe’s will say things like:
- “Start now”
- “Contact sales”
- “See the docs”
The competitor’s will say things like:
- “Get started for free”
- “Talk to an expert about your needs”
- “Learn more about our developer resources”
The Stripe version respects you as a competent adult who knows what “Start now” means and doesn’t need to be told that signing up is free. The competitor version assumes you need to be sold on every click. By the third button you can tell which company is comfortable in its own skin.
This extends to feature names (“Connect” not “Stripe Connect for Marketplaces and Platforms”), section headers (“Pricing” not “Simple, transparent pricing”), and the empty-state copy in the dashboard (“No transactions yet” not “It looks like you haven’t received any transactions! Don’t worry, once you set up your first integration…”). The discipline is consistent at every level.
This is the most copyable move of the four. It costs nothing. It requires one hour with your existing marketing site and a willingness to delete words. Most teams won’t do it because their marketing director can’t stand the silence. But if you do it: your site reads 30% more like Stripe’s immediately.
Move 4: animation as confirmation, not entertainment
Almost every animation on stripe.com is doing one of three jobs:
- Confirming something you just did (a hover state, a focus state, a click feedback).
- Drawing attention to something you should look at next (a scroll-into-view fade for a section that just entered the viewport).
- Rendering the gradient/ribbon brand asset, which is essentially decorative but doesn’t interfere with reading.
There are essentially no entertainment animations. No parallax on the hero. No counters that tick up. No background videos. No “scroll to see the magic happen” sections. The page does not perform for you.
This is the inverse of how most marketing sites treat animation. Most sites treat animation as “look how dynamic our brand is.” Stripe treats animation as the confirmation layer of a careful interaction system. The result is that when something on the page animates, your eye trusts it. On a typical marketing site you’ve started ignoring the animations by the bottom of the hero.
What imitators usually miss
The single thing that makes stripe.com hard to copy is that the four moves above are doing one consistent job: communicating “we take craft seriously without needing you to notice.” Each move is internally consistent with the others.
Imitators tend to copy one move at a time, hard. They take the gradient and push it to maximum saturation. Or they take the big tight headlines and stack them three deep. Or they imitate the microcopy precision but pair it with a stock-photography hero. Any one of these decisions in isolation is fine; the problem is when the decisions disagree with each other. A muted, considered type spec next to a screaming gradient reads as confused, not premium. A confident “Start now” CTA next to a wall of feature-list copy reads as schizophrenic.
The lesson for small teams trying to capture the Stripe feel: pick consistency over fidelity. A site that picks one bold typographic move and a flat color palette and applies them with discipline will read closer to Stripe than a site that copies four Stripe moves at 70% quality each.
What to steal versus what to skip
Steal:
- The body copy spec. 16px / 1.55 / 400 / 0 letter-spacing is a near-universal-good default.
- The microcopy discipline. Delete adjectives. Delete reassuring phrases. Delete the words “simply” and “easily.”
- The variable-weight transitions in headlines. This is one CSS property and dramatically lifts headline rhythm.
- The “animation as confirmation” rule. Remove parallax and ticker counters from your site this afternoon.
Skip:
- The WebGL gradient ribbon. Either invest in it as a custom illustration commission with a 3D specialist, or skip the gradient entirely. The middle ground is where copies die.
- The proprietary type face. Inter, Sohne, or any of the standard premium-pretender faces will get you 90% of the way there for 10% of the cost.
Stripe’s site is the most copied site on the web because it looks expensive and isn’t actually that complicated. The trap is that “not complicated” doesn’t mean “easy to copy.” It means each of a handful of decisions has been made carefully and consistently, and that consistency (not any single element) is the thing that makes the site read the way it does.