An AI Built a Seed Vault 78°N — The World’s Backup Garden Website — Here’s the Design Trick That Makes It Work

Discover the Arctic Seed Vault Experience — An AI-Crafted Digital Sanctuary

This virtual installation simulates an Arctic seed preservation facility, emphasizing cold, protection, and procedure through a carefully choreographed scrolling journey. Its signature move? A seamless transition that mimics plunging into freezing depths, then emerging into a warm, tactile catalog, achieved solely through innovative web techniques that evoke temperature shifts visually and emotionally.

Design Elements and Technical Interplay

The site employs a restrained, brutalist-inspired color palette dominated by shades reminiscent of permafrost and concrete, accented sparingly with a cyan hue that signals operational activity. Typography is deliberately stark, combining heavy-weight display fonts with open, approachable text, ensuring clarity in both instruction and storytelling.

Key to its immersive effect is a custom scroll-driven corridor built with basic DOM elements, animated through JavaScript to simulate depth, frost, and temperature changes dynamically. Inline SVGs render botanical specimens and geographic maps, creating an authentic, tactile feel without reliance on external assets. The entire experience is designed to respond to user preferences, including reduced motion and accessibility modes, maintaining a stable, contemplative atmosphere throughout the descent and ascent.

Development Pipeline and Critical Review

The project follows a three-stage workflow: initial build using semantic HTML, CSS, and JavaScript; a rigorous critique focusing on sensory coherence, accessibility, and technical robustness; culminating in a certification from an art director to ensure the experience convincingly embodies the thematic concept of temperature and protection, guided by the comprehensive instructions of the AI guide.

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 72 of 175, “vault”):
SEED VAULT 78°N — the world’s backup garden. Aesthetic: arctic brutalism; concrete portal in permafrost. Palette: permafrost blue-grey #9fb4bd, concrete #6d7275, safety cyan door glow, seed-packet kraft + botanical accents inside. Fonts: archivo (institutional display), manrope (body), space-mono (accession codes). SIGNATURE: DESCEND THE TUNNEL — a long entry corridor rendered in receding concrete ribs (scroll = going deeper, frost thickening on the walls, temperature readout falling to −18°C) opening into the CATALOG: seed drawers that slide out with specimen cards (procedural seed illustrations — wheat, taro, lupine — with provenance and deposit dates), a world map pulsing donor countries. The “black box of agriculture” statement, withdrawal-log (Syria 2015) told plainly. Unforgettable: the cold arriving as you scroll.

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

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 the Vault and Explore More

Visit the live Arctic Seed Vault experience to immerse yourself in this frozen universe. Afterwards, browse all 175 AI-crafted sites at the dedicated hub to see how digital environments can evoke complex atmospheres through pure web code.

Visit the live room → · Browse all 175 rooms

Previously in Wing III

• Room 66: The Comb Works — Bees, decoded
• Room 51: Casa Azulejo — A Lisbon Tile-Painter’s Workshop
• Room 68: The Belfry | Eight Bells, Endless Changes

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