# Stripe Design System

> High-velocity financial infrastructure rendered through ultra-light typography and a vibrant electric-indigo primary accent.

**Source:** https://stripe.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Stripe’s visual identity is defined by a high-contrast relationship between a pure white foundation (#ffffff) and a singular, high-voltage primary accent (#533afd). The system relies on the **Söhne** typeface, specifically leveraging a signature weight of 300 for display headlines to create an editorial, precise atmosphere. Layouts are characterized by generous whitespace and a "monochrome-plus-one" strategy where color is used strictly for utility (CTAs) or high-impact brand moments. Components use a tight 4px border radius and subtle, multi-layered shadows to establish a professional, software-first aesthetic.

## Signature DNA
1. **Lightweight Display Typography** (Söhne weight 300 is used for all major display and hero headlines, creating a sophisticated, technical-editorial feel across all pages.)
2. **Indigo Voltage** (The primary accent #533afd is the exclusive driver of action and brand recognition, appearing as the sole chromatic element in high-density monochrome layouts.)
3. **Layered Soft Elevation** (Complex box-shadows, such as the `50, 50, 93` series, provide depth to cards and popovers without relying on heavy borders.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, primary surface, button text | 222 | 1 | `--hds-color-util-white` |
| `{color.neutral-50}` | `#e5edf5` | Subtle section backgrounds, soft borders | 122 | 1 | `--hds-color-core-neutral-50` |
| `{color.neutral-25}` | `#f8fafd` | Secondary surface, subdued backgrounds | 29 | 1 | `--hds-color-util-neutral-25` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#533afd` | Primary CTA background, active text, brand icons | 355 | 1 | `--hds-color-button-primary-bg` |
| `{color.ink-solid}` | `#061b31` | Primary headings, high-contrast text | 188 | 1 | `--hds-color-heading-solid` |
| `{color.text-soft}` | `#50617a` | Secondary body text, navigation items | 134 | 1 | `--hds-color-text-soft` |
| `{color.text-subdued}` | `#64748d` | Tertiary text, captions, placeholder labels | 110 | 1 | `--hds-color-text-subdued` |
| `{color.orange-accent}` | `#ff6118` | Decorative accent, specific product indicators | 20 | 1 | `--hds-color-util-accent-orange-350` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.success}` | `#00b261` | Success icons and indicators |
| `{color.error}` | `#d8351e` | Error text and validation states |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Söhne-var** | 300, 400, 425, 500, 700 | Primary Brand Typeface | Inter (for UI), Public Sans | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 56px | 57.68px | -1.4px | 300 | Stats section titles | `h2.hds-heading.stats-section__title` |
| `{type.display-md}` | 48px | 55.2px | -0.96px | 300 | Hero section titles | `h1.hds-heading.hero-section__title` |
| `{type.heading-lg}` | 32px | 35.2px | -0.64px | 300 | Section headers | `h2.hds-heading.hds-heading--lg` |
| `{type.heading-md}` | 26px | 29.12px | -0.26px | 300 | Bento card titles | `h3#bento-card-title-payments` |
| `{type.body-lg}` | 18px | 25.2px | normal | 300 | Section descriptions | `p.hds-text.section-header__description` |
| `{type.body-md}` | 16px | 22.4px | normal | 400 | Default body text | `p.hds-text.hds-text--md` |
| `{type.button}` | 16px | 16px | normal | 400 | Primary CTA labels | `a.hds-button.hds-button--primary` |
| `{type.caption}` | 12px | 15px | normal | 500 | Badges and labels | `span.Badge.Badge--hasIcon` |

### Principles
1. **Display weight is always 300.** Bold weights are reserved for UI labels and navigation, never for headlines.
2. **Negative tracking on display.** As type size increases, letter spacing tightens from -0.26px to -1.4px.
3. **Tabular numerals.** Financial data and stats use `tabular-nums` for vertical alignment in grids.

## Spacing
**Base unit:** 4px (Flexible)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 105 |
| `{space.sm}` | 8px | 29 |
| `{space.md}` | 16px | 215 |
| `{space.lg}` | 24px | 178 |
| `{space.xl}` | 32px | 46 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 4px | Buttons, Inputs, Small Cards | Observed on primary CTAs |
| `{radius.md}` | 6px | Standard Cards | Observed on feature cards |
| `{radius.lg}` | 8px | Large Containers | Observed on pricing tiers |
| `{radius.full}` | 100px | Pill badges | Observed on navigation badges |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(50, 50, 93, 0.25) 0px 2px 5px -1px` | Standard feature cards | Pricing page cards |
| `{shadow.popover}` | `rgba(50, 50, 93, 0.12) 0px 16px 32px 0px` | Navigation dropdowns | Main nav menus |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main site actions (e.g., "Start now")
**Pages observed:** stripe.com, stripe.com/about
**Spec:** Background `{color.primary}` (#533afd) | Text `{color.white}` (#ffffff) | Radius 4px | Padding 15.5px 24px
**States observed:** Default | Hover (Background #4032c8) | Focus: captured

#### Secondary Button
**Role:** Subdued actions or ghost buttons
**Pages observed:** stripe.com/about
**Spec:** Background transparent | Border 1px `{color.neutral-50}` (#e5edf5) | Text `{color.primary}` (#533afd) | Radius 4px
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting product capabilities
**Pages observed:** stripe.com, stripe.com/about
**Spec:** Background `{color.neutral-50}` (#e5edf5) | Text `{color.ink-solid}` (#061b31) | Radius 6px | Padding 24px
**States observed:** Default | Hover: not captured

#### Pricing Card
**Role:** Displaying plan details
**Pages observed:** stripe.com/pricing
**Spec:** Background `{color.white}` (#ffffff) | Border 1px `{color.neutral-50}` (#e5edf5) | Shadow `{shadow.card}` | Radius 4px
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific
#### Navigation Dropdown
**Role:** Complex menu structures
**Pages observed:** stripe.com
**Spec:** Background `{color.white}` (#ffffff) | Shadow `{shadow.popover}` | Radius 8px | Padding 32px
**States observed:** Default | Active: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1080px - 1200px |
| Section Padding | 80px - 120px (vertical) |
| Grid Gutter | 24px |

## Do's
- Use Söhne weight 300 for all headlines over 24px.
- Use #533afd as the primary background for high-priority CTAs.
- Apply `tabular-nums` to all currency and transaction data.
- Maintain a minimum of 80px vertical spacing between major sections.
- Use #e5edf5 for subtle background containment of cards.

## Don'ts
- **Wrong:** Using #635bff as the primary brand button. **Right:** Use #533afd. **Reason:** #635bff is a legacy or sub-brand variant found only on specific pricing paths.
- Do not use bold weights (700) for display headlines.
- Do not use #000000 for body text; use #061b31 or #50617a for better readability.
- Do not apply shadows to foundational surfaces; reserve shadows for interactive or elevated cards.

## Quick start

### CSS Custom Properties
```css
:root {
  --hds-color-primary: #533afd;
  --hds-color-ink: #061b31;
  --hds-color-text-soft: #50617a;
  --hds-color-bg-subdued: #e5edf5;
  --hds-font-display: "sohne-var", sans-serif;
  --hds-radius-sm: 4px;
  --hds-shadow-card: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-indigo-stripe: #533afd;
  --color-slate-stripe: #061b31;
  --font-sohne: "sohne-var";
  --shadow-stripe: 0 2px 5px -1px rgba(50, 50, 93, 0.25);
  --radius-stripe: 4px;
}
```

## Agent prompt examples
- "Create a hero section with a Söhne weight 300 headline at 48px, indigo #533afd primary button, and a #ffffff background."
- "Design a feature grid using #e5edf5 cards with 6px border radius and #061b31 text."
- "Generate a pricing table with #ffffff cards, 4px radius, and a layered shadow using rgba(50, 50, 93, 0.25)."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://stripe.com | 1440px | 2026-06-06 |
| Pricing | https://stripe.com/pricing | 1440px | 2026-06-06 |
| About | https://stripe.com/about | 1440px | 2026-06-06 |