# Design tokens — extracted via computed styles (getComputedStyle on rendered pages)

Method: navigate → resize → read computed styles of the median-length paragraph (true body copy),
headings, links, blockquote, figcaption; measure content-column width and approx characters-per-line
(CPL ≈ width / (0.5 × fontSizePx)); capture desktop (1366w) + mobile (390w) screenshots.

---

## 01 — Tubik Studio · "UX Design: How to Make User Interface Readable"
URL: https://tubikstudio.com/blog/ux-design-readable-user-interface/
Genre: Design-studio editorial blog (typography-forward).

DESKTOP (1366)
- Body: TWKLausannePan-350 (custom humanist sans, weight 350), 20px / 35px line-height (**1.75**), color #000 on #fff.
- H1: TWKGhost-Regular (high-contrast transitional/Didone serif), 72px / 82px, weight 400, mb 40px.
- H2: TWKGhost, 38px / 38px, weight 500, letter-spacing −0.38px, mb 20px.
- Deck/standfirst (H3 role): Lausanne sans, 24px / 35px, weight 350.
- Kicker/eyebrow: uppercase small-caps, letter-spaced ("PROCESSES AND TOOLS  UI/UX").
- Measure: 900px column, ~90 CPL (wide, but tolerated by the very high 1.75 leading).
- Accent: violet/indigo (~#5B4EE9, "contact us" link, Inter for UI chrome).
- Layout: left-aligned content, large empty top zone before headline; contained (non-bleed) images (18 imgs, 0 full-bleed).
- Byline w/ avatar + share icons row (fb/x/pinterest/linkedin/copy).
- Chrome: sticky lowercase "tubik" logo header; horizontal topic nav.
- Doc height ~23,800px (very long).

MOBILE (390)
- Body: 16px / 24px (**1.5** — leading ratio drops with size), mb 10px.
- H1: 72 → 38px / 42px.
- Measure: 345px, ~43 CPL (ideal). Single column, ~15px side gutters.
- Nav collapses; hero image full-width in column.

DESIGN SIGNATURE: Swiss-editorial calm. Serif display + light humanist sans, black/white, one violet accent,
enormous whitespace, airy 1.75 leading on desktop. Restraint is the brand.
FONT SUBSTITUTES (for homage): headings → "Playfair Display" or "Fraunces" (high-contrast serif);
body → "Inter" / "Hanken Grotesk" (humanist sans, light weight).

---

## 02 — LearningAdventures typography demo · "Notes on Remix 3"
URL: https://deploy-preview-2--learningadventuresai.netlify.app/typography/blogset1/
Genre: Reading-first typographic essay / minimal blog index (developer-blog archetype).

DESKTOP (1366)
- Body: Source Sans Pro (humanist sans), 18px / 27.9px (**1.55**), color #333 on **#f9f9f9** (warm off-white paper).
- H1: Noto Serif, 48px / 57.6px, weight **300 italic**, letter-spacing −0.48px, color #1a1a1a. (signature light-italic serif display)
- H2: Noto Serif, 30px, weight 500.
- Eyebrow: "A SMALL REMIX 3 BLOG" — uppercase, letter-spaced, gray.
- Meta labels: "MAY 28, 2026 · 8 MIN READ" — small-caps, letter-spaced, muted gray.
- CTA: "READ THE NOTE →" — bold small-caps, underlined.
- Measure: 740px, ~82 CPL. No imagery (0 images) — pure type.
- Hairline rules separate entries; sticky white header ("Notes on Remix 3" italic serif left, "INDEX" small-caps right).
- Short doc (~1900px).

MOBILE (390)
- Body stays 18px/27.9px (already reading-optimal → only the measure narrows, font unchanged).
- Measure: 327px, ~36 CPL. H1: 48 → 34px.
- Single column, ~24px gutters.

DESIGN SIGNATURE: The designer's-personal-blog. Serif (light italic) + humanist sans, off-white paper,
restrained gray letter-spaced small-caps for all meta, tight vertical rhythm, hairline dividers, no chrome.
FONT SUBSTITUTES: **exact fonts are free** — Noto Serif + Source Sans 3 (Google). Faithful homage possible.

---

## 03 — Postcards by Elle (Substack, custom theme) · "morning walks…"
URL: https://postcardsbyelle.substack.com/p/morning-walks-and-listening-to-full
Genre: Personal essay / slow-living newsletter (heavily customised Substack).

DESKTOP (1366)
- Paper: warm **cream/ivory** background (~#F6F1E7); everything in **warm brown ink (#5D4C37 / rgb 93,76,55)**.
- Body: **Spectral** (serif), 20px / 32px (**1.6**), warm brown, mb 20px.
- Post title (H1): **Lora** serif, bold ~40px, warm brown.
- Subtitle: Lora, 18px, muted taupe (#868480).
- Masthead: handwritten **pink script** logo "postcards by elle" (~#D6336C). Only pop of colour.
- Opening: large serif **DROP CAP** ("I") + first sentence set in *italic* serif as an epigraph, followed by a hairline rule.
- Section heads lowercase serif ("prelude").
- Images: contained (728px), **rounded corners**, 14 imgs.
- Engagement pill bar: ♥ 1,866 · 💬 37 · ↻ 254 · Share (rounded outline pills).
- Left rail w/ subtle contents ticks. Sticky top bar w/ Subscribe (dark-brown) button.
- Measure: 728px, ~73 CPL. Doc ~14,500px.

MOBILE (390)
- Body 20 → 18px / 28.8px. Measure 348px, ~39 CPL. Single column, logo centered, sticky Subscribe.

DESIGN SIGNATURE: cozy diary / "slow living". Cream paper + monochrome warm-brown serif, one hand-script pink accent,
drop-cap italic epigraph, rounded imagery, soft pill UI. Emotional warmth via colour temperature, not decoration.
FONT SUBSTITUTES: **exact fonts free** — Lora + Spectral (Google) + a script (Caveat/Meow Script) for masthead.

---

## 04 — Nielsen Norman Group (NN/g) · "Homepage Design: 5 Fundamental Principles"
URL: https://www.nngroup.com/articles/homepage-design-principles/
Genre: Authoritative UX-research article (reference publication).

DESKTOP (1366)
- **Inverted pairing**: body is **serif** (Source Serif Pro), 20px / 37px (**1.85** — very airy), #000 on #fff.
- H1: **sans** (Source Sans), 40px / 51px, weight 700, black, left-aligned.
- H2: Source Serif, 22px, weight 400 (section heads modest — hierarchy carried by weight + rules, not size).
- Links: **bright blue #385AFF**, no underline. Brand accent = NN/g **red-orange** (logo slash, category ▲ chips).
- Summary/abstract block: serif with a left vertical rule + bold "Summary:" label.
- **Two-column**: 835px article + ~300px right rail of "Related Courses" cards (title / desc / ▲ CATEGORY chip).
- Author byline: circular avatar photo, blue name link, gray date, Share on right.
- Figures everywhere (30 imgs) with captions; black top promo bar; pill-outline active nav item.
- Measure: 835px, ~84 CPL. Doc ~25,000px (comprehensive).

MOBILE (390)
- Body keeps **20px / 37px** (serif at full size — no shrink). Measure 343px, ~34 CPL. H1 40 → 34px.
- Right rail collapses below the article; nav → hamburger.

DESIGN SIGNATURE: scholarly authority. Serif body (long-form credibility) + bold sans headline, ultra-high 1.85
leading for scannability, functional two-column with contextual course cards, restrained red-orange brand + blue links,
abstract/summary lead block. Trust through convention, not flair.
FONT SUBSTITUTES: **exact fonts free** — Source Serif 4 + Source Sans 3 (Google).

---

## 05 — Shorthand · "5 excellent examples of longform content"
URL: https://shorthand.com/the-craft/longform-content-examples/index.html
Genre: Immersive scrollytelling feature (digital-magazine "Snowfall" archetype).

DESKTOP (1366)
- Structure = a stack of **full-viewport scenes** (7 detected): title scenes, text-over-media, reveal sections; each
  section carries its **own theme background colour** (lilac hero #E6C9E8, light-grey #EFEEEE reveal, photo bleeds…).
- Display type: **PassengerSerif** (elegant high-contrast serif), **light weight 300**: hero H1 56px, section H2 **65px**,
  **centered** on scene titles, deep brand **green #03302B**.
- Body: **CircularWeb** (geometric sans, Circular-like), 20px / ~24–32px, often **white over media**, narrow centered column.
- Numbered lists with **bold lead-in** phrases; big generous scene padding.
- 10 full-bleed images / 18 total; doc ~30,500px. Brand: deep green + **emerald CTA (#0FA47F)**, black nav bar.
- No underline links; nav is dark bar with pill CTAs ("START CREATING").

MOBILE (390)
- Body ~19px / 32px, measure 340px ~36 CPL. Scene titles scale down (65 → ~33px) but stay centered; media goes full-width;
  the alternating-scene rhythm is preserved (vertical storytelling reads naturally on phones).

DESIGN SIGNATURE: cinematic scroll journey. Alternating full-screen coloured/photographic scenes, big centered light serif,
sans body over imagery, one deep-green brand + emerald accent. Pacing and full-bleed media do the work; measure stays narrow.
FONT SUBSTITUTES: PassengerSerif → **Fraunces** / Playfair (light); CircularWeb → **Manrope** / Figtree (geometric sans).
CAUTION for homage: heavy motion belongs behind `prefers-reduced-motion`; keep scenes CSS-only (sticky + scroll-snap), no JS libs.

---

## 06 — Penguin · "Lit in Colour"
URL: https://litincolour.penguin.co.uk/
Genre: Publisher mission/campaign microsite (editorial with personality).

DESKTOP (1366)
- **Colour-blocked** full-viewport sections — hero is deep **mustard/ochre (~#9C7A12)**; sections change block colour
  (green/orange/purple appear via illustration & later blocks). Bold, warm, high-saturation.
- H1: **Penguin Inclusive Sans Display** (bold geometric display), 61px, weight 400, **centered**, black.
- Subtitle + meta centered: subtitle sans, then **"10 minute read"** (bold) + **"2021"** — reading-time & year.
- H2: Penguin Inclusive Sans, 35px, **white** over colour blocks.
- Body: **Avenir** (geometric humanist sans), 18px / 30.6px (**1.7**), weight 300 (light), #333.
- **Hand-drawn colourful illustrations** (stacks of books, figures) flank the hero — playful, human.
- Measure: **540px, ~60 CPL** (tight & ideal). 16 full-bleed images / 27. Doc ~30,500px. Black top nav.

MOBILE (390)
- Body 18 → 16px / 27px. H1 61 → 28px. Measure 306px, ~38 CPL. Illustrations stack; colour blocks full-width; centered.

DESIGN SIGNATURE: bold, warm, mission-driven. Saturated colour-blocked scenes + bold display sans + light Avenir body in a
narrow centered measure + hand-drawn illustration. Personality and colour carry the emotion; body stays quiet and legible.
FONT SUBSTITUTES: Display → **Poppins** / "Fredoka" (friendly geometric) or Space Grotesk; body → **Nunito Sans** / Mulish.
PALETTE for homage: mustard #9C7A12, aubergine/purple, book-green, warm orange, cream #F7F0EC, near-black ink.

---

## 07 — UNSW Newsroom · "Meet the family on a mission to restore the desert ecosystem"
URL: https://news.unsw.edu.au/en/meet-the-family-on-a-mission-to-restore-the-desert-ecosystem
Genre: University immersive photo-journalism feature (longest of the set).

DESKTOP (1366)
- **Full-bleed cinematic hero photo** (aerial desert, golden hour) with a big **centered white** headline overlay.
- H1: **Clancy** (distinctive humanist sans, Klim), 63px, weight 400, white; H2 (in body): Clancy 48px / 700, black.
- Pull-quotes: **Clancy light (weight 300)**, 22px, #333 — elegant large quotes break the column.
- Reading body: **Roboto**, desktop ~20px / 34px (1.7), #333 on white, in a **narrow 540px column (~54 CPL)**.
- Figcaptions: Roboto, #333. **Full-bleed photo interludes** (7 bleed / 32 imgs) between text blocks.
- Brand: UNSW **yellow** angular "flag" device (#FFDB00) + maroon crest; clean white nav w/ black search square.
- Doc **~42,500px, 137 paragraphs** — sustained immersive read.

MOBILE (390)
- Hero H1 63 → ~30px, still centered white over photo. Article body Roboto **17px / 28.9px**, #333, measure 340px, ~40 CPL.
- Full-bleed photos go edge-to-edge; text column full-width with gutters.

DESIGN SIGNATURE: documentary long-read. Full-bleed photography carries emotion; narrow Roboto column carries the reading;
Clancy headlines + light pull-quotes give editorial voice; sharp yellow brand device. Photo → text → photo cadence.
FONT SUBSTITUTES: Clancy → **Archivo** / "Anton"(display) / Hanken Grotesk (bold humanist sans); body → **Roboto** (free).

---

## 08 — Honda Engine Room · "The Café Racer Revolution"
URL: https://www.honda.co.uk/engineroom/bikes/the-cafe-racer-revolution/
Genre: Brand magazine / heritage photo-essay (dark cinematic).

DESKTOP (1366)
- **Dark, cinematic**: full-bleed vintage/moto photography wall-to-wall; text is **white over dark/photo**.
- H1: **Proxima Nova Extra Condensed**, **84.8px** (enormous), weight 400, white — mixed-case display over the hero photo.
- Pull-quotes: Proxima Nova Extra Condensed, 28.8px, **Honda red #DC182D**, **UPPERCASE** — punchy magazine callouts.
- Body: neutral sans (Tahoma/Proxima stack), 16px / 27.2px (1.7), white; narrow **540px column (~68 CPL)**.
- **107 images** / 14 full-bleed — a dense photo essay; stylized product lockup graphics ("CB1000R / BLACK EDITION").
- Black top nav ("HONDA — ENGINE ROOM"), red accents, "Subscribe here". Doc ~17,900px.

MOBILE (390)
- Body 16 → 14px / 23.8px white. H1 85 → 35px. Measure 325px, ~46 CPL. Photos full-bleed; nav → hamburger.

DESIGN SIGNATURE: premium brand editorial with attitude. Black canvas, wall-to-wall cinematic photography, GIANT condensed
display type, brand-red uppercase pull-quotes, tight white sans column. Photography + scale = emotion; type is loud but sparse.
FONT SUBSTITUTES: display → **Oswald** / "Archivo Narrow" / Bebas Neue (extra-condensed); body → Inter / system sans. Accent: Honda red #DC182D on near-black #0B0B0B.

---

## CROSS-CUTTING PATTERNS (all 8)
- **Measure**: desktop columns 540–900px; mobile 306–348px. CPL best at ~40 mobile / 54–66 desktop (Tubik's 90 is the outlier,
  rescued only by 1.75 leading). Narrow measure is the single most consistent "good longform" trait.
- **Leading**: body line-height 1.5–1.85; the more authoritative/serif the body, the higher the leading (NN/g 1.85).
- **Mobile type**: two strategies — (a) shrink body (Tubik 20→16, Penguin 18→16, Honda 16→14) or (b) hold size, narrow measure
  (NN/g holds 20px, LearningAdv holds 18px). Both keep CPL ~36–46 on phones.
- **Type pairing**: serif-display+sans-body (Tubik, LearnAdv, Shorthand), sans-display+serif-body (NN/g), all-sans (Penguin, UNSW, Honda), all-serif warm (Elle).
- **Hierarchy device**: letter-spaced small-caps kickers/meta (Tubik, LearnAdv, NN/g); reading-time badges (Penguin, LearnAdv).
- **Imagery**: contained (Tubik, LearnAdv[none], Elle rounded, NN/g figures) vs full-bleed immersive (Shorthand, UNSW, Honda, Penguin blocks).
- **Colour emotion**: warmth via a single temperature (Elle brown/cream), boldness via colour-blocks (Penguin), drama via dark+photo (Honda, UNSW hero), calm via mono+one accent (Tubik violet, NN/g blue/orange).
- **Accessibility watch-items for homages**: contrast of text-over-photo (needs scrim/overlay), `prefers-reduced-motion` for scroll scenes, real focus states, semantic headings, 16px+ mobile inputs.

---

# ROUND 2 — top-engagement + visual-narrative exemplars (imagery/diagram as pacing)

New metric added: **visual cadence** = significant visuals (img/svg/canvas/figure >120px) vs paragraph count,
and how many "screens" of scroll pass between visuals. This is the "images as narrative pacing" dimension.

## 10 — The Pudding · "Women's Pockets are Inferior"
URL: https://pudding.cool/2018/08/pockets/
Genre: Data-driven visual essay (scrollytelling data journalism — the gold standard for viz-as-narrative).

DESKTOP (1366)
- Body: **Publico Text** (serif), 17px / 28.9px (**1.7**), #282828 on a **pale blue-grey field #E7EEF8** (calm, not white).
- Display: **Canela** (contrast serif) for the title; **Atlas Grotesk** (sans) for UI/labels.
- Hero: subject-grounded — title "POCKETS" drawn as **dashed sewing-pattern outlines** with a real pocket on the "O". The motif IS the subject.
- Measure: 640px, ~75 CPL. Centered byline + month/year.
- **VISUAL CADENCE (the headline finding): 110 significant visuals (100 interactive SVG charts, 9 img, 3 figure) vs only 30 paragraphs** — more visuals than text blocks. The argument is *made in charts*; prose is connective tissue. 12.2 screens tall.
- Red vertical "ThePudding" logo tab + hamburger.

MOBILE (390)
- Body 17 → 16px / 27.2px. Measure 375px full-width, ~47 CPL. Charts reflow to single-column, stay interactive.

DESIGN SIGNATURE: data-viz as the narrative spine. Calm tinted reading field, serif body, subject-thematic hero, and a
visual roughly every screen — often an interactive chart that advances the argument rather than illustrating it.
FONT SUBSTITUTES: Canela → **Fraunces**/Playfair; Publico Text → **Source Serif 4**; Atlas Grotesk → **Inter**.
VISUAL LESSON: at the far end of the spectrum, visuals outnumber paragraphs — charts carry the claim, text carries the transitions.

## 11 — Wait But Why · "The Fermi Paradox"
URL: https://waitbutwhy.com/2014/05/fermi-paradox.html
Genre: Long-form explainer essay (the canonical "hand-drawn diagram as argument" site).

DESKTOP (1366)
- Body: **Noto Sans** (plain sans), 16px / 24px (**1.5**), #333 on #fff. Deliberately casual/blog-like.
- Titles: Noto Sans bold, H1 40px (WBW blue #0A2D5C→link blue), H2 37px/700.
- Measure: 780px, **~98 CPL** (wide & informal — WBW trades tight measure for an approachable, un-precious feel).
- **VISUAL CADENCE: 10 hand-drawn diagrams; where they appear, a visual every ~0.75 screen (median gap 671px)**, across a huge 32-screen / 69-paragraph essay. Diagrams cluster at the hard-to-imagine moments (cosmic scales, probabilities).
- Aesthetic: intentionally **hand-drawn / MS-Paint** — the logo, the stick-figure diagrams, even the social icons are sketches. White bg, blue + orange (email block) accents. Right sidebar (subscribe / support).

MOBILE (390)
- Body holds 16px / 24px. Measure 325px, ~41 CPL. H1 32px. Diagrams scale to column width; sidebar drops below.

DESIGN SIGNATURE: charm over polish. Plain type + wide comfy measure, but crude, funny, hand-drawn diagrams that make
abstract/cosmic ideas concrete and re-anchor the reader's mental picture. The diagrams *are* the explanation, not decoration.
FONT SUBSTITUTES: body → any plain sans (Inter/"Noto Sans"); the diagrams matter more than the type — reproduce the *hand-drawn* quality (a marker/handwritten SVG style), not a specific font.
VISUAL LESSON: a homemade diagram at each "you can't picture this" moment does the imagination-anchoring job better than any photo. Crudeness signals "thinking out loud," which lowers the reader's guard.

## 12 — Our World in Data · "The short history of global living conditions…"
URL: https://ourworldindata.org/a-history-of-global-living-conditions
Genre: Data-explainer / research commons (charts as evidence; scholarly but accessible).

DESKTOP (1366)
- Body: **Lato** (humanist sans), 18px / 27.9px (**1.55**), coloured **navy #1D3D63** (rgb 29,61,99) — softer than black, on white.
- H1: **Playfair Display** serif, 40px / 48px, weight 600, navy, **centered** on a white card over a **gold #F5C33B** banner.
- H2: Lato 24px muted blue-grey (#577291). Deck: Lato, muted navy, centered.
- Measure: 628px, ~70 CPL. Brand: **navy header + gold accent + red Donate**; nav (Browse by topic / Data / Latest / Resources).
- Byline block is **citation-forward**: "By …", "Cite this article", "Reuse our work freely", "Browse past versions" — signals verifiable, reusable knowledge.
- **VISUAL CADENCE: 22 embedded interactive charts across 82 paragraphs / ~20 screens ≈ a chart roughly every screen.** Each "grapher" chart is explorable/downloadable — the chart is the evidence, prose interprets it.

MOBILE (390)
- Body 18 → 14px / 21px. Measure 295px, ~42 CPL. H1 40 → 20px. Charts reflow to column and stay interactive.

DESIGN SIGNATURE: trustworthy data commons. Playfair serif headline + Lato body, navy ink, gold brand, heavy citation/reuse
affordances, and a steady one-chart-per-screen cadence. The visuals are primary evidence, not illustration.
FONT SUBSTITUTES: **exact-ish free** — Playfair Display + Lato (both Google). Navy #1D3D63 + gold #F5C33B.
VISUAL LESSON: when the claim is quantitative, an *interactive* chart at a steady cadence lets the reader verify as they read — trust is built by making the evidence explorable, and the regular rhythm keeps a data-dense read from fatiguing.

## 13 — Stripe · "Online migrations at scale" (Engineering blog)
URL: https://stripe.com/blog/online-migrations
Genre: Technical engineering essay — the exemplar for **diagrams in technical/explanatory content** (bridges to audit reports & AI output).

DESKTOP (1366)
- Body: **Söhne** (grotesque sans), 18px / 28px (**1.56**), weight **300** (light), coloured **slate #425466** (not black), on white.
- H1: Söhne 32px / 700, navy **#0A2540**. H2: Söhne 34px / 500, navy. Code: **Source Code Pro**.
- Measure: 810px, ~90 CPL (wide, but light weight + slate colour keep it calm). Brand accent: **blurple #635BFF** (links, breadcrumb).
- Signature chrome: **dashed margin grid lines** (Stripe's dotted rules), left rail with author avatar + team.
- **VISUAL CADENCE: 11 custom architecture diagrams across 42 paragraphs / ~15 screens ≈ a diagram every ~1.3 screens.** Each is a clean, minimal figure explaining one migration stage (dual-write, backfill, verify, cut-over). Diagrams do the explaining; prose narrates.

MOBILE (390)
- Body 18 → 15px / 24px. Measure 343px, ~46 CPL. H1 32px. Diagrams reflow to column width.

DESIGN SIGNATURE: calm technical clarity. Light slate sans on white, navy headings, blurple accent, dashed rules, generous
whitespace, and purposeful minimal diagrams at a steady cadence. Each diagram advances the technical story — never decoration.
FONT SUBSTITUTES: Söhne → **Inter** (or "Hanken Grotesk"); code → **Source Code Pro** / JetBrains Mono. Slate #425466 / navy #0A2540 / blurple #635BFF.
VISUAL LESSON (the bridge the user named): the same diagram-cadence that makes Stripe's engineering essay readable is exactly
what makes an **audit report or AI-generated explainer** readable — a clean figure per concept turns a wall of technical prose
into a walk through a system.

---

# VISUAL CADENCE — cross-site synthesis (the "images as narrative pacing" law)

Ranked by how much the visuals carry the argument (measured, not guessed):

| Rank | Site | Visual : paragraph | Cadence | What the visual DOES |
|---|---|---|---|---|
| Viz-led | The Pudding | 110 visuals : 30 ¶ (**>1:1**) | ~every screen | Charts *are* the argument; prose = transitions |
| Viz-led | Our World in Data | 22 charts : 82 ¶ | ~1 / screen | Interactive charts = verifiable evidence |
| Diagram-led | Wait But Why | 10 drawings : 69 ¶ | ~every 0.75 screen where present | Hand-drawn diagrams anchor the imagination |
| Diagram-led | Stripe | 11 diagrams : 42 ¶ | ~1 / 1.3 screens | Minimal diagrams explain each system stage |
| Photo-led | UNSW / Honda / Shorthand | 7–14 bleed images | full-bleed scene breaks | Photography sets emotion & paces scenes |
| Contained | Tubik / NN/g / Elle / Penguin | contained figures | ~1 / 2–3 screens | Figures rest the eye, keep scroll rhythm |
| Type-only | Notes on Remix 3 | 0 images | typographic rests only | Pull-quotes / rules / small-caps DO the pacing |

THE LAW (for the design system + AI/audit content): **a longform read needs a visual "beat" at least every 1–3 screens.**
Its job is one of: ORIENT (hero/establishing), EXPLAIN (diagram/chart carrying the claim), REST (break text density),
GROUND (photo anchoring the abstract), or DELIGHT (illustration/tone). When you have no photos (AI output, audits, essays),
manufacture the beat with **generated SVG diagrams, pull-quotes, callout boxes, data tables, and section dividers** — the eye
still needs the rhythm. A visual that merely repeats the text is worse than none; each beat must ADVANCE or ANCHOR the meaning.