Stripe Press — the model

Source. press.stripe.com · captured headless at 1440×900 and 375×812 on 13-08-2026 · banked because Frank said "I like this way of presenting things."

What it is. The home page of a publisher that has 19 books, one film and one podcast. It presents them as a single vertical stack of physical objects that you fly down. There is no nav, no hero, no card grid, no prose. The site's entire argument is: these are real things, made with care, look at them.

Correction to the record. Two things a text extraction of this site gets wrong, and one thing I had wrong before looking.

1. A text extraction reports "no cover imagery". False. The imagery is the whole site, rendered live in WebGL, so it is invisible to any text reader. The DOM behind it is a bare list of titles and authors, which is exactly what an extractor sees.
2. The home page is dark. Ground #201819, a warm brown-black, not pure black. So this is not, as it stands, a light model. See "what we would copy" below: the mechanism is not dark, only this one page is.
3. But the site is not uniformly dark either, which matters. Each book's own page is flooded in that book's two colours, and 7 of the 19 are light grounds. The footer is a plain white page. So the site already contains its own light version.

The ground and the palette

One pair per item, and nothing else. Every item carries exactly two colours, set as inline variables on its row: --backgroundColor and --color. When you open an item, the whole page repaints to that pair, edge to edge. No white, no grey, no third colour, no tint, no card, no border colour of its own: outlines and rules are drawn in --color, and the one "filled" element per page (the download block) is the pair inverted. That is the entire colour system.

The pair is taken from the physical object. The olive-and-navy of the Poor Charlie's Almanack page is the cloth and the foil of the actual binding. The colour is not a brand decision, it is a fact about the thing being shown, which is why 19 wildly different palettes sit together without clashing.

The full bank, as captured. Ground / ink, in the stack's order. Contrast ratio computed, because it decides which of these we can reuse.

The finding that matters for us. The seven light pairs all pass AA for body text, from 6.30 to 11.04. The pairs that fail or only reach large-text are the dark and the mid ones. Taking only the light half of this palette costs us nothing and gains contrast.

The typefaces and the size relationships

One serif superfamily, three cuts, no sans anywhere. Ivar Display, Ivar Headline and Ivar Text (Letters from Sweden). Body is Ivar Text, Georgia at weight 500. Titles are Ivar Display 700. Labels and the wordmark are Ivar Headline 600, often italic. There is no sans-serif on the site, not in a caption, not in a button, not in the legal line.

Georgia is the site's own declared fallback. font-family: Ivar Text, Georgia. That is the substitution the designers themselves accepted, and it is the reason this model survives our system-fonts-only rule.

The type is small and the ratio is tight. Body 16px in the stack, 17px on a book page. The book title is calc(19px + .75vw), which is 29.8px at 1440. So the largest type on a book page is 1.75× the body. The wordmark is 17.6px and the tagline 16px. This is the opposite of a big-type site: nothing is scaled up to shout, because the object is doing the shouting. The one exception is the footer prose at 24px, which is the largest text on the site and sits at the very end.

Semantics are decoupled from size on purpose. h1…h6 are all reset to 16px / weight 400 / line-height 1, and size is then applied by role. Worth copying: it stops the heading level from deciding the look.

Tracking and measure. A small positive letter-spacing: .32px on links and buttons only. Body line-height 1.5, headings 1.4. The text column on a book page is 42% of the viewport, which at 1440 is about 700px, a long measure by our house standard and read comfortably only because the type is 17px serif on a coloured ground.

How one item is presented, and how much text it gets

In the stack: three words and a monogram. A book's row in the stack is its spine, and the spine carries author (left), title (centre), the Stripe Press monogram (right). Nothing else. No date, no category, no price, no "read more", no tag.

On its own page: one paragraph. The right column holds, in this order and nothing else: title, author in italic, a small outlined button group of one or two words each ("Website", "Living cover"), one paragraph of description of roughly 100 to 150 words, then the purchase rows, then a rule-and-italic-word label and the author biography. That is the whole page. No pull quotes competing with the paragraph, no sub-headings inside the description, no related items, no share buttons.

The discipline to steal. One paragraph per item, written to be the only paragraph. It is not a summary of a longer page, it is the page.

Do the items read as physical objects, and how

Yes, and it is the point of the site. They read as objects, not as pictures of objects. Five things do it, and four of the five are free.

