# Stripe Engineering — Longform Design Study No. 13

Study of the longform technical-essay layout at Stripe Engineering, the payments company's engineering blog. Reference article: "Online migrations at scale," a post about migrating hundreds of millions of live Subscriptions objects without downtime.

## Overview

Stripe Engineering reads like a well-set engineering paper, not a marketing blog. There is no hero image, no gradient, no motion. The page earns credibility through restraint: a light slate sans body on white, deep-navy headings, a single saturated blurple accent, and a faint dashed margin grid that frames the column like a blueprint. Diagrams do the pacing — roughly one every screen and a third — so a dense migration story stays walkable.

The signature to reproduce: **calm technical clarity**. Slate body (never black) + navy headings for tonal hierarchy, one rationed blurple accent, dashed vertical grid rules, generous whitespace, and minimal boxes-and-arrows diagrams that explain each step rather than decorate. It is the direct design bridge to audit reports and AI explainers.

## How it structures longform content

Reading order, top to bottom:

1. Slim top nav: wordmark left, product nav, and a navy "Contact sales" pill at the right.
2. Dashed hairline under the nav.
3. Breadcrumb row ("Blog / Engineering" in blurple, "Stripe on X" top-right).
4. Oversized navy H1.
5. Date, marked with a small blurple vertical tick.
6. Left author rail: circular avatar + name (navy) + team (slate).
7. A long single column of slate body prose, punctuated by navy H2/H3 section heads, code blocks, and architecture diagrams.
8. Faint dashed vertical rules frame the whole column.

Hierarchy is built from **tonal contrast, not size explosions**. Body is a soft slate so navy headings step forward without shouting. The blurple accent is rationed to links, the date tick, and diagram arrows — because it appears rarely, it reads as a wayfinding signal. The most Stripe-specific device is the dashed margin grid: barely visible, but it signals engineering precision and holds the eye to the measure.

Imagery strategy: diagrams are evidence, not ornament. Every one is a labelled architecture/flow figure explaining a concrete migration step, sized within the measure and captioned.

## Desktop treatment

- Body: Söhne, 18px, line-height 28 (1.56), weight 300, slate #425466.
- Measure: ~810px column, roughly 90 characters per line (roomy end of readable).
- H1: 32px, weight 700, navy #0A2540.
- H2: 34px, weight 500 — note it is *larger than the H1 but lighter*; Stripe ranks by weight, not size.
- Code: Source Code Pro on a #F6F9FC panel.
- Links: blurple #635BFF.
- Layout: left author rail + article column, wrapped in a dashed margin grid; dashed hairline under the nav.

## Mobile treatment (390px)

- Body steps down to 15px / 24 line-height, same slate colour.
- Measure: ~343px column, roughly 46 characters per line.
- H1 wraps to three lines; weight held at 700.
- The left author rail folds up into a compact byline (avatar + name + team) above the article.
- The two-column frame collapses to a single column.

The takeaway: the layout adapts (measure narrows, rail folds) but the reading contract — face, slate body colour, blurple links — does not.

## Visual cadence (the imagery / diagram strategy)

This is the round's theme and Stripe's strongest move. Across roughly **42 paragraphs and about 15 phone screens the post places around 11 architecture diagrams — one every ~1.3 screens**. That regular beat is what keeps a dense, downtime-sensitive migration story readable: the reader is never more than a scroll or two from a picture that resolves the paragraph they just worked through.

The diagrams follow one repeated shape — a four-beat loop that Stripe runs about eleven times:

1. **Assert** — state the claim in plain prose.
2. **Show** — diagram the mechanism (slate boxes, navy labels, blurple arrows).
3. **Prove** — back it with a short code block.
4. **Resolve** — return to prose and conclude the beat.

The regularity matters more than the exact count: a predictable pulse turns a wall of systems detail into something walkable. This is the transferable pattern for **audit reports and AI explainers** — summary → severity chart → per-finding callout → diagram, repeated at a steady interval so the reader always has a visual anchor within reach.

(The homage page demonstrates this literally, with two hand-built inline SVGs: the four-beat cadence loop, and a cadence-map strip plotting the 11 diagram beats evenly across the 15 screens.)

## Design system (tokens)

Type:
- Body: Söhne (homage substitute: Inter), 18px / 1.56, weight 300–400.
- H1: 32px, weight 700, navy.
- H2: ~34px, weight 500 (larger than H1, lighter weight).
- H3: ~18px, weight 600, navy.
- Code: Source Code Pro, ~14px, navy ink on #F6F9FC.
- Google Fonts (homage): `family=Inter:wght@300;400;500;700&family=Source+Code+Pro:wght@400;500`.

Colour:
- White `#FFFFFF`
- Slate body `#425466`
- Navy heading `#0A2540`
- Blurple accent + links `#635BFF`
- Code panel `#F6F9FC`
- Dashed rule `rgba(10,37,64,.12)`

Layout:
- Measure ~810px (~90 CPL desktop, ~46 CPL mobile).
- Leading 1.56.
- Dashed margin grid framing the column; dashed hairline under the nav.
- Left author rail on desktop; folds to a byline below ~920px.

## Signature techniques

- **Slate body, not black** — a soft #425466 lets navy headings step forward and eases a long technical read.
- **One rationed accent** — blurple used only for links, the date tick, and diagram arrows; nowhere else.
- **Rank by weight, not size** — H2 larger than H1 but lighter, so the page never feels top-heavy.
- **Dashed margin grid** — near-invisible vertical rules that read as an engineering blueprint under the prose.
- **Steady diagram cadence** — ~1 diagram / 1.3 screens; boxes-and-arrows figures that explain, never decorate.
- **Quiet left author rail** — avatar + name + team, collapsing to a byline on mobile.
- **Blurple date tick** — a 3px vertical mark that dates the piece without a heavy metadata block.

## What to steal

1. Set body in slate, not black — it lets deep-navy headings carry hierarchy and eases long reads.
2. Ration the accent to one job — a single blurple for links, tick, and arrows reads as a signal, not noise.
3. Rank by weight, not just size — close type sizes plus a weight gap keeps a page from feeling top-heavy.
4. Give diagrams a steady beat — one picture every screen and a third makes dense argument walkable; cadence beats polish.
5. Frame the column with a whisper — a dashed margin grid signals precision and holds the measure without drawing attention.

## Visual references

- Desktop: ../assets/screenshots/13-stripe-desktop.jpeg
- Mobile: ../assets/screenshots/13-stripe-mobile.jpeg

## Source URL

https://stripe.com/blog/online-migrations