# Stripe — Marketing Site Design Spec

> Source: stripe.com (live DOM, computed styles + color census), 2026-07-06; motion + backgrounds re-captured 2026-07-07.
> Coverage: marketing site + embedded product UI mockups. Dashboard: `needs-dashboard` (test-mode login required). Responsive: not captured (stylesheets cross-origin).

## 1. Visual Theme & Atmosphere

Bright, optimistic, and immaculately crafted: a white canvas lit by Stripe's signature fluid gradient (blurple → cyan → orange → magenta), rendered as large soft-blurred organic shapes behind heroes and product mockups. Large display type is light-weight — the Stripe signature — set against a deep navy ink ladder for text. Elevation comes from soft, colored shadows rather than hard borders. Small 4–6px radii keep everything crisp, not rounded; warm hues stay inside decorative gradients and never become UI chrome. Feels: premium, optimistic, effortless, trustworthy.

## 2. Color Palette & Roles

### Brand & accent
| Token | Hex | Role / usage |
|---|---|---|
| blurple | `#533afd` | Primary accent — buttons, links, active. (Historic canonical `#635bff`) |
| blurple-lite | `#7f7dfc` | Gradient lavender, hover tints |
| lavender-100 | `#e8e9ff` | Accent surface fill |
| lavender-200 | `#e2e4ff` | Accent surface, chip bg |
| border-lavender | `#d6d9fc` | Outline-button border |
| orange | `#ff6118` | Secondary accent (gradient, highlights) |
| cyan | `#00d4ff` | Gradient stop |

### Ink / navy ladder (text)
| Token | Hex | Role / usage |
|---|---|---|
| ink | `#0a2540` | Canonical dark navy (headings) |
| ink-nav | `#061b31` | Nav links, marketing headings |
| navy-700 | `#1a2c44` | Strong text |
| navy-600 | `#273951` | Headings on light |
| navy-500 | `#3c4f69` | Body strong |
| slate-500 | `#50617a` | Body / secondary text (most common) |
| slate-400 | `#64748d` | Tertiary text, captions |

### Surfaces
| Token | Hex | Role / usage |
|---|---|---|
| white | `#ffffff` | Page bg, cards |
| surface-50 | `#f8fafd` | Inset panels, subtle sections |
| surface-100 | `#f6f9fc` | Canonical light section bg |
| blue-gray | `#e5edf5` | Dividers, muted panels, table stripes |
| peach-tint | `#ffe0d1` | Warm gradient wash |

Rule: chrome is white + navy text; blurple is the single interactive accent. Warm hues (orange/pink) appear only inside decorative gradients, never as UI chrome.

## 3. Typography Rules

- Font stack: `"sohne-var" (Söhne), "SF Pro Display", -apple-system, sans-serif`. Söhne is proprietary; fall back to SF Pro / system.
- **Light-weight display is the Stripe signature**: large headings render at weight `300`, not bold.
- Body: 16px / 400 / slate `#50617a` on white; navy `#0a2540` for emphasis.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 47 / 54 | 300 | -0.94px (-2%) |
| Section (h2) | 32 / 35 | 300 | -0.64px (-2%) |
| Subhead | 21 / 30 | 400 | -0.2px |
| Body | 16 / 26 | 400 | 0 |
| UI / nav | 14 / 20 | 400–500 | 0 |
| Caption | 13 / 18 | 400 | 0 |

Pattern: big type is light and tightly tracked; body stays 400. Weight rarely exceeds 500. The famous two-tone headline runs the first sentence in solid navy and the continuation in a blurple→slate gradient.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#533afd`, text white, radius 4, h48, padding `15px 24px`, 16px/400, trailing chevron `›`. Hover: slightly darker/raised, subtle shadow.
- **Secondary (outline)**: transparent, text `#533afd`, 1px border `#d6d9fc`, radius 4. Used for "Contact sales", "Sign up with Google" (with provider glyph).
- **Nav link**: text `#061b31`, 14px, no bg; dropdown carets on Products/Solutions/Developers/Resources.
- **Text/CTA link**: blurple `#533afd` with trailing `›`, underline on hover.

