# Stripe Press — Marketing Site Design Spec

> Source: press.stripe.com (live DOM, computed styles), 2026-08-02 (desktop 1512px).
> Coverage: home / book catalog. **sheetsBlocked 33** — most stylesheets are cross-origin on the Stripe Assets CDN, so §4 hover/focus states and §10 breakpoints are `not captured` (earned: the rules were unreachable). Colours, type, radii, borders and same-origin motion (incl. the reduced-motion block) were read directly. The `claude-pulse` keyframe is a capture-tool artifact and is excluded.
> Reality check: matches the hint — book-object editorial, letterpress-inspired, serif-led. Enriched: the ENTIRE type system is the Ivar serif superfamily (Ivar Text 3975×, Ivar Display, Ivar Headline), the canvas is a warm near-black #201819, controls are strictly SQUARE (0px), and the signature is a **Three.js WebGL** scene rendering the catalog as a stack of animated book spines, each carrying its own book's colourway.

## 1. Visual Theme & Atmosphere

A digital bookshelf for a publishing house: a warm near-black #201819 canvas holding a stack of book "spines," each a horizontal bar set in the book's own cover colours and typography, that animate in a 3D WebGL scene. The whole site is set in one serif superfamily (Ivar), which gives it the hushed, printed, literary character of a well-made book jacket rather than a tech product. Chrome is minimal — a small serif masthead with an embossed letterpress "S" monogram, cream hairlines, square controls — so the books themselves are the interface. Colour is not a fixed brand palette but a rotating library of cover colourways (navy, cream, ochre, maroon, cyan) sampled from the real editions. Feels: literary, printed, warm, considered.

## 2. Color Palette & Roles

### Chrome (dark shell)
| Token | Hex | Role / usage |
|---|---|---|
| canvas | `#201819` | Page background (warm near-black) |
| ink-dark | `#1d1a15` | Dark text on cream covers (most-used, 2130×) |
| cream | `#e2cab0` | Primary text/ink on the dark canvas, hairlines |
| cream-hair | `#dbcab5` | Secondary cream hairline |
| white | `#ffffff` | Bright text / cover fills |
| near-black-btn | `#222222` | Submit button fill |
| grey-50 | `#504f4f` | Muted border |

