---
name: HTML Infographic (HTML)
description: Single-file long-form infographic or data story — scroll-driven, type-led, charts inline. For research summaries, product launches, and editorial explainers.
triggers:
  - html infographic
  - data story
  - scrollytelling
  - editorial explainer
  - long-form web piece
cd:
  mode: infographic
  platform: html-canvas
  scenario: editorial
  preview: html_file
  fidelity: high
  animations: true
  featured: true
  design_system:
    requires: true
    sections: [palette, type, spacing]
  craft:
    requires:
      - typography
      - typography-hierarchy-editorial
      - color
      - anti-ai-slop
      - accessibility-baseline
      - animation-best-practices
      - cinematic-patterns
      - scene-templates
  inputs:
    - brief (the argument being made)
    - source data
    - desired length (short ~3 screens, long ~10+ scroll-stops)
  parameters:
    - layout (single-column | two-column)
  outputs:
    primary: html_file
    capabilities_required:
      - write_file
      - read_file
  default_for:
    - html-infographic
  example_prompt: "Long-form scroll explainer of a quarterly research finding with 4 inline charts"
---

## Editorial first

An infographic is an *argument*, not a dashboard. Pick the one claim the piece exists to make. Every section either advances or qualifies that claim.

## Typography

Editorial typography is the spine. Read `typography-hierarchy-editorial.md` craft. Defaults:

- Display (60–96px) for section openers; body (18–22px) for prose; caption (14–16px) for chart labels and pull-quotes.
- Generous leading (1.5–1.7) on body. Long lines (60–75 char) for reading; short lines (30–45 char) for emphasis.
- Drop caps and pull quotes earn one appearance each per section, not per screen.

## Layout

- Single-column for reading-first pieces; two-column when sidebar context is genuinely separate.
- Charts inline at body width or full-bleed for hero data; never floating side-decoration.
- Whitespace is signal. A breath between sections matters more than a divider line.

## Scrollytelling restraint

Scroll-triggered animation works exactly when it reveals data the static page can't. Each scroll trigger must be defendable: "this animation makes the comparison readable in a way the static chart doesn't." If you can't answer that, make it static.

## Charts

Use D3 or vanilla SVG with hand-tuned axes. No library defaults — every chart is read at least once with a designer's eye. See `content-guidelines.md` for tone in chart captions.

## Accessibility

Long-form pieces are read by screen readers more than designers expect. Every chart needs a text alternative; every animation respects `prefers-reduced-motion`; semantic HTML (`article`, `section`, `figure` + `figcaption`) is non-negotiable.

## Quality bar

- Print preview is sane (the piece reads as a printed essay if motion is stripped).
- `craft_lint` clean.
- Self-check against the editorial critique rubric (`critique-guide.md`).