### Inputs (product UI)
- White bg, 1px border `#e5edf5`, radius 4–6, navy text, slate placeholder. Focus: blurple border + soft blurple ring.

### Cards / panels
- bg white, radius 6, soft colored shadow (no hard border), padding 20–24. Feature cards carry a small expand `⤢` glyph top-right and a light-weight navy heading.
- Product mockup cards (checkout, dashboard) sit on gradient backdrops with a larger float shadow and radius ~12–16.

### Tags / chips
- radius 999, small, bg `#e8e9ff` / `#f6f9fc`, text blurple or slate, 12–13px.

### Tables (product UI)
- Row-based order summaries: navy labels, slate values, `#e5edf5` dividers, generous line-height; totals bolder navy.

### Gradient (hero / section backdrops)
- The fluid "Stripe gradient": multi-stop blurple `#7f7dfc` → cyan `#00d4ff` → orange `#ff6118` → magenta, as large soft-blurred organic shapes. Used behind hero and product mockups; never behind body text. (Live implementation: WebGL mesh — see §8.)

## 5. Layout Principles

- Max content width ~1080px, centered gutters.
- Spacing: 4px base grid; generous section rhythm (100–160px); component gaps 8/12/16/24.
- Nav: white, h~72, logo left (wordmark), center dropdown links (14px navy), right: white "Sign in" + blurple "Contact sales" button. Skewed color bar accents at the very top edge on some pages.
- Hero: left-aligned; tiny eyebrow stat → 47px light headline (two-tone gradient) → dual CTA (blurple primary + Google outline) → grayscale logo wall. Fluid gradient fills the right/behind.
- Content: white with alternating `#f6f9fc` sections; feature grids of white cards; product mockups (phone checkout, dashboard) on gradient panels.

## 6. Depth & Elevation

- Radii: buttons/inputs `4px`, cards/panels `6px` (Stripe stays crisp — small radii, never pill except tags), tags `999px`. Product mockup cards ~12–16.
- Control heights: primary button `48px`; nav `38px`. Button padding: `~15px 24px`.
- Elevation — soft, **colored** shadows (the Stripe signature): brand shadow color `rgba(50,50,93,…)` + `rgba(0,0,0,…)`. Common recipes:
  - card rest: `0 3px 6px rgba(23,23,23,.06)`
  - card raised: `0 16px 32px rgba(50,50,93,.12)`
  - hero float: `0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3)`
- Border-vs-shadow philosophy: cards use soft colored shadows, no hard borders.

## 7. Motion

- Dominant transition (live census): `0.3s cubic-bezier(0.25,…)` — applied to color (149 els), fill (126), stroke (58), opacity (58) and transform (58). Larger moves run `transform 0.8s cubic-bezier(0.165,…)` (43 els); quick fades use `opacity 0.15s linear` (36 els).
- Hover micro-interactions: button lift, shadow bloom, link underline — the 0.3s tier. Nothing abrupt; everything feels buttery.
- 38 live WAAPI animations running at rest (JS-driven), including the hero gradient mesh and scroll-linked bits. Named CSS animations observed: `detect-scroll`, `book-of-the-week-fade-in` (0.5s).
- Engine: custom JS + Web Animations API. No GSAP, Three.js or Lottie globals detected.
- Gradients drift slowly; product mockups animate content within static frames.

## 8. Backgrounds, Effects & WebGL

- **WebGL confirmed** — two live canvases: the hero (~1393×681) renders the signature animated Stripe gradient mesh inside the skewed band, plus a second section canvas (~1232×460). Custom shader; no Three.js global.
- CSS gradient recipes (computed stops):
  - Brand glow radials: blurple `rgba(83,58,253,0.8) → transparent`; pink `rgba(243,99,243,0.8) → transparent`; gold `rgb(255,207,94) → transparent`.
  - Hero-adjacent linear: `rgb(114,50,241) → rgb(251,118,250) → rgb(255,207,94)` (purple → pink → gold) — the CSS stand-in for the mesh.
  - Big soft pastel radials (illustration backdrops): `rgb(72,111,253) → rgb(127,129,243) → rgb(196,137,255) → rgb(218,192,255) → rgb(234,220,255)`; warm set `rgb(203,131,255) → rgb(255,144,185) → rgb(255,201,119) → …`; blue set `rgb(0,113,193) → rgb(96,168,226) → rgb(180,216,255) → …`.
  - Legibility scrims: white fades `#fff → transparent`, `transparent → rgb(252,253,254) → transparent`; radial white halo `rgba(255,255,255,0.9) → transparent` placed over the mesh behind text.
