# Stripe design system

> Captured from https://stripe.com/ on 2026-10-05 by Brooks New Media (https://design.brooksnewmedia.com/styles/stripe/). An independent analysis for reference: Stripe and its marks belong to their owner. Learn from the system; don't copy the brand.

## Overview

Stripe sets the whole page in one variable grotesk at weight 300, including the 48px headline, so it reads calm rather than loud. Ink is a deep navy (#061b31) with slate greys for supporting copy, on white and a pale blue-grey surface. The violet #533afd is kept for actions, and a multicolor gradient ribbon behind the headline is the one loud element on the page.

- Theme: light
- Mood: light, editorial, fintech
- Category: Fintech

## Colors

| Role | Hex | Use |
|---|---|---|
| Background | `#ffffff` | The page ground |
| Surface | `#e5edf5` | Raised panels, bands and cards |
| Text | `#061b31` | Primary ink, 17.4:1 on the background |
| Muted text | `#50617a` | Supporting copy, 6.3:1 on the background |
| Accent | `#533afd` | Primary actions |
| Border | `#e5edf5` | Hairlines and dividers |

Full palette, most used first: `#ffffff`, `#061b31`, `#e5edf5`, `#50617a`, `#533afd`, `#64748d`, `#000000`, `#3c4f69`, `#81b81a`, `#7f86ff`.

## Typography

- **sohne-var**: display and body, 100% of the text. Use Inter at weight 300 to 400. Söhne is a commercial typeface from Klim Type Foundry. Inter is the closest free stand-in, not a match.

| Role | Family | Size | Weight | Line height | Tracking |
|---|---|---|---|---|---|
| Display | sohne-var | 48px | 300 | 1.15 | -0.02em |
| Heading | sohne-var | 32px | 300 | 1.1 | -0.02em |
| Subheading | sohne-var | 26px | 300 | 1.12 | -0.01em |
| Body | sohne-var | 14px | 300 | 1.4 | 0 |
| Small | sohne-var | 11px | 300 | 1.4 | 0 |

Sizes in use, largest first: 48px, 32px, 26px, 16px, 15px, 14px, 12px, 11px, 10px.

## Spacing

Values sit on a 4px grid.
Values in use: 2px, 18px, 20px, 24px, 36px, 40px, 60px.

## Shape

Corner radii, smallest first: 3px, 4px, 5px, 6px, 100px, pill (9999px).

Shadows, most used first:

- `rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px`
- `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`

## Components

### Primary button ("Contact sales")

- Fill: #533afd
- Text: #ffffff, 14px at weight 400
- Border: none
- Corner: 4px
- Height: 40px, padding 12px 20px

### Secondary button ("Sign up with Google")

- Fill: #ffffff
- Text: #533afd, 16px at weight 400
- Border: 1px solid #b9b9f9
- Corner: 4px
- Height: 48px, padding 15px 24px

### Card

- Fill: #e5edf5
- Border: none
- Corner: 6px
- Shadow: none

## Do

- Use one light weight across headline and body and let size carry the hierarchy.
- Write ink in navy and slate rather than black and grey.
- Fill primary buttons with the violet and keep secondary buttons as thin violet outlines.

## Don't

- Bold the headline: the calm comes from weight 300.
- Spread the violet into large backgrounds.
- Round buttons into pills: corners stay near 4px.

## CSS variables

```css
:root {
  --color-background: #ffffff;
  --color-surface: #e5edf5;
  --color-text: #061b31;
  --color-text-muted: #50617a;
  --color-accent: #533afd;
  --color-border: #e5edf5;
  --font-display: "sohne-var", "Inter", system-ui, sans-serif;
  --text-display: 48px;
  --weight-display: 300;
  --font-heading: "sohne-var", "Inter", system-ui, sans-serif;
  --text-heading: 32px;
  --weight-heading: 300;
  --font-subheading: "sohne-var", "Inter", system-ui, sans-serif;
  --text-subheading: 26px;
  --weight-subheading: 300;
  --font-body: "sohne-var", "Inter", system-ui, sans-serif;
  --text-body: 14px;
  --weight-body: 300;
  --font-small: "sohne-var", "Inter", system-ui, sans-serif;
  --text-small: 11px;
  --weight-small: 300;
  --space-1: 2px;
  --space-2: 18px;
  --space-3: 20px;
  --space-4: 24px;
  --space-5: 36px;
  --space-6: 40px;
  --space-7: 60px;
  --radius-1: 3px;
  --radius-2: 4px;
  --radius-3: 5px;
  --radius-4: 6px;
  --radius-5: 100px;
  --radius-6: 9999px;
}
```

## Notes for AI coding tools

- Start from the CSS variables above and build components from them, not from new values.
- Use the font substitutes listed. Never embed a commercial or platform-only typeface without a license.
- Keep body text at 4.5:1 contrast or better against its ground.
- These values were measured from the live page at 1440x900; the site may have changed since 2026-10-05.