# Design system: stripe.com

> Extracted from https://stripe.com by [stole.si](https://www.stole.si) on 2026-10-11. Values were read from the live page's computed styles in a real browser; color roles and the type, spacing and radius scales are grouped from those measurements. Use it for inspiration and consistency, not to clone the site: do not copy logos, images, text or trademarks.

**At a glance:** Light theme on #ffffff with a #533afd accent. Text is sohne-var at 16px. Spacing follows a 4px grid. Corners are 4px. Uses soft shadows.

## How to use this file (for AI coding agents)

- Treat the tokens below as the source of truth for color, type, spacing, corner radius and shadow.
- Reference tokens by name (CSS variables from `tokens.css`, or the Tailwind theme in `tailwind.config.js`) instead of hard-coding values.
- Need a value that is not listed? Use the nearest token. Do not invent new colors, font sizes or spacing steps.
- Use `--color-text` on `--color-background` for body copy and `--color-muted` only for secondary text. Keep text contrast at 4.5:1 or more.
- Use `--color-accent` sparingly: primary actions, links and key highlights.
- Build original layouts, copy and imagery. This file describes a visual style, not a page to reproduce.

## Colors

| Token | Value | Use | Contrast |
|---|---|---|---|
| `--color-background` | `#ffffff` | Page background | — |
| `--color-surface` | `#e5edf5` | Cards, panels and raised sections | 1.18:1 on background |
| `--color-text` | `#061b31` | Body text and headings | 17.37:1 on background |
| `--color-muted` | `#50617a` | Secondary text, captions and metadata | 6.30:1 on background |
| `--color-accent` | `#533afd` | Primary buttons, links and highlights | 6.19:1 on background |
| `--color-on-accent` | `#ffffff` | Text and icons on the accent color | 6.19:1 on accent |
| `--color-accent-2` | `#061b31` | Secondary highlight color | 17.37:1 on background |
| `--color-border` | `#e5edf5` | Borders, dividers and input outlines | 1.18:1 on background |

Other recurring colors:

| Token | Value | Share of use |
|---|---|---|
| `--color-blue-450` | `#64748d` | 7.2% |
| `--color-indigo-700` | `#182659` | 1.0% |
| `--color-indigo-200` | `#b9b9f9` | 0.7% |
| `--color-indigo-350` | `#7389ff` | 1.1% |
| `--color-lime-300` | `#81b81a` | 0.6% |
| `--color-blue-350` | `#7d8ba4` | 0.5% |
| `--color-neutral-950` | `#000000` | 0.4% |

## Typography

| Token | Family | Source | Weights | CSS stack |
|---|---|---|---|---|
| `--font-body` | sohne-var | web font | 300, 400 | `"sohne-var", "SF Pro Display", sans-serif` |

Web fonts are not included. Use the same family only if its license allows it; otherwise pick a similar font and keep the fallback stack.

Type scale (1rem = 16px):

| Token | Size | Line height | Weight | Letter spacing | Family | Used for |
|---|---|---|---|---|---|---|
| `--text-4xl` | 48px / 3rem | 1.15 | 300 | -0.02em | sohne-var | h1 |
| `--text-3xl` | 32px / 2rem | 1.1 | 300 | -0.02em | sohne-var | h2 |
| `--text-2xl` | 26px / 1.625rem | 1.12 | 300 | -0.01em | sohne-var | p, h3 |
| `--text-xl` | 22px / 1.375rem | 1.1 | 300 | -0.01em | sohne-var | h3 |
| `--text-lg` | 18px / 1.125rem | 1.4 | 300 | 0em | sohne-var | nav, span |
| `--text-base` | 16px / 1rem | 1.4 | 300 | 0em | sohne-var | h4 |
| `--text-sm` | 14px / 0.875rem | 1.4 | 300 | 0em | sohne-var | p, link |
| `--text-xs` | 12px / 0.75rem | normal | 300 | 0em | sohne-var | p, button |
| `--text-2xs` | 11px / 0.6875rem | 1.45 | 300 | 0em | sohne-var | button |
| `--text-3xs` | 10px / 0.625rem | 1.45 | 300 | 0em | sohne-var | button |
| `--text-4xs` | 9px / 0.5625rem | 1.2 | 300 | 0em | sohne-var | button |

## Spacing

Built on a 4px grid. Token names follow Tailwind's 4px unit (`2` = 8px).

| Token | Value | Times used |
|---|---|---|
| `--space-0_5` | 2px | 29 |
| `--space-1` | 4px | 120 |
| `--space-1_5` | 6px | 79 |
| `--space-1_75` | 7px | 22 |
| `--space-2` | 8px | 305 |
| `--space-2_5` | 10px | 68 |
| `--space-3` | 12px | 75 |
| `--space-3_5` | 14px | 41 |
| `--space-4` | 16px | 244 |
| `--space-5` | 20px | 17 |
| `--space-6` | 24px | 110 |
| `--space-8` | 32px | 76 |
| `--space-10` | 40px | 32 |
| `--space-16` | 64px | 64 |

