Field notes · how it was grown

A face that is grown, not drawn.

GERMINAL is a fictional living type foundry for a single idea: letters that assemble themselves. Its audience is designers and the curious; the page's one job is to let anyone plant a word and watch it climb from a seed into finished type. Everything here is procedural — no images, no pre-drawn glyphs.

01 Palette

Four colours, each with a job. The bright green and red are reserved for lines, seeds and marks — small text runs on ink tokens so it always clears 4.5:1 over the paper.

#EFE9DA

Paper. Warm rag stock — a seedbed, not a screen. Subtle grain, never pure white.

#1C1A16

Ink. The matured stroke and all body text — a near-black with a green-brown bias, not a cold grey.

#3E7A3A

Sprout green. The living, growing vein and the one sprig that never hardens. Marks only; #2C5A29 for green text.

#B33A2A

Seed red. The single point every letter starts from, and the seed end of the growth axis.

02 Type

Roboto FlexDisplay · variable

The whole site is set in one variable font. Roboto Flex carries eleven real axes; GERMINAL drives four of them — wght, wdth, opsz and GRAD — from a single "growth" slider, so the specimen physically thickens and widens as it blooms. The same font, rendered heavy, is the source silhouette the canvas grows into.

KarlaInterface · body

A humanist grotesque with just enough warmth for long copy — it keeps the controls and captions quiet so the growing type stays the loudest thing on the page.

03 Techniques

Canvas 2D for the grower, inline SVG for the diagrams, CSS gradients for the paper. No libraries — the whole thing is a few hundred lines of vanilla JavaScript.

The signature: growing a letter

Each glyph is drawn once into an off-screen mask at heavy weight, and its alpha becomes a coverage stencil — the counters of an e or o stay empty, so nothing grows there. Hundreds of attractor points are rejection-sampled inside that stencil, and a single seed is placed at the lowest point on the baseline. Then space colonisation runs: every attractor pulls the nearest growing tip toward it; each tip advances one short segment along the average pull and forks where attractors disagree; any attractor a tip reaches dies. The front climbs until the veins fill the silhouette. Each vein is thickened by the square root of the leaves it carries — a nod to Murray's law — so trunks swell and twigs taper. The growth slider simply reveals nodes in birth order; past 70% a solid ink fill of the true glyph fades in behind the veins, and the letterform closes.

Real simulation, not a loop. The vein skeleton is computed once per word by the colonisation rule; the slider scrubs the recorded growth, so seed→bloom is genuinely the same organism at different ages.
Variable font both ways. Roboto Flex is the mask source and the live growth-axis specimen — the two halves of the concept share one font.
Cheap when idle. The rAF loop runs only during the intro; scrubbing, resizing and idling all render on demand and pause when the tab is hidden.

04 Iteration log

Pass 1 — Craft

Small uppercase labels (control captions, specimen axis keys) sat at 42–60% ink and slipped under 4.5:1 on the cream. Added a dedicated --ink-70 token and moved every small label onto it; kept sprout green and seed red for the track, seeds and marks only.
The grown word's vertical placement was computed with a redundant double-assignment and a stray optional-chaining arithmetic, leaving short words sitting low with dead headroom. Replaced it with one expression that centres the em box with a slight downward, rooted bias — short ("grow") and long ("germinal") words now balance.

Pass 2 — Depth

Second-read detail: one leaf on one random letter stays sprout-green forever and never hardens into ink — a live sprig poking through the finished glyph. You only catch it on a second look.
Micro-interaction: click the bed to re-sow the same word and watch it grow again (with a cursor and title hint).
Tuned the maturation window so each vein fades green→ink as it thickens, keeping the growing frontier visibly younger than the trunk behind it.

Pass 3 — Hardening

375px: verified no overflow and that the wordmark, index link and specimen sit inside the viewport box — probing element rectangles, not just scrollWidth (the W2 false-pass trap).
Pause/resume: hiding the tab no longer kills the intro; it resumes with a clamped delta (the hidden duration is added back to the start time) instead of snapping to the end.
Reduced motion: a matchMedia check skips the rAF entirely and renders a settled bloom; typing or replanting jumps straight to finished type.
Chanel rule: removed the dotted "soil line" — it hid behind the control bar and only added noise. Final focus-state and copy read.