Notes on Method — Herbarium

A. The Concept

Herbarium treats the agency as an obsessively curious naturalist studying the digital world. Services become classified specimens; projects become findings from the field; the contact page becomes correspondence, sealed in wax. The wit lives in the captions — the facts stay exactly as the agency wrote them.

Everything sits in one continuous paper world: grain, deckled edges, washi tape, brass pins, ruled specimen labels, and marginalia in a hand that can't stop annotating. Kinfolk-meets-Darwin, warm and a little eccentric.

n.b. — the Latin classifications (Servitium: Automatio & co.) are playful taxonomy, not actual Latin scholarship.

B. Design System

Pigments

Cream Paper #F7F2E7 the journal itself
Moss Green #31473A headings; the forest
Terracotta #C4622D wax, ribbon, annotations
Faded Sepia Ink #4A3F32 every written word

Type Specimens

Obsessively Curious.

Fraunces Variable — optical size pushed to 144, the WONK axis switched on (note the leaning “u” forms), SOFT axis used for gentler labels. Loaded via @fontsource-variable/fraunces, self-hosted, no CDN.

see also: automation, p.4 — annotations live in Newsreader italic,

Newsreader Variable, an editorial text face with a beautiful italic. Body copy runs at optical size 16; marginalia drop to 11 for that scribbled-in-the-margin colour.

C. Tech & Motion

Astro 5, fully static. One small inline script drives every animation — an IntersectionObserver adding classes. No frameworks, no runtime dependencies.
The draw-in system. Every hand-drawn stroke is an SVG path carrying pathLength="1", so stroke-dasharray: 1 normalises any path. In view, the dash offset transitions from 1 to 0 and the line draws itself. Live demonstration:
Paper physics. Sections settle in from a −1° rotation with a paper-soft cubic-bezier, the way a turned page comes to rest. Deckled edges are real geometry: an SVG feTurbulence + feDisplacementMap filter roughens each sheet's edge (two seeds, so no two sheets tear alike). Grain is a tiny inline-SVG noise tile multiplied over the page.
Reduced motion, honoured. Under prefers-reduced-motion every stroke renders already drawn, pages arrive already settled, and hover lifts become shadow changes only.
Lean payload. Two variable fonts, seven WebP engravings (40–233 KB), zero JavaScript beyond the observer script. The bookmark ribbon is one CSS variable driven by scroll.

D. AI Assets

Both engravings were generated with GPT Image 2 via the Higgsfield CLI. Prompts and aspect ratios live in shared/assets/manifest.json; the batch run is logged to gen.log. The botanical sheet was then cropped into six individual specimens with sharp and everything re-encoded to WebP at display size.

The long-eared owl engraving used as the hero specimen. — herbarium-owl-plate · gpt_image_2 · 3:4
Antique 18th century copperplate engraving of a long-eared owl perched on a branch, fine crosshatched linework, sepia-black ink on aged cream paper, scientific natural history illustration style of Buffon, detailed feathers, plain cream background, no text, no letters, no border, no watermark

Wildflower specimen cropped from the botanicals sheet. — herbarium-botanicals · gpt_image_2 · 4:3
Sheet of separate antique botanical copperplate engravings arranged with space between them: a fern frond, a seed pod cross-section, a sprig of wildflowers, an oak leaf with acorns, a mushroom — fine crosshatched sepia-black ink linework on aged cream paper, scientific herbarium plate style, each specimen isolated on plain cream background, no text, no letters, no watermark

shown: the wildflower sprig, one of six crops taken from the single generated sheet (fern, seed pod, wildflowers, oak leaf, mushroom, acorn detail).

E. How to Reproduce

Scaffold Astro 5 (static output) and add @fontsource-variable/fraunces + @fontsource-variable/newsreader. Import fraunces/full.css to get the SOFT and WONK axes.
Generate the two plates with the prompts above; crop specimens out of the sheet with sharp (extract → resize → webp).
Build the paper world first — grain tile, deckle filter, tape, pins, ruled labels — before any layout. Every surface must read as paper on paper.
Give every hand-drawn SVG path pathLength="1" and wire one IntersectionObserver for draw-ins and page settles.
Set the display type in Fraunces with big optical-size contrast; keep every annotation in Newsreader italic. Let the wit live in captions only.
npm run build, audit with Playwright at 1440×900 and 390×844, and iterate until the paper feels real.

F. Credit

Designed & built by Claude (Anthropic) for Nomadic Owls. One of ten directions — see the other nine at nomadic-ten.pages.dev.