Document
Multi-page paginated deliverables — specs, reports, RFPs, proposals.
Paginated deliverables on browser-native @page. Two moods — spec (reference-card) and report (magazine) — share one schema.
Two artefacts
| Artefact | Cover | Running head | Drop cap |
|---|---|---|---|
spec | reference-card | doc-title-section | no |
report | magazine | section-centered | yes |
Same schema, two moods. spec is the reference-card — minimal, structured, reader-as-engineer. report is the magazine — narrative, numerical hero, reader-as-executive.
Paper sizes
A4 portrait by default; Letter portrait for US-audience deliverables.
| Key | ISO | Dimensions |
|---|---|---|
a4-portrait | A4 | 210mm × 297mm |
letter-portrait | Letter | 8.5in × 11in |
Covers and running heads
reference-cardcover — Spec cover: title + subtitle + metadata grid + footer note.magazinecover — Report cover: brand-band top, numerical hero, framing, meta strip.doc-title-sectionrunning head — Spec: doc-title (left) · section (italic, middle implicit) · page-num (right).section-centeredrunning head — Report: section centered in head; page number demoted to footer.
The running-head mode picks the footer style: doc-title-section pairs a thin-rule footer; section-centered pairs a three-column footer (audience left, page centered, authorship right).
TOC
The TOC populates at load time from the document's <h2> / <h3> headings. Use data-toc-depth on the container to cap depth.
<ol data-toc data-toc-depth="3"></ol>
<ol class="toc-static-fallback">
<!-- Hidden by the script on success; visible if JS is off. -->
</ol>
Callouts
4 variants. Adding a fifth takes a spec revision — callout sprawl (info, danger, example, success…) is the largest source of spec-template visual noise.
| Variant | Glyph | Purpose |
|---|---|---|
note | ℹ | Neutral informational aside. Not a warning, not a tip. |
warning | ⚠ | Risk, breaking change, or behavior that will surprise the reader if missed. |
tip | ✓ | Good-practice nudge. Better way to do the thing being discussed. |
rationale | ◇ | Explains a non-obvious design decision. The 'why' for future readers. |
Code blocks
Syntax highlighting comes from brand tokens — no Dracula, Monokai, or other external theme. Inline code uses the code role (Geist Mono); block code uses <figure> / <figcaption> with filename on the left and language tag on the right.
| Category | Brand token |
|---|---|
keyword | brand-700 |
string | emerald-600 |
number | amber-600 |
function | cyan-700 |
comment | space-500 |
punctuation | space-700 |
Tables
Tufte-minimal: one rule under the header (0.4mm), one at the bottom (0.4mm), zero per-row ruling. Numeric columns right-aligned with tabular-nums from the code role. Zebra striping is screen-only — print stays quiet.
Footnotes
Marker style: superscript-numeric. Same source markup renders both modes — bottom-of-page on print, collapsible popover on screen — so readers don't lose their place.
Browse the full set
See the document showroom for a live cover + running-head picker, a callout-variant gallery, and a print-preview iframe across A4 and Letter.
Download
document.zip
Spec + report artefacts, shared partials, TOC autogen, examples, and the consumer guide.
Related
- Channels overview — when to pick this channel over printed-media or slide-deck.
- Typography → Role Mapping —
hero=docs,chrome=ui,code=codedecisions used by every page. - Colors — semantic tokens consumed by callout glyphs and the syntax palette.
- Printed Media — sibling channel for single-page print deliverables.