AGAR — How the plate was cultured

01 · The concept

A garden of rivals, on a nutrient plate.

A single interactive plate for the curious — students, lab folk, anyone who liked a microscope once. Its one job: make the Kirby–Bauer disk-diffusion test tangible. Grow two competing colonies in real time, then let the visitor drop drug discs and watch clear zones open where growth halts. The register is bright and playful, not clinical — microbiology as a garden you tend, not a slide you dread.

02 · Palette

Four colours, argued from the bench.

Nothing decorative. Amber is the medium; two saturated colony hues that read instantly apart; one near-black for the rim and every line of type. Bright accents stay on marks — the colonies, the bars — while text runs in darker ink tokens so nothing drops below 4.5:1.

#E7D9A8 · agar amberThe nutrient medium. Warm, edible, the ground everything grows from.

#C64B8A · colony magentaLeft-hand colony. Used only as a mark; text uses #9E2E68.

#2E9E8F · colony tealRight-hand rival. Its darker ink #1E6B60 carries any small type.

#2A2620 · plate-rim inkThe dish rim, and every word on the page. Deep brown-black, never pure #000.

#F1E7C4 · clear zoneCleared agar inside a disc's halo — a shade paler than the medium.

#FBF7ED · lab benchPage ground. Warm white so the amber plate reads as a distinct disc.

03 · Type

Wonky grotesque meets lab label.

Display · Bricolage Grotesque · opsz 40–84 · 800

Grow a lawn of rivals

Bricolage has a slightly irregular, hand-cut warmth — the letters feel alive, which suits a page about living things. Optical sizing lets the giant hero tighten while section heads stay open. The typographic bravery is the hero: a single line where rivals and line take the two colony colours.

Data · IBM Plex Mono · 400–600

CIP · 32 mm · 47%

Every measured thing — disc codes, zone diameters, coverage — is set in Plex Mono. It reads as instrument output and keeps the numbers honest against the soft display face.

04 · Technique

The signature: two colonies, one plate, canvas 2D.

No libraries. The plate is a <canvas> driving a real cellular simulation on a 150×150 grid masked to a circle. Each colony runs the Eden growth model: it keeps a frontier list of empty cells touching its edge, and every animation frame it pops a random handful and claims them. Random selection at the boundary is what makes the edge organically ragged instead of a smooth disc. A cell can be claimed only once, so where magenta and teal meet, a seam freezes exactly where their growth balanced.

Antibiotic discs are the Kirby–Bauer layer. Placing one starts a bloom: over ~0.6s an inhibition radius eases outward, and every cell it crosses is set clear and permanently blocked — existing colony there dies back and the advancing frontier can never re-enter. That is the clear zone. Rendering stays cheap: the grid is written into a 150×150 ImageData buffer (packed as Uint32), only when cells actually change, then scaled up with smoothing for the soft colony texture. Discs, dashed zone rings and the glass-lid highlight are drawn as vectors on top. The loop idles the moment growth settles and no disc is blooming, and pauses entirely when the tab is hidden.

Cells are shaded by a per-cell hash plus distance from the seed, so colonies carry faint granular texture and a subtle radial gradient — older centres a touch darker, like a real culture. That is the second-read detail: it only registers once you lean in.

05 · Iteration log

Working, then premium.

Pass 1Craft

Separated bright accents from text: colony magenta/teal became marks-only; introduced #9E2E68 and #1E6B60 ink tokens for every small coloured label so nothing sat below 4.5:1.
Set a deliberate type scale on optical sizing rather than default steps; tightened hero tracking to -.03em and gave section heads their own opsz.
Unified radii (14px cards, 10–11px chips), border weights and the single soft shadow token; rewrote filler copy into specific lab language ("measure the halo, answer in millimetres").

Pass 2Depth

Enriched the signature: discs now eat back existing colony as the zone blooms, not just block empty medium — the halo visibly opens through a live lawn.
Added a hover ghost micro-interaction: the selected disc and its exact zone preview follow the cursor so you can aim before committing.
Second-read details: per-cell granular shading, a faint radial age gradient from each seed, and a static condensation fleck field under the glass-lid highlight.
Refined disc-bloom easing to an ease-out cubic over 620ms so the ring opens fast then settles.

Pass 3Hardening

375px: nav collapses secondary links, hero and controls stack full-width, disc tray holds a 4-up grid, plate scales to container — verified wordmark and nav sit inside the viewport box, not just scrollWidth≤375.
Reduced motion: the simulation runs to a settled frame synchronously, places one demo zone, and never starts a rAF loop; hover ghost is suppressed.
Resilience: DPR capped at 2, grid fixed so resize only rescales the draw (no reseed), loop pauses on visibilitychange and resumes cleanly, keyboard drops a disc via Enter, focus-visible ring on the canvas. Removed a redundant outer glow ornament (Chanel rule).