Stripe’s publishing arm renders its catalog as a digital bookshelf: a warm near-black #201819 canvas holding a stack of full-width book "spines," each set in its own edition’s cover colourway and typography, that slide, lift and expand inside a full-viewport Three.js WebGL scene. The identity is set ENTIRELY in one serif superfamily, Ivar — Ivar Text for the unusually large 25px reading copy at 1.5 line-height, Ivar Headline for the small masthead, labels and buttons at weight 600 with a consistent +0.32px tracking, and an italic serif for the "Ideas for progress" tagline — with no sans or mono anywhere in the chrome, an embossed letterpress "S" monogram, and cream #e2cab0 ink and hairlines carrying the structure. Colour is never a fixed brand accent: it always belongs to a book, so the page cycles through navy #18185e, yellow #ffd943, gold #dfc78e, olive #303328, maroon #4d1a28, cyan #96dced, orange #ffb55e and magenta #f366ff as cover colourways. 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 — and depth is refused in CSS beyond a single warm inset glow (rgba(217,119,87,.7) 0 0 15px inset) on book hover, with the real depth living in the 3D scene, which is gated behind a prefers-reduced-motion block. Because 33 stylesheets are cross-origin on the Stripe Assets CDN, exact button hover/focus states and responsive breakpoints could not be captured. Ivar is licensed, so the preview stands in with Newsreader.
⚠ site only
Browse Stripe Press in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
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 arenot captured(earned: the rules were unreachable). Colours, type, radii, borders and same-origin motion (incl. the reduced-motion block) were read directly. Theclaude-pulsekeyframe 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.
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.
| 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 |
| 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.
| 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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.