## Corner radius

| Token | Value | Times used |
|---|---|---|
| `--radius-none` | 0px | 123 |
| `--radius-sm` | 4px | 45 |
| `--radius-md` | 6px | 41 |
| `--radius-full` | 9999px (pill) | 6 |

## Shadows

| Token | Value |
|---|---|
| `--shadow-sm` | `0px 3px 6px 0px rgba(23,23,23,0.06)` |
| `--shadow-md` | `0px 16px 32px 0px rgba(50,50,93,0.12)` |
| `--shadow-lg` | `0px 15px 35px 0px rgba(23,23,23,0.08)` |

## Layout

- Content max width: `1266px` (`--container`).
- Breakpoints: `sm` 600px, `md` 640px, `lg` 750px, `xl` 840px, `2xl` 940px, `3xl` 1264px, `4xl` 1300px.

## Components

Measured from the most common instance on the page.

### Primary button

```css
.button-primary {
  background: var(--color-accent);
  color: var(--color-background);
  border-radius: var(--radius-sm);
  padding: 15.5px 24px 16.5px 24px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 400;
}
```

### Secondary button

```css
.button-secondary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-indigo-200);
  border-radius: var(--radius-sm);
  padding: 14.5px 24px 15.5px 24px;
  min-height: 48px;
  font-size: 16px;
  font-weight: 400;
}
```

### Text input

```css
.input {
  background: var(--color-background);
  color: var(--color-neutral-950);
  border-radius: var(--radius-none);
  min-height: 129px;
  padding: 11px 17px;
  font-size: 16px;
}
```

### Card

```css
.card {
  border: 1px solid var(--color-neutral-950);
  border-radius: var(--radius-none);
  padding: 96px 16px;
}
```

### Link

```css
a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: 400;
}
```

## Tech stack

- **Framework:** Next.js 14.2.32, React
- **Library:** core-js 3.6.5
- **Language:** Node.js
- **Server:** Nginx
- **Analytics:** Google Tag Manager
- **Other:** Sentry, three.js 178, Webpack

## The site's own CSS variables

Declared on `:root` by the site (first 40). Useful to see how the original team named things.

```css
--hds-color-core-neutral-975: #0d253d;
--hds-color-accent-border-solid: #533afd;
--hds-font-input-text-md-lineHeight: 1.3;
--hds-shadow-sm-top-offset-y: 5px;
--hds-color-accentColorMode-ruby-icon-solid: #ea2261;
--hds-color-util-brand-900: #1c1e54;
--hds-color-action-bg-subduedHover: #b9b9f9;
--hds-color-input-text-label: #273951;
--hds-shadow-sm-bottom-offset-y: 2px;
--hds-color-accentColorMode-magenta-surface-subduedAlt: #ffe6f5;
--hds-color-input-text-selected: #273951;
--hds-space-core-1900: 152px;
--hds-space-core-300: 24px;
--hds-color-input-text-popover: #273951;
--hds-shadow-xs-top-blur: 10px;
--hds-color-shadow-sm-top: #00377014;
--hds-color-button-ui-iconHover: #2e2b8c;
--hds-font-heading-xs-lineHeight: 1.2;
--hds-space-core-250: 20px;
--hds-color-core-brandDark-800A: #4b31d080;
--navigation-inline-end: 16px;
--hds-space-core-2000: 160px;
--hds-shadow-xs-bottom-blur: 4px;
--hds-font-heading-md-letterSpacing: -0.01em;
--hds-color-core-lemon-500: #9b6829;
--hds-color-input-text-placeholder: #7d8ba4;
--hds-color-shadow-lg-top: #0037701a;
--hds-color-util-bg-min: #fff;
--hds-color-core-neutral-50A: #a8c3de4d;
--hds-font-quoteAttribution-md-weight: 300;
--hds-color-util-neutral-50: #e5edf5;
--hds-color-input-selector-text-range: #665efd;
--hds-color-accentColorMode-magenta-icon-gradientMiddle: #f96bee;
--hds-color-accentColorMode-lemon-surface-subdued: #fff2d8;
--hds-font-text-lg-letterSpacing: 0em;
--hds-font-heading-md-weight: 300;
--hds-color-core-neutralDark-25: #f2f7fe;
--hds-font-heading-xl-lineHeight: 1.03;
--hds-color-input-border-hover: #665efd;
--hds-shadow-xs-top-offset-y: 2px;
```

---
Generated by stole.si: Super Intelligence for design systems. Values are publicly visible style data from https://stripe.com, provided for learning and inspiration.