1. Real thickness. Each item is a solid with a visible spine face, a board edge, and a page block whose paper edges you can see at the bottom and the fore-edge. In the stack you see the spine plus the foreshortened top cover, so you are always reading a volume rather than a rectangle.
2. Material, at a scale where you can see the weave. The cloth binding texture is rendered on every cover, and deeper in the stack the books come close enough to the camera that you read the woven grain, the foil, the debossing. That is what makes it feel expensive.
3. A soft contact shadow. Each object casts a short, low-opacity shadow onto the ground below it. This is the single cheapest part of the effect.
4. The ground is made of the object's own colour. On a book page the field is the book's cloth colour, so the object does not sit on a background, it emerges from one material. This is why nothing looks pasted on. Free.
5. The spine typography is the book's own, not a template. Get Together is a 1970s slab, An Elegant Puzzle a neutral sans, The Revolt of the Public a condensed caps in red foil on ultramarine, The Dream Machine a geometric sans. Nineteen different typographic treatments in one stack. This is the expensive part: it only works because a real designer set 19 real covers.

The empty space, and what it does

Roughly two thirds of every screen is empty. In the stack the objects occupy about 45% of the width, centred, with wide dark margins left and right and a full gap of ground between each one. They float apart; they never touch.

On a book page the left 58% is empty once you scroll past the object. The book is staged in the upper part of that column, and below it the column simply stays empty for the whole length of the page while the text runs down the right 42%. A house-rules session would fill that. Not filling it is the decision.

What the emptiness buys. It makes each object an exhibit. The eye has nothing else to land on, so it has to look at the thing. It also carries the price signal: only a confident publisher leaves that much ground unused.

How the page moves as you scroll

One continuous camera move down a stack, about 7.4 screens long. There are no sections and no snap points. The DOM is a list of invisible rows, one per item at about 26% of viewport height each, which supplies the scroll length; a fixed full-screen WebGL canvas (70vw wide, centred) draws the stack and reads the scroll position.

The perspective inverts as you pass each object. High in the viewport you see the top cover of a book; level with the camera you see only the spine; below, you see its underside. So a single object turns as it passes, and the whole page reads as flying down past a stack rather than scrolling a list.

Objects grow as you go deeper. Near the top of the stack they are around 750px wide; deeper they reach about 1000px and fill more of the frame. The camera is dollying in, not just translating.

One indicator, on the left edge. A vertical ruler of small ticks, one per item, with the current item's tick drawn longer and white. Two icons at its foot mark the film and the podcast. On a book page a back arrow (←) appears at that book's rung. That rail is the only navigation on the site.

Opening an item is a repaint, not a page. The colour floods, the chosen object flies from the stack to the left column, and the text column slides up by 20px into place over about one second. The transition is the transition of a physical thing being taken off a shelf.

There is a genuine break at the end. After 19 floating objects, the film and the podcast do the opposite: a full-bleed illustrated environment fills the entire screen, with a small 3D token floating in it and one line of wide-tracked caps. Then the stack ends and the white footer arrives. Three rhythms in one page, in that order.

The one editorial device that carries the voice

A 60px hairline rule, then one italic word. That is the site's only heading. Not "About the authors", just ———— Authors, in Ivar Display italic, preceded by a 60px 1px rule and followed by 60px of space. The same device introduces every section on every page.

Why it works. It refuses to categorise. A normal heading tells you what kind of content follows; this one just names it, in the voice of a book's own running head. It is a book device, not a website device, which is precisely the claim the site is making. It costs one rule and one italic word.

Its companion. The outlined rectangle. Buttons, button groups and purchase rows are all a 1px outline in --color with square corners, no radius, no fill, no shadow. Hover fills the outline with --color and flips the text to --backgroundColor. Multi-cell groups share a single border between cells. There is no other button style on the site and no rounded corner anywhere.

What a small site would have to give up to work this way

Nineteen designed objects. The stack has nothing in it but the objects, so if the objects are not beautiful there is no site. This is the whole cost, and it is not a photography budget, it is a design budget: 19 covers, each typographically distinct, each with a real cloth-and-foil specification.

The WebGL layer. A real-time 3D scene, a camera rig driven by scroll, a texture per cover, and a no-WebGL fallback (which the CSS shows: a flat coloured square with a 1px border). That is weeks, and it fails on a weak device.

Every other way of being useful. No search, no filter, no sort, no categories, no dates, no "new", no featured, no related, no author index, no series. With 19 items you can afford that. With 60 you cannot.

