What font does Stripe use?

Stripe’s website uses two typefaces: sohne-var (headings and body text), served from b.stripecdn.com; SourceCodePro, served from b.stripecdn.com.

What are Stripe’s brand colours?

The main colours on stripe.com are Deep Slate Blue (#635BFF), Fuchsia (#EE30FB), Light Gold (#FFD601), Deep Gold (#FFCF5E), Light Slate Blue (#9966FF) and Blue Violet (#7232F1).

What colour is Stripe’s text and background?

Body text is #1A1A1A on a #FFFFFF background.

Where is Stripe’s logo from?

The logo shown in this guide was found on stripe.com’s homepage. For official logo files and usage rules, check Stripe’s own brand or press page.

Is this Stripe’s official style guide?

No. SiteStyleGuide made it from stripe.com’s public web pages on 23 October 2026, and isn’t affiliated with Stripe. Members can refresh a guide after 90 days to pick up changes.

Unofficial A style guide made by SiteStyleGuide from stripe.com’s public web pages. Not affiliated with or endorsed by Stripe. The real site is stripe.com ↗

Unofficial style guide

Stripestyle guide

Stripe’s website (stripe.com) uses sohne-var for its headings and body text. Its palette is led by Deep Slate Blue (#635BFF), Fuchsia (#EE30FB) and Light Gold (#FFD601), with #1A1A1A text on #FFFFFF. Captured from the live site on 23 October 2026.

Website: stripe.com
Typefaces: sohne-var, SourceCodePro
Palette: 4 neutrals, 12 colours, 3 gradients
Captured: 23 Oct 2026 · added by @sitestyleguide

Save Add to collection Share Report

Screenshot of the stripe.com homepage on a desktop screen — Screenshot of stripe.com on a 1440 px desktop screen, 23 Oct 2026.

Screenshot of the stripe.com homepage on a phone — On a phone, 390 px.

Identity & metadata

What browsers, search engines and social cards show before anyone reaches the page, from the homepage’s <head>.

Title &
description

Page title: Stripe | Financial Infrastructure to Grow Your Revenue; ● 54 / 60 characters
Meta description: Stripe is a financial services platform that helps all types of businesses accept payments, build flexible billing models and manage money movement.; ● 148 / 160 characters
Site name: Stripe
og:title: Stripe | Financial Infrastructure to Grow Your Revenue
og:description: Stripe is a financial services platform that helps all types of businesses accept payments, build flexible billing models and manage money movement.
Language: en-AU

In search results

Stripehttps://stripe.com/au

Stripe | Financial Infrastructure to Grow Your Revenue

Stripe is a financial services platform that helps all types of businesses accept payments, build flexible billing models and manage money movement.

When shared

stripe.com

Stripe | Financial Infrastructure to Grow Your Revenue

Stripe is a financial services platform that helps all types of businesses accept payments, build flexible bi…

Logo & favicons

Found as: schema.org logo. SVG, 512 × 512.

Logo

On white

On black

On Deep Slate Blue

Favicons

4 found

512 px · SVG icon
180 px · PNG apple-touch-icon
96 px · PNG icon
48 px · ICO shortcut icon

Stripe | Financial Infrastructure to Grow Your Revenue

Light browser tab

Stripe | Financial Infrastructure to Grow Your Revenue

Dark browser tab

Colour

Read from the site’s stylesheets and weighted by where each colour is used. Names are the nearest standard colour name. Click a swatch to copy its hex code.

Contrast is against the site’s text colour (#1A1A1A) and white, using WCAG 2 ratios: 4.5 for body text, 3 for large text.

Colour

Balance

How much each colour is used

White 29.3%
Deep Slate Blue 8.2%
Cool Off White 7%
Fuchsia 6.8%
Light Gold 6.4%
Deep Gold 5.3%
Light Slate Blue 5.3%
Blue Violet 5.1%
Midnight Blue 4.3%
Violet 4.3%
Deep Midnight Blue 3.5%
Light Midnight Blue 3.1%
Medium Blue 3.1%
Orange Red 2.9%
Black 2.7%
Off White 2.5%

By how often each colour appears in the site’s CSS, weighted by where (body, headings, buttons), not by area on the screen.

Neutrals

Text, backgrounds and structure

White

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 0

On text
17.40:1 AAA

On white
—

Background, text, border · .stats-animation-gradient__gradient--sunrise, .stats-animation-gradient__gradient--dusk
Cool Off White

HEX

RGB

HSL

OKLCH

CMYK
8 4 0 3

On text
14.59:1 AAA

On white
1.19:1 Fail

Background, border · .developers-scale-subsection__stats-grid-item-heading--orange, .developers-scale-subsection__stats-grid-item-heading--pink
Black

HEX

RGB

HSL

OKLCH

CMYK
0 0 0 100

On text
1.21:1 Fail

On white
21.00:1 AAA

Background · .mobile-payments-graphic__button--icon, .crypto-payment-form-graphic__button--apple-pay
Off White

HEX

RGB

HSL

OKLCH

CMYK
3 2 0 4

On text
15.20:1 AAA

On white
1.15:1 Fail

Background · .agentic-commerce-ai-graphic__product-image, .agentic-commerce-checkout-graphic__product-image-inner

Colours

Brand colours and accents, most used first

Deep Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
61 64 0 0

On text
3.71:1 AA large

On white
4.70:1 AA

Background, text, border · .hds-stat--gradient:first-child .hds-stat__value, .hds-stat--gradient:nth-child(2) .hds-stat__value
Fuchsia

HEX

RGB

HSL

OKLCH

CMYK
5 81 0 2

On text
5.35:1 AA

On white
3.26:1 AA large

Background · .hds-stat--gradient:first-child .hds-stat__value, .hds-stat--gradient:nth-child(2) .hds-stat__value
Light Gold

HEX

RGB

HSL

OKLCH

CMYK
0 16 100 0

On text
12.32:1 AAA

On white
1.41:1 Fail

Background · .hds-stat--gradient:first-child .hds-stat__value, .hds-stat--gradient:nth-child(2) .hds-stat__value
Deep Gold

HEX

RGB

HSL

OKLCH

CMYK
0 19 63 0

On text
11.88:1 AAA

On white
1.46:1 Fail

Background · --bento-right-blob, .agentic-commerce-ai-graphic__product-gradient
Light Slate Blue

HEX

RGB

HSL

OKLCH

CMYK
40 60 0 0

On text
4.72:1 AA

On white
3.68:1 AA large

Text, background, border · .crypto-account-balance-graphic__body-title, .crypto-account-balance-graphic__controls-button
Blue Violet

HEX

RGB

HSL

OKLCH

CMYK
53 79 0 5

On text
2.85:1 Fail

On white
6.10:1 AA

Background, text · .agentic-commerce-ai-graphic__product-gradient, .agentic-commerce-checkout-graphic__product-gradient
Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
80 64 0 68

On text
1.09:1 Fail

On white
15.95:1 AAA

Background, border · .stats-animation-gradient__gradient--night, .shared-payment-tokens-graphic__editor
Violet

HEX

RGB

HSL

OKLCH

CMYK
0 53 0 2

On text
7.52:1 AAA

On white
2.31:1 Fail

Background · --stop-color, --hds-color-accentColorMode-magenta-icon-gradientMiddle
Deep Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
88 45 0 81

On text
1.00:1 Fail

On white
17.37:1 AAA

Text · .connect-platform-graphic__dashboard-sidebar-title, .connect-platform-graphic__payment-card-merchant-name
Light Midnight Blue

HEX

RGB

HSL

OKLCH

CMYK
55 63 0 61

On text
1.29:1 Fail

On white
13.46:1 AAA

Text, background · h1.hero-section__title--foreground .hero-section__title-main, .stats-animation-gradient__gradient--night
Medium Blue

HEX

RGB

HSL

OKLCH

CMYK
90 88 0 24

On text
1.60:1 Fail

On white
10.89:1 AAA

Text, background · .stats-section__active-indicator, .time-of-day-select__trigger
Orange Red

HEX

RGB

HSL

OKLCH

CMYK
0 62 91 0

On text
5.78:1 AA

On white
3.01:1 AA large

Used · --bento-right-blob, --suite-color

Gradients

linear-gradient(90deg, 0, 20%, 40%, 60%, 100%)
linear-gradient(68deg,rgba(83,58,253,.08) .78%,rgba(255,140,108,.8) 30.61%,rgba(218,75,254,.8) 79.02%)
linear-gradient(73.3deg,rgba(218,75,254,.8) 9.85%,rgba(113,92,255,.48) 61.94%)

Typography

Faces from Google Fonts are shown in the real thing. Others are licensed to the site, so they show in your device’s copy if you have one, or a stand-in if not.

sohne-var

Aa 300 Aa 1000

sohne-var

Served from b.stripecdn.com · weights 300, 400, 1000 · headings, buttons, body · shown in a stand-in if you don’t have it

Aa 500

SourceCodePro

Served from b.stripecdn.com · weights 500 · shown in a stand-in if you don’t have it

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 ! ? & @ % $ – ’ “ ”

Type scale

From the site’s CSS

Small 80%

Stripe is a financial services platform that helps all types of businesses accept payments, build flexible billing models and manage money …

Sizes in use

Most common across the site

16pxline 1 · 31 rules
14pxline 1.4 · 38 rules
13pxline 1 · 13 rules
12pxline 1.4 · 55 rules
11pxline 1.4 · 46 rules
10pxline 1 · 44 rules
9pxline 1 · 35 rules
8pxline 1 · 12 rules

Elements

The main button and link as the site’s CSS draws them, and the corner radii and shadows it uses most.

Elements

Corner radius

6px · 111×
4px · 74×
2px · 17×
50% · 17×
1px · 7×
3px · 7×

Shadows

0px 16px 32px rgba(50,50,93,.12)
0px 2px 10px 0px #0037700f,0px 1px 4px 0px #003b890a
0px 6px 22px 0px #0037701a,0px 4px 8px 0px #003b8905
0 27px 40.5px -27px rgba(50,50,93,.25),0 16.2px 32.4px -16.2px rgba(0,0,0,.1)

Layout

Breakpoints from the site’s media queries and the widths its content is held to, with how often each appears.

Grid

Breakpoints

600

639

640

840

939

940

1264

1300

On a scale of 0 to 1440 px.

Content widths (max-width)

1349 px

920 px

608 px

544 px

400 px

360 px

Notes

Plain checks on what was found. Worth fixing if you look after this site.

Notes

● FineThe title is 54 characters, short enough to show in full in search results.

Questions

Quick answers, from the same capture as the rest of this guide.

Questions

What font does Stripe use?: Stripe’s website uses two typefaces: sohne-var (headings and body text), served from b.stripecdn.com; SourceCodePro, served from b.stripecdn.com.
What are Stripe’s brand colours?: The main colours on stripe.com are Deep Slate Blue (#635BFF), Fuchsia (#EE30FB), Light Gold (#FFD601), Deep Gold (#FFCF5E), Light Slate Blue (#9966FF) and Blue Violet (#7232F1).
What colour is Stripe’s text and background?: Body text is #1A1A1A on a #FFFFFF background.
Where is Stripe’s logo from?: The logo shown in this guide was found on stripe.com’s homepage. For official logo files and usage rules, check Stripe’s own brand or press page.
Is this Stripe’s official style guide?: No. SiteStyleGuide made it from stripe.com’s public web pages on 23 October 2026, and isn’t affiliated with Stripe. Members can refresh a guide after 90 days to pick up changes.

Design tokens

Everything above as CSS variables, ready to paste into a project. Members can download the tokens as files for Figma (Tokens Studio), Style Dictionary and Tailwind.

Tokens

stripe-com-tokens.css

Download

Free with an account: sign up or sign in, and you’ll come straight back here.

/* stripe.com design tokens, from SiteStyleGuide (https://sitestyleguide.com/stripe.com) */
:root {
  /* Colours */
  --text: #1A1A1A;
  --background: #FFFFFF;
  --colour-white: #FFFFFF;
  --colour-cool-off-white: #E3ECF7;
  --colour-black: #000000;
  --colour-off-white: #ECF0F4;
  --colour-deep-slate-blue: #635BFF;
  --colour-fuchsia: #EE30FB;
  --colour-light-gold: #FFD601;
  --colour-deep-gold: #FFCF5E;
  --colour-light-slate-blue: #9966FF;
  --colour-blue-violet: #7232F1;
  --colour-midnight-blue: #101D51;
  --colour-violet: #FB76FA;
  --colour-deep-midnight-blue: #061B31;
  --colour-light-midnight-blue: #2D2564;
  --colour-medium-blue: #1318C1;
  --colour-orange-red: #FF6118;
  --gradient-1: linear-gradient(90deg, 0, 20%, 40%, 60%, 100%);
  --gradient-2: linear-gradient(68deg,rgba(83,58,253,.08) .78%,rgba(255,140,108,.8) 30.61%,rgba(218,75,254,.8) 79.02%);
  --gradient-3: linear-gradient(73.3deg,rgba(218,75,254,.8) 9.85%,rgba(113,92,255,.48) 61.94%);

  /* Typefaces */
  --font-headings: 'sohne-var', 'SF Pro Display', sans-serif;
  --font-buttons: 'sohne-var', 'SF Pro Display', sans-serif;
  --font-body: 'sohne-var', 'SF Pro Display', sans-serif;
  --font-other: 'SourceCodePro', 'SFMono-Regular', monospace;

  /* Type scale */
  --text-small: 80%;

  /* Shape */
  --radius-1: 6px;
  --radius-2: 4px;
  --radius-3: 2px;
  --radius-4: 50%;
  --radius-5: 1px;
  --radius-6: 3px;

  /* Layout (breakpoints can’t be used in media queries as variables; they’re here for reference) */
  --breakpoint-1: 600px;
  --breakpoint-2: 639px;
  --breakpoint-3: 640px;
  --breakpoint-4: 840px;
  --breakpoint-5: 939px;
  --breakpoint-6: 940px;
  --breakpoint-7: 1264px;
  --breakpoint-8: 1300px;
  --max-width-1: 1349px;
  --max-width-2: 920px;
  --max-width-3: 608px;
  --max-width-4: 544px;
  --max-width-5: 400px;
  --max-width-6: 360px;
}

{
    "site": "stripe.com",
    "source": "https://sitestyleguide.com/stripe.com",
    "text": "#1A1A1A",
    "background": "#FFFFFF",
    "colours": [
        {
            "name": "White",
            "hex": "#FFFFFF",
            "rgb": [
                255,
                255,
                255
            ]
        },
        {
            "name": "Cool Off White",
            "hex": "#E3ECF7",
            "rgb": [
                227,
                236,
                247
            ]
        },
        {
            "name": "Black",
            "hex": "#000000",
            "rgb": [
                0,
                0,
                0
            ]
        },
        {
            "name": "Off White",
            "hex": "#ECF0F4",
            "rgb": [
                236,
                240,
                244
            ]
        },
        {
            "name": "Deep Slate Blue",
            "hex": "#635BFF",
            "rgb": [
                99,
                91,
                255
            ]
        },
        {
            "name": "Fuchsia",
            "hex": "#EE30FB",
            "rgb": [
                238,
                48,
                251
            ]
        },
        {
            "name": "Light Gold",
            "hex": "#FFD601",
            "rgb": [
                255,
                214,
                1
            ]
        },
        {
            "name": "Deep Gold",
            "hex": "#FFCF5E",
            "rgb": [
                255,
                207,
                94
            ]
        },
        {
            "name": "Light Slate Blue",
            "hex": "#9966FF",
            "rgb": [
                153,
                102,
                255
            ]
        },
        {
            "name": "Blue Violet",
            "hex": "#7232F1",
            "rgb": [
                114,
                50,
                241
            ]
        },
        {
            "name": "Midnight Blue",
            "hex": "#101D51",
            "rgb": [
                16,
                29,
                81
            ]
        },
        {
            "name": "Violet",
            "hex": "#FB76FA",
            "rgb": [
                251,
                118,
                250
            ]
        },
        {
            "name": "Deep Midnight Blue",
            "hex": "#061B31",
            "rgb": [
                6,
                27,
                49
            ]
        },
        {
            "name": "Light Midnight Blue",
            "hex": "#2D2564",
            "rgb": [
                45,
                37,
                100
            ]
        },
        {
            "name": "Medium Blue",
            "hex": "#1318C1",
            "rgb": [
                19,
                24,
                193
            ]
        },
        {
            "name": "Orange Red",
            "hex": "#FF6118",
            "rgb": [
                255,
                97,
                24
            ]
        }
    ],
    "fonts": [
        {
            "name": "sohne-var",
            "stack": "\"sohne-var\", \"SF Pro Display\", sans-serif",
            "weights": [
                300,
                400,
                1000
            ],
            "source": "Served from b.stripecdn.com"
        },
        {
            "name": "SourceCodePro",
            "stack": "\"SourceCodePro\", \"SFMono-Regular\", monospace",
            "weights": [
                500
            ],
            "source": "Served from b.stripecdn.com"
        }
    ]
}

Websites whose lead colour is closest to Stripe’s

SiteGround

siteground.com · 14 hours ago
Save
Discord

discord.gg · 6 days ago
Save
WordPress.com

wp.me · 19 hours ago
Save
WordPress.org

wordpress.org · 1 day ago
Save

Captured from stripe.com on 23 October 2026. SiteStyleGuide isn’t affiliated with or endorsed by Stripe; this guide describes the public website for reference.

Stripestyle guide

Title &description

Logo

Favicons

Colour

Balance

Neutrals

White

Cool Off White

Black

Off White

Colours

Deep Slate Blue

Fuchsia

Light Gold

Deep Gold

Light Slate Blue

Blue Violet

Midnight Blue

Violet

Deep Midnight Blue

Light Midnight Blue

Medium Blue

Orange Red

Gradients

sohne-var

Type scale

Sizes in use

Elements

Grid

Notes

Questions

Tokens

Share

Run stripe.com?

Similar colours

SiteGround

Discord

WordPress.com

WordPress.org

Title &
description