# Design Style Guide: Stripe | Financial Infrastructure to Grow Your Revenue



> Source: https://stripe.com

> Extracted: 2026-05-15 22:20

> Viewport: 1280x720 | Full page: 14417px



## Design Philosophy



- **Light theme** — light/white backgrounds with dark text

- **Single typeface** (sohne-var) — unified, cohesive feel

- **Pill-shaped elements** — fully rounded buttons/badges

- **Glassmorphism** — backdrop blur effects for depth

- **Generous whitespace** — large section gaps for breathing room

- **Accent color** — `#533afd` used for interactive elements



---



## Color Palette



### Backgrounds



**Dark / Base**

- `#533afd`

- `#000000`



**Light / Surface**

- `#ffffff` (used 32x)

- `#e5edf5` (used 17x)

- `#f8fafd` (used 7x)

- `#e2e4ff`

- `#ffe0d1`

- `#ecf0f4`



**Vibrant / Accent**

- `#7f7dfc` (used 31x)

- `#00d66f`



**Semi-transparent**

- `rgba(248, 251, 253, 0.45)`

- `rgba(255, 255, 255, 0.38)`

- `rgba(39, 98, 177, 0.1)`

- `rgba(255, 226, 216, 0.1)`



### Text



**Dark / Base**

- `#000000` (used 850x)

- `#533afd` (used 286x)

- `#061b31` (used 235x)

- `#4304ea` (used 23x)

- `#0000ee` (used 22x)

- `#3c4f69` (used 18x)



**Light / Surface**

- `#50617a` (used 108x)

- `#64748d` (used 80x)

- `#667691` (used 18x)

- `#ffffff` (used 16x)

- `#7d8ba4` (used 7x)



**Vibrant / Accent**

- `#ff6118` (used 18x)

- `#6b59fe`

- `#7f7dfc`

- `#81b81a`



**Semi-transparent**

- `rgba(17, 17, 17, 0.3)`

- `rgba(0, 14, 255, 0.5)`



### Borders



**Dark / Base**

- `#000000` (used 44x)

- `#061b31` (used 15x)



**Light / Surface**

- `#e5edf5` (used 68x)

- `#50617a` (used 10x)

- `#f6f9fc`

- `#d6d9fc`

- `#e2e4ff`

- `#e7ecf1`



**Vibrant / Accent**

- `#ff6118`

- `#6b59fe`



**Primary accent**: `#533afd`





## Typography



**Font stack**: sohne-var



| Role | Font | Size | Weight | Line Height | Tracking |

|------|------|------|--------|-------------|----------|

| Display / H1 | sohne-var | 56px | 300 | 57.68px | -1.4px |

| Display / H1 | sohne-var | 48px | 300 | 49.44px | -0.96px |

| Display / H1 | sohne-var | 43.2px | 300 | 49.68px | -0.864px |

| Display / H1 | sohne-var | 32px | 300 | 35.2px | -0.64px |

| Body | sohne-var | 26px | 400 | normal | normal |

| H3 | sohne-var | 26px | 300 | 29.12px | -0.26px |

| H3 | sohne-var | 22px | 300 | 24.2px | -0.22px |

| Body | sohne-var | 18px | 300 | 25.2px | normal |

| Body | sohne-var | 16px | 400 | normal | normal |

| Body | sohne-var | 16px | 300 | 22.4px | normal |

| Body | sohne-var | 15px | 400 | 21px | normal |

| Body Small | sohne-var | 14px | 400 | 14px | normal |

| Body Small | sohne-var | 14px | 300 | normal | -0.42px |

| Body Small | sohne-var | 13px | 400 | normal | -0.205px |

| Caption | sohne-var | 12px | 400 | normal | normal |

| Caption | sohne-var | 12px | 300 | 16px | 0.036px |

| Caption | sohne-var | 11px | 300 | 16px | normal |

| Caption | sohne-var | 11px | 400 | 15.4px | normal |

