# The Composite — longform reference implementation (No. 09)

## Overview

No. 09 is not a study of an external site. It is the synthesis: a full longform article that embodies the
[design system](../design-system/index.html) distilled from the other twelve studies. Its job is to prove the
system works by being read, not described. The content is an original essay ("Reading, by design") that argues
the system while practising it.

## What it takes from each source

- **Tubik** — editorial calm as the frame: near-white paper, high-contrast serif display (Fraunces), one rationed
  violet accent, generous whitespace.
- **Postcards by Elle** — the drop-cap opening and an italic serif deck for warmth.
- **NN/g / Our World in Data** — the summary/lead discipline and a data table of targets; authority through air (1.75 leading).
- **The Pudding / Stripe / Wait But Why** — the visual-cadence spine: original inline SVG diagrams that carry meaning
  (page anatomy, the reading rhythm), a chart-like structure, a colour-field "scene" as a photo-free rest.
- **Shorthand / UNSW / Honda** — a single full-bleed "scene" (a CSS gradient field, no photo) to break the column and pace the read.

## Design system (tokens used)

- Measure: `--measure: 38rem` (~64–68 CPL at the body size). Body `clamp(1.06rem,1rem+.35vw,1.25rem)` / **1.75** leading.
- Type: Fraunces (display, 400–600, incl. italic) + Inter (body, 300–600) + IBM Plex Mono (meta/data). Accent `#5B4EE9`.
- Ink `#1A1B1E` (not pure black), paper `#FCFCFB`, panel `#F4F2EE`.

## Visual cadence (the point)

A beat roughly every 2 screens, each with a job: the **anatomy diagram** (explain), a **pull-quote** (rest),
the **reading-rhythm diagram** (explain), a **colour-field scene** (rest/ground), a **callout** (signpost),
and a **data table** (reference). None repeats the prose; each advances or anchors it.

## Signature techniques

- Reading-progress bar (chrome only — pure enhancement, never gates content; degrades to a static bar).
- Drop cap + italic serif deck opening.
- Figures break out wider than the reading column to register as beats.
- One rationed violet accent across links, marks, rules, and the scene gradient.

## What to steal

1. Build the diagram the sentence describes — a structure in prose is a structure you can draw.
2. Let figures break the measure so they read as beats, not inline asides.
3. Keep the reading column in `rem`/`ch` and let everything else be a ratio away.
4. Make progress/motion pure chrome — it must never be the reason content is visible.

## Source

Original synthesis. Built on [the design system](../design-system/index.html); distilled from the twelve studies in
[the library](../index.html).