# The Pudding — Longform Design Study No. 10

## Overview

The Pudding's "Women's Pockets are Inferior" (the pockets essay) is the gold standard for viz-as-narrative: a data-driven visual essay where the argument is made in charts and the prose is connective tissue between them. The whole piece sits on a calm pale blue-grey field rather than white, with a subject-grounded hero — the title drawn as dashed sewing-pattern outlines — and a narrow serif reading column. What makes it worth studying is the cadence: a visual lands on almost every screen, and most of those visuals are hand-built, interactive SVG charts.

- Genre: data-driven visual essay / scrollytelling data journalism.
- Personality: calm, editorial, rigorous. A tinted field, a high-contrast serif title, quiet sans labels, and charts that do the talking.
- Source URL: https://pudding.cool/2018/08/pockets/

## How it structures longform content

- **Story built out of pictures.** Prose sets up a question, a chart answers it, and the next chart pushes the argument forward. The page reads as a sequence of visual beats, not a wall of text.
- **A tinted reading field.** Everything sits on pale blue-grey #E7EEF8, not white. The tint takes the glare off a long read and gives every chart the same quiet stage.
- **Quiet hierarchy.** A high-contrast display serif (Canela) marks the title; a sans (Atlas Grotesk) tags data and UI; a transitional serif (Publico Text) carries the body. The loudest element on any screen is deliberately the chart, not a headline.
- **Imagery is the spine.** Roughly 110 significant visuals (about 100 interactive SVG charts, ~9 images, ~3 figures) against only 30 paragraphs — more picture than prose.
- **Subject-thematic hero.** The word "POCKETS" is drawn as dashed sewing-pattern outlines with a real pocket on the "O". The motif *is* the subject.

## Desktop treatment

- Body: Publico Text serif, 17px / 28.9px line-height (1.7), ink #282828, on the pale blue-grey field #E7EEF8.
- Display: Canela (high-contrast serif) for the title; Atlas Grotesk (sans) for labels and UI.
- Measure: ~640px column, ~75 characters per line. Centered byline with underlined author names and a muted month/year ("August 2018").
- Hero: a mid-blue field inside a dashed rectangle; the title set as dashed sewing-pattern outlines; a red vertical "ThePudding" tab plus hamburger at top-right.
- Visual cadence: ~110 visuals vs 30 paragraphs across ~12.2 screens — a visual roughly every screen. Charts are full-width and interactive.

## Mobile treatment

- Captured at 390px. Body steps down from 17px to 16px / 27.2px (leading held at 1.7).
- Measure goes to ~375px full-width, about 47 characters per line.
- Charts reflow to a single column and stay interactive rather than becoming static images.
- The dashed hero motif holds in a tighter frame; the red brand tab stays pinned top-right. The vertical rhythm of "a visual, then some prose" is preserved on the longer scroll.

## Visual cadence (the imagery / diagram strategy)

The Pudding sits at the far end of the visual-cadence spectrum: it draws more than it writes. The pacing device is the chart, not the heading.

- **Measured cadence:** ~110 significant visuals (about 100 hand-built interactive SVG charts) vs 30 paragraphs — a visual-to-paragraph ratio above 1:1, the only site in the library where visuals outnumber text blocks.
- **Density:** across ~12.2 screens that is a visual roughly every half-screen.
- **Role of the visual:** the charts *are* the argument. They animate, snap and resize as you scroll, so the reader watches a trend rather than reading a description of it. Prose narrates the transitions between charts.
- **Cross-library context (measured, this study):** The Pudding 110 visuals : 30 ¶; Our World in Data 22 : 82; Wait But Why 10 : 69; Stripe 11 : 42. The Pudding is the only one whose visual count clears its paragraph count — the point the report's Figure 1 (a grouped bar chart) is built to show.

## Design system

### Type tokens
- Display / title: Fraunces (opsz, weights 400/500) — stand-in for Canela.
- Body: Source Serif 4 (opsz, weights 400/600) — stand-in for Publico Text. 17px desktop, 16px mobile, line-height 1.7.
- Labels / UI: Inter (weights 400/600) — stand-in for Atlas Grotesk; ~0.72rem, letter-spaced, uppercase.
- Google Fonts link used in the homage: `https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=Inter:wght@400;600&display=swap`

### Colour tokens
- Reading field (pale blue-grey): `#E7EEF8`
- Hero blue (mid-blue field): `#8FB2DD`
- Ink (body): `#282828`
- Chart blue: `#6E9BD6`
- Chart deep: `#2E5E9E`
- Brand red (ThePudding tab): `#E5233D`
- Hairline / dashes: `#C9D6E8`
- Muted slate label (AA on the field): `#4A6390`

### Layout tokens
- Reading column: `--measure: 40rem` (~640px), ~75 CPL desktop / ~47 CPL mobile.
- Body: 17px / 1.7 desktop, 16px / 1.7 mobile.
- Hero: dashed rectangle around a mid-blue field; dashed sewing-pattern SVG wordmark; centered byline + month/year.
- Charts placed on white cards on the tinted field; a visual roughly every screen.
- Brand: red vertical tab pinned top-right.

## Signature techniques

- Data-viz as the narrative spine: a chart on almost every screen, advancing the argument rather than illustrating it.
- Calm tinted reading field (not white) so charts share one consistent, low-glare stage.
- Subject-grounded hero motif: dashed sewing-pattern outlines that literally name the topic.
- Serif body at a tight measure paired with quiet sans labels, so the type never competes with the visuals.
- A single red brand accent (the vertical tab) against an otherwise all-blue system.

## What to steal

1. **Put the data first.** Lead a section with the chart and let the prose annotate it — when the claim is quantitative, the figure out-persuades the sentence.
2. **Tint the field.** A pale blue-grey stage beats white for a long, chart-heavy read; it cuts glare and unifies every visual.
3. **Pace with pictures.** Aim for a visual roughly every screen. Cadence, not a ladder of headings, carries the reader through a long argument.
4. **Keep the measure tight.** Hold body copy near 640px / ~75 CPL even when charts run full-width — the reading column stays comfortable and the visuals get the room.
5. **Theme the furniture.** A subject-grounded motif (here, dashed sewing-pattern outlines) ties the chrome to the story and makes the piece feel authored, not templated.

## Visual references

- Desktop hero: ../assets/screenshots/10-pudding-desktop.jpeg
- Mobile (390px): ../assets/screenshots/10-pudding-mobile.jpeg

## Source URL

https://pudding.cool/2018/08/pockets/