PAGES

Stripe set tables as design, copycats took gradients

Stripe's marketing pages made careful typography and well-set tables into a house style that half an industry copied without understanding which part was doing the work.

A large monitor showing a dense marketing page, a person reading it at the desk
The gradients got copied. The table settings, which were doing most of the work, did not.

The gradient was not the point

When Stripe began rebuilding its product pages in earnest, the visual signature everyone noticed was the gradient: that shifted, multi-stop field of blue and purple that seemed to vibrate slightly, as if backlit. Designers screenshot it, extracted it, pasted it under their own headers. A whole season of SaaS landing pages wore the same violet haze. None of them looked like Stripe.

Type specimen showing the Inter typeface with sample letters, numerals, and the Apple Inc wordmark
Fourteen pixels, tabular numerals, dense information: the part of the page that was actually hard.Photo: Inter Specimen · Wikimedia Commons

The reason is straightforward in hindsight. The gradient was the garnish. What the Stripe pages were actually doing was setting type at considered sizes, letting numbers breathe in real table layouts, and building a rhythm of density and space that made every data point feel deliberate. The design was working hardest in the moments no one was screenshotting.

The typography, specifically

Stripe's product pages made heavy use of a clean sans-serif at display sizes — a grotesque, meaning a nineteenth-century sans-serif without the optical corrections of a humanist face, with a tight aperture and a modest x-height that reads efficiently at very large scales. Beside it, tabular figures in a monospaced numerical width kept pricing grids aligned without the eye-catching jitter that proportional numbers produce when columns shift by a character's worth of space. That is a typographic decision of the least glamorous kind, and it is one of the main things people left out when they ran the gradient through their own Figma canvases.

The sizes were not negotiable aesthetics — they were a system. Headlines above 80px, with tracking tightened to pull them back from poster looseness. Supporting copy set at a weight light enough not to fight the headline, dark enough to pass contrast on the saturated backgrounds. A List Apart had been writing about typographic scale and measure since at least 2012, and Stripe's pages were as good a working demonstration of the argument as the field produced.

The design was working hardest in the moments no one was screenshotting.

The table is not decorative

The real hinge of the Stripe house style is the pricing and feature table. Stripe's pages showed that a comparison table — a thing browsers have rendered since the HTML 3.2 specification in 1997 — could be a primary design object, not an afterthought slotted in below the emotional work. The tables were full-width, set in a typeface chosen for it, with generous row height and borders thin enough to read as structure rather than cage. Checkmarks were checkmarks, not custom SVG art. The discipline was not to suppress the table's function but to stop suppressing it aesthetically.

Compare this to the average SaaS pricing page of the same period: smaller type, compressed rows, a font selected for the hero that had never been considered at 13px in a cell. Stripe made the table expressive without hiding what it was. The copies got the gradient because the gradient was visible; they lost the table discipline because it required a decision about type that no one had explicitly made.

A dark studio, laptop open showing a dense dark product page, hand on the trackpad
A house style becomes a genre the moment its conventions can be listed.

What spread and what didn't

The genre Stripe's pages established runs, roughly, from 2018 through the mid-2020s, visible in product pages from Linear, Vercel, and a long tail of developer tooling. Linear's dark page, dense with small specifications and honest product screenshots, is the closest inheritor in spirit, though its palette goes the other direction. Vercel's pages share the multi-column density and the seriousness about numbers. Neither copied the gradient.

  1. 1997HTML 3.2 specification codifies the <table> element
  2. ~2018 onwardStripe's rebuilt marketing pages circulate widely; gradient becomes a genre marker
  3. Mid-2020sLinear, Vercel and developer-tool pages establish the denser, darker variant

What almost no one carried over was the column rhythm in the body sections — the way Stripe's longer marketing pages used a narrower text column inside a wide container, so the prose did not balloon into an unreadable measure as the grid went full-width. That is a box model decision, a container-width decision, a line-length decision, none of which reproduce themselves in a screenshot.

The gradient is easy to see and easy to take. The rest of the page — the table rows, the type sizes, the column widths, the weight choices — requires reading the page as an object rather than an image. That reading is what made it a reference and what most of its successors skipped.