# Design Language for undo.quest ## Aesthetics and Tone undo.quest is a **surreal, hand-grained meditation on the fantasy of taking it back** — the Ctrl+Z that real life refuses to honor. The conceit: somewhere there is an *undo stack* for a life, a tall translucent column of acetate sheets, each one a moment that could be peeled away. The site is a slow vertical descent down that stack. It is not an app, not a product, not a tool — it is a **specimen drawer of un-doings**, photographed under cold north-window light, every surface dusted with photocopier grain and the faint blue-grey of old onionskin. The tone is **wistful, dryly precise, a little haunted** — the voice of a conservator labelling things in a museum of mistakes, not the voice of a self-help blog. Inspiration: the look of a forensic evidence table; xerographed zines from 1991; the title cards of Chris Marker's *La Jetée*; the way a film negative reverses light and shadow; architect's flimsy trace-paper overlays stacked until the drawing underneath goes ghostly. Nothing here is glossy. Nothing glows. Light is overcast, the colour is drained to almost-monochrome, and the only warmth in the whole palette is a single dying ember — one small mark of *carbon orange* that appears exactly when something is being un-made. This is deliberately the **opposite of dopamine UI**: no neon, no bright cards, no celebratory confetti. The emotional register is the held breath right before you decide whether to actually press the key. ## Layout Motifs and Structure **Vertical stack, top to bottom, no centred content well.** The page is a single uninterrupted column the full width of the viewport, scrolled like rappelling down the side of a tall translucent tower. No nav bar, no sticky header, no footer CTA. The only persistent chrome is a thin **left-margin "stack ruler"** — a vertical line with tick marks and tiny depth labels (`Z−1`, `Z−2`, `Z−3` …) that fills in as you descend, so you always know how deep into the undo history you are. **The page is composed of 7–9 SHEETS.** Each sheet is one full-viewport-height plate representing one un-doing. A sheet is built as a **layered-depth stack of 3 translucent planes**: 1. *Back plane* — the moment as it happened: a grainy duotone photograph or photostat, slightly out of register. 2. *Middle plane* — the trace-paper overlay: hand-drawn annotation lines, circled details, a conservator's caption in mono type. 3. *Front plane* — the "undo" gesture itself: a single sweeping eraser-stroke shape, or a peeling corner, rendered in the carbon-orange accent. As the reader scrolls a sheet into view, the front plane **lifts and curls away** (CSS transform, slow), revealing that the moment underneath has been replaced — the photograph desaturates one more notch, or a figure has quietly vanished from it. Scroll past, the next sheet begins. **Spatial grammar:** generous *ma* — negative space is doing real work here, big quiet margins of onionskin grey around each plate so it reads as a single mounted specimen. Text is never centred-symmetric; captions hang at the lower-left "label" position like museum cards, occasionally rotated 2–3° as if hand-placed. One sheet mid-descent **breaks the grid hard**: it tilts the whole plane ~6° and lets the stack ruler run diagonally — the "this is the one you can't undo" sheet. No bento boxes. No card grid. No dashboard. The structure is a *strip of contact-sheet frames seen from the side*. ## Typography and Palette **Typefaces (all Google Fonts, all real):** - **Newsreader** (variable, serif — used 400, 500, and 18–24pt italic) — the body and narrative voice. A screen-native literary serif with a slightly inky, printed feel. Used for the descent text, the un-doing descriptions, the small wistful lines. - **Spectral** (600 / 700) — used *only* for the depth headings (`Z−4 · The Letter`) and the single large opening word. Set tight, almost crowded, like a chapter title stamped into the page. - **Space Mono** (400, and 400 with letter-spacing for labels) — the conservator's hand: tick labels on the stack ruler, the small all-caps annotation tags ("REGISTRATION ERROR", "FIGURE REMOVED", "STATE: REVERTED"), timestamps, the marginalia. Mono is the *machine* speaking; serif is the *person* speaking. They never blend. **Palette — drained, cold, near-monochrome, one ember:** - `#E8E6E0` — **onionskin** — the dominant background, the colour of stacked trace paper held to a grey sky. - `#1B1C1E` — **carbon black** — text and the darks of the duotone photographs (never pure #000). - `#6B7075` — **graphite** — secondary text, the ruler line, annotation strokes, the mid-grey of photostats. - `#B9BCBE` — **fog** — the desaturated highlight in images, hairlines, the "already undone" ghost layers. - `#C4490F` — **carbon orange** — the *only* warm colour; the eraser stroke, the active depth tick, the one detail that survives the un-doing. Used at maybe 2% of total surface area. It must feel like the last warm thing in a cold room. - `#2E3A45` — **slate blue-grey** — a faint cool accent for the deepest sheets, where the stack gets cold and old. Grain everywhere: a fixed photocopier-noise overlay (~7% opacity) and a subtle multiply-blend paper fibre texture on every plane. ## Imagery and Motifs **Duotone photostats.** Every back-plane image is treated as a two-tone xerox: carbon black on onionskin, slightly over-contrasted, with visible toner speckle and a thin black line where the "edge of the glass" was. Subjects are mundane and quietly devastating: an unsent letter on a kitchen table; two coffee cups, one untouched; a door half-closed; a chair pulled back from a desk; a phone face-down; a coat still on its hook. Each appears twice — once *before* the undo (the figure present, the cup full) and once *after* (emptied, vanished, reverted) — the swap happening behind the curling front plane. **The eraser-stroke shape.** A recurring vector motif: a soft tapered sweep, like a kneaded-eraser drag across graphite, used as section dividers, as the "undo gesture" on each sheet, and as the cursor's wake. Always carbon orange. Always travelling right-to-left (the direction of *back*). **Trace-paper annotation.** Hand-drawn-feeling SVG: circled details, leader lines pointing at things, a single arrow that always points *upward and backward* (toward the previous, un-restored state). Caret marks `‸` like proofreader's deletions. Strikethroughs that animate as a stroke being drawn. **The stack ruler & depth ticks.** Engineering-drawing tick marks down the left margin; the active one glows carbon orange and the passed ones fill graphite. At the very bottom, the ruler ends in a small label: `Z−0 · NOW (NO FURTHER UNDO)`. **Registration-misprint glitch.** Subtle, tasteful: photographs offset their channels by 1–2px on hover or on reveal, the way a misaligned two-colour print shows a ghost edge. Never a loud RGB glitch — a *print* glitch. ## Prompts for Implementation Build undo.quest as **one long, single-document, full-bleed HTML page** — 7 to 9 sheets, scrolled top to bottom, no router, no SPA, no modals, no nav menu, no footer sign-up. The reader descends an undo stack the way you'd lower yourself down the inside of a grain silo: slowly, one rung at a time, the light getting colder. **Atmosphere over information. Typography over imagery. One slow descent over branching paths.** - **Opening overture (~3s, non-skippable, but quiet):** the screen is blank onionskin grey. A single Space Mono line types: `> ready to undo? (y)`. When the reader scrolls or presses a key, a faint *Ctrl* + *Z* keycap pair fades in centre-screen, depresses once with a soft transform, and the whole page seems to *lift one sheet* — a translucent plane slides up and off the top, revealing the title in big tight Spectral: **undo.quest**, with the line beneath in Newsreader italic: *"a museum of moments that could be taken back."* No logo animation beyond this. - **Scroll mechanics:** each sheet pins briefly (a short scroll-snap or a ~120vh scene), during which the front "undo" plane *peels and curls away* (CSS `transform: rotateX / translateZ`, `transform-origin` at a top corner, slow ~1.2s ease), the back-plane photograph cross-dissolves from its *before* state to its *after* state, and the depth heading slides up into the stack ruler as a filled tick. Use `IntersectionObserver`, not heavy scroll libraries. Honour `prefers-reduced-motion` by replacing curls with simple cross-fades. - **Cursor wake:** a small carbon-orange eraser-stroke shape trails the cursor with spring lag, travelling slightly *behind* the pointer's motion (it's always a beat in the past). On hover over a photograph, that image does a 1–2px channel-offset *print* registration shimmer and a tiny annotation circle draws itself (SVG path-draw) around the detail being "noticed." - **The broken-grid sheet (roughly sheet 5 or 6):** tilt the entire plane ~6°, run the stack ruler diagonally, and let the carbon-orange accent be *absent* here — this is the un-doing that won't take. The depth tick for it flickers orange and dies to graphite. Caption in Space Mono: `STATE: REVERT FAILED — MOMENT IS LOAD-BEARING`. - **Texture & grain:** a `position: fixed` full-viewport photocopier-noise layer at ~7% opacity, `pointer-events: none`, plus a paper-fibre texture multiply-blended onto each plane. Everything matte. Nothing has a glow, a glassmorphic blur, or a drop shadow softer than a hard pencil line. - **Ending:** the last sheet is `Z−0 · NOW`. The stack ruler hits its terminus. The page does *not* offer a CTA, a newsletter, a "start your journey," a pricing tier, a testimonial, or a stat-grid. Instead: the onionskin goes very still, the carbon-orange ember on the ruler holds for a long beat, then a single Space Mono line types and stays: `> nothing left to undo. you are here.` Below it, in small Newsreader italic, the only outbound gesture allowed: a quiet line of text — *"start over?"* — which, if clicked, simply scrolls the whole page smoothly back to the top (a literal undo of the reading). That is the entire interaction model. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, feature-card grids, testimonial carousels, FAQ accordions, email capture, dashboards, glassmorphism, neon, dopamine colour, hero-with-buttons. There is nothing to buy and nothing to sign up for. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **The undo-stack-as-architecture.** No other site in the corpus is structured as a *descent down a translucent stack of acetate sheets* with a persistent depth ruler counting `Z−1, Z−2, Z−3 …`. The navigation metaphor isn't a timeline or a scroll-story — it's a literal data structure (an undo stack) rendered as a physical tower. 2. **One ember in a near-monochrome room.** Against a corpus that is 98% warm palettes and 93% gradients, undo.quest is drained, cold, gradient-free, and almost monochrome — `#E8E6E0` onionskin and `#1B1C1E` carbon — with a single non-gradient warm mark, `#C4490F`, restricted to ~2% of surface area and meaningful only as "the thing being un-made." Color is *rationed*, not decorative. 3. **The "load-bearing moment" broken-grid sheet.** A deliberate failure built into the experience: one sheet where the undo *doesn't work*, the grid tilts 6°, the accent colour goes absent, and the conservator's label reads `REVERT FAILED — MOMENT IS LOAD-BEARING`. Sites in the corpus use broken-grid for energy; here it's used for *grief*. 4. **Cursor-wake that lags into the past.** The cursor trail (an eraser-stroke shape) travels a beat *behind* the pointer and always sweeps right-to-left — the direction of "back." It's a cursor-follow pattern inverted into a cursor-*precede* metaphor. 5. **The ending is a literal undo.** No newsletter, no CTA — the only outbound action is "start over?", which scrolls the page back to the top, undoing the act of reading. The site's interaction model closes its own loop. **Chosen seed/style:** `surreal dreamscape promo` — realized as `aesthetic: surreal + grainy-textured, layout: layered-depth (vertical stack), typography: serif-revival + tech-mono, palette: monochrome + cool-grays + a single rationed warm accent, patterns: scroll-triggered + path-draw-svg + cursor-follow(inverted), imagery: collage/duotone-photostat + grain-overlay, motifs: wave-forms (eraser strokes) + grid-lines (stack ruler), tone: mysterious-moody + wistful-conservatorial`. **Avoided overused patterns (from frequency analysis):** no glassmorphism (85%), no hand-drawn-cute (95%), no warm palette (98%), no gradient (93%), no card-grid (93%), no parallax-tilt-3d-magnetic dopamine stack used decoratively; `cursor-follow` is present but semantically inverted; `path-draw-svg` is present but used for proofreader's deletions, not flourishes. Leans into underused territory: cool-grays (6%), monochrome (16%), layered-depth (13%), surreal (8%), grainy-textured (2%), collage imagery (6%).