Stripe

Stripe sets large sohne-var headlines in a light weight with tight tracking on a light bone white canvas. Indigo (#533afd) is reserved for actions, on buttons with 4px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 4px, with 6px and 5px on smaller elements.

stripe.com ↗

Colors

Indigo

#533afd

Primary actions and links

Deep Indigo

#0d1738

Secondary accent and highlights

Bone White

#ffffff

Page canvas

Void

#000000

Headlines and body copy

Pale Cobalt

#e5edf5

Surface or divider

Cobalt

#50617a

Supporting colour

Deep Bone White

#f8fafd

Surface or divider

Deep Cobalt

#061b31

Surface or divider

Soft Cobalt

#64748d

Supporting colour

Type scale

DisplayFinancial infrastructure to grow your revenue. Accept payments, handle business banking,1 sohne-var · 48px · 300

HeadingFlexible solutions for every business model.sohne-var · 32px · 300

SubheadingAccept and optimize payments globally—online and in personsohne-var · 26px · 300

BodyGrow your business with a comprehensive set of payments and financial tools⁠—⁠designed to sohne-var · 32px · 300

NavPricingsohne-var · 14px · 400

Buttons

Contact salesGet startedStripe for enterprisesRead the story

Style reference measured from the public page at stripe.com on 2026-10-12 for design education. Stripe and its logos are trademarks of their owners; AnimatedWebs is not affiliated with or endorsed by them. Owners can ask us to update or remove this page via our copyright page.

Connect to your AI ↗

# Stripe — Style Reference
> Stripe sets large sohne-var headlines in a light weight with tight tracking on a light bone white canvas. Indigo (#533afd) is reserved for actions, on buttons with 4px corners, while the rest of the page stays with void text and neutral surfaces. The most common corner radius is 4px, with 6px and 5px on smaller elements.

**Theme:** light · **Source:** https://stripe.com (captured 2026-10-12). Measurements come from the rendered page; roles are interpreted.

## Tokens — Colors

| Name | Value | Token | Role |
|------|-------|-------|------|
| Indigo | `#533afd` | `--color-accent` | Primary actions and links |
| Deep Indigo | `#0d1738` | `--color-secondary` | Secondary accent and highlights |
| Bone White | `#ffffff` | `--color-canvas` | Page canvas |
| Void | `#000000` | `--color-ink` | Headlines and body copy |
| Pale Cobalt | `#e5edf5` | `--color-surface-1` | Surface or divider |
| Cobalt | `#50617a` | `--color-surface-2` | Supporting colour |
| Deep Bone White | `#f8fafd` | `--color-surface-3` | Surface or divider |
| Deep Cobalt | `#061b31` | `--color-surface-4` | Surface or divider |
| Soft Cobalt | `#64748d` | `--color-surface-5` | Supporting colour |

## Typography

| Role | Family | Size | Weight | Line height | Tracking |
|------|--------|------|--------|-------------|----------|
| Display | sohne-var | 48px | 300 | 1.15 | -0.020em |
| Heading | sohne-var | 32px | 300 | 1.10 | -0.020em |
| Subheading | sohne-var | 26px | 300 | 1.12 | -0.010em |
| Body | sohne-var | 32px | 300 | 1.10 | -0.020em |
| Nav | sohne-var | 14px | 400 | 1.00 | 0 |

Font families on the page: sohne-var. Brand fonts are licensed by their owners; use a close open alternative (Inter, Geist, Manrope) if you don't hold a licence.

## Shape

- Corner radius, most to least used: 4px, 6px, 5px, 8px, 100%
- Primary button: background `#533afd`, text `#ffffff`, radius 4px, padding 11.5px 20px 12.5px, 14px / 400

More styles from the web

Apple iPhone

Linear

Apple

Vercel

Notion

Figma

Framer

Spotify