# Stripe — DESIGN.md

Two faces of one brand: gradient-lit marketing pages and quiet, dense developer tools.

Independent reference guide from browser captures and computed styles. Not an official brand guide. Values describe the captured desktop states; responsive rules below are implementation recommendations.

Captured: 2026-09-24

## Agent task
Build an original interface using this visual language. Inspect the existing stack and conventions first. Use the included screenshots to understand hierarchy, composition and density. Keep your own branding and content.

## Font
Observed family: **sohne-var** on stripe.com marketing pages (fallback stack "SF Pro Display" / "Helvetica Neue"). The docs and the checkout demo use the system UI stack (-apple-system, system-ui, Segoe UI, Roboto), and code uses Source Code Pro. A family name is not a bundled font licence. Use an available, licensed installation or a system sans-serif fallback.

## Marketing — Light editorial with gradient accents

### Observed palette
- Canvas: `#ffffff`
- Section band (pricing, payments): `#f6f9fc`
- Heading text (home): `#061b31`
- Heading text (pricing, payments): `#0a2540`
- Body text (pricing, payments): `#425466`
- Secondary headline text (home, sampled from screenshot): `#42658d`
- Primary action (home): `#533afd`
- Primary pill (pricing): `#635bff`
- Dark section (home): `#0d1738`
- Custom plan card (pricing): `#0c2e4e`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Hero headline (home) | 48px / 55.2px | 300 | −0.96px |
| Hero headline (pricing, payments) | 56px / 68px | 500 | −1.12px |
| Section headline (home) | 32px / 35.2px | 300 | −0.64px |
| Statement headline (home) | 56px / 57.68px | 300 | −1.4px |
| Section heading (pricing, payments) | 38px / 48px | 500 | −0.2px |
| Bento card title (home) | 26px / 29.12px | 300 | −0.26px |
| Lead paragraph (pricing, payments) | 18px / 28px | 300 | 0.2px |
| Button label | 16px / 16px | 400 | normal |

### Layout & hierarchy
- Content sits in a 1440px frame with a centred column and faint vertical grid lines drawn through each section; headlines pair a dark first sentence with a lighter slate continuation.
- Big full-bleed gradients (ribbon on home, diagonal bands on pricing and Payments) break up otherwise white or #f6f9fc sections; one dark navy band carries the developer story.
- Pricing uses a sticky left product index beside a long column of white fee cards; the index was set to static for the full-page capture (the sticky element repeats otherwise).

### Components & behavior
- Home primary button: #533afd fill, white 16px label, 4px radius, 48px high; secondary "Sign up with Google" is white with a 1px #b9b9f9 border.
- Pricing and Payments use pill buttons (16.5px radius, 15px / 425 labels) in #635bff or #9966ff.
- Cards: white, 8px radius, layered blue-grey shadow (rgba(50,50,93,0.25) 0 13px 27px −5px plus a darker second layer).
- A sales chat card ("sales reps available" plus Chat now) appears bottom-right on every page; it was dismissed and hidden for capture.

## Product — Light, system-font developer tools

### Observed palette
- Docs header band: `#f4f7fa`
- Canvas: `#ffffff`
- Heading text: `#414552`
- Body text: `#3c4257`
- Secondary text: `#697386`
- Link and docs button: `#5469d4`
- API reference accent: `#533afd`
- Code panel: `#3e444f`
- Demo accent: `#675dff`
- Demo switch on: `#0072e9`
- Demo border: `#d8dee4`

### Observed typography
| Role | Size / line height | Weight | Tracking |
|---|---|---|---|
| Docs page title | 32px / 40px | 700 | normal |
| Docs hero lead | 24px / 28px | 400 | normal |
| Guide lead | 24px / 32px | 400 | normal |
| Body | 16px / 26px | 400 | normal |
| API reference body | 14px / 22px | 400 | normal |
| Nav and sidebar item | 14px / 20px | 500 | normal |
| Code | 14px / 18.2px | 400 | normal |
| Utility action | 12px / 16px | 600 | normal |

