Marginalia

The Colophon

A note in the margin about how this particular journal was set, inked, and bound.

← Back to the journal

Room I

Concept & Inspiration

FIELD NOTES imagines Nomadic Owls' work as it might have been kept by an obsessively curious 19th-century naturalist: copper-plate engravings, taped specimen cards, red string between pinned findings, and handwriting spilling into the margins wherever the author had a thought worth keeping. The three real Higgsfield engravings anchor the world — everything else (grain, tape, stamps, string, sketches) is built to feel printed on the same stock.

The signature is Plate I: the great horned owl engraving annotated like a museum specimen chart, its eyes, folded wing and talons mapped directly to the agency's three pillars — Technical SEO, Full-Stack Development and Digital Marketing — so the metaphor does real content work instead of decorating around it.

Room II

Palette & Type

  • Cream

    #f5efe0

    the page itself — warm, uneven, alive under the grain filter

  • Ink

    #2c2417

    body copy, rules, the anatomy of every letterform

  • Moss

    #5a6b46

    discipline icons, field-verified marks, quiet accents

  • Rust

    #b45f3c

    stamps, leader lines, the CTA — the one warm accent that pulls focus

  • Faded Slate

    #7d93a8

    specimen URLs, the coolest note in an otherwise warm world

Fraunces Variable — display

Field Notes

Soft, wonky display serif for headings — SOFT and WONK axes tuned up for the hero, down for small heads.

EB Garamond — body

The naturalist's obsession is the whole method: observe closely, note honestly, publish only what was actually seen.

Body copy, specimen notes, annotation labels — an old-style serif built for long reading measure.

Caveat — marginalia

remarkably fast loading — must investigate*

Every handwritten aside, stamp ring and figure caption — the naturalist's own pen, not a UI label.

Room III

Techniques Used

  • Paper grain, everywhere, cheaply

    One SVG <filter id="paper-grain"> (feTurbulence → feColorMatrix) lives once in Base.astro and is applied to a single fixed, full-viewport div at 5% opacity with mix-blend-mode: multiply. No per-section noise images, no canvas — the whole journal shares one grain source.

  • Deckled edges from one SVG mask tile

    A 40×16 jagged path is base64-free (inline data-URI) and used as a CSS mask-image on a .deckle::after strip, repeat-x, tinted with background-color. Every spread boundary gets a torn-paper edge without a single raster asset.

  • Self-drawing ink with one CSS rule

    Every leader line, red string and pin carries pathLength="1", so stroke-dasharray:1 / stroke-dashoffset:1→0 normalises any path length to the same animation regardless of geometry. One shared IntersectionObserver adds .in-view to the nearest ancestor; a single CSS rule (.in-view .draw-line) fires the reveal for Plate I, the specimen thread, and any future line — no getTotalLength(), no per-element JS.

  • A responsive anatomy diagram, not a fixed one

    Plate I anchors three annotations to percentage-based coordinates inside a fixed-aspect-ratio (1000:1339) frame, matching the engraving's own pixel grid exactly — so the SVG viewBox lines up 1:1 with eyes, wing and talons regardless of render size. Below 900px the diagram doesn't shrink into illegibility: it collapses into a stacked annotation list and the leader lines simply hide. Mobile gets a genuinely different, genuinely good layout, not a squeezed one.

  • Red string, measured at runtime

    The corkboard thread connecting the six specimen cards isn't a decorative squiggle — a small script reads each card's real getBoundingClientRect(), builds a quadratic-bezier path through their pin points with sag proportional to the gap between them, and redraws on resize. It looks hand-pinned because it is, geometrically, pinned to the actual cards.

  • Ink stamps that look pressed, not pasted

    The circular stamps (cover, correspondence) set text on a <textPath> around a hand-perturbed circle, then run the whole mark through feTurbulence + feDisplacementMap (#stamp-rough) before mix-blend-mode: multiply drops it into the paper. The roughing filter is what keeps two stamp instances from looking identical.

  • Fraunces tuned per size, not just imported

    The variable font's SOFT and WONK axes are dialled differently for the hero (opsz 90, more wonk) versus small heads (opsz 24–40, calmer) so the same family reads as hand-set display type at scale and a tidy serif at figure-entry size.

  • Reduced motion is a first-class state

    matchMedia('(prefers-reduced-motion: reduce)') is checked once before any observer is created — reduced-motion visitors never pay for an IntersectionObserver that would only ever add one class. A matching CSS media query is the backstop for anyone whose JS is slow to run.

Room IV

Higgsfield Prompts

Three copper-plate engravings, generated once and used everywhere — the cover frontispiece, Plate I, the specimen-board map and the moth marginalia are all the same three files reused, never regenerated per placement.

  • fieldnotes-owl-engraving.webp

    (Generated in an earlier asset pass, ahead of the current generate-images.sh script — its exact prompt text was not preserved in the asset pipeline log.) Recorded as: a copper-plate engraving of a great horned owl perched on a branch, in the same "antique 19th-century, fine cross-hatching, ink on aged cream paper, no text" family as the two prompts below.

  • fieldnotes-moth-engraving.webp

    Antique 19th-century copper-plate engraving of a luna moth specimen with spread wings, highly detailed cross-hatching and stipple shading, scientific entomological illustration plate, black-brown ink on aged cream paper, no text, no border

  • fieldnotes-map-engraving.webp

    Antique 19th-century engraved world map in the style of an explorer's atlas, faint compass rose, dotted expedition routes across oceans, fine copper-plate line work, sepia ink on aged cream paper, weathered, no text labels

Room V

Three Passes of Polish

  • Pass One

    First full build reviewed at five scroll depths plus mobile, screenshots read pixel-by-pixel. Found two real rendering bugs, not nitpicks: the moth engraving was stretched to roughly 5:1 (the shared img reset was missing height: auto, and the placeholder height attribute — copied from the brief's "1000×1607" — didn't match the file's actual 1000×1339), and the correspondence page's ink stamp rendered nearly full-viewport wide, because Astro's page-scoped <style> in guide.astro can't reach a child component's root element, so the sizing rule silently never matched. Also widened and left-aligned the Plate I annotation paragraphs, which were wrapping into an illegible rag at 200px.

  • Pass Two

    Complexified once the bones were safe: hover-lift and a small icon tilt on every figure card (the brief asked for lift on hover everywhere, not just the specimens), a second, smaller coffee ring offset from the first — one mug-set-down reads staged, two reads accidental — and a folded dog-ear corner on the correspondence letter.

  • Pass Three

    Nitpick sweep with real numbers, not just a glance: hand-computed WCAG contrast for every translucent ink tone against cream and found two failures — the 50%-alpha ink token was ~3:1 (used for specimen numbers and the guide's hex labels) and the faded-slate link color was ~2.8:1. Both raised to ~4.5–5:1. Also added a safety-net timeout to the scroll-reveal system: content deep in the page was staying invisible for anyone (or any tool) that jumped straight to the bottom without incremental scrolling.