- No background video, no Lottie.

## 9. Do's and Don'ts

### Do
- Keep chrome white + navy text; blurple `#533afd` is the single interactive accent.
- Set large display type at weight 300, tightly tracked (-2%); keep body at 400.
- Run two-tone headlines: first sentence solid navy, continuation in a blurple→slate gradient.
- Keep radii small and crisp: buttons/inputs 4px, cards 6px; pill (999px) for tags only.
- Elevate with soft colored shadows (`rgba(50,50,93,…)` family) instead of borders.
- Treat the animated gradient mesh as THE atmosphere: WebGL mesh in the hero band, purple→pink→gold linear gradient as the CSS fallback, soft organic shapes behind heroes and mockups only.
- Lay white halo/fade scrims (`rgba(255,255,255,0.9)` radial) over the gradient wherever text sits on it.
- Fall back to SF Pro / system when Söhne (proprietary) is unavailable.
- Keep motion smooth: 0.3s cubic-bezier as the default tier, 0.15s linear for quick fades, 0.8s for large transforms; let gradients drift slowly.

### Don't
- Don't use warm hues (orange/pink) as UI chrome — they live only inside decorative gradients.
- Don't exceed weight 500; big type is never bold.
- Don't use pill radii except on tags.
- Don't put hard borders on cards — elevation is shadow-only.
- Don't place the gradient behind body text without a white scrim.
- Don't use abrupt motion.
- Don't reach for background video or Lottie — atmosphere comes from the gradient mesh and CSS gradients.

## 10. Responsive Behavior

Not captured — stripe.com stylesheets are cross-origin (CORS), so media-query breakpoints could not be extracted in this pass.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#ffffff` · Text `#0a2540` (body `#50617a`) · Muted `#64748d` · Border `#e5edf5` · Accent `#533afd`
- Font: `"sohne-var" (Söhne), "SF Pro Display", -apple-system, sans-serif` · Body: 16px · Radius: 4px controls / 6px cards · Control height: 48px
- Focus: blurple border + soft blurple ring (inputs)

<stripe_design_language>
Use the Stripe design language: bright white canvas, Söhne / SF Pro type, deep navy ink #0a2540 (nav #061b31) with slate body #50617a and #64748d. Single accent blurple #533afd (historic #635bff) for buttons, links and active; warm hues live ONLY in the signature gradient — on the live site an animated WebGL gradient mesh fills the skewed hero band (CSS fallback: purple #7232f1 → pink #fb76fa → gold #ffcf5e linear), with white halo scrims keeping text legible. Large display type is LIGHT weight 300, tightly tracked (-2%); body 16px/400, weight rarely above 500. Two-tone headlines: first sentence solid navy, the rest a blurple→slate gradient. Small crisp radii — buttons/inputs 4px, cards 6px, tags 999px. Primary button 48px, blurple, white text, trailing chevron; secondary white with #d6d9fc border. Elevation is soft and COLORED: 0 16px 32px rgba(50,50,93,.12) cards, 0 50px 100px -20px rgba(50,50,93,.25) hero floats — no hard borders. Surfaces #f6f9fc/#f8fafd, dividers #e5edf5. Motion: 0.3s cubic-bezier default, 0.15s fades, 0.8s large moves. Feels: premium, optimistic, effortless, trustworthy. Avoid: warm hues as UI chrome, weights above 500, pill radii outside tags, hard card borders, gradients behind unscrimmed body text, abrupt motion.
</stripe_design_language>