Design system stripe.com

---
version: alpha
name: "stripe.com"
description: "Design system extracted from https://stripe.com/ on 2026-09-28"
colors:
  background: "#ffffff"
  surface: "#e5edf5"
  surface-2: "#d4dee9"
  surface-3: "#ffe0ef"
  foreground: "#061b31"
  muted-foreground: "#50617a"
  primary: "#533afd"
  on-primary: "#ffffff"
  secondary: "#5d0252"
  border: "#e5edf5"
typography:
  headline-display:
    fontFamily: "sohne-var"
    fontSize: "48px"
    fontWeight: 300
    lineHeight: "1.15"
    letterSpacing: "-0.96px"
  headline-lg:
    fontFamily: "sohne-var"
    fontSize: "32px"
    fontWeight: 300
    lineHeight: "1.1"
    letterSpacing: "-0.64px"
  headline-md:
    fontFamily: "sohne-var"
    fontSize: "22px"
    fontWeight: 300
    lineHeight: "1.1"
    letterSpacing: "-0.22px"
  body-md:
    fontFamily: "sohne-var"
    fontSize: "16px"
    fontWeight: 300
    lineHeight: "1.4"
  label-md:
    fontFamily: "sohne-var"
    fontSize: "11px"
    fontWeight: 300
    lineHeight: "1.45"
  button:
    fontFamily: "sohne-var"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "1"
rounded:
  none: "0px"
  sm: "4px"
  md: "6px"
  full: "9999px"
spacing:
  unit: "4px"
  1: "4px"
  2: "8px"
  3: "12px"
  4: "16px"
  5: "20px"
  6: "24px"
  7: "32px"
  8: "40px"
components:
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "#061b31"
    typography: "{typography.button}"
    rounded: "4px"
    height: "40px"
    padding: "12px 0px"
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "#533afd"
    typography: "{typography.button}"
    rounded: "4px"
    height: "40px"
    padding: "10.5px 20px"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "4px"
    height: "40px"
    padding: "11.5px 20px"
  card:
    backgroundColor: "#ffffff"
    rounded: "6px"
    padding: "0px"
---

# stripe.com

## Overview

Stripe | Financial Infrastructure to Grow Your Revenue: Stripe is a financial services platform that helps all types of businesses accept payments, build flexible billing models, and manage money movement.

Sharp, squared-off controls, layered shadows for depth, confident display type at 48px / 300, a single blue accent on neutrals. The site ships in light mode by default. Measured from 3917 rendered elements at 1440px wide on 2026-09-28.

Reference screenshots live beside this file; look at them before writing any layout, they carry the composition, density and image treatment that tokens cannot:

- `screenshots/desktop-1440-fold.png`: Desktop 1440, above the fold
- `screenshots/desktop-1440-full.jpg`: Desktop 1440, full page
- `screenshots/laptop-1024-fold.png`: Laptop 1024, above the fold
- `screenshots/tablet-768-fold.png`: Tablet 768, above the fold
- `screenshots/phone-390-fold.png`: Phone 390, above the fold
- `screenshots/phone-390-full.jpg`: Phone 390, full page

## Colors

| Token | Value | Use |
| --- | --- | --- |
| background | `#ffffff` | Page background |
| surface | `#e5edf5` | Cards, panels, raised or recessed surfaces |
| surface-2 | `#d4dee9` | Secondary surface |
| surface-3 | `#ffe0ef` | Secondary surface |
| foreground | `#061b31` | Primary text |
| muted-foreground | `#50617a` | Secondary text, captions |
| primary | `#533afd` | Accent: primary buttons, links, focus |
| on-primary | `#ffffff` | Text on the accent |
| secondary | `#5d0252` | Secondary accent (pink) |
| border | `#e5edf5` | Hairlines, dividers, input borders |

Full painted palette by area (largest first): `#ffffff`, `#e5edf5`, `#0d1738`, `#122054`, `#79573e`, `#d4dee9`, `#5d0252`, `#533afd`.

Gradients in use: `radial-gradient(circle, rgb(127, 125, 252), rgb(244, 75, 204) 33%, rgb(229, 237, 245) 66%)`; `radial-gradient(102.83% 103.24% at 49.98% 104.51%, rgb(255, 180, 81) 0px, rgb(239, 198, 128) 16.73%, rgb(180, 216, 255) 33.03%, rgb(210, 232, 255) 43.38%, rgb(2`; `radial-gradient(50% 50% at 50% 50%, rgb(255, 207, 94) 41.35%, rgba(255, 207, 94, 0) 100%)`.

The accent `#533afd` is used sparingly: primary buttons, links and focus rings. Everything else stays neutral.

## Typography

- **sohne-var** for h1, h2, h3, body, label, button: self-hosted webfont, not freely available; use **Inter** from Google Fonts as the stand-in.

| Role | Family | Size | Weight | Line height | Tracking |
| --- | --- | --- | --- | --- | --- |
| headline-display | sohne-var | 48px | 300 | 1.15 | -0.96px |
| headline-lg | sohne-var | 32px | 300 | 1.1 | -0.64px |
| headline-md | sohne-var | 22px | 300 | 1.1 | -0.22px |
| body-md | sohne-var | 16px | 300 | 1.4 | normal |
| label-md | sohne-var | 11px | 300 | 1.45 | normal |
| button | sohne-var | 16px | 400 | 1 | normal |

Type scale in use: 10px, 11px, 12px, 14px, 15px, 16px, 22px, 26px, 32px, 48px, 56px. Base body size 16px.

