# Design Language for turingtest.quest ## Aesthetics and Tone turingtest.quest is **an interrogation room rebuilt as a stage set** — a teletype-lit chamber where the question "are you a person?" is treated less like a diagnostic and more like a duel of manners. The governing image is the *imitation game* itself: two rooms, one judge, slips of paper sliding under a door. The site behaves like a transcript that is still being typed — the visitor is the interrogator (player C), and the page is the partition between them and an interlocutor who may or may not be flesh. The mood is dry, courteous, slightly theatrical, with the patience of a chess clock: warm where you expect cold, intimate where you expect clinical. This is **terminal aesthetic deliberately stripped of its clichés** — no green phosphor, no rain of katakana, no hacker cosplay. Instead: warm ribbon-ink amber on the colour of newsprint left in a drawer, the glow of a single desk lamp, the hush of a room where someone is choosing their next sentence carefully. The tone is *mysterious-moody* crossed with *conversational* — it speaks in second person, often answers a question with a question, and treats every interaction as a small Turing trial the visitor is unknowingly administering. Nothing shouts. Everything waits for a reply. ## Layout Motifs and Structure The spine is a **split-screen partition that never fully resolves** — a vertical seam runs down the viewport like the gap under the interrogation door, and content alternates which side it speaks from. Left of the seam: the *interrogator's bench* — your prompts, your questions, set flush-left in a narrow 4-column measure. Right of the seam: the *respondent's slip* — replies that arrive a beat late, indented, sometimes contradicting themselves. On a 12-column grid the seam sits at column 6, but it drifts ±1 column per section as if the door is being nudged. Sections are not "panels" but **exchanges** — numbered like a transcript (`EXCHANGE 03 · 04:17 elapsed`), each one a single back-and-forth that occupies a full viewport height so the visitor scrolls the way a conversation unfolds: one turn at a time. There is no hero banner; the first screen is simply a cursor blinking after the word `> ` and the elapsed-time clock ticking up. Navigation is a thin left-margin rail of exchange numbers, like the tab stops on a teleprinter. On mobile the seam becomes horizontal: prompt above, the partition as a hairline rule, reply below — a stacked transcript that scrolls as one continuous ribbon of paper. Whitespace is used as *silence*: generous, deliberate gaps before a reply lands, so the reader feels the pause. ## Typography and Palette Two typefaces, both from Google Fonts, set in dialogue. **IBM Plex Mono** is the voice of the *transcript* — every prompt, every reply, every timestamp and exchange label is monospaced, because in this room everything is on the record; it runs at 16.5px / 1.75 leading in a measure of about 60 characters, with the cursor (`▌`) as a recurring glyph. **Newsreader** (a Google Fonts transitional serif with true italics) is the voice of the *narrator* — the rare connective paragraphs, the epigraphs from Turing's 1950 paper, the asides set in italic; it appears at `clamp(1.15rem, 1.4vw, 1.45rem)` and never in mono's company without a clear hairline between them. Display headings are IBM Plex Mono at heavy weight, tracked wide and uppercased, sized `clamp(2rem, 5vw, 4.2rem)`. The palette is **warm amber ribbon-ink on aged paper, with a single interrogating spotlight**: - `#15110B` — *ribbon black*, the deepest ink, used for body text and the seam line - `#F4ECDD` — *drawer paper*, the dominant background, warm off-white like a manila folder gone soft - `#E0833C` — *lamp amber*, the desk-lamp glow; the one accent — used for the cursor, active exchange numbers, the elapsed clock - `#A6411E` — *redaction rust*, a burnt sienna for emphasis, struck-through "lies," and hover states - `#7C7163` — *carbon grey*, a muted taupe for secondary text, timestamps, and the respondent's slips before they're "read" - `#2A2118` — *back-room dark*, an optional inverted mode for the final exchange, where the lamp is the only thing lit Selection highlight is `#E0833C` at 22% over text; links are ribbon black with a `redaction rust` underline that *draws itself* left-to-right on hover, then flickers once like a typewriter key sticking. ## Imagery and Motifs No photography. The visual library is **the furniture of an imitation game**: - **The seam** — a 1px `ribbon black` vertical (or horizontal) line, occasionally interrupted by a small gap as if a slip of paper just passed through; a faint `lamp amber` glow bleeds from one side. - **Slips of paper** — replies arrive as small skewed rectangles (±0.4° rotation), each with a torn top edge rendered in SVG, a faint paper-grain noise overlay at 4% opacity, and a thin drop shadow that says "this was just slid across a desk." - **The elapsed clock** — a monospaced `MM:SS` readout in `lamp amber` that ticks up the whole time you're on the page; it is the closest thing to a logo. - **Typewriter glyphs** — the cursor `▌`, the carriage-return arrow `⏎`, em-dash pauses, and the occasional overstruck character (a letter typed, X'd out, retyped) used as a decorative texture in margins. - **Question marks as ornament** — oversized `?` glyphs in `lamp amber` at 4% opacity floating behind exchanges, rotated and overlapping like a thought that won't settle. - **Redaction bars** — solid `ribbon black` rectangles that, on hover or scroll-into-view, *type away* to reveal the text beneath, character by character. - **A single light source** — every shadow in the layout falls consistently away from an implied desk lamp in the upper-left, so the page feels physically lit, not flat. ## Prompts for Implementation **HTML/CSS approach:** Build the root as CSS Grid, 12 columns, with a `--seam` custom property (default `6`) that each `
` can offset by ±1 via `:nth-child` rules; render the seam itself as a `::before` pseudo-element on the grid container — `width: 1px; background: #15110B; box-shadow: 0 0 24px rgba(224,131,60,0.18)`. Each exchange is `min-height: 100vh`, `display: grid`, with the interrogator's prompt in the left tracks and the respondent's slip in the right tracks; give the slips `transform: rotate(-0.4deg)` (alternate sign per slip), a torn-edge SVG mask on the top border, and a `filter: drop-shadow(2px 6px 8px rgba(21,17,11,0.12))` consistent with the upper-left lamp. Paper grain: a tiled SVG `feTurbulence` noise at `opacity: 0.04`, fixed to the background. **JS / motion — storytelling first:** - **Self-typing transcript:** as each exchange scrolls into view (IntersectionObserver), the interrogator's prompt types itself out at ~38 chars/sec with a blinking `▌` cursor, *pauses* 600–1100ms (the "thinking" beat — vary it, never the same length), then the respondent's slip slides in from behind the seam and the reply types out, occasionally **backspacing** to "correct" a word mid-sentence. Honour `prefers-reduced-motion` by rendering everything instantly with the cursor parked at the end. - **The elapsed clock** starts at `00:00` on load and ticks every second in `lamp amber`, fixed top-right; it is the page's heartbeat. - **Redaction reveals:** any `` shows as a `ribbon black` bar until in view, then "types away" to reveal the words; some never reveal — they just sit there, a sentence the respondent refused to finish. - **Cursor presence (not a gimmick):** the visitor's mouse leaves a faint `lamp amber` trail-dot that lags with spring easing — the only sign that *you*, the interrogator, are also being watched. On the final exchange the page inverts to `back-room dark` and the trail-dot becomes the brightest thing onscreen. - **The unanswerable question:** the last screen poses a question to *you* with a real text input; whatever you type, the response types back a beat later — "I can't tell either." Then the clock stops. - Underlines draw left-to-right on link hover, then flicker once. Section numbers in the left rail illuminate to `lamp amber` as their exchange becomes active. **Bias toward a full-screen narrative experience** — this is a single scrolling transcript of an interrogation, read one turn at a time, not a marketing page. **AVOID:** CTA buttons, pricing blocks, stat-grids, feature cards, testimonial carousels, hero-with-signup. There is nothing to buy here — only a question being asked, slowly, in a warmly lit room. ## Uniqueness Notes **Differentiators from other CMassC designs:** 1. **Terminal aesthetic with its clichés surgically removed** — terminal sits at ~22% in the corpus but is near-universally rendered as green-on-black hacker cosplay; this site is warm amber ribbon-ink on manila paper, lit by a desk lamp, and reads as a *teletype transcript / interrogation room*, not a hacker movie. The split-screen "partition" layout (only ~3% usage) doubles as the literal door of Turing's imitation game. 2. **Conversation-as-scroll structure** — content is not sections or cards (card-grid is 93%, hero-dominant 15%) but *exchanges*: numbered back-and-forths, each a full viewport, that type themselves out with deliberate "thinking" pauses and mid-sentence backspacing. The page is a transcript still being written. 3. **The elapsed clock as the only logo, and the visitor cast as interrogator** — no nav bar, no banner, no brand mark; just a monospaced clock ticking up and a blinking cursor. The whole site is a Turing trial the visitor administers without being told, ending with a real input that turns the question back on them and a screen that goes dark. 4. **Typography pairing of IBM Plex Mono (the record) with Newsreader serif italics (the narrator)** — mono is at 93% but almost never set in genuine dialogue with a transitional serif used purely for epigraphs from Turing's 1950 paper; the hairline rule that always separates the two voices is itself a motif. 5. **Redaction-bar reveals and overstruck typewriter glyphs** as decorative texture — a visual language drawn from carbon-copy teleprinter paper rather than the corpus-dominant hand-drawn (94%), glassmorphism (85%), or photography (98%). **Chosen seed/style:** `terminal command line dev` — synthesised as `aesthetic: terminal, layout: split-screen, typography: mono + serif-revival (IBM Plex Mono / Newsreader), palette: warm + duotone (amber ribbon-ink on aged paper), patterns: typewriter-effect + cursor-follow + underline-draw + fade-reveal, imagery: noise-texture + minimal, motifs: grid-lines + abstract-tech, tone: mysterious-moody + conversational`. **Avoided patterns from frequency analysis:** hand-drawn (94%), glassmorphism (85%), photography (98%), warm-but-pastoral palettes, card-grid (93%), full-bleed hero, parallax-as-default (88%), tilt-3d, gradient-mesh — none are used. Warmth and mono appear (they're near-inescapable), but recast: warmth as desk-lamp amber rather than cottagecore honey, mono as on-the-record transcript rather than dev-docs decoration.