What is Stripe's primary brand color?

Stripe's primary is indigo #533afd — an electric blue-violet used as the single filled CTA color across every marketing surface. It appears as `button-primary-pill` (the only filled button per band), inline link emphasis on light surfaces, and as a gradient mid-stop inside the mesh backdrop. Pressed state shifts to #2e2b8c (`primary-press`), and a paler #b9b9f9 (`primary-bg-subdued-hover`) backs the soft indigo tag pills. Ruby #ea2261 and magenta #f96bee live inside the gradient mesh and as chart accents — never as button fills.

What typography does Stripe use, and what should I use if Sohne isn't available?

Stripe runs Sohne — a proprietary variable typeface from Klim Type Foundry — at weights 300 (thin) and 400 (regular). The display tier sits at sizes 26 to 56px in weight 300 with negative letter-spacing from -0.26px at 26px down to -1.4px at 56px. The `ss01` stylistic set is enabled globally on the body, and `tnum` is applied per-element on money or numeric cells. If Sohne is unavailable, Inter at weight 300 with `font-feature-settings: "ss01"` and matching negative tracking is the closest open-source substitute — Helvetica and system-ui defaults are too heavy.

What is the gradient mesh and why is it non-negotiable?

The gradient mesh is Stripe's signature atmospheric backdrop — a wide horizontal band of pastel cream #f5e9d4, sherbet orange #9b6829, lavender, indigo #533afd, and ruby pink #ea2261 washed across the upper third of nearly every marketing page. It's implemented as an SVG or large background image rather than a flat CSS gradient, because the real mesh has organic blob shapes that don't render cleanly in CSS. The mesh IS the brand's depth system — literal box-shadows are reserved for product UI mockups and stay subtle. A bare-canvas marketing hero feels off-brand.

Why does Stripe use tabular figures everywhere?

Tabular figures (`font-feature-settings: "tnum"`) are the brand's quiet signal that it's a financial-infrastructure platform. Every cell rendering currency, transaction amounts, or numeric counts uses tnum plus a tightening letter-spacing of -0.42px at 14px. The `body-tabular` token (14px / 300 / line-height 1.4 / -0.42px / tnum) is the canonical money body type. Without tnum, columns of numbers misalign and the financial-data signature collapses — apply it per-element on numeric content, not globally.

Why is Stripe's featured pricing tier dark navy instead of indigo?

Stripe inverts polarity on the featured pricing card — `card-pricing-featured` uses background #1c1e54 (`brand-dark-900`) with white text rather than an indigo fill. This is the brand's distinctive featured-tier choice: indigo stays scarce as the CTA-only voltage, while the dark-navy fill gives the featured tier the visual weight it needs without doubling up on indigo. The same dark-navy fill carries the dashboard chrome and `button-on-dark` CTAs on dark surfaces. Indigo #533afd would over-saturate the page if it filled both the CTA and the featured tier.

What's missing from this DESIGN.md spec?

A handful of areas, captured in the Known Gaps section: precise hover states across the marketing system (only press states are documented), the full dashboard-product semantic palette for errors and success states (which lives inside the dashboard app, not the marketing site), Stripe Atlas / Climate / Connect sub-brand accents, the loading skeleton tokens, and a small set of motion specs for the gradient mesh subtle drift animation. The spec captures roughly the entire public marketing surface plus the dashboard chrome — sub-product semantic systems live on separate token sets.

Stripe Inspired Design System

Stripe's design system as a DESIGN.md file.

About Stripe Inspired DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source stripe.com

Fintech & Crypto
Banking & Payments

Stripe's design language is the modern reference for fintech marketing. One brand voltage (indigo #533afd). One proprietary typeface (Sohne at weight 300). One atmospheric gradient mesh — cream, sherbet orange, lavender, indigo, and ruby pink — washed across the upper third of nearly every marketing page. Deep navy ink #0d253d does all the body work, never pure black. Pill-shaped CTAs with tight 8x16px padding sit one-per-band, never two filled buttons competing in the same hero.

This page packages the full system into a single DESIGN.md file. Inside: 22 colors, 16 type tokens, 6 corner radii, 8 spacing values, and 21 components — buttons, dashboard mockup chrome, pricing card variants, the gradient mesh backdrop, and the tabular-figure body type that quietly signals the brand's financial DNA. Every hex is quoted; every token name is reproducible.

Feed the file to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match Stripe's editorial air — single-indigo CTA hierarchy, Sohne thin display tier, negative letter-spacing, dark-app dashboard composites — instead of a generic fintech theme. Inter at weight 300 with `font-feature-settings: "ss01"` substitutes for Sohne if you need an open-source path.

What makes it distinct

Single voltage CTAindigo #533afd is the only filled button on marketing surfaces, one per band
Sohne thin weight (300) display tiernegative tracking from -1.4px at 56px down to -0.2px at 20px
Tabular figures via tnumevery money and numeric cell carries the brand's quiet financial-data signal
Gradient mesh herocream, sherbet orange, lavender, indigo, and ruby pink washed across the upper third
Dark-app dashboard trackdeep navy #1c1e54 mockups composited above the white canvas

Live at stripe.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

stripe.com

Explore Stripe Inspired

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Other

Specialty colors.

Stripe Inspired design system FAQ

Common questions about Stripe Inspired's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Pricing blocks for shadcn/ui

Production-ready React pricing sections — including dark-featured-tier patterns inspired by Stripe.

Use Stripe Inspired in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→