Scrollytelling / Interactive Infographic

/* Synthesized from Trova family: Scrollytelling / Interactive Infographic (scrollytelling-interactive) */
/* Evidence base: 3 curated reference(s) · Primary contrast 18.7:1 */
:root {
  /* Surface & Polarity (Daylight-paper dominant) */
  --surface-ground: #ffffff;
  --surface-elevated: #22211e;
  --text-primary: #121212;
  --accent-primary: #f0eee6;
  --border-hairline: color-mix(in srgb, #121212 16%, transparent);

  /* Typography (Loadable open-source stack mapped from observed specimens) */
  --font-display: "Source Serif 4", system-ui, sans-serif;
  --font-body: "Libre Franklin", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Structural Geometry */
  --radius-surface: 0px;
  --measure-body: 62ch;
}

# Scrollytelling / Interactive Infographic — style sheet

> Pinned data visualizations responding directly to scroll progress, stepped annotations, and fluid map transitions.

Derived from 3 curated reference(s) in the `scrollytelling-interactive` family. Counts are how many references use a value, so a value used once is a lead, not a rule. Paste this into DESIGN.md as a starting system, then verify against the images.

## Type

- Charter — 2/3
- Franklin Gothic Heavy — 1/3
- Georgia — 1/3
- Inter — 1/3
- JetBrains Mono — 1/3

## Color

- `#ffffff` light neutral — 3/3
- `#121212` dark neutral — 2/3
- `#f0eee6` light neutral — 2/3
- `#22211e` dark neutral — 1/3
- `#326891` muted — 1/3
- `#d0021b` chromatic — 1/3
- `#0066cc` chromatic — 1/3
- `#2b6cb0` chromatic — 1/3
- `#d94e34` chromatic — 1/3
- `#ff6600` chromatic — 1/3

Readable pairs from these swatches, most-used first (WCAG AA body text needs 4.5:1):
- `#121212` / `#ffffff` — 18.7:1
- `#121212` / `#f0eee6` — 16.1:1
- `#22211e` / `#ffffff` — 16.1:1
- `#326891` / `#ffffff` — 6:1

## Moves

### grid/layout

- A `position: sticky; top: 10vh` visualization stage occupies 100% of the viewport while 420px translucent prose cards scroll past at 60vh intervals, triggering discrete chart state transitions. — 155-nyt-upshot-sticky-canvas-narrative-step-scrollytelling
- CSS Grid academic layout (`[screen-start] 1fr [page-start] 64ch [page-end] 240px [screen-end]`) lets equations sit in the center measure while interactive figures break out to full page width. — 156-distill-pub-interactive-machine-learning-essay-margin-scrubbers

### component pattern

- Direct data labeling: instead of a detached color legend box, annotation callouts with 1px leader arrows point directly to the outlier data points discussed in the active paragraph. — 155-nyt-upshot-sticky-canvas-narrative-step-scrollytelling
- Inline hyperparameter scrubbers let the reader drag learning-rate or epoch sliders directly inside the mathematical figure, updating neural activation heatmaps in real time. — 156-distill-pub-interactive-machine-learning-essay-margin-scrubbers

### color

- Prose mentions of mechanical parts ('escapement wheel', 'pallet fork') are color-coded with inline pill backgrounds that match the exact RGB shader color of that gear in the 3D WebGL canvas below. — 157-bartosz-ciechanowski-explorable-mechanical-watch-gear-physics

### motion/interaction

- Every WebGL figure starts paused or at calm low speed with a single explicit slider beneath it, never hijacking native page scroll. — 157-bartosz-ciechanowski-explorable-mechanical-watch-gear-physics

## References

- 155-nyt-upshot-sticky-canvas-narrative-step-scrollytelling — NYT Upshot — Sticky Canvas & Narrative Step Scrollytelling (exemplar)
- 156-distill-pub-interactive-machine-learning-essay-margin-scrubbers — Distill.pub — Interactive Machine Learning Essay & Margin Scrubbers
- 157-bartosz-ciechanowski-explorable-mechanical-watch-gear-physics — Bartosz Ciechanowski — Explorable Mechanical Watch & Gear Physics