An AI Built a FOLIUM — A Living Herbarium Website — Here’s the Design Trick That Makes It Work

Discover FOLIUM: The Living Herbarium Created by Artificial Intelligence

FOLIUM is an innovative digital herbarium that appears as a vintage 19th-century botanical archive, yet it’s entirely generated by AI. Unlike traditional collections, it doesn’t just display preserved plants—it evolves each time you visit, presenting a fresh, uniquely generated archive rooted in a single seed. This site invites visitors into a dynamic, living record of botanical growth, where every visit feels like opening a new, private accession day, thanks to its seed-based randomness and intricate SVG plant renderings.

Design Workflow: From Algorithm to Artwork

The creation process begins by selecting a random seed, which dictates every element of the herbarium, from specimen codes to plant illustrations. This seed-driven approach ensures each visit reveals a distinct archive, preserving the illusion of a living collection. A three-step pipeline guides the development: first, an algorithmic build generates SVG plant illustrations based on rule-based L-systems; next, a rigorous critique refines the visual coherence and authenticity of the layout; finally, an art director certifies the aesthetic, balancing algorithmic precision with artistic interpretation. The entire process is informed by a detailed guide that emphasizes botanical realism and vintage charm, ensuring each generated specimen aligns with the imagined 19th-century archive while embracing the creative randomness of AI.

The full build notes live in the room’s design guide.

Design Components and Technical Foundations

The visual language of FOLIUM mimics aged botanical manuscripts, achieved through a carefully curated palette of cream paper textures, faded ink, and layered foxing effects. The site’s signature plants are rendered as stochastic SVG illustrations, generated via deterministic pseudo-random number generators seeded with a session-specific number. These generators produce intricate L-systems that simulate plant growth, with embedded rules dictating stem, leaf, and seed head formation. Typography choices reinforce the vintage feel, employing self-hosted fonts that resemble handwritten labels and marginalia, adding to the authenticity of the herbarium aesthetic. The site’s layered SVGs incorporate subtle textures—created with CSS filters like feTurbulence—that evoke the tactile quality of aged paper, with tape strips and stamped accession circles completing the mounted sheet look. These visual effects are meticulously layered and animated, employing the Web Animations API to animate growth and unfurling processes based on plant distance metrics, creating a seamless, organic animation without continuous loops.

Want this? Paste this into your AI coding agent

Build a single-page showcase website from this art-direction brief. Work like an elite creative frontend engineer; commit totally to the direction.

BRIEF (room 04 of 175, “folium”):
FOLIUM — A Living Herbarium. Fiction: a botanical archive where specimens grow on the page. Aesthetic: 19th-century herbarium sheets, pressed and labeled. Palette: aged cream #f6f0df, botanical greens #4a5d3a #2e3d26, ochre #c8912f, faded ink #3b3630. Fonts: newsreader (display + italic), eb-garamond (body), caveat (handwritten labels). SIGNATURE: generative botanical specimens drawn as SVG via L-systems in JS — stems, branching, leaves, seed heads; each page load grows a UNIQUE set (seeded random, growth animated over ~2s with stroke draw + leaf unfurl). Specimen cards look like herbarium sheets: paper texture (SVG feTurbulence grain), archival tape corners (CSS), caveat handwritten labels with fictional latin binomials, a wax-crayon catalog number. “Grow new specimen” button per sheet. Sections: intro; 6-specimen gallery; anatomy diagram; collection notes. Unforgettable: the archive is alive — no two visits show the same plants.

STACK: pure HTML/CSS/JS, no build step, no frameworks, no CDNs or external requests of any kind; self-hosted fonts only; every visual is code (CSS/SVG/canvas/WebGL) — no image assets required.

QUALITY BAR: flawless at 390px, 834px and 1440px with zero horizontal overflow; tap targets >= 44px; semantic landmarks, focus-visible styles, body-text contrast >= 4.5:1; prefers-reduced-motion pauses or simplifies heavy animation; rAF loops pause when the tab is hidden; hold 60fps (cap particle counts, avoid layout thrash); rich invented content everywhere — real-sounding names, numbers and program notes, never lorem ipsum; orchestrate one beautiful staggered load moment plus scroll and hover surprises. FORBIDDEN: Inter/Roboto/Arial/system-ui, purple-gradient-on-white, and cookie-cutter hero+cards+footer layouts.

PROCESS: iterate in three documented passes — (1) build plus builder self-critique, (2) merciless external critique finding and fixing at least ten real problems, (3) art-director elevation from good to unforgettable. Screenshot at all three widths every pass and fix everything you can see.

— Original brief by Claude Fable 5 (art director), executed by the FABLE/175 pipeline.
— This room lives at https://fable-25-830.netlify.app/sites/folium/

This is the verbatim art-direction brief that produced the room — exposed by the exhibition itself via the “Prompt” link in the room’s footer.

Experience FOLIUM Today

Visit the live AI-crafted herbarium to explore its ever-changing specimens and enjoy the sensory richness of an authentically aged botanical archive. Curious to see more? Browse through all 175 site variations at the official hub, each one a unique testament to the fusion of art, science, and machine intelligence.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

• Room 1: HELIOS — Live Solar Observatory · Station HLX-1
• Room 3: Atelier Lumen — Light Installation Studio, Antwerp
• Room 2: TERRANE — Ridgeline National Reserve Field Guide

FABLE / 175 is a finished exhibition of 175 fundamentally different websites, each built end-to-end by an AI. This article is part of our series walking through it room by room.

Powered by Thorsten Meyer AI