# Stripe — Design Reference

> Indigo ink on a quiet ledger, under one loud gradient

**Theme:** light · **Measured from:** stripe.com (English, 1440 px)

Stripe looks like a financial instrument. The canvas is white, the text is a deep navy (`#061b31`) set in one thin weight, and there is exactly one action color: indigo `#533afd`. Everything you can click is indigo; nothing else is. All the brand energy lives in a single oversized gradient ribbon (violet, pink, orange) that sweeps across the top right of the hero and never repeats as decoration elsewhere. Headlines are two-tone: the first sentence in navy, the rest of the paragraph in slate, as one continuous block. Product screenshots sit inside soft 6px cards with a faint, wide shadow. The page reads slow and confident: big type, lots of white, small sharp buttons.

## Colors

| Name | Hex | Role |
|------|-----|------|
| Indigo | `#533afd` | Primary action: filled buttons, links, chevrons, icon strokes |
| Navy Ink | `#061b31` | Headings and primary text — never pure black |
| Slate | `#50617a` | Body copy; gray second half of two-tone headlines |
| Steel | `#64748d` | Captions, labels, helper text |
| White | `#ffffff` | Page canvas and card surfaces |
| Frost | `#e5edf5` | Hairline borders, dividers, tinted feature cards |
| Mist | `#f8fafd` | Barely-tinted bands and footer |
| Lavender Line | `#b9b9f9` | 1px border of the outline button |
| Lilac Line | `#d6d9fc` | Softer outline for tertiary buttons |
| Indigo Wash | `#e2e4ff` | Fill of small secondary buttons and tags |
| Deep Indigo | `#2d2564` | Dark band behind the big stats section |
| Orange | `#ff6118` | Gradient stop; rare accent inside illustrations only |

**Gradient (hero only):** a ribbon blending `#7232f1` → `#fb76fa` → `#ffcf5e`, with radial glows of indigo `rgba(83,58,253,.8)` and pink `rgba(243,99,243,.8)`. Use it once, at the top. Never as a button or card fill.

## Typography

**sohne-var** is the only family. Substitute: **Inter Tight** (300/400) from Google Fonts.

- Weight **300** for everything you read — even the 48px headline. The thin weight *is* the brand.
- Weight **400** only for buttons and navigation.
- Tracking tightens as size grows: about `-0.02em` from 26px up.

| Role | Size | Weight | Line height | Letter spacing |
|------|------|--------|-------------|----------------|
| Display | 48px | 300 | 1.15 | -0.96px |
| Heading | 32px | 300 | 1.1 | -0.64px |
| Heading small | 26px | 300 | 1.12 | -0.26px |
| Subheading | 22px | 300 | 1.1 | -0.22px |
| Body large | 18px | 300 | 1.4 | 0 |
| Body | 16px | 300 | 1.4 | 0 |
| Button | 16px | 400 | 1 | 0 |
| Caption | 11px | 300 | 1.4 | 0 |

**Two-tone headline:** one paragraph, first sentence in Navy Ink, the rest in Slate, same size and weight. Example: "Flexible solutions for every business model. *Grow your business with a comprehensive set of payments…*"

## Shape and spacing

- **Buttons and inputs:** 4px radius. Not pill, not square.
- **Cards:** 6px radius.
- **Base unit:** 8px. Scale: 4, 8, 16, 24, 32, 48, 64, 96.
- **Content width:** about 1266px, centered, with thin vertical guide lines at the edges of the hero.
- **Section gap:** 96px.

## Components

### Primary button
Indigo `#533afd` fill, white text, 4px radius, padding `15.5px 24px 16.5px` (48px tall), sohne-var 400 at 16px, followed by a small `›` chevron. No shadow. Labels: "Get started ›", "Contact sales ›".

### Outline button
Semi-transparent white fill, indigo text, 1px `#b9b9f9` border, 4px radius, same size as the primary. Sits right next to the primary, 8px apart. Can carry a small icon on the left (the Google "G" in "Sign up with Google").

### Small secondary button
Indigo Wash `#e2e4ff` fill, indigo text, 4px radius, 40px tall. Used inside content: "Read the story ›", "Watch now ›".

### Navigation
White bar with a 1px Frost bottom border. Wordmark on the left, menu items with small chevrons (Products, Solutions, Developers, Resources, Pricing) in navy 400 at 15px. Right side: "Sign in" as an outline button and "Contact sales ›" as the primary.

### Product card
White or Frost surface, 6px radius, shadow `0 3px 6px rgba(23,23,23,.06)` (bigger floating panels use `0 16px 32px rgba(50,50,93,.12)`). Title at top-left in navy 300 at 22px, a small circular expand icon at top-right, and a live product screenshot filling the rest. Cards tile in a 2+1 / 3-column bento grid with 8px gaps.

### Logo rail
Customer logos in their own colors on white, in one horizontal row under the hero, separated from it by Frost hairlines.

### Stats band
Full-width Deep Indigo band. Huge light-weight numbers ("135+", "$1.9T", "99.999%") in pale lavender, each with a short caption below.

## Do

- Use Indigo only for things you can click.
- Set every heading in weight 300; let size do the work.
- Write headlines as two-tone paragraphs (navy, then slate).
- Pair the primary button with an outline button.
- Show the real product inside cards instead of illustrations.
- Keep the gradient to one ribbon at the top of the page.

## Don't

- Don't use bold or semibold headings.
- Don't round buttons beyond 4px or make them pills.
- Don't introduce a second action color.
- Don't use pure black text; use Navy Ink.
- Don't fill cards or buttons with the gradient.
- Don't use heavy, dark shadows; keep them faint and wide.

