Stripe's design system, explained

Updated 2026-07-08 · 5 min read

Stripe is the brand every developer-facing company gets compared to, and almost everything written about it is subtly wrong. Here is what Stripe publishes, what it does not, and which decisions are actually doing the work.

What Stripe publishes

A brand assets page. Logos, wordmarks, badges, and usage rules. That is it.

There is no public Stripe design system, no downloadable brand guidelines PDF, no token file. The internal system exists (it has been referred to as Sail), but you cannot read it. What leaks into public view is a press kit and a handful of unusually good engineering blog posts.

This is worth sitting with, because the mythology says otherwise. If you are trying to reverse-engineer "the Stripe brand guidelines," you are looking for a document that does not exist in public.

Color: two names, zero hex codes

Stripe's brand assets page names its two core colors in words: slate and blurple. The guidance is to use slate and blurple on light backgrounds, and white on dark backgrounds.

It gives no hex values. Anywhere.

The values you will see quoted across the internet are #635BFF for blurple and #0A2540 for slate. These are consistent across aggregators, community documentation, and design tooling, and they are almost certainly correct. They are also not published by Stripe, so anyone presenting them as official is guessing confidently. There is a competing value, #533afd, in circulation as well; it appears to be a link or accent token rather than the brand blurple. You will also find #635BFF labeled "Cornflower Blue," which is an aggregator's generic color name and has nothing to do with Stripe.

If you need to match Stripe's blue, sample the official asset. Do not trust the article.

Naming colors in words is a deliberate choice. "Blurple" is a decision that survives a redesign. A hex code is a decision that has to be re-made every time the ramp shifts. Stripe's public surface talks about roles and names; the values are an implementation detail. This is the design token argument, arrived at from the branding side.

Stripe's engineering blog on accessible color systems shows the same instinct at the system level: contrast is treated as a constraint on how the ramps are generated, not as an audit you run at the end and fail. Notably, that post contains no hex values either.

Typography: the 2020 switch nobody updated

Stripe's typeface is Söhne, from Klim Type Foundry in Wellington, designed by Kris Sowersby. It arrived with the July 2020 site redesign, replacing Camphor.

This matters because a large share of the brand-teardown content on the web still says Stripe uses Camphor. That has been false for over five years. If an article tells you Stripe's font is Camphor, you have learned something about the article, not about Stripe.

Söhne has one of the better origin stories in contemporary type. Sowersby describes it as the memory of Akzidenz-Grotesk framed through the reality of Helvetica, drawing on the Standard Medium signage of Unimark's 1960s New York City subway wayfinding. It is a neo-grotesque built from a designer's imperfect recollection of subway signs. Stripe is also widely reported to enable Söhne's ss01 stylistic set site-wide, which swaps in more geometric letterforms, though this is a secondary-source claim rather than an official one.

The Stripe wordmark itself is custom lettering, not set in a retail font. Do not try to reproduce it by typing "stripe" in Söhne.

The gradient is the identity

Strip the logo off a Stripe page and you would still know whose it is, because of the gradient.

The 2020 redesign introduced sweeping diagonal spectrum bands: blurple bleeding through teals and oranges, used as animated backgrounds and as dividers between sections. The effect reads as light refracting through a prism. It appears at every scale, from a full-viewport hero to a 40px strip at the top of a documentation page.

Three things make it work, all copyable:

It is a system, not an asset. The gradient is generated across the site with consistent angle and hue relationships, so a new page inherits it rather than importing a PNG.
It survives reduction. Most brand flourishes stop being recognizable below a certain size. A thin band of the Stripe gradient still reads as Stripe.
It carries no information. It never encodes state or hierarchy, so it can be removed from any surface (the dashboard, the docs body) without breaking anything. Brand elements that carry meaning cannot be dropped when they are in the way.

The rest of the visual system is restrained to the point of plainness: a near-black slate for text, generous whitespace, one accent. All the brand expression is concentrated in one move, defended everywhere. That concentration is the lesson, the same one Notion teaches with illustration instead of gradient.

What to take

Name colors by role, not by value. Stripe talks about slate and blurple. It never talks about #635BFF. The name is the durable artifact.

Make contrast a generation constraint. Not a review step. If your ramps are produced with accessibility built in, you never have the meeting where a designer defends an illegible button.

Pick one distinctive move and defend it everywhere. The gradient is on the homepage, in the docs, in the conference booth. One idea, applied without exception, beats five ideas applied inconsistently.

Publish less than you think. Stripe's public brand surface is a logo page. The system's coherence comes from internal discipline, not from a 200-page PDF. The PDF is a portfolio artifact. The discipline is the product.

Sources and confidence

The color names, the usage rule, and the brand asset page are official. The hex values are widely reported and not officially published, and this page says so instead of laundering them into fact. The Söhne adoption and its 2020 timing are documented by Fonts In Use and Klim. The ss01 detail and the gradient's implementation specifics are secondary-source observations.

Next: Notion's design system does the same concentration trick with illustration, and Spotify's shows what happens when one brand has to serve forty surfaces. If you want the underlying fundamentals, start with choosing brand colors.

Sources

Keep reading

TasteMaker turns your design taste into a brand kit AI coding tools read directly: design tokens, an Agent Skill package, and a live MCP server. Free to build.

Build your brand kit