Inside Room 15 of 175: The Making of Apothecarium — Bitters & Botanical Remedies, est. 1783

Apothecarium — Bitters & Botanical Remedies, est. 1783 — Local Asset Generation — Room 15 of 175: “Apothecarium — Bitters & Botanical Remedies, est. 1783” — visit the live site.

Discover the Fictional Apothecarium’s Atmosphere

Step into a digital reenactment of a centuries-old apothecary, where every detail evokes a sense of history and craftsmanship. This virtual space uses carefully crafted visual effects—like flickering candlelight and hand-drawn botanical plates—to create an immersive, timeless ambiance. Its signature move is a locally generated, color-graded medicinal folio that anchors the experience, blending historical authenticity with modern web techniques.

Unpacking the Design Elements and Techniques

The site’s palette revolves around deep, warm tones reminiscent of old parchment and candlelight, such as umber, verdigris, and waxy browns. Typography plays a key role: IM Fell English lends an aged, printed feel to labels and seals, while EB Garamond enhances the prose, both carefully chosen to reinforce the antiquarian mood. Signature SVG engravings, with hatch-pattern fills and displacement effects created via CSS filters, mimic hand-engraved copper plates, adding to the handcrafted aesthetic. The flickering candlelight, driven by JavaScript, overlays radial glow and vignette effects, simulating the unreliable flicker of a candle, and is optimized for accessibility with prefers-reduced-motion. The remedies—styled as ledger entries—feature detailed, ledger-style typography, with subtle textures added through SVG noise overlays. All media is self-hosted, ensuring the experience remains entirely local, with assets generated or styled dynamically to maintain the illusion of age and authenticity.

Live view of Apothecarium — Bitters & Botanical Remedies, est. 1783 — The room as it renders live — open it in your browser.

The Three-Pass Creative Workflow

This site was developed in a structured pipeline: an initial build phase where core assets, SVG symbols, and styles were created; a critical review phase focusing on authenticity, detail, and coherence; and finally, a certification step by an art director to ensure the scene convincingly evokes a historical apothecary. The process was guided by a proprietary design approach that emphasizes the seamless integration of handcrafted visual cues with modern web techniques, all while maintaining the fiction’s integrity. This methodology was documented in a detailed guide to help future iterations and similar projects.

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

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 15 of 175, “apothecarium”):
APOTHECARIUM — Bitters and Botanical Remedies, est. 1783. Fiction: a haunted-adjacent old apothecary shop. Aesthetic: dark academia: deep umber #1c130c, parchment #e9dbb9, verdigris #4e7a6a, candle glow. Fonts: im-fell-english (display — embrace its crooked historic character), eb-garamond (body). SIGNATURE: SVG “engravings” — botanical and vessel illustrations built from hatching lines + feTurbulence displacement so they look copper-plate etched; ambient candlelight: a slow flickering radial light (CSS keyframes with irregular steps + subtle hue shift) that makes shadows breathe across the whole page. Remedy cards as ledger entries: № , latin name, dram price, contraindications in tiny italic. An “elixir compounding” table: pick three botanicals (checkboxes styled as apothecary drawer pulls) -> a poetic tincture description composes itself. Wax-sealed guarantee. Unforgettable: the light feels candle-lit and the ink feels 250 years old.

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/apothecarium/

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.

Explore the Virtual Apothecarium and More

Visit the live site to experience this meticulously crafted digital environment. Curious about the others? Browse all 175 unique rooms in the main hub, each built with the same care and creative ingenuity, all powered by AI-driven generation techniques.

Visit the live room → · Browse all 175 rooms

Previously in Wing I

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.

Wellness content on this site is informational and not a substitute for professional medical guidance.