Build notes · Zero2Webmaster showcase

How the Nonprofit ICU Dispatch was made

This is the build guide for The Nonprofit ICU Dispatch — exemplar #7 in the Zero2Webmaster cinematic series, and a brand-new style family for the collection: the print newspaper broadsheet. It is the first showcase for Nonprofit ICU, Dr. Kerry Kriger's nonprofit consultancy ("Intensive Care For Your Nonprofit"), built as a single self-contained HTML file with a real path to deploy at nonprofit.icu later.

The direction: a front page, not a landing page

Every page in this series must open with a structure the others don't use. The prior exemplars led with WebGL shaders, drawn SVG, a ledger grid, a photograph, and a dark→light product story. This one leads with a nameplate: a fat Caslon masthead between double maroon rules, a dateline strip, then a multi-column front page — lead story with a drop cap, a boxed data feature, secondary stories separated by hairlines, and a classified section. At thumbnail size it reads "newspaper," nothing like any prior entry.

The inspiration was fable-25's syzygy ("this one looks like a newspaper" — Kerry). Its transferable lessons, applied here: an editorial serif nameplate, tabular figures on anything numeric, ligatures off on display type, and — its core ethos — deterministic, still-by-default motion: every quantity on the page is a pure function of the reader's inputs; the world doesn't move unless you move it; screenshots taken seconds apart are pixel-identical. Real newsprint doesn't animate.

The concept spine: an ICU chart

The section rubrics are a hospital chart — VITALS (the interactive data box), DIAGNOSIS (the feature essay), PRESCRIPTIONS (the nine services, set as an apothecary classified with ℞ marks), CASE NOTES (testimonial and credentials), and THE PROGNOSIS (the optimistic close). That's the brand's own metaphor — "intensive care for your nonprofit" — carried through the page furniture, kept tasteful and never jokey about actual illness.

The one living set-piece: the vital-signs monitor

The VITALS box is a newspaper data feature containing a canvas ECG trace and four sliders — recurring revenue, volunteer engagement, tech health, founder bandwidth. Every reading is a pure function of those inputs:

• The pulse slows as the organization's score improves (a healthy org is a calm org); the beat's amplitude strengthens with revenue and volunteers; the baseline gets noisier as tech health falls — via a seeded PRNG (mulberry32), so even the "noise" is deterministic.
• Nothing animates until the reader moves a slider: the canvas draws one frame from the defaults and redraws only on input or resize. Reduced-motion is trivially satisfied — there is no ambient motion anywhere on the page.
• The output is a qualitative read (Stable / Needs attention / Critical) with an encouraging one-liner — a self-assessment, so there are zero fabricated statistics, and the box says so in print.
• Without JavaScript, a static SVG trace and default readings render; the static numbers in the HTML match exactly what the JS computes for the default sliders.

Real content only — and what's draft

The page's copy is real, most of it verbatim from the 2022-10-29 Nonprofit ICU launch press release: the lead headline and deck, the lead body (including the "nonprofit emergency room / nonprofit graveyard" line, boxed as a callout), the founder quote (with a bracketed [17+] editorial update of the release's "15 years"), all nine PRESCRIPTIONS service descriptions, the Dr. Margot Fass testimonial, the closing pull quote, and the essay's opening line "Your website is the single most important piece of technology your nonprofit has." The slogan, tagline, and mission are verbatim from the brand guide. Blog headlines are verbatim from nonprofit.icu/blog.

Brand tokens, from the Brand Guide

Colors are the four from the Nonprofit ICU Brand Guide (Dec 2023): NICU Blue #2E3660 (ink), NICU Maroon #841B18 (accent), NICU Off-White #F4E9E1 (the newsprint ground), NICU Light Green #B4C6A2 (decorative only on light ground — rules, tint panels, the ECG grid, the tree's canopy; as text it appears only on the navy colophon, 6.4:1). Both brand darks pass AA-small on the newsprint (ink 9.7:1, maroon 8.2:1), so this is the first light page in the series that needs no darkened two-tier accent.

The brand's real fonts (Agenda Bold, Gotham) aren't free webfonts, so the page substitutes: Libre Caslon Display for the nameplate and headlines (Caslon being the quintessential broadsheet serif, unused by any prior exemplar), Libre Caslon Text for body copy with true italics, and Montserrat — the standard free Gotham stand-in, the on-brand nod — for all furniture: kickers, dateline, bylines, readouts. Body copy runs 20–25px and every text role computes ≥20px, per the studio's big-text mandate. The tree logo was redrawn as an inline SVG "woodcut" (solid-stroke trunk and roots, clustered sage discs for the canopy, three falling maroon leaves) rather than pasting the raster logo — it composites into newsprint and stays crisp at any size.

Verification

• Three Chrome DevTools iteration passes, desktop 1440×900 + mobile 390×844, ~9 scroll depths each, critiquing the actual pixels.
• Zero console errors; one <h1> (the nameplate); no horizontal overflow; all imagery is inline SVG with correct aria.
• Programmatic contrast audit of every link and button-text-on-fill: all ≥4.5:1 on their actual grounds.
• Deterministic-stillness check: two screenshots taken seconds apart are byte-comparable — nothing on the page moves on its own.
• Reduced-motion: trivially satisfied (no ambient motion exists); the monitor still responds to explicit input.

Built 2026-07-20 by a Claude Fable 5 session in the static-sites repo · Read the Dispatch · The full showcase ledger · Published by Zero2Webmaster.