The H1 renders at 48px / 300, start aligned, up to 958px wide, tracking -0.96px. Sample: "Financial infrastructure to grow your revenue. Accept payments, offer financial ".

## Layout

- Spacing unit: 4px. Scale in use: 4, 8, 12, 16, 20, 24, 32, 40 (px).
- Flex and grid gaps: 4, 8, 12, 16, 24, 28, 32, 40 px.
- Content max width: 1232px, centred.
- Breakpoints: 600px, 639px, 640px, 939px, 940px.
- Header: 76px tall, relative, background `rgba(0, 0, 0, 0)`; 5 nav links at 16px / 400 (Pricing · Guide me · Sign inSign in · Contact sales).

## Elevation & Depth

Shadows in use, most common first:

- shadow-1: `rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px`
- shadow-2: `rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px`
- shadow-3: `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px`
- shadow-4: `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`

## Shapes

- Buttons: 4px
- Inputs: 0px
- Cards and panels: 6px
- Images and media: 0px
- Radius scale: none 0px, sm 4px, md 6px, full 9999px

## Components

### Button, ghost

Background transparent, text `#061b31`, border none, radius 4px, height 40px, padding 12px 0px, 14px / 400. Sample label: "Products".

### Button, secondary

Background transparent, text `#533afd`, border 1px solid #ffffff, radius 4px, height 40px, padding 10.5px 20px, 14px / 400. Sample label: "Sign in".

### Button, primary

Background `#533afd`, text `#ffffff`, border none, radius 4px, height 40px, padding 11.5px 20px, 14px / 400. Sample label: "Contact sales".

### Card

Background `#ffffff`, border none, radius 6px, padding 0px, shadow `rgba(23, 23, 23, 0.06) 0px 3px 6px 0px`. Typical size about 618×539px.

### Link

Colour `#061b31`, no underline at rest, weight 400.

## Dark Mode

No dark mode responded to prefers-color-scheme, a theme toggle, or a root class/attribute.

## Responsive Behavior

| Viewport | Content width | Gutter | Body | H1 | Header | Hero | Grids | Buttons |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| desktop 1440px | 1232px | 208px | 16px | 48px, 4 lines, start | 76px, 4 links, 1 CTA | media below text | 2→1 col; 6→2 col; 2→2 col | 1 full-width |
| laptop 1024px | 958px | 114px | 16px | 46.1px, 5 lines, start | 76px, 3 links, 1 CTA | media below text | 2→1 col; 6→2 col; 2→2 col | 1 full-width |
| tablet 768px | 702px | 33px | 16px | 40px, 5 lines, start | 66px, hamburger (Toggle navigation menu), 1 CTA | media below text | 6→2 col; 2→2 col; 4→4 col | 2 full-width |
| phone 390px | 358px | 16px | 16px | 34px, 2 lines, start | 66px, hamburger (Toggle navigation menu), 1 CTA | media below text | 2→2 col; 4→4 col; 2→2 col | 13 full-width |

- H1 goes 48px → 34px (71%), 4 → 2 lines.
- Nav collapses to a hamburger by 390px (first seen at 768px); header 76px → 66px.
- Body text stays 16px at every width.
- Phone side gutter 16px.
- 13 buttons stretch full-width on phones.

## Interaction & Motion

550 elements carry transitions; typical 0.3s with cubic-bezier(0.25, 1, 0.5, 1), mostly on color, opacity, transform. 5 running keyframe animations (book-of-the-week-fade-in 0.5s 1; detect-scroll auto 1; gradient-border-input-shimmer 1s 1).

- Hover on button-primary ("Contact sales"): background #533afd → #4032c8; cursor pointer; transition color, background-color, border-color | 0.24s, 0.24s, 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95) | delay 0s, 0s, 0s.
- Hover on button-secondary ("Sign in"): background transparent → #ffffff, text #533afd → #2e2b8c, border #ffffff → #4032c8, icon/inner colour → #2e2b8c; cursor pointer; transition color, background-color, border-color | 0.24s, 0.24s, 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95) | delay 0s, 0s, 0s.
- Hover on nav-link ("Pricing"): no visible change; cursor pointer; transition color, background-color, border-color | 0.24s, 0.24s, 0.24s | cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95), cubic-bezier(0.45, 0.05, 0.55, 0.95) | delay 0s, 0s, 0s.
- Focus on button-primary: outline 3px solid rgba(84, 82, 251, 0.75), offset 1px.
- Tooltip triggers exist (5 × aria-describedby, 1 × title) but none opened on hover in the first viewport; title attributes fall back to the browser's native tooltip.
- Hover/click menus: below the trigger, 12px gap, shifted right; #ffffff, radius 0px, padding 0px 0px, shadow yes; 67 items, 42px tall, 14px, padding 0px 0px, with icons, with descriptions, 2 columns; appears after a delay; hides within 400ms of leaving (transition or unmount).
- 39 sizable elements sit at opacity 0 before scrolling: scroll-reveal animations are in use (reveal on enter, fade + rise is the usual recipe).

Full detail (every overlay, table, form, scroll and text rule measured) is in `BEHAVIOR.md`; raw evidence in `evidence.json`.

## Do's and Don'ts

- Do use 4px multiples for every padding, margin and gap; the site does not use odd values.
- Do reserve `#533afd` for actions and focus; never paint large areas with it.
- Do keep body text at 16px in sohne-var.
- Do match corner radii per element class (buttons 4px, cards 6px); do not pick one radius for everything.
- Do use the measured shadows above; do not invent heavier ones.
- Don't substitute a different accent hue or introduce gradients that are not listed above.
- Don't rebuild from the tokens alone; open the screenshots for composition, density and image treatment.