### Book-cover palette (rotating per title — examples, sampled from real editions)
| Hex | Book / role |
|---|---|
| `#18185e` / `#201e8e` | Deep navy (Poor Charlie's Almanack, The Big Score) |
| `#dee6ff` | Pale blue cover text |
| `#ffd943` / `#dfc78e` / `#c1b676` | Yellow / gold / khaki |
| `#303328` / `#93935f` | Olive |
| `#4d1a28` / `#442c25` | Maroon / brown |
| `#96dced` | Cyan |
| `#ffb55e` | Orange |
| `#f366ff` | Magenta |

Rule: the chrome is warm near-black + cream serif; saturated colour is never brand chrome — it is always a book's own cover colourway.

## 3. Typography Rules

- One serif superfamily, **Ivar**: **Ivar Text** (body/reading, 3975×), **Ivar Display** (large display, 946×), **Ivar Headline** (masthead, labels, buttons, 298×). Plus per-book cover faces inside the spine art.
- Specimens below use **Newsreader** (Google Fonts) as the closest open serif stand-in, italic included; the site ships the licensed Ivar family.
- Masthead/labels carry a consistent +0.32px tracking; body reading text is large (25px).

| Role | Family | Size/Line | Weight | Tracking |
|---|---|---|---|---|
| Body / reading | Ivar Text | 25 / 37.5 | 500 | normal |
| Masthead (h1) | Ivar Headline | 17.6 / 17.6 | 600 | +0.32px |
| Tagline (h2, italic) | Ivar Headline | 16 / 20.8 | 600 | +0.32px |
| Label / credit (h3) | Ivar Headline | 16 / 16 | 400 | +0.32px |
| Button | Ivar Headline | 17 / 600 | 600 | +0.32px |

Patterns: serif everywhere, no sans and no mono in the chrome; italic serif for the "Ideas for progress" tagline; reading text is unusually large (25px) and set at a generous 1.5 line-height.

## 4. Component Stylings

### Buttons
- **Submit (newsletter)**: bg `#222222`, text `#ffffff`, radius **0px** (square), h 48px, Ivar Headline 17/600 +0.32px, padding `14px 37.8px`.
- **Book / title button**: transparent, dark `#000000` (or cover colour) text, radius 0px — the whole spine is the control.

### Inputs
- Email field: bg `rgba(0,0,0,.067)`, radius **0px**, h 48px, 17px, padding `1px 2px 1px 8px`, dark placeholder — square, letterpress-plain.

### Cards / book spines (signature)
- Horizontal bar per book: author name left, title centre, small book glyph right, set in the book's own cover colour + type. Cream `#e2cab0`/`#dbcab5` hairlines separate them; navy `#18185e` and grey `#504f4f` on specific covers. One warm inset glow on hover: `rgba(217,119,87,.7) 0 0 15px inset`.

| Component | Rest | Hover | Focus | Active | Disabled |
|---|---|---|---|---|---|
| Book spine | flat cover colour | warm inset glow `rgba(217,119,87,.7) 0 0 15px inset`; 3D lift in WebGL | not captured (cross-origin) | — | — |
| Submit button | `#222222` / white, square | not captured (cross-origin) | not captured | — | — |
| Email input | square, `rgba(0,0,0,.067)` | — | not captured | — | — |

Note: 33 stylesheets were cross-origin (Stripe Assets CDN), so button/input hover and focus rules were unreachable — recorded as `not captured`, not guessed.

## 5. Layout Principles

- Fixed small masthead top-left: embossed "S" monogram + "Stripe Press" / italic "Ideas for progress"; a "?" help affordance bottom-left.
- The catalog is a vertically stacked shelf of full-width book spines, centered in a column, that expand and animate in a WebGL scene.
- Square, letterpress-plain forms; cream hairlines do the dividing; generous dark negative space around the shelf.

## 6. Depth & Elevation

- Radii: strictly SQUARE — `3px` is the largest common value (16×), then `2px`; controls are `0px`. Special shapes `32px 0 0 32px` and `700px 0 0` appear once each (book-corner curls). `50%` only for small dots.
- Borders: cream 1px `#e2cab0` (19×) / `#dbcab5` (14×), navy 1px `#18185e`, grey 1px `#504f4f`.
- Elevation mostly flat; the one recorded shadow is a warm **inset** glow `rgba(217,119,87,.7) 0 0 15px inset` (book hover), not a drop shadow — depth lives in the WebGL scene, not CSS.

## 7. Motion

| Property | Duration | Easing | Applies to |
|---|---|---|---|
| transform | 0.4s | ease | book / element movement (114×) |
| transform | 0.3s | ease-out | spine expansion (93×) |
| background | 0.1s / 0.2s | ease | quick fills |
| all | 0.3s | ease-out | misc |
| opacity | 0.2s | ease | fades |

House transition: `transform 0.3–0.4s ease/ease-out` — the books slide, lift and expand. The real animation is a **Three.js WebGL** scene (no CSS `@keyframes` drive it; the only same-origin keyframe found, `claude-pulse`, is a capture-tool artifact and excluded). No JS animation library besides Three.js. **A `prefers-reduced-motion` block IS present (reducedMotionBlocks 1)** — the WebGL motion is gated, a point in the site's favour.

## 8. Backgrounds, Effects & WebGL

- **Signature: a full-viewport Three.js WebGL canvas** (1512×783) renders the animated book-spine shelf — this is the whole homepage experience.
- Two CSS gradients back cover art: warm `linear-gradient(#ff815a, #ffaf5b, #ffdf5b)` (orange→yellow) and a pastel `linear-gradient(#e7d4e5, #cad9e5, #eeebcc, #e9d8e3, #dbd4ed)`.
- 3 raster layers + 1 video; no grain, no backdrop-filter blur.

## 9. Do's and Don'ts

### Do
- Set everything in one serif superfamily (Ivar; stand-in Newsreader) — Text for reading, Headline for masthead/labels with +0.32px tracking; use an italic serif for the tagline.
- Keep the canvas warm near-black `#201819` with cream `#e2cab0` ink and cream hairlines.
- Let each book carry its own cover colourway; never impose a single brand accent on the catalog.
- Keep controls strictly SQUARE (0px), plain and letterpress-like; near-black `#222222` submit, `rgba(0,0,0,.067)` input.
- Render the shelf as an animated WebGL scene with `transform 0.3–0.4s ease-out` motion, and gate it behind `prefers-reduced-motion`.

### Don't
- Don't introduce a sans or mono into the chrome — the identity is all-serif.
- Don't round the controls — square corners are the letterpress rule.
- Don't add a fixed brand accent colour; colour belongs to the books.
- Don't use drop shadows for depth — depth is the 3D scene + a warm inset glow.
- Don't ship the WebGL motion without the reduced-motion block (the live site keeps one).

## 10. Responsive Behavior

- Breakpoints `not captured` — the layout stylesheets are cross-origin on the Stripe Assets CDN (sheetsBlocked 33), so the media queries were unreachable; only same-origin rules (colours, type, the reduced-motion block) were read.
- No `prefers-color-scheme: dark` block found in same-origin sheets (darkSchemeBlocks 0); the site is dark by design. The WebGL shelf reflows to a mobile stack (observed, not measured).

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#201819` · Ink cream `#e2cab0` · Dark ink `#1d1a15` · Button `#222222` · Hairline `#e2cab0`
- Font: Ivar serif family (stand-in Newsreader) · Body 25px/1.5 · Radius 0px (square) · Control height 48px · Tracking +0.32px on labels
- Focus: not captured (cross-origin) · Hover: warm inset glow `rgba(217,119,87,.7) 0 0 15px inset` + WebGL lift

<stripe-press_design_language>
Use the Stripe Press design language: a digital bookshelf for a publishing house. A warm near-black `#201819` canvas with cream `#e2cab0` ink and cream `#dbcab5` hairlines, set ENTIRELY in one serif superfamily (Ivar &mdash; Text for 25px/1.5 reading copy, Headline for the 16&ndash;17.6px masthead, labels and buttons at weight 600 with +0.32px tracking; italic serif for the tagline; stand-in Newsreader). No sans and no mono anywhere in the chrome. The catalog is a stack of full-width book "spines," each rendered in its OWN cover colourway (navy #18185e, yellow #ffd943, gold #dfc78e, maroon #4d1a28, cyan #96dced, orange #ffb55e&hellip;) &mdash; colour is never a fixed brand accent, it always belongs to a book. Controls are strictly SQUARE (0px radius), plain and letterpress-like: a near-black `#222222` white-text Submit button and an `rgba(0,0,0,.067)` email field, both 48px. Depth is refused in CSS (one warm inset glow `rgba(217,119,87,.7) 0 0 15px inset` on book hover); the real experience is a full-viewport Three.js WebGL scene that slides, lifts and expands the spines with `transform 0.3&ndash;0.4s ease-out`, gated behind a prefers-reduced-motion block. Feels: literary, printed, warm, considered. Avoid: a sans or mono in the chrome, rounded controls, a single fixed brand accent, drop shadows for depth, or shipping the WebGL motion without a reduced-motion block.
</stripe-press_design_language>