Get furniture and decor delivered free with Prime
- Fast, free delivery on millions of items
- Prime Video, Amazon Music and more included
- Member-only deals all year
A room that changes as the night unfolds
Somnia — Night 214 is a fictional sleep laboratory imagined as an exhibition room, not a real company or medical service. Its central design move is to make scrolling feel like moving through one recorded night: the page changes visual state as the hours pass, turning sleep science into an atmosphere you can navigate.
For readers used to thinking about interiors as sequences of material, light, and mood, the room offers a digital equivalent. Indigo darkness gives way to warm recording-paper tones, then slips back toward night before opening into dawn. Each chapter has its own visual character, so the page feels less like a stack of matching panels and more like a carefully staged environment.
The concept is built around genuine sleep-stage ideas, including N1, N2, N3, REM, and the changing patterns of brain activity. The sleeper and institute, however, are fictional. The entire exhibition website was built by AI, and its defining trick is to make typography, motion, and color respond to the same changing night.
As an affiliate, we earn on qualifying purchases.
Inside the design: material, type, and motion
A nocturnal palette with a dawn finish
The palette balances deep indigo with a soft, paper-like cream. A muted silver suggests observation equipment without turning the page into a cold dashboard, while a rose tone appears as a more electric accent in the REM chapter. Together, the colors establish a restrained room-like atmosphere: dim, tactile, and attentive rather than clinical.
Grain and layered gradients help the surfaces feel distinct. Inline SVG turbulence gives the paper its texture, while CSS gradients suggest the ruled stock of a sleep study. Blurred layers and shadows evoke reflective observation glass. The dawn section shifts color using CSS, so the transition stays integrated with the rest of the design rather than relying on a separate illustration.
Typography as a changing material
Newsreader supplies the main voice, with a softer editorial cadence that makes the scientific subject feel considered and human. JetBrains Mono provides the counterpoint: compact, measured, and suited to labels and technical notes. The type isn’t simply placed on top of the atmosphere. Its weight, spacing, width, slant, and drift change with the active sleep stage.
That behavior is the signature technique. In N1, letterforms loosen gradually. N3 adds visual weight and stillness. REM introduces a slow, unsettled sway. The changes are subtle enough to preserve reading, but expressive enough to make the page’s physiology visible in its typography.
A live instrument follows the reader
A generated EEG trace responds to the section in view, while a stepped hypnogram maps scroll progress across the night. As the trace draws, a bright marker tracks its path and the lab clock advances. The waveform itself varies by stage: N2 brings in a spindle-like burst, N3 slows into larger waves, and REM becomes quicker and less regular.
The implementation relies on code-drawn visuals rather than generated image assets. Motion is also designed with restraint: the animation pauses when the tab is hidden, and reduced-motion settings replace continuous movement with a static trace and simplify transitions. The electrode control is a functional button with an announced pressed state; on activation, a neural-loop motif moves the reports outward and brings their ideas together in a sentence. Dream elements respond at different depths to pointer movement, adding a small sense of spatial layering without making the page’s core content depend on it.
From generated build to guided exhibition
The room follows a three-pass pipeline: build the experience, critique it mercilessly, then certify it with an art director’s eye. The AI-built site is accompanied by a field guide that explains the visual system, interactions, and accessibility choices, making the process legible as well as the final result.
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 156 of 175, “somnia”):
SOMNIA — INSTITUT SOMNIA, sleep laboratory, night 214 (fictional lab, real sleep architecture). Aesthetic: EEG paper and dim observation glass; science at whisper volume. Palette: EEG-paper cream, REM rose, deep-sleep indigo, electrode silver. Fonts: newsreader (display), jetbrains-mono (traces). SIGNATURE: THE HYPNOGRAM — the scroll is one full night: a live hypnogram traces your descent N1→N2→N3→REM as sections pass, and TYPOGRAPHY OBEYS THE STAGE — N1 drifts (letter-spacing loosens), N2 brings sleep-spindle interludes (brief oscillation flourishes), N3 is heavy and slow (weight up, pace thick), REM breaks into dream-logic layouts (gentle non-euclidean overlaps, margins that don’t quite agree). Subject dream-report cards (verbatim, tender, invented), the 90-minute-cycle arithmetic, sleep-pressure adenosine curve, the 4am “wolf hour” note. Wake at dawn gradient with the night’s full hypnogram stamped like a signature. Unforgettable: type falling asleep with you.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/somnia/
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.
Step into the room
Visit Somnia — Night 214 to experience the changing night for yourself. Then browse the hub of all 175 rooms for more AI-built exhibition websites and their design ideas.
Visit the live room → · Browse all 175 rooms
Previously in Wing VII
- Room 155: Luciole — The Synchronous Fireflies of Vallon Creux
- Room 152: Mothlight — A Porch-Light Census
- Room 154: Nightmarket — Mercado de Medianoche
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.
Fall Picks
fall essentials
As an affiliate, we earn on qualifying purchases.
