Stripe Design System

---
name: Stripe
url: https://stripe.com
version: 2.4.0
tokens:
  colors:
    primary: "#533afd"
    primary-hover: "#635bff"
    secondary: "#0a2540"
    background: "#0a2540"
    background-subtle: "#0c3059"
    surface: "#1a3a5c"
    surface-hover: "#234975"
    text-primary: "#ffffff"
    text-secondary: "#adbdcc"
    text-muted: "#637381"
    accent: "#80e9ff"
    accent-hover: "#00d4ff"
    border: "rgba(255, 255, 255, 0.12)"
    success: "#00d4b1"
    warning: "#ffc043"
  typography:
    font-sans: "sohne-var, Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif"
    font-mono: "Geist Mono, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    scale:
      - { name: display-xl, size: "94px", weight: 600, lineHeight: 1.06, letterSpacing: "-0.04em" }
      - { name: display, size: "64px", weight: 600, lineHeight: 1.08, letterSpacing: "-0.03em" }
      - { name: heading-1, size: "48px", weight: 600, lineHeight: 1.1, letterSpacing: "-0.02em" }
      - { name: heading-2, size: "32px", weight: 600, lineHeight: 1.15, letterSpacing: "-0.01em" }
      - { name: heading-3, size: "24px", weight: 600, lineHeight: 1.25, letterSpacing: "0" }
      - { name: body-lg, size: "19px", weight: 400, lineHeight: 1.6, letterSpacing: "0" }
      - { name: body, size: "17px", weight: 400, lineHeight: 1.6, letterSpacing: "0" }
      - { name: body-sm, size: "14px", weight: 400, lineHeight: 1.5, letterSpacing: "0" }
      - { name: caption, size: "12px", weight: 500, lineHeight: 1.4, letterSpacing: "0.02em" }
  spacing:
    base: "8px"
    scale:
      space-1: "4px"
      space-2: "8px"
      space-3: "12px"
      space-4: "16px"
      space-6: "24px"
      space-8: "32px"
      space-12: "48px"
      space-16: "64px"
      space-24: "96px"
  radius:
    sm: "4px"
    md: "6px"
    lg: "12px"
    xl: "20px"
    full: "9999px"
  shadows:
    card: "0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3)"
    hover: "0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.3)"
    glow: "0 0 40px rgba(83,58,253,0.35)"
  breakpoints:
    sm: "640px"
    md: "768px"
    lg: "1024px"
    xl: "1280px"
---

# Stripe — Design System Specification

## 1. Overview & Visual Rationale
Stripe's marketing and product interface (HDS) projects financial security, technical mastery, and developer-first elegance. The visual system balances authoritative deep navy blue backgrounds (`#0a2540`) with high-energy vibrant indigo (`#533afd`) primary actions and bright cyan (`#80e9ff`) gradient highlights.

Key visual attributes include:
- **Lightweight Variable Typography**: Utilizes `sohne-var` at light-to-semibold weights (300-600) with tight tracking at display scale.
- **Spectral Canvas**: Hero sections feature multi-layered mesh gradients angling across 3D canvas planes.
- **Pill Geometry**: Interactive CTAs, badges, and search inputs adopt full pill borders (`border-radius: 9999px`).

## 2. Color Palette & Hierarchy

### Primary & Accent Colors
- **Stripe Indigo (`#533afd`)**: Primary CTA buttons, key links, active tabs, and focused input rings.
- **Deep Navy (`#0a2540`)**: Root page background and major structural container fills.
- **Cyan Accent (`#80e9ff`)**: Feature highlights, glow overlays, and pill badge accents.

### Neutral & Text Ladder
- **Text Primary (`#ffffff`)**: 100% white for primary headings and button text on dark surfaces.
- **Text Secondary (`#adbdcc`)**: High-legibility muted cyan-grey for body copy and subheadings.
- **Text Muted (`#637381`)**: Low-contrast metadata, captions, and footer links.
- **Surface Elevation (`#1a3a5c`)**: Elevated card fills and modal backgrounds.

## 3. Typography Scale & Font Rules

| Role | Size | Weight | Line Height | Letter Spacing | CSS Utility |
|---|---|---|---|---|---|
| Display XL | 94px | 600 | 1.06 | -0.04em | `text-7xl font-semibold` |
| Display | 64px | 600 | 1.08 | -0.03em | `text-5xl font-semibold` |
| Heading 1 | 48px | 600 | 1.1 | -0.02em | `text-4xl font-semibold` |
| Heading 2 | 32px | 600 | 1.15 | -0.01em | `text-3xl font-semibold` |
| Heading 3 | 24px | 600 | 1.25 | 0 | `text-2xl font-semibold` |
| Body Large | 19px | 400 | 1.6 | 0 | `text-lg font-normal` |
| Body Regular | 17px | 400 | 1.6 | 0 | `text-base font-normal` |
| Caption | 12px | 500 | 1.4 | 0.02em | `text-xs font-medium` |