## Layout

Left-aligned hero: a small live metric line ("Global GDP running on Stripe: 1.74%"), a 48px two-tone headline, then the button pair. Thin vertical guide lines frame the hero column. Below: logo rail, then a bento grid of product cards, a full-bleed video/event banner, the dark stats band, and alternating text-plus-media sections. Every section opens with a two-tone headline aligned left.

## Agent prompt guide

- Text: `#061b31` · Secondary text: `#50617a` · Captions: `#64748d`
- Canvas: `#ffffff` · Bands: `#f8fafd` · Borders: `#e5edf5`
- Action: `#533afd` · Outline border: `#b9b9f9`

Example prompts:

1. "Primary button: background #533afd, white text, 4px radius, padding 15.5px 24px 16.5px, Inter Tight 400 16px, trailing › chevron, no shadow."
2. "Two-tone section headline: one paragraph at 32px weight 300, letter-spacing -0.64px; first sentence #061b31, rest #50617a."
3. "Product card: white, 6px radius, shadow 0 3px 6px rgba(23,23,23,.06); title top-left at 22px weight 300 in #061b31; product screenshot fills the rest."

## Quick start

### CSS variables

```css
:root {
  /* Colors */
  --color-indigo: #533afd;
  --color-navy-ink: #061b31;
  --color-slate: #50617a;
  --color-steel: #64748d;
  --color-white: #ffffff;
  --color-frost: #e5edf5;
  --color-mist: #f8fafd;
  --color-lavender-line: #b9b9f9;
  --color-lilac-line: #d6d9fc;
  --color-indigo-wash: #e2e4ff;
  --color-deep-indigo: #2d2564;
  --color-orange: #ff6118;

  /* Fonts */
  --font-sans: 'sohne-var', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 48px;
  --text-display--line-height: 1.15;
  --text-display--letter-spacing: -0.96px;
  --text-display--font-weight: 300;
  --text-heading: 32px;
  --text-heading--line-height: 1.1;
  --text-heading--letter-spacing: -0.64px;
  --text-heading--font-weight: 300;
  --text-heading-sm: 26px;
  --text-heading-sm--line-height: 1.12;
  --text-heading-sm--letter-spacing: -0.26px;
  --text-heading-sm--font-weight: 300;
  --text-subheading: 22px;
  --text-subheading--line-height: 1.1;
  --text-subheading--letter-spacing: -0.22px;
  --text-subheading--font-weight: 300;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.4;
  --text-body-lg--font-weight: 300;
  --text-body: 16px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 300;
  --text-button: 16px;
  --text-button--line-height: 1;
  --text-button--font-weight: 400;
  --text-caption: 11px;
  --text-caption--line-height: 1.4;
  --text-caption--font-weight: 300;

  /* Radius */
  --radius-buttons: 4px;
  --radius-inputs: 4px;
  --radius-cards: 6px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-card: 0 3px 6px rgba(23, 23, 23, 0.06);
  --shadow-float: 0 16px 32px rgba(50, 50, 93, 0.12);

  /* Layout */
  --container-page: 1266px;
}
```

### Tailwind v4

```css
@theme {
  /* Colors */
  --color-indigo: #533afd;
  --color-navy-ink: #061b31;
  --color-slate: #50617a;
  --color-steel: #64748d;
  --color-white: #ffffff;
  --color-frost: #e5edf5;
  --color-mist: #f8fafd;
  --color-lavender-line: #b9b9f9;
  --color-lilac-line: #d6d9fc;
  --color-indigo-wash: #e2e4ff;
  --color-deep-indigo: #2d2564;
  --color-orange: #ff6118;

  /* Fonts */
  --font-sans: 'sohne-var', 'Inter Tight', ui-sans-serif, system-ui, sans-serif;

  /* Type scale */
  --text-display: 48px;
  --text-display--line-height: 1.15;
  --text-display--letter-spacing: -0.96px;
  --text-display--font-weight: 300;
  --text-heading: 32px;
  --text-heading--line-height: 1.1;
  --text-heading--letter-spacing: -0.64px;
  --text-heading--font-weight: 300;
  --text-heading-sm: 26px;
  --text-heading-sm--line-height: 1.12;
  --text-heading-sm--letter-spacing: -0.26px;
  --text-heading-sm--font-weight: 300;
  --text-subheading: 22px;
  --text-subheading--line-height: 1.1;
  --text-subheading--letter-spacing: -0.22px;
  --text-subheading--font-weight: 300;
  --text-body-lg: 18px;
  --text-body-lg--line-height: 1.4;
  --text-body-lg--font-weight: 300;
  --text-body: 16px;
  --text-body--line-height: 1.4;
  --text-body--font-weight: 300;
  --text-button: 16px;
  --text-button--line-height: 1;
  --text-button--font-weight: 400;
  --text-caption: 11px;
  --text-caption--line-height: 1.4;
  --text-caption--font-weight: 300;

  /* Radius */
  --radius-buttons: 4px;
  --radius-inputs: 4px;
  --radius-cards: 6px;
  --radius-tags: 4px;

  /* Spacing */
  --spacing: 8px;

  /* Shadows */
  --shadow-card: 0 3px 6px rgba(23, 23, 23, 0.06);
  --shadow-float: 0 16px 32px rgba(50, 50, 93, 0.12);

  /* Layout */
  --container-page: 1266px;
}
```

---

*Measured from https://stripe.com/ on 2026-10-28 by Faundr. Inspired by Stripe; not its official design system and not affiliated with Stripe.*