Stripe design system

What font does Stripe use?

Stripe’s website uses Söhne for headings and body text. Söhne is not on Google Fonts; the closest free match is Inter Tight.

Stripe colour palette

Stripe’s home page is light (#FFFFFF background, #000000 text) and uses #533AFD for its main actions. Its palette: #FFFFFF, #0D1738, #E5EDF5, #F8FAFD, #061B31, #50617A.

• #FFFFFF
  59.1% · backgrounds
• #0D1738
  9.9% · backgrounds
• #E5EDF5
  9.3% · backgrounds
• #F8FAFD
  9.2% · backgrounds
• #061B31
  2% · text
• #50617A
  1.7% · text
• #5D64FE
  1.2% · drawings
• #FFFAFD
  1% · backgrounds
• #122054
  0.9% · backgrounds
• #7C6F60
  0.9% · backgrounds

Type scale

Each size the page sets text in, with its weight and line height. Stripe’s largest type is 56px at weight 300.

Spacing and shape

Spacing sits on a 4px grid: 4px, 8px, 12px, 16px, 20px, 24px, 28px, 32px, 36px, 40px, 48px, 52px.

Corner radii: 1px, 2px, 3px, 4px, 4.51px, 5px, 6px. 13 shadow levels measured.

What makes Stripe look like Stripe

Almost entirely neutral: 94% of the page is painted in #FFFFFF and #0D1738.

#5D64FE is an accent: 1.2% of the page, used for drawings only. Don't fill large areas with it.

#122054 is an accent: 0.9% of the page, as small fills such as buttons and badges. Keep it to small areas.

The largest type (56px sohne-var) is light, not bold (300), tracked to -0.025em.

Stripe DESIGN.md for Claude Code, Cursor and Lovable

A DESIGN.md is the brief an AI coding tool reads before it writes UI. This one carries everything on this page as rules a model follows: the allowed colours and what each is for, the fonts with free stand-ins, the type scale, spacing, corners, and the things Stripe’s design never does.

Put it in your project root and ask your tool to follow it: “Read DESIGN.md and build [your product] in this design language.” It describes a style, not Stripe’s product, so use your own name, words and images.

Download Stripe DESIGN.md · View it as text

As CSS variables

The measured values as CSS custom properties, with free fonts standing in for licensed ones. Use them to learn from or to start a project in a similar style; Stripe’s name, logo, words and images are theirs.

@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@500;700&display=swap");

:root {
  --color-background: #FFFFFF; /* Background */
  --color-surface: #E5EDF5; /* Surface */
  --color-text: #000000; /* Text */
  --color-text-muted: #50617A; /* Text muted */
  --color-border: #E5EDF5; /* Border */
  --color-action: #533AFD; /* Action */
  --color-on-action: #FFFFFF; /* On action */
  --color-link: #533AFD; /* Link */
  --color-positive: #108C3D; /* Positive */
  --color-negative: #D8351E; /* Negative */
  --color-warning: #FF6118; /* Warning */
  --color-0d1738: #0D1738; /* 9.9% of the page, as fills */
  --color-f8fafd: #F8FAFD; /* 9.2% of the page, as fills */
  --color-5d64fe: #5D64FE; /* 1.2% of the page, as drawings */
  --color-fffafd: #FFFAFD; /* 1% of the page, as fills */
  --color-122054: #122054; /* 0.9% of the page, as fills */
  --color-7c6f60: #7C6F60; /* 0.9% of the page, as fills */
  --color-ffbb00: #FFBB00; /* 0.4% of the page, as drawings */
  --font-body: sohne-var, "Inter Tight", sans-serif; /* sohne-var on the site; Inter Tight renders */
  --font-code: "SourceCodePro", "Source Code Pro", monospace; /* SourceCodePro on the site; Source Code Pro renders */
  --type-display-large: 56px; /* Display Large, weight 300 */
  --type-display-large-leading: 57.68px;
  --type-display-large-tracking: -0.025em;
  --type-display-small: 48px; /* Display Small, weight 300 */
  --type-display-small-leading: 55.2px;
  --type-display-small-tracking: -0.02em;
  --type-headline-large: 32px; /* Headline Large, weight 300 */
  --type-headline-large-leading: 35.2px;
  --type-headline-large-tracking: -0.02em;
  --type-headline-small: 26px; /* Headline Small, weight 300 */
  --type-headline-small-leading: 29.12px;
  --type-headline-small-tracking: -0.01em;
  --type-title-large: 22px; /* Title Large, weight 300 */
  --type-title-large-leading: 24.2px;
  --type-title-large-tracking: -0.01em;
  --type-title-medium: 20px; /* Title Medium, weight 300 */
  --type-title-medium-leading: 28px;
  --type-title-medium-tracking: -0.01em;
  --type-title-small: 18px; /* Title Small, weight 300 */
  --type-title-small-leading: 25.2px;
  --type-body-large: 16px; /* Body Large, weight 300 */
  --type-body-large-leading: 22.4px;
  --type-body-small: 14px; /* Body Small, weight 400 */
  --type-body-small-leading: normal;
  --type-label-1: 12px; /* Label 1, weight 300 */
  --type-label-1-leading: 17.4px;
  --type-label-2: 11px; /* Label 2, weight 300 */
  --type-label-2-leading: 15.4px;
  --type-label-3: 10px; /* Label 3, weight 300 */
  --type-label-3-leading: normal;
  --type-label-4: 9px; /* Label 4, weight 400 */
  --type-label-4-leading: 10.8px;
  --type-label-5: 8px; /* Label 5, weight 400 */
  --type-label-5-leading: 8.96px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;

How this was measured

PikSpec’s scanner read the stripe.com home page in Chrome at 1440px wide on 14 October 2026: the computed styles of its elements, the fonts that rendered and how much of the page each colour covers. Websites change; capture the page yourself with PikSpec for today’s values, any page, and exports in five formats.

Stripe is a trademark of its owner. This page is an independent measurement and is not affiliated with or endorsed by Stripe.

Similar light designs: Airbnb · Airtable · Allbirds · Anthropic · Apple · Arc

Contact PikSpec

Email support@pikspec.com for support, privacy requests or content reports.