Build notes · Zero2Webmaster showcase

How the SAVE THE FROGS! Bulletin was made

This is the build guide for The SAVE THE FROGS! Bulletin — exemplar #8 in the Zero2Webmaster cinematic series, and the deliberate second build of the newspaper-broadsheet family (the first was The Nonprofit ICU Dispatch). It is a print-broadsheet "special edition" for Save The Frogs Day — the world's largest day of amphibian education and conservation action — pegged to the 19th Annual on Wednesday, April 28, 2027, built for SAVE THE FROGS! as one self-contained HTML file.

Second of a family, on purpose

The studio's rule is parameterize after two: no formula becomes a template until two shipped builds prove which parts are parameters and which are personality. This page shares the Dispatch's bones — nameplate between double rules with ligatures off, dateline strip, masthead ears, multicol lead with a drop cap, desk-rubric kickers, folios, tombstone end-marks, a deterministic input-driven set-piece, still-by-default everything — and varies every voice: DM Serif Display (a high-contrast didone) instead of Caslon, Source Serif 4 body, Barlow Condensed wire-desk furniture instead of Montserrat, a pale-straw ground instead of pink-cream, a wider 1400px sheet with a 3-column lead instead of 2, and a global wire service concept spine instead of a hospital chart. The two papers must never read as the same paper — that difference list is the spec for the future broadsheet starter module.

The concept spine: a worldwide wire service

Save The Frogs Day is a worldwide event — 2,000+ educational events across 60+ countries since 2009 — so the paper is a dispatch from the field. The desks: THE FRONT PAGE (the 19th Annual lead), DISPATCHES FROM THE FIELD (a stippled world dot-map plus the real 60-nation wire strip), FIELD NOTES (the why-it-matters editorial), THE ALMANAC (the life-cycle engravings and frog facts), THE BULLETIN BOARD (the real contests and actions, set as classifieds), and FROM THE FOUNDER / MARK YOUR CALENDAR (the close). Wit lives in the furniture — the amphibian forecast ear, the "clip & save" classified — never in fabricated content.

The engravings: drawn in code, in the woodcut idiom

All imagery is inline SVG drawn for this page — no photographs, no stock, no reuse of the Field Journal's naturalist line-work. The idiom here is the 19th-century newspaper cut: cross-hatch and halftone-dot shading, defined ONCE as shared <pattern>s in a hidden <defs> block (hatch, cross-hatch, three dot densities) and referenced by every drawing — no per-SVG id collisions. The pieces: the masthead frog emblem (one silhouette path, hatched belly), the four-figure life-cycle strip (clutch → tadpole → froglet → adult), the almanac's large "species cut" (a single coherent crouched-frog silhouette with shading clipped to it via clipPath, among cattail reeds, framed and plate-labeled), the stippled world map (hand-set continent paths filled with a dot pattern, orange event markers, a light graticule), and spot ornaments (reed-and-lily dingbat, tombstones).

The one living set-piece: the event-notice composer

The right rail carries a "classified composer": pick an event type, name your town and your group, set expected attendees, and the Bulletin typesets a formatted newspaper event notice — headline, one-sentence body, dateline — with a real call to action to register the event. The rules, inherited from the syzygy ethos:

• The notice is a pure function of the inputs, re-rendered only when an input changes. Nothing on the page moves on its own; two idle screenshots are byte-identical (verified with cmp in the harness).
• It typesets only the reader's own words — zero invented facts, zero statistics — and says so in print.
• The static HTML default notice matches exactly what the JS renders for the default inputs (drift-checked programmatically in the harness), so the no-JS page is already correct.
• The masthead countdown ("N days until the 19th Annual") is computed once on load — no ticking interval; its no-JS fallback is the date itself.

Real content only — and what's draft

Everything factual is real, harvested from savethefrogs.com/day and /day-2027: the standfirst ("the world's largest day of amphibian education and conservation action"), the 2009 origin and oldest-annual status, the 2,000+ events / 60+ countries / tens-of-thousands-educated reach, the full 60-nation list on the wire strip, the "only a small proportion of the public is aware…" editorial spine and its "common knowledge" goal, the founder quote ("If everyone steps up…" — Dr. Kerry Kriger), the verbatim mark-your-calendars line for Wednesday, April 28th, 2027, both contests with their real prizes ($200 photo, $100 flyer), and every action link (/day-photo, /day-flyer, /day-organize, /day-register, /day-report, /day-grants).

Brand tokens: the two-tier accent on straw

SAVE THE FROGS! green #72af43 and orange #f5821f anchor the page — but this is a light page, and as text on straw both bright tokens fail WCAG AA (≈2.6:1 and ≈2.35:1). So they serve as fills, rules and decorative accents only, and text uses darkened tiers, verified programmatically on this page's actual grounds:

One harness catch worth recording: the established precedent tier #ab5200 passes on the page ground (4.62:1) but fell to 4.20:1 on the deeper --news-2 tint panels where the composer's register link sits — so this page darkened the orange text tier to #964800. Verify the tier on every ground it actually touches, not just the body ground.

Type: body 20–23px (a touch tighter than the Dispatch's 20–25px — density comes from the wider sheet and the 3-column lead, never from sub-20px type), and every text role computes ≥20px. Tabular figures on the dateline, countdown, stats, prices and folios; ligatures off on all DM Serif display settings.

Verification

• Three Chrome DevTools iteration passes, desktop 1440×900 + emulated mobile 390×844×2, ~9 scroll depths each, critiquing the actual pixels (the species cut was redrawn wholesale in pass 2 — a lumpy first draft became one coherent silhouette with clipped shading; the froglet, masthead emblem, Mediterranean gap and Eurasian coastline were pixel-only finds too).
• Zero console errors over HTTP; one <h1> (the nameplate); zero horizontal overflow on both viewports; all illustrative SVGs carry real role="img" + aria-label, ornaments are aria-hidden.
• Programmatic contrast audit of every link color and button-text-on-fill on its actual ground: all ≥4.5:1 (button and banner cream-on-green-ink 5.4:1; colophon bright-green-on-ink 5.7:1).
• Composer drift-check: the JS render for default inputs equals the static HTML byte-for-byte; the exercised path ("an art & photo exhibit") handles the a/an article.
• Deterministic-stillness check: two idle screenshots 3 seconds apart are byte-identical (cmp). Reduced-motion is trivially satisfied — no ambient motion exists.

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