### Layout & hierarchy
- Docs: a two-row header (search, Ask AI, account links; then product tabs) over a collapsible left nav and a single article column; the API reference swaps to a narrow sidebar and prose-plus-code two-column sections.
- The checkout demo is a 366px settings card (8px radius, 1px #d8dee4 border) beside a large preview frame on a dot-grid background, with device and country controls centred below.
- Code always sits in dark rounded panels (8px radius) with tab rows, copy buttons and line numbers; prose stays on white.

### Components & behavior
- Toggle switch: 30 × 18px, 10px radius, #0072e9 when on.
- Search opens a centred dialog with highlighted matches, breadcrumbs and an Ask AI Assistant group below the results.
- Selected sidebar item: #533afd text on a 10% tint of the same colour, 4px radius (API reference).
- Popovers (APIs & SDKs, Start building, Theme) are white cards with soft shadows anchored under their trigger.

## Implementation recommendations
- Use your own name, logo, copy and sample data. Recreate the visual principles and interaction structure.
- Use semantic HTML, visible focus states, labelled controls and accessible contrast.
- Recommended: use a 4px spacing base, collapse rails on small screens, stack grids and allow tables to scroll.
- Recommended: implement loading, validation, error, success, empty and disabled states; do not infer unobserved backend behavior.
- Use the supplied font only when available and appropriately licensed; otherwise use a system sans-serif fallback.
- Treat desktop measurements as reference values, not a complete responsive specification.

## Interaction inventory
- Docs home: Stripe Docs home, logged out: a pale grey header with Search ("/" shortcut), Ask AI, Create account and Sign in, a product tab row, and a Documentation hero with a "Test cards" illustration. Payments, Revenue and Developers link columns sit above an interactive "Try it out" panel whose dark code block shows the command for the selected recipe (default: a tax rate). Screenshot: `captures/stripe-product-docs-home.jpg`.
- Try it out: Create a customer: Choosing "Create a customer" in the Try it out list highlights that row and swaps the dark code block to a sample stripe customers create command with its JSON response (Stripe's placeholder customer "Jenny Rosen"). Screenshot: `captures/stripe-product-docs-try-it.jpg`.
- APIs & SDKs menu: The APIs & SDKs header menu opens a small white popover: API, Stripe.js and CLI, then iOS, Android and React Native with external-link icons. Screenshot: `captures/stripe-product-docs-apis-menu.jpg`.
- Search overlay: The search dialog over a dimmed page with the query "Build a payments page": five document results with icons, matched terms highlighted and breadcrumb trails, a View more results link, then an "Ask AI Assistant" group with suggested questions. The first result has a focus outline. No AI question was sent. Screenshot: `captures/stripe-product-docs-search.jpg`.
- Guide: Build a payments page: A docs article with a collapsible left navigation (Build a payments page expanded, Overview active), breadcrumbs, title and lead, an action row (Ask about this page, Copy for LLM, View as Markdown, Install tools), then an "Accept payments on your website" block with an isometric product illustration and a Stripe Checkout section with dark UI thumbnails. Screenshot: `captures/stripe-product-docs-checkout.jpg`.
- Quickstart: Stripe-hosted page: A two-column quickstart: Frontend (HTML, React, Next.js) and Backend (Ruby, Node.js, PHP, Python, Go, .NET, Java) pill selectors, prose steps with a Download example button on the left, and a dark indigo panel on the right with a live checkout Preview ("Stubborn Attachments") above tabbed, line-numbered server code. Screenshot: `captures/stripe-product-docs-quickstart.jpg`.
- API reference: The API reference has its own chrome: a narrow left sidebar (Find anything, Ask AI, Introduction active, then Core Resources), a version selector (2026-08-26.dahlia) in the header, and two-column sections pairing prose with dark code cards (Base URL, client library icons, authenticated request). Screenshot: `captures/stripe-product-api-reference.jpg`.
- API reference: Customers: The Customers section: description on the left, an Endpoints / Events tab list with method-coloured paths (POST, GET, DELETE) on the right, then "The Customer object" with attribute rows beside a dark JSON sample. Screenshot: `captures/stripe-product-api-customers.jpg`.

## Avoid
- Do not apply the marketing headline scale or gradients to the dense docs and settings screens; the product surfaces are plain white with system type.
- Do not present sampled or unmeasured values as exact; the home hero's secondary headline colour is sampled from a screenshot because its computed colour did not match what is drawn.
- Do not mix the two marketing generations blindly: the homepage uses #533afd and light 300-weight headlines, while pricing and Payments use #635bff pills and 500-weight headlines.
- Do not treat screenshots as editable components or original source code.
- Do not assume uncaptured hover states, mobile layouts, signed-in behavior, the Dashboard or completed payments.

## Reference pages
- Homepage: https://stripe.com/gb
- Pricing: https://stripe.com/gb/pricing
- Payments product page: https://stripe.com/gb/payments

## Capture scope
Logged-out desktop capture of stripe.com/gb (home, pricing, Payments) and two public product surfaces: the checkout.stripe.dev payments demo and docs.stripe.com. No account was created, the Dashboard was not opened and no email, card or test-card data was entered anywhere, so sign-up, onboarding and the signed-in Dashboard are not captured. The demo was driven only through its own settings (toggles, theme, device, demo type); marketing figures and customer stories change over time.

## Format inspiration
- https://github.com/voltagent/awesome-design-md
- https://getdesign.md/

The structure is inspired by these resources. The guide text and values come from this independent capture pass. No proprietary source code or font files are included.