Legibility at the edges. At 375px the model keeps the objects and sacrifices text: the books are scaled to bleed off both sides of the screen, and the author name and any right-hand spine word are cropped away. The title stays centred and readable, everything else on the spine is lost. That is a deliberate trade, and it means the spine text can never be load-bearing.

What we would copy, and what we would not

The honest difference. This is a corporate publisher's site with a real design budget behind 19 physical books, a bespoke commercial typeface, and a custom WebGL renderer. SCRC is a few friends in Geneva publishing long-form articles that exist only as text. Most of what makes Stripe Press beautiful is upstream of the website, in objects we do not have. So the question is not how to imitate the page; it is which of its mechanisms survive having nothing to photograph.

Survives, and we should take it

The two-colour pair per item, drawn from the light half. One ground, one ink, flooded edge to edge, everything else drawn in the ink. This is the single most transferable thing here, it is not a dark mechanism, and the seven light pairs in the table above all pass AA for body text. An article series with one pair per article gets Stripe Press's variety with no imagery at all. Use #cad9e5/#222222, #C1B676/#18185E, #E2E2E2/#504F4F and their kin as the starting bank.

The rule-and-italic-word heading. A 60px hairline, one italic word, 60px of air. It replaces our entire heading ladder on a pièce and it is the fastest way to stop a page reading as a document. Free.

The outlined square-cornered control, hover inverts. 1px outline in the ink colour, no radius, no fill, no shadow, shared borders in groups. It kills the 10px-rounded-card look Frank recognises instantly, in one rule.

One paragraph per item, and it is the page. Not a dek plus sections. One paragraph of 100 to 150 words, written to be the only one. For a long-form series this is the article's front door.

Tight type ratio, small body, one serif family. Largest type at 1.75× the body, not 5×. Georgia is the site's own declared fallback, so we can honour the model with a system font. This also directly answers criterion 2 in taste.md: the force here comes from colour and object, never from scaling type up.

The empty column. Leave 55% of the page empty next to the text and do not fill it. Costs nothing, and it is the discipline the house rules keep breaking.

Sacrificing navigation. No nav, no breadcrumb, no meta line. A thin tick rail on the left edge as the only position indicator. For a series of a dozen articles this is enough, and it removes the banned skeleton at the root.

Does not survive, and we should refuse it

The dark ground. The stack page is #201819 and it must not be copied. The site hands us the replacement itself: run the whole thing on the light half of its own palette, and put the white footer's discipline everywhere. Nothing in the model depends on darkness; only that one page does.

The WebGL stack and the scroll-driven camera. Weeks of work, a hard device floor, and it needs 19 beautiful objects to be worth building. Refuse it outright rather than building a cheap version: a lo-fi 3D book stack looks worse than no stack.

Photographic or rendered physicality as the main event. We have no bound objects. A faked "physical article" (a paper texture, a drop-shadowed page, a fake book cover for a PDF) would be a lie about the artefact and would read as a template. The honest substitute is the part of physicality that is free: real thickness, a soft contact shadow, and a ground made of the object's own colour, applied to something we genuinely have, such as a coloured plate carrying the article's title set large in the pair's ink. Take mechanisms 3, 4 and 5 from the physicality list, skip 1 and 2.

The bespoke typeface, and its 19 typographic identities. Ivar is licensed and the 19 spine treatments are 19 pieces of real design work. We take the single-family discipline and set it in one system serif. We do not attempt a different display face per article; with system fonts that reads as inconsistency, not as variety.

The low-contrast pairs. #6E665B/#DFC78E at 3.42 and #93935F/#333032 at 4.09 are fine for an art page nobody has to read carefully. A public centre's article must not use them. Only take pairs at 6.0 or above.

Cropping text off the screen at 375px. Stripe Press can lose the author name on mobile because the object carries the meaning. For us the text is the artefact, so nothing may bleed off the edge. This is the one place where we must adapt the model rather than copy it.

Where I was unsure

The long measure. The text column is about 700px at 1440, well beyond our reading measure, and it works there because the type is small serif on a coloured ground and the paragraph is short. For a genuinely long article I do not know whether it holds. Worth testing at real length before committing.

Whether the pair-per-item variety reads as care or as chaos with 20+ items and no objects. Here 19 palettes cohere because each is a fact about a real book. Invented pairs for articles have no such anchor. I would want to see 6 of ours side by side before trusting it past a handful.