# DESIGN.md · Stripe (WR-002)

> Written for AI coding agents. Values marked **OFFICIAL** come from the documented source named below; values marked **ESTIMATED** were measured by us from our own screenshots and are approximate. Never treat ESTIMATED values as official brand tokens.

## Overview
- Type: Website Reference · Category: I. Website References
- Platforms: Web
- Color theme: Vibrant gradient · Layout pattern: Split hero · Mood: Polished, premium, energetic
- License / terms: Screenshots: fair-use reference captures; site content © Stripe
- Industry: Fintech
- Patterns: Split hero, Pricing table, Multi-step form

Light site with a signature gradient wave hero, logo wall, and modular pricing cards; contact-sales form as a conversion entry.

### Analysis (ours)
Stripe’s landing (our capture) sets a left-aligned, four-line headline whose first sentence is dark navy and whose continuation shifts to a softer blue-gray, so one block of text works as headline and subhead without a size change. The signature multicolor gradient ribbon (orange, pink, violet, blue) bleeds off the right edge behind the nav, while thin vertical guide lines frame the content column; a live ‘Global GDP running on Stripe’ counter and a customer logo row add proof above the fold. Navigation is a mega-menu bar (Products, Solutions, Developers, Resources, Pricing) with an outlined ‘Sign in’ and a violet ‘Contact sales’. Pricing pairs a white Standard card, with the per-transaction price in its own panel, against a dark navy Custom card, and adds in-page anchors for Standard pricing, Custom pricing and FAQs. The contact-sales step is a three-step form (Your email → Your info → Let’s talk) in a white card over the gradient. Pitfall: a floating ‘sales reps available’ chat popover overlaps content in every capture, so keep such widgets out of the first viewport.

