Design reference 08 · Clarity & editorial
Documentary Story
Build understanding through a deliberate sequence of evidence, place, and explanation.
Download design ZIP · Open interactive specimen
Design specification
Philosophy and fit. Build understanding through a deliberate sequence of evidence, place, and explanation. Suitable for investigative features, historical accounts, project retrospectives, and visual explainers.
Visual grammar. Use a linear chapter structure with substantial text, full-width documentary images, maps or diagrams where useful, and short transitional passages. A small chapter index provides orientation. A sober sans heading and readable serif body sit on alternating ink and paper sections, with an ochre accent for annotations. Sticky imagery may accompany a passage, but all content remains meaningful in normal document order.
Specimen and flow. *The River Works* explains a fictional town's abandoned water system. Readers progress through five chapters, inspect a labelled mechanism diagram, and open evidence captions. Supporting states provide a chapter overview and a plain continuous-reading version.
Adaptation and identity. Mobile replaces sticky side-by-side scenes with image-and-text sequences. Reduced motion removes animated transitions. Preserve the explanatory progression and substantial writing; avoid scroll hijacking, text revealed too slowly to read, and spectacle unsupported by content. Effort: medium.
Files for a coding model
Reference images
- Desktop — 1440 × 1000 viewport
- Phone — 390 × 844 viewport
- Supporting state — 1440 × 1000 viewport
- Full page — 1440 × 1000 viewport
Supporting routes
Reuse
Use and adapt the original code and specifications for personal or commercial work under MIT. Keep applicable font and photo notices. The ZIP includes the complete runnable reference and its local assets.