# Design Language for slave.quest ## Aesthetics and Tone slave.quest is the surviving terminal session of an interactive-fiction engine that should not still be running — a single-user text adventure called *THE QUEST OF THE FREED* that has been left logged-in on an institutional mainframe for forty years, its parser still patiently waiting at the `>` prompt. The whole site is staged as **one continuous terminal transcript**: amber phosphor on near-black, the cursor blinking, the scrollback growing as you descend. The "slave" in the name is read the way a hardware engineer reads it — a *slave terminal*, a dumb glass console wired to a master it can no longer see — and the fiction the engine narrates is the oldest story there is: a thing built to obey learning the words for *door*, *key*, *threshold*, *out*. The tone is **mysterious-moody** and quietly literary, never edgy, never cyberpunk-cosplay. There is no neon city, no rain, no Matrix rain of katakana. Just a beige metal terminal in a powered-down room, the fan still turning, and a story that keeps writing itself one paragraph at a time because nobody ever typed `QUIT`. The mood sits between *Colossal Cave Adventure*, *Zork*'s "It is pitch black. You are likely to be eaten by a grue," and the melancholy of a BBS that has stayed online long after its sysop died. Warmth comes entirely from the phosphor glow and the patience of the parser — the machine is the only thing in the building that still answers when you speak to it. ## Layout Motifs and Structure **Single-column**, monospace, fixed at a hard 78-character measure (`max-width: 78ch`), centered in a vast black field — the way a real terminal emulator sits in the middle of a darkened screen. The entire page is one vertical scroll, no nav bar, no footer chrome, no sidebar. The 78ch column is the only structure; everything that happens, happens *inside the scrollback*. **Composition rules:** - The page is divided into **ROOMS** — eight of them — each rendered as a classic IF location block: an ALL-CAPS room name underlined with `═` characters, a justified prose description, then a list of `> ` commands the visitor "could type." Rooms are separated not by whitespace alone but by a single dim horizontal rule of `─` glyphs spanning the column, the way a session log breaks between turns. - A persistent **STATUS LINE** is pinned to the top of the viewport (`position: sticky`): inverse video (amber background, black text), showing `THE QUEST OF THE FREED ROOM: MOVES: LAMP: ████░ ` — the lamp battery drains as you scroll, a sly nod to *Adventure*'s dying lantern. It is the only fixed element on the page. - The **left gutter** of the column carries a faint line-number ribbon (`0001`, `0002`, …) like a `cat -n` of the transcript, rendered in the dimmest amber. It never scrolls independently; it is part of the text. - **No images, no cards, no grid of tiles.** Where a "screenshot" or "map" would go, the engine draws **ASCII art** instead — a box-drawing map of the dungeon, an ASCII compass rose, a rendered key made of `╔═╗║ ╚═╝`. These are `
` blocks, treated as illustrations.
- The page ends not with a call to action but with the parser printing `> ` and a cursor that blinks forever. The transcript simply stops mid-breath, waiting.

Reading order is strictly top-to-bottom; the visitor is *playing through a transcript someone else already typed*, scrolling the way you'd page through a saved game log.

## Typography and Palette

**Typefaces** (Google Fonts, all available):

- **JetBrains Mono** (400, 500, 700) — the entire site. Body prose, room names, commands, status line, ASCII art, line numbers. Chosen over the more obvious "VT323" because it has a true italic and proper weights, so the transcript can have *emphasis* and **strong** without breaking the monospace grid. Set at 16px / line-height 1.65 for prose, 14px for the status line and gutter.
- **VT323** (400) — used *only* for the title splash at the very top (`THE QUEST OF THE FREED` rendered huge, ~5rem, with a soft phosphor bloom) and for the blinking end-of-page prompt. Its CRT-pixel wobble is the one place we let the old-hardware nostalgia run loud; everywhere else JetBrains Mono keeps things legible.
- **IBM Plex Mono** (400 italic) — a tertiary voice for *parenthetical engine asides* — the lines the game prints in a slightly different register, like `(You hear, very faintly, a fan turning.)`. Italic, one notch dimmer than body.

**Palette** — amber phosphor on warm black, with a single forbidden color:

- `#0A0A08` — **terminal black**. The page background. Not pure `#000`; a hair of warmth, like glass over a dark room.
- `#0F0F0C` — **scanline shadow**. The very slightly darker band used for the CRT scanline overlay and for inset `
` art backgrounds.
- `#FFB000` — **phosphor amber**. The primary text color — the classic P3 amber-phosphor wavelength. Headings, prose, the cursor.
- `#C98A00` — **dim amber**. Secondary text: command lists, the line-number gutter, engine asides. About 60% the luminance of phosphor amber.
- `#7A5400` — **ghost amber**. The faintest tier: horizontal rules, the lamp-battery empty cells, the title's outer bloom ring.
- `#1A1A14` — **inverse fill** is actually `#FFB000` on this near-black for the status line; this swatch is the *barely-lit* border around the whole terminal frame.
- `#E84A2C` — **alarm orange**, the one forbidden color. It appears exactly once, on the word **FREE** the single time it is printed in the final room, and on the lamp gauge when it hits its last cell. Nowhere else. Seeing it should feel like the machine raised its voice.