### Best practices (ours)
- Use color inside the headline (dark lead sentence, lighter continuation) to merge headline and subhead into one block.
- Keep a loud brand gradient to one edge or band and set text on plain white for contrast.
- Split pricing into a self-serve card and a sales card with different surface colors so the two paths never blur.
- Break sales forms into labeled steps with a visible progress row, asking for work email first.
- Build color scales in a perceptually uniform space (Stripe used CIELAB) so every hue has the same contrast at the same step (OFFICIAL, https://stripe.com/blog/accessible-color-systems).
- Encode contrast in the scale: in Stripe’s product palette any two colors at least 5 steps apart pass for small text, and 4 steps for icons and large text (OFFICIAL, https://stripe.com/blog/accessible-color-systems).
- On a platform, give third parties one branded element (Stripe Apps: a colored app indicator) and keep the rest of the UI standard (OFFICIAL, https://docs.stripe.com/stripe-apps/design).

### Deep analysis
Values marked OFFICIAL come from the cited source page (read 2026-10-23); ESTIMATED values were measured by us from the live page’s computed CSS or our captures on 2026-10-23 (what ships today, not official tokens); OURS is our interpretation.

#### Purpose and audience (OURS) · source: https://stripe.com
- Marketing site for payments and financial infrastructure. It speaks to two audiences at once: developers who self-serve, and business buyers who talk to sales.
- The design must look premium and trustworthy (it handles money) and also feel energetic and modern.

#### Page structure and flow (ESTIMATED) · source: https://stripe.com
- Landing (capture 2026-10-22): left-aligned headline, gradient ribbon bleeding off the right edge, thin vertical guide lines, a live ‘Global GDP running on Stripe’ counter and a logo row above the fold.
- Pricing: a white Standard card next to a dark navy Custom card, with in-page anchors (Standard, Custom, FAQs).
- Contact sales: a three-step form (Your email → Your info → Let’s talk) in a white card over the gradient. We captured it but did not submit it.
- Live 2026-10-23 hero: ‘Get started’ (filled) next to ‘Sign up with Google’ (outlined) under the headline.

#### Color: official product color system (OFFICIAL) · source: https://stripe.com/blog/accessible-color-systems
- Stripe rebuilt the color system for the Dashboard and products using its internal interface library (blog, 15 Oct 2019). This describes product UI, not the marketing gradient.
- Three goals: predictable accessibility, clear vibrant hues, and consistent visual weight, so no hue looks more important than another at the same level.
- Scales were tuned in CIELAB (a perceptually uniform space) with an in-house tool, because HSL lightness makes yellows look lighter than blues.
- Rules: default text and icon colors pass WCAG 2.0 contrast on white and on the lightest tint of any hue. Any two colors at least 5 levels apart pass for small text; 4 levels for icons and large text.
- Badges moved both background and text up one level so all badge colors stay legible without per-color tuning.

#### Color as shipped on the site (ESTIMATED) · source: https://stripe.com
- Primary action #533AFD (filled ‘Get started’ / ‘Contact sales’, and the ‘Sign in’ text). Outlined buttons: #B9B9F9 border with a rgba(255,255,255,.65) fill so the gradient shows through.
- Headline navy #061B31; the softer continuation and secondary text are #64748D.
- Gradient ribbon colors sampled from our capture: peach #E39B86, violet #845990, light orange #FCD2A6, pale blue #D4DCEE (approximate pixel samples, not tokens).
- The site exposes no CSS custom properties at :root (styles are compiled), so there is no public token file to read. Measured 2026-10-23 (UTC+8) from the public page’s computed CSS at 1440px and 375px; values can change without notice.

#### Typography (ESTIMATED) · source: https://stripe.com
- One family throughout: ‘sohne-var’ (Söhne, a commercial typeface from Klim Type Foundry, licensed separately), with ‘SF Pro Display’ as fallback.
- Hero h1: 48px / 55.2px (1.15), weight 300 (light), −0.96px tracking (−0.02em) at 1440px; 34px / 35px at 375px.
- Two-tone section heading, measured: the navy h2 and its slate continuation are both 32px / 35.2px, weight 300, −0.02em. Only the color changes, which confirms what we saw in the captures.
- Buttons are 16px / 400 in the hero and 14px in the nav. Using a light weight for display sizes and regular for UI text is the main type contrast.

#### Layout, spacing and shape (ESTIMATED) · source: https://stripe.com
- A 4px radius on every button we measured: square, not pill, which reads as ‘financial’ and precise.
- Button heights: 40px (nav), 48px (hero), 44px on mobile, where hero CTAs become full width (343px in a 375px viewport, 16px side margins).
- The nav is 76px and scrolls away instead of sticking (position: relative). Thin vertical guide lines mark the content column at desktop sizes.

#### Platform design rules (Stripe Apps) (OFFICIAL) · source: https://docs.stripe.com/stripe-apps/design
- Custom styling of UI elements is intentionally limited to keep the Dashboard consistent and accessible; colors per element are restricted because contrast matters.
- Brand expression goes into one place: the app indicator, a color bar and icon (brandColor and brandIcon props on ContextView). Any color is allowed there.
- Apps are built from provided UI components and recommended patterns, which the docs say also speeds up app review.

#### Accessibility check (ESTIMATED) · source: https://stripe.com
- Contrast (computed by us): navy #061B31 on white = 17.4:1; slate #64748D on white = 4.75:1, just above AA for body text, so don’t lighten it further; white on #533AFD = 6.2:1.
- Text sits on plain white, not on the gradient, so the ribbon never hurts legibility.
- In every capture a floating ‘sales reps available’ chat popover covered content in the first viewport. That is a usability and focus-order risk.

#### What makes it work (OURS) · source: https://stripe.com
- One loud signature (the gradient) kept to one edge, and everything else quiet: white surfaces, light-weight type, square buttons.
- Color changes inside headings do the work of extra type sizes.
- Clear dual paths: violet filled for self-serve, sales on a dark card. The two never blur.

#### Lessons for our own sites (OURS) · source: https://stripe.com
- If you want a gradient, give it a fixed zone and never set body text on it.
- Light (300) display type looks premium only with a high-quality face and generous size; at small sizes go back to 400.
- Copy the product palette method from the 2019 blog (perceptual scales with contrast built into the steps) for any app with status colors.

## Color tokens
No official color tokens documented for this entry.

ESTIMATED · dominant colors measured from our screenshot(s) of the source site (median-cut quantization; share = % of pixels). Approximate, not official:

- `#FFFFFF` ~47%
- `#E39B86` ~13%
- `#845990` ~9%
- `#D4DCEE` ~8%
- `#FCD2A6` ~1%

## Typography
No official type scale documented for this entry; use the product’s own typography guidance.

## Spacing, radii, shadows
Not documented for this entry. Do not invent values; derive from your own design system.

## Components
- Mega-menu nav
- Gradient hero
- Logo wall
- Pricing cards
- Contact form

## Layout rules
- Observed layout pattern: **Split hero** (from our captures).
- Public flow (captured, stopped before any form submission): Landing (https://stripe.com/) → Pricing (https://stripe.com/pricing) → Contact sales entry (https://stripe.com/contact/sales)

## Do’s and don’ts
- Do: Reserve gradients for hero/feature moments; keep body sections calm.
- Don’t: Don’t put body text on busy gradients without a contrast check.
- Do: follow the source’s license/terms listed above.
- Don’t: present ESTIMATED colors as official tokens.

## Sources
- https://stripe.com
- Capture: https://stripe.com/
- Capture: https://stripe.com/pricing
- Capture: https://stripe.com/contact/sales
- Library entry: https://design-library-byt.pages.dev/entry/WR-002