html-reportslisted

# html-reports A library of reusable HTML report archetypes for generating standalone, single-file documents. Every archetype is: - **Self-contained**: inline `<style>` and `<script>`, no CDN dependencies, opens by double-clicking. - **Light-mode**: white background, dark text, subtle grays for borders. Print-friendly. - **System-typography**: `-apple-system, "Segoe UI", Roboto` for body. No web-font requests. - **Responsive**: mobile fallback under 768px, print stylesheet hides chrome. Pick the archetype that matches the **shape** of the document, not just the topic. ## The archetypes | Archetype | Shape | Use when | Path | |---|---|---|---| | **Folio** | Book — fixed left TOC + scrollable content | The reader needs to jump between many distinct sections (per-person scorecards, framework references, audit reports, post-incidents) | [`folio/`](./folio/) | | **Stage** | Slides — paginated, one idea per page | The report tells a linear story with a small number of big ideas (exec readouts, kickoff decks, narrative summaries) | [`stage/`](./stage/) | | **Atlas** | Map — top-down dense overview with drill-down panels | The reader needs to see *everything at once* and pivot (cluster maps, portfolio dashboards, system health overviews) | [`atlas/`](./atlas/) | | **Field** | Editorial long-read — full-bleed hero + serif body + pull quotes | The reader is being persuaded or oriented through narrative (post-mortems, customer case studies, strategy memos, deep-dives) | [`field/`](