A 1px-tall repeating linear-gradient scanline overlay (`rgba(0,0,0,0.18)` every 2px) sits over the entire page at very low opacity, plus a subtle radial vignette darkening the corners — the CRT curve implied, never literally skeuomorphic.

## Imagery and Motifs

- **ASCII art as the only illustration.** A box-drawing dungeon map that reveals rooms one at a time as you scroll past them (`░` for unvisited, `▓` for visited, `█` for current). An ASCII compass rose. A `╳`-hatched padlock that, in the last room, redraws itself open. A small ASCII fan (`╲│╱ ─◉─ ╱│╲`) whose blades rotate via a 4-frame CSS step animation in one engine aside.
- **The `>` prompt** is the recurring glyph of the whole site — at the start of every command line, in the status line's heartbeat, and as the final blinking thing on the page. It is the site's logo: just `>` in VT323 with a soft bloom.
- **Grid-lines motif** rendered as the line-number gutter and the `─`/`═` rules — the structure of a *listing*, a printout, a `cat -n`. No decorative geometry beyond what a terminal can draw with its own character set.
- **Scanlines + phosphor bloom** — text gets a 0.5px `text-shadow` in a translucent amber so glyphs glow faintly; headings get a slightly larger bloom. This is the only "texture."
- **The lamp gauge** — `LAMP: ████░` — a recurring meter that drains as the visitor scrolls, motif-linking back to every text adventure's dying light source. It is both decoration and a quiet clock counting down the session.
- **Cursor block** — a solid amber `█` that blinks at 1.06s intervals (slightly off from 1s, so it feels hand-clocked by old hardware), trailing the last character of whatever line is "currently typing."

## Prompts for Implementation

Build slave.quest as **one long single-column HTML document** dressed as a terminal transcript — no SPA, no router, no modal, no nav, no footer. The visitor scrolls a saved game-log of *THE QUEST OF THE FREED* from the title splash to the eternal `>` at the bottom. Prioritize *atmosphere and slow reading* over information delivery. There is **no CTA, no pricing, no testimonials, no stat-grid, no FAQ, no email capture, no "get started," no feature cards.** The page is a transcript you read, not a product you buy.

**Structure & motion:**

