## 14 · Narrative Workflow

Numbered stages tell the story of how the user uses the product over time. Each section is a phase (1.0 → 2.0 → 3.0 → 4.0). The page is a process timeline.

- **Heading:** large numbered stage labels (`1.0 INTAKE`, `2.0 PLAN`).
- **Body:** each stage has a short explanation and a small product visual.
- **Divider:** thick numbered rule between stages.
- **Button:** stage-internal links; one global "Start at stage 1 →" at the foot.
- **Image:** small product capture per stage, often annotated.
- **Reveal:** sweep horizontal as stages enter the viewport.

Reach for it for products with explicit workflows — project management, design-to-dev pipelines, writing tools.

Avoid for tools that work in *one* moment. Narrative Workflow needs a real sequence.

Reference: Linear's how-it-works pages, some Figma marketing pages.

**Sample opening lines** (imitate the *specificity* — Narrative Workflow openings are stage labels: numbered, declarative, in process language):
> *"01 · sourdough overnight · 02 · score at dawn · 03 · pull at seven."* — three numbered stages, no marketing
> *"1.0 · parse · 2.0 · filter · 3.0 · route."* — Streampipe (test 02) — versioned numbers, three concrete verbs
> *"I. We design products that last twelve years. II. A material is sustainable when someone, somewhere, can repair it."* — Meridian — Roman numerals + declarative

---
