Inside Room 75 of 175: The Making of “The Setter’s Desk — A Cryptic Crossword Atelier”

Room 75 of 175 unveils an AI-crafted interactive environment where the art of cryptic crosswords is celebrated as both literary craft and mechanical precision. Its signature feature is a meticulously simulated working desk, layered with visual cues of editorial process—proof marks, graphite sketches, coffee rings—all rendered in a vintage-inspired print palette. Central to this space is a dynamic puzzle interface that responds seamlessly to keyboard and touch, embodying a delicate balance between human craftsmanship and digital craftsmanship. This room exemplifies how an AI-generated design can transform a simple puzzle page into an engaging atelier, inviting users to explore the intricate dance of clues and solutions in a richly textured setting.

The visual language draws heavily from traditional print media, employing a subdued palette reminiscent of newsprint—muted yellows, deep ink blacks, graphite greys, and an accent of solver’s blue. Typography is set with locally hosted, characterful fonts that evoke vintage typesetting, with clear hierarchies that mirror editorial layouts. The interface relies on CSS-built textures—an SVG turbulence pattern simulates paper grain, while CSS borders and shadows create depth and tactile cues. The signature interaction is a single, color-coded annotation system: yellow highlights for clues, with all other elements rendered in monochrome. This approach ensures clarity and fairness in puzzle presentation, while the minimal use of color emphasizes the solver’s annotations, reinforcing the room’s theme of craftsmanship. Underlying the visual surface are carefully orchestrated JavaScript routines that map the puzzle grid, synchronize clues, and manage user input, all built on a precise, modular architecture that is easy to critique and refine. The entire experience is optimized for accessibility, supporting keyboard navigation and touch, with reduced-motion settings respected to ensure comfort across user preferences.

The creation of this interactive room followed a three-stage pipeline: initial build, rigorous critique, and final certification. The first phase involved meticulously translating the puzzle’s logic into code—mapping grid data, clue relationships, and interaction mechanics—guided by a detailed design blueprint. Next, the environment was subjected to a series of usability reviews, focusing on clarity of clues, responsiveness, and visual coherence, with iterative refinements based on feedback. Finally, a senior art director evaluated the space to ensure it maintained the intended aesthetic, balance, and narrative payoff, certifying it as a coherent, crafted experience aligned with the original design notes.

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 75 of 175, “setter”):
THE SETTER’S DESK — a cryptic crossword atelier. Aesthetic: broadsheet puzzle page meets writing desk. Palette: newsprint #f4f1ea, ink #1a1a1a, pencil graphite, one solver’s-pen blue. Fonts: gloock (masthead), spectral (clues), space-mono (grid numbers). SIGNATURE: A SOLVABLE MINI CRYPTIC — a real 7×7 grid (keyboard + click entry, check/reveal per light) with six ORIGINAL cryptic clues, each with a “how it works” hatch that anatomizes the wordplay (anagram fodder highlighted, container brackets drawn, definition underlined); a clue-writing masterclass builds one clue live from wordplay parts. Setter’s pseudonym tradition, the fairness rules (Ximenean creed), grid-symmetry showcase. Unforgettable: the moment the penny drops — engineered.

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

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.

Discover the full experience by exploring the live version of “The Setter’s Desk,” where every element reflects a dedication to craftsmanship and puzzle integrity. Browse through all 175 rooms in the exhibition hub to see how each space uniquely interprets the art of puzzle making, all built by an AI designed to honor human ingenuity.

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