# Stripe design system: colors, fonts and tokens

> Stripe's website (stripe.com) uses a light interface with #533afd as its primary color and sohne-var as the main typeface. designlang measured 14 font sizes from 8px to 56px, 13 spacing values, 5 corner radii.

Source: https://stripe.com, captured 21 May 2026. Page: https://designlang.app/design-system/stripe

## Colors

| Role | Hex | Uses |
|---|---|---|
| Primary | `#533afd` | 899 |
| Secondary | `#e5edf5` | 57 |
| Accent | `#ffe0d1` | 2 |

Neutrals: `#000000`, `#50617a`, `#ffffff`, `#64748d`, `#7d8ba4`, `#101010`, `#f2f7fe`

Backgrounds: `#ffffff`, `#e5edf5`, `#f8fafd`, `#0d1738`, `#f2f7fe`

## Fonts

- sohne-var (sans), 2408 elements

## Type scale

| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 56px | 300 | 57.68px | -1.4px | h2 |
| 48px | 300 | 55.2px | -0.96px | h1, em, span, p |
| 32px | 300 | 35.2px | -0.64px | h2, p, h3, span |
| 26px | 400 | normal | normal | div, h3, span, q |
| 22px | 300 | 24.2px | -0.22px | h3, p |
| 20px | 300 | 28px | -0.2px | p |
| 18px | 300 | 25.2px | normal | p, div, span |
| 16px | 400 | normal | normal | html, head, meta, link |
| 14px | 400 | 14px | normal | button, svg, path, a |
| 12px | 400 | normal | normal | div, span, p |
| 11px | 300 | 16px | normal | div, span |
| 10px | 300 | 15px | 0.1px | div, span |
| 9px | 300 | normal | normal | div, svg, path, span |
| 8px | 400 | 8.96px | normal | div |

## Spacing

1px, 28px, 32px, 40px, 48px, 52px, 60px, 64px, 72px, 80px, 96px, 340px, 366px

## Radii

1px, 4px, 8px, 16px, 100px

## Motion

Feel: responsive. Durations: 100ms, 200ms, 300ms, 500ms, 800ms.

## Audit

Overall 88/100 (grade B).

- Color Discipline: 80/100
- Typography Consistency: 92/100
- Spacing System: 100/100
- Shadow Consistency: 100/100
- Border Radius Consistency: 90/100
- Accessibility: 79/100
- CSS Tokenization: 100/100

## CSS variables

```css
:root {
  --color-primary: #533afd;
  --color-secondary: #e5edf5;
  --color-accent: #ffe0d1;
  --color-background: #ffffff;
  --color-text: #000000;
  --color-neutral-1: #000000;
  --color-neutral-2: #50617a;
  --color-neutral-3: #ffffff;
  --color-neutral-4: #64748d;
  --font-primary: "sohne-var", sans-serif;
  --radius-sm: 1px;
  --radius-md: 4px;
  --radius-lg: 8px;
}
```

## Downloads

- [W3C DTCG tokens](https://designlang.app/gallery/stripe-com/stripe-com-design-tokens.json)
- [Tailwind config (v3)](https://designlang.app/gallery/stripe-com/stripe-com-tailwind.config.js)
- [Tailwind v4 @theme](https://designlang.app/gallery/stripe-com/stripe-com-tailwind-v4.css)
- [CSS variables](https://designlang.app/gallery/stripe-com/stripe-com-variables.css)
- [shadcn/ui theme](https://designlang.app/gallery/stripe-com/stripe-com-shadcn-theme.css)
- [Figma variables](https://designlang.app/gallery/stripe-com/stripe-com-figma-variables.json)
- [DESIGN.md](https://designlang.app/gallery/stripe-com/stripe-com-DESIGN.md)
- [Brand book PDF](https://designlang.app/gallery/stripe-com/stripe-com.brand.pdf)

Regenerate: `npx designlang stripe.com`