| Caption | sohne-var | 10px | 300 | 15px | 0.1px |

| Caption | sohne-var | 10px | 400 | 11.5px | 0.1px |

| Caption | sohne-var | 9px | 300 | normal | normal |

| Caption | sohne-var | 9px | 400 | 10.8px | normal |

| Caption | sohne-var | 8px | 400 | 8.96px | normal |

| Caption | sohne-var | 8px | 300 | 8.56px | normal |





## Spacing Scale



`1px` · `2px` · `3px` · `4px` · `5px` · `6px` · `7px` · `8px` · `9px` · `10px` · `11px` · `12px` · `13px` · `14px` · `15px` · `16px` · `17px` · `18px` · `20px` · `22px` · `24px` · `28px` · `32px` · `34px` · `36px`



*Based on a **4px grid** system.*





## Borders, Radii & Effects



**Border radius**: `100%`, `1px`, `3px`, `4px`, `4.51px`, `5px`, `6px`, `8px`



**Shadows**:

- `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px`

- `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`

- `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px`

- `rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px`

- `rgba(50, 50, 93, 0.12) 0px 15.931px 31.863px 0px`

- `rgba(50, 50, 93, 0.12) 0px 4px 48.8px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px`



**Effects**:

- `backdrop-filter: blur(12px)`

- `filter: blur(10px)`

- `filter: blur(15px)`





## Component Patterns



### Buttons



- **"Products"** (ghost)

  - `background: transparent` · `color: #061b31`

  - `font: 14px / 400`

  - `padding: 12px 0px` · `radius: 4px`



- **"Contact sales"** (filled)

  - `background: #533afd` · `color: #ffffff`

  - `font: 14px / 400`

  - `padding: 11.5px 20px 14.5px` · `radius: 4px`



### Navigation



- **7 links**: Stripe homepage, Pricing, Sign in, Start now, Contact sales, Sign in

  - Layout: `flex`, gap: `28px`





## Layout Patterns



### Grid

- `<div>` — 12 columns, gap `40px 16px`

- `<div>` — 2 columns, gap `normal 12px`

- `<div>` — 3 columns, gap `14px`

- `<div>` — 2 columns, gap `normal`

- `<div>` — 2 columns, gap `6px`

- `<div>` — 3 columns, gap `normal`



### Flexbox

- `<nav>`, row, align: center, gap: 28px, (5 children)

- `<ul>`, row, align: center, (36 children)

- `<div>`, column, gap: 64px, (2 children)

- `<div>`, row, gap: 16px, (6 children)

- `<button>`, row, (4 children)





## Assets



32 images, 27 SVG icons detected.



- `1392px × 975px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/115d4Vd5LVAsqFGDR1ClAv...`

- `280px × 477px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/1Vf8oT9Fm6dEwpnEx5PgK1...`

- `80px × 86px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/6BTjJGdjfGVA8brPwj7p3M...`

- `80px × 86px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/5Dr3Oc550drIrxyzzXgFbq...`

- `80px × 86px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/1UE1lPgwbfQRH586XfTWKM...`

- `80px × 86px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/6BTjJGdjfGVA8brPwj7p3M...`

- `860px × 712px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/vYmk6v8n7oDAwbDpwhjV6/...`

- `92px × 92px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/2rL4pJabxq9Yo0haXwK2HO...`

- `92px × 92px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/6KmB7XGsUbTefNew25WF4T...`

- `440px × 628px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/78eaknFXeySTtfpQUh4lD2...`

- `440px × 716px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/1zneiFjZyS8cGQvki2cGqz...`

- `444px × 723px` (no alt) — `https://images.stripeassets.com/fzn2n1nzq965/7dwxc06fkzWOmlwBs9GezW...`

- ... and 20 more



**Named SVG icons**: Stripe logo, OpenAI, Amazon, Nvidia, Ford, Coinbase, Google, Shopify, Mindbody, MetLife