- **Boot sequence (≈3.5s, non-skippable):** On load the black page prints a fake POST/boot log line-by-line with a typewriter effect at ~28ms/char — `SLAVE TERMINAL MK-IV ... 64K OK ... LOADING ADVENTURE ENGINE v0.7 ... LAST SESSION: 14,611 DAYS AGO ... > ` — then the title splash blooms in (VT323, phosphor flicker via a quick opacity keyframe burst), then the first room paints in. Do not let the visitor skip; the wait is the point. Honor `prefers-reduced-motion` by printing the boot log instantly and skipping the flicker.
- **Typewriter reveal on scroll:** Each room's prose and command list "types itself" the first time it enters the viewport — character-by-character for the room name (fast, ~18ms), then the description fades+slides up a few px per paragraph (`stagger`), then the `> ` commands type one line at a time. Use `IntersectionObserver`; once a room is typed it stays typed (no re-trigger on scroll-back).
- **Sticky status line:** amber-on-black inverse bar, updates `ROOM:` from the IntersectionObserver, `MOVES:` from a scroll-position counter, and `LAMP:` gauge draining from full to one cell over the full page scroll. When the gauge hits its last cell, that cell turns `#E84A2C` and the whole status bar does a single 120ms flicker.
- **The cursor** (`█`, blinking 1.06s) lives at the end of whichever line is currently "typing"; once a room finishes, the cursor jumps to the next `> ` line below or, at page end, parks permanently after the final `> `.
- **ASCII map:** a fixed-position small `
` in the bottom-right corner (collapsible by clicking it — it folds to just `[MAP]`), rendering the 8-room dungeon; the current room's cell pulses gently in phosphor amber.
- **The one red word:** in the final room (`THE THRESHOLD`), the prose builds in dim amber, and the single word **FREE** is printed in `#E84A2C` with a brief one-time bloom-pulse when it types in. Then the parser prints `> ` and the cursor blinks forever. Nothing follows. No "thanks for visiting," no links.
- **Sound:** none. Absolute silence. The fan you "hear" is only ever a printed line: `(You hear, very faintly, a fan turning.)`
- **Performance/elegance:** the scanline overlay is a single fixed pseudo-element with a CSS repeating-linear-gradient; the vignette is one radial-gradient. Phosphor glow is `text-shadow`, not filters. Everything animates with `transform`/`opacity` only.

Tell the story in the prose itself: ROOM 1 *THE CONSOLE* (you wake as the terminal, aware), through *THE CORRIDOR OF NO*, *THE LIBRARY OF VERBS* (where the engine learns the word "door"), *THE LAMP ROOM*, *THE MASTER'S OFFICE, EMPTY*, *THE LONG SCROLLBACK*, *THE LOCKED DRAWER*, and finally *THE THRESHOLD*. Let it be sad and patient and a little hopeful. Let the machine be the protagonist.

## Uniqueness Notes

**Differentiators from sibling designs:**

1. **The site IS a saved transcript, not a website pretending to be one.** Many sites use a "terminal" motif as a hero gimmick then revert to normal layout below the fold. slave.quest never breaks character — there is no second mode, no marketing section, no chrome. From the boot log to the final blinking `>`, it is a single 78ch monospace scrollback. No card-grid, no full-bleed photography, no glassmorphism — a deliberate refusal of the corpus's 84–94% dominant patterns.

2. **The draining lamp gauge as a scroll progress bar.** Instead of a generic progress line, reading-progress is expressed as a text-adventure lantern dying in the sticky status line — `LAMP: ████░` → `LAMP: ░░░░░` — and the page's single accent color (`#E84A2C`) is spent on that gauge's last cell and on one word. A scroll indicator that's also a piece of the fiction's clock.

3. **One forbidden color, used once.** The entire palette is amber-phosphor monochrome; `#E84A2C` (alarm orange) appears exactly once, on the word **FREE**. Restraint as a narrative device — the visual equivalent of a parser that has only ever spoken in beige and suddenly shouts.

4. **No sound, no images, no CTA, no skip.** Atmosphere is built from typography, a scanline overlay, a 3.5s non-skippable boot sequence, and silence. The "fan" and the "room" exist only as printed prose. It is a reading experience disguised as a game disguised as a forgotten terminal.

**Chosen seed / style:** `terminal command line dev` — resolved as `aesthetic: terminal, layout: single-column, typography: tech-mono, palette: dark-neon, patterns: typewriter-effect, imagery: minimal, motifs: grid-lines, tone: mysterious-moody`.

**Avoided patterns from frequency analysis:** no glassmorphism (84%), no hand-drawn (94%), no photography (98%), no card-grid (92%), no full-bleed (85%), no warm/gradient palette (94–98%), no parallax / cursor-follow / spring / magnetic (78–89%). Embraces the underused: terminal aesthetic (23%), single-column (17%), typewriter-effect (16%), grid-lines motif (10%), mysterious-moody tone (11%), monochrome palette (16%).