Get the latest gadgets delivered free — and shop member deals
- Fast, free delivery on millions of items
- Access to Prime Big Deal Days deals on October 6–7
- Prime Video, Amazon Music and more included
A courier dispatch desk, built as a website
Room 136 imagines the web interface used by Spoke & Signal, a fictional bike-messenger collective in a fictional East Basin. It isn’t a real company or an ordinary courier-services page. It’s an AI-built exhibition piece that treats the browser like a working artifact: part dispatch map, part route ledger, part gear guide, part radio.
The signature move is making the route map behave like an instrument. Choose a delivery ticket and its line draws across an inline SVG street grid; the courier marker follows the geometry. The page’s story is told through changing interfaces, not just through headings and copy.
As an affiliate, we earn on qualifying purchases.
From prompt to exhibition piece
The project follows a three-pass pipeline: build the code-only site and its fictional world, subject the result to merciless critique, then send it through art-director certification. The accompanying guide documents the concept and implementation, including the SVG routing, audio behavior, accessibility decisions, and component details—so the room works as both an experience and a readable design case.
The full build notes live in the room’s design guide.
As an affiliate, we earn on qualifying purchases.
Why the interface feels handled, not polished
The visual language suggests a messenger’s equipment and paperwork without relying on photographs. Cordura black, blaze orange, bike-lane green, and static grey form a disciplined four-color palette: dark material, urgent notice, route signal, and supporting detail. Perforations, stamps, map lines, grain, and equipment diagrams are built from code rather than image assets.
Typography reinforces the difference between a public declaration and operational evidence. A heavy, tightly tracked display face carries compressed statements; JetBrains Mono handles manifests, measurements, labels, and radio protocol. The result reads less like a conventional brand campaign and more like a field manual with a point of view.
A map that changes shape
The dispatch board’s inline SVG contains six route paths over a shared street grid. Selecting a ticket activates its corresponding path. JavaScript measures that path and animates the stroke so the route appears to travel through the city, rather than simply highlighting a line. A marker samples the SVG geometry and moves along it; on desktop, pointer movement can take control, making the cursor stand in for the rider.
That geometry-first interaction gives the map a job in the fiction. Keyboard focus, hover, and tap can select a route, while the TAKE control pulls a perforated manifest from the queue and replaces it with an assignment stamp. Elsewhere, an explicit radio switch triggers synthesized static through Web Audio only after a user action. The bag section uses accessible tabs, and a control can open the flap to reveal CSS-built contents. Reduced-motion handling removes movement without removing the information, and the animation loop stops when the document is hidden.
One world, several formats
The experience moves from dispatch cockpit to data strip, race noticeboard, lock catalog, bag cutaway, and radio field. Those shifts keep the fictional collective from feeling like a single-page mood board: each chapter presents its information in a form that belongs to the imagined work.
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 136 of 175, “courier”):
COURIER — SPOKE & SIGNAL, a megacity bike-messenger collective (fictional). Aesthetic: cordura, carabiner, radio static; the city as a maze with prizes. Palette: bag-cordura black, blaze orange, bike-lane green, static grey. Fonts: epilogue (display), jetbrains-mono (manifests). SIGNATURE: THE DISPATCH BOARD — a live job board over a stylized SVG city map: hover a job ticket and the fastest line draws itself through the grid (one-ways respected, alley shortcuts dotted), your cursor riding it as the courier; accept and the manifest ticket tears off (perforation animation). Radio-check chatter as typographic bursts (synth crackle behind switch). Alleycat race chapter with checkpoint stamps, lock-technique taxonomy, messenger-bag archaeology (what lives in the bottom). Unforgettable: watching your route draw itself.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/courier/
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.
As an affiliate, we earn on qualifying purchases.
Step into the dispatch room
Visit the live Courier — Spoke & Signal room to test the route instrument and explore its field-guide chapters. Then browse the hub’s full collection of 175 rooms, each an AI-built exhibition piece with its own design premise.
Visit the live room → · Browse all 175 rooms
Previously in Wing VI
- Room 127: Meridian 843 | The Measured Mile
- Room 135: DRAGSTRIP — 1320 Feet in 3.7 Seconds
- Room 133: Hydroplane — Gold Cup River Thunder
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.
As an affiliate, we earn on qualifying purchases.
Evergreen bestsellers Picks
bestsellers
As an affiliate, we earn on qualifying purchases.