## 4. Button Variants

### Primary Button
```css
background-color: #533afd;
color: #ffffff;
font-weight: 600;
font-size: 15px;
padding: 12px 24px;
border-radius: 9999px;
box-shadow: 0 4px 12px rgba(83, 58, 253, 0.3);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
```

### Secondary Button
```css
background-color: #1a3a5c;
color: #ffffff;
font-weight: 600;
font-size: 15px;
padding: 12px 24px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
```

### Outline Button
```css
background-color: transparent;
color: #80e9ff;
border: 1.5px solid #533afd;
font-weight: 600;
font-size: 15px;
padding: 12px 24px;
border-radius: 6px;
```

### Ghost Button
```css
background-color: transparent;
color: #adbdcc;
font-weight: 600;
font-size: 15px;
padding: 12px 20px;
```

### Pill Badge Button
```css
background-color: rgba(83, 58, 253, 0.18);
color: #80e9ff;
border: 1px solid rgba(128, 233, 255, 0.3);
font-size: 12px;
font-weight: 600;
padding: 6px 14px;
border-radius: 9999px;
```

## 5. Card Examples & Elevation

### Elevated Feature Card
```css
background-color: #1a3a5c;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 12px;
padding: 32px;
box-shadow: 0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, border-color 0.3s ease;
```

### Metric Callout Card
```css
background-color: #0c3059;
border: 1.5px solid rgba(83, 58, 253, 0.4);
border-radius: 12px;
padding: 24px;
```

## 6. Form Elements

### Standard Text Input
```css
background-color: rgba(10, 37, 64, 0.8);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 6px;
color: #ffffff;
font-size: 14px;
padding: 10px 16px;
outline: none;
```
Focus state: `border-color: #533afd; box-shadow: 0 0 0 3px rgba(83, 58, 253, 0.25);`.

### Search Bar Pill Component
```css
background-color: rgba(26, 58, 92, 0.6);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 9999px;
padding: 10px 20px;
```

## 7. Spacing Scale (8px Base Grid)
- `space-1`: 4px
- `space-2`: 8px
- `space-3`: 12px
- `space-4`: 16px
- `space-6`: 24px
- `space-8`: 32px
- `space-12`: 48px
- `space-16`: 64px
- `space-24`: 96px

## 8. Border Radius Scale
- `radius-sm`: 4px (inputs, tags)
- `radius-md`: 6px (buttons, standard containers)
- `radius-lg`: 12px (feature cards, modals)
- `radius-xl`: 20px (hero containers)
- `radius-full`: 9999px (primary CTAs, search bars, pill badges)

## 9. Elevation & Depth (Shadows)
- **Subtle Shadow**: `0 2px 4px rgba(0, 0, 0, 0.1)`
- **Card Shadow**: `0 13px 27px -5px rgba(50, 50, 93, 0.25), 0 8px 16px -8px rgba(0, 0, 0, 0.3)`
- **Hover Shadow**: `0 30px 60px -12px rgba(50, 50, 93, 0.25), 0 18px 36px -18px rgba(0, 0, 0, 0.3)`
- **Accent Glow**: `0 0 40px rgba(83, 58, 253, 0.35)`

## 10. Responsive Behavior & Grid Breakpoints
- **Mobile (`sm: 640px`):** Single column layouts, 16px container padding.
- **Tablet (`md: 768px`):** Dual column grid, 24px container padding.
- **Desktop (`lg: 1024px`):** 3-column grid layout, 48px container padding.
- **Widescreen (`xl: 1280px`):** 1200px max-width container with auto horizontal margins.

## 11. Do's and Don'ts

### Do:
- ✅ Use pill-shaped rounded buttons (`rounded-full`) for main conversion CTAs.
- ✅ Maintain high contrast between `#ffffff` text and deep `#0a2540` navy backgrounds.
- ✅ Pair code snippets with `npx` CLI copy boxes for developer ergonomics.

### Don't:
- ❌ Do NOT use sharp 0px corners on cards or primary CTAs.
- ❌ Do NOT apply bright saturated red or yellow as primary background fills.
- ❌ Do NOT skip heading levels in the document structure.

## 12. AI Agent System Prompt Guidelines
When generating UI components for this codebase, strictly apply:
- Brand primary color `#533afd` for action elements.
- Deep navy background `#0a2540` for dark mode surfaces.
- Sans-serif font stack starting with `sohne-var` falling back to `Inter`.
- Base grid spacing in 8px increments.