Stripe's design system, broken down

Stripe is the site everyone means when they say "make it look like Stripe." The animated hero gradient gets all the attention, but the reason the whole page feels expensive is quieter: one variable font, a tightly held palette, chromatic shadows, and spacing that never wastes a pixel. This is a breakdown of what actually makes up that look, grounded in real observations of the rendered page, plus how to pull the current token values yourself instead of trusting a hex code you read in a blog post (this one included).

Most "Stripe design" write-ups stop at "they use a purple gradient and lots of whitespace." That is true and useless. The interesting part is the system: which specific tokens repeat, how they scale, and how the pieces reinforce each other. Below is the version I wish those posts had written.

Color: disciplined, not colorful

Stripe reads as vibrant, but the palette is small and held on a very short leash. The load-bearing pieces:

Two things matter here. First, the "black" is never black. Headings sit on a deep navy in the #0A2540 family, which reads as warmer and more considered than #000000 on a white canvas. Second, the accent color does exactly one job. The blurple marks what you can click and nothing else, so the eye learns in one scroll that "purple means action." Restraint is the whole trick: the vibrance lives almost entirely in one gradient, and everything around it stays quiet so that gradient can be loud.

Older breakdowns of Stripe quote a purple of #533afd or similar. That is the value to watch out for. Stripe's brand blurple has been #635BFF for years, and derived palettes drift as the site updates. That drift is exactly why reading a static article is a bad way to clone a live design, which we will get to.

Shadows: depth with a tint

This is the detail almost every imitation misses. Most design systems reach for a neutral gray or black drop shadow. Stripe tints its shadows blue so they echo the navy in the palette. A widely cited Stripe card shadow stacks two layers:

box-shadow:
  0 50px 100px -20px rgba(50, 50, 93, 0.25),
  0 30px 60px -30px rgba(0, 0, 0, 0.3);

The rgba(50, 50, 93, 0.25) layer is the signature: a cool blue-gray rather than a dead gray. The result is depth that feels like it belongs to the brand instead of a generic Material elevation. When a Stripe clone looks "close but cheap," a neutral shadow is usually the reason.

Type: one variable font doing everything

Stripe typesets its whole marketing surface in Sohne (shipped as the variable font sohne-var), a grotesque sans from Klim Type Foundry. Using a single variable family across display, body, and UI is what makes the site feel like one object rather than a stack of components. A few specifics worth stealing:

• Lighter weights carry the mood. Large headings often run at weight 300 to 400, which keeps big type airy instead of shouty.
• Tracking tightens as size grows. Observed values scale roughly -1.4px at 56px, -0.96px at 48px, -0.64px at 32px, easing back to normal at 16px and below. Negative tracking on large type is a core part of the Stripe signature, and it is the easiest thing to forget when you rebuild.
• Money is monospaced. Financial figures use tabular numerals (the tnum OpenType feature) so columns of numbers align and never jitter as digits change. There is a Sohne Mono for the genuinely technical surfaces too.

If you take one typographic idea from Stripe, take the tracking curve. Tight display type over generous line spacing is most of the "engineered" feeling.

Motion: the famous gradient

The hero gradient is a single WebGL canvas, not a video or a CSS animation. Stripe wrote a tiny WebGL wrapper (informally "minigl") and a Gradient class that animates a mesh using noise functions on the GPU. The whole thing is on the order of 10KB, and because the GPU does the work, it stays smooth without pinning the CPU. Reverse-engineered versions animate between four stops (community reconstructions use colors like #6ec3f4, #3a3aff, #ff61ab, and a warm red), skew the canvas a few degrees, and layer text over it with blend modes so the type picks up the color underneath.

The lesson for a rebuild is not "copy the shader." It is that the motion is cheap, GPU-bound, and confined to one element. Everything else on the page is static. That contrast is what makes the gradient feel special instead of busy.

Structure: a rhythm of bands

Zoom out and the page is a stack of full-width horizontal bands that alternate between white and the cool #F6F9FC surface. Each band does one job: a claim, a product cut, a logo wall, a code sample. The hero is typically a split layout, message and CTA on the left, a product visual or code block on the right, rather than a centered headline. That split, plus the alternating bands, plus generous vertical spacing, is the skeleton you actually need to reproduce. The gradient is seasoning.

Rebuild it from live tokens, not from this article

Here is the honest problem with any Stripe breakdown: the numbers go stale. Stripe ships changes, and a hex code or a shadow you copied last year quietly stops matching. The reliable move is to read the current rendered page and pull its real tokens, then build in your own stack.

That is what uiscanner does. Paste a public URL and it returns the design tokens (colors, fonts, type scale, radii, spacing, shadows, motion), a section-by-section structure, and a build prompt tailored for Claude to recreate the look. It reads the rendered page with vision plus the DOM, so it catches what a code scraper misses: the real primary button, whether the hero is centered or split, and decorative imagery (with prompts to recreate it as originals rather than copying bytes). It is transformative by design. It describes and tokenizes a page and never re-hosts the original site's assets, so you rebuild from the tokens in your own components.

The live teardown for this exact page is at /teardown/stripe-com. Open it to see the current color roles, the type scale with real weights and tracking, and the shadow tokens, all read from today's stripe.com rather than a value someone transcribed months ago. Then compare it against a peer like /teardown/linear-app to feel how differently two "clean" systems are actually built.

To scan from your editor, add the MCP server to Claude Code:

claude mcp add uiscanner -- npx -y uiscanner-mcp@latest

Or run it once from the terminal:

npx -y uiscanner-mcp@latest scan stripe.com --target landing

Full setup for Claude Code, Cursor, and Codex lives at /mcp. Every scan returns an id and a shareable uiscanner.com/t/<id> link, and the free plan covers 5 scans on a rolling 30-day window, which is plenty to tear down Stripe, a competitor, and your own site in an afternoon.

The short version

Stripe's design system is not the gradient. It is a single variable font with a tight tracking curve, a navy-not-black ink, an accent color that only ever means "click me," blue-tinted shadows that carry the brand into the depth, and a body of quiet white and cool-gray bands that exist so one loud gradient can breathe. Copy those relationships, not the surface. And when you rebuild, read the live tokens, because the values on this page will be slightly wrong by the time Stripe ships its next redesign.