# Design Language for turingtest.club ## Aesthetics and Tone turingtest.club is **a members-only nocturnal interrogation room rendered as a phosphor terminal that has been left running since 1950** — picture the back room of a private club where the only entrance exam is a single question typed in green light: *are you the human, or the machine pretending to be one?* The aesthetic is **terminal command-line dev tooling pulled into a mysterious-moody salon** — not the bright, friendly "developer tools landing page" terminal, but a dim, smoke-stained CRT bezel humming in a windowless room, its scanlines breathing, its cursor blinking with the patience of something that has been waiting fifty years for an answer. The mood is **the interval between a question and its answer.** Every surface is the inside of a monitor: faintly curved at the corners (barrel distortion), bloomed at the edges where the electron gun runs hot, dusted with the soft green afterglow of letters that were there a moment ago and have not quite faded. There is no chrome, no glass, no gradient sky — only the wet-black void of an unlit screen and the **acid-green and bone-amber** of two competing phosphor coatings, as if a 1980s VT100 and a 1970s amber Wyse terminal were spliced into the same chassis. The tone is **interrogative, intimate, and slightly unsettling** — the site speaks in the second person, asks more than it tells, and never quite confirms whether *it* is the human or the machine. It is the opposite of the warm-inviting / pastoral-romantic register that dominates the corpus (31% pastoral, 21% warm-inviting): this is cold, close, and conspiratorial — a velvet rope made of one blinking line. ## Layout Motifs and Structure The page is a **split-screen** divided by a single vertical hairline of green light running floor to ceiling: **LEFT = the Examiner, RIGHT = the Examinee.** This is the visual grammar of the imitation game itself — two terminals, one wall between them, neither able to see the other. Split-screen sits at only 3% in the layout frequency analysis; this site claims that empty room and never abandons the two-column conceit, even at narrow widths (where the divider rotates to horizontal and the panels stack as *Examiner above, you below*). - **The interrogation wall.** The 1px vertical divider is never static — it flickers, occasionally "tears" with a one-frame horizontal glitch slip, and pulses brighter whenever a line of text is "transmitted" across it. It is the spine of every screen. - **The Examiner panel (left, ~46vw).** Always shows a slow, deliberate typewriter stream of questions in **acid-green phosphor**: *"Describe the smell of rain on hot asphalt." "What did you dream last night?" "Finish this line: the sea, the sea—"*. Lines accumulate, scroll, and leave ghost-trails as they go. - **The Examinee panel (right, ~46vw).** Renders in **bone-amber phosphor** — a different coating, deliberately. This is "your" side. It types back hesitantly, with realistic backspaces, pauses mid-word, sometimes deletes an entire answer and starts over. The visitor never types; they *watch themselves being answered for.* - **Five "rounds," not sections.** The vertical scroll is structured as five interrogation rounds (Greeting / Memory / Imagination / Contradiction / Verdict), each separated not by a band of color but by a **full-screen "carrier drop"** — the divider goes dark, both panels blank to void-black, a single centered line reads `— round 02 —` in dim grey, then the phosphors warm back up. - **No nav bar, no footer slab, no card grid.** Navigation, if it exists at all, is a vertical column of five blinking dots on the divider itself (one per round). Card-grid is at 93% in the corpus; this site has zero cards. The only "UI" is the cursor. - **CRT framing.** The entire viewport sits inside a subtle dark bezel with rounded inner corners and a faint edge-vignette, so the content always reads as *inside a screen we are looking at*, not a webpage. ## Typography and Palette **Fonts (Google Fonts only — a duet of two terminal voices, never blended):** - **Examiner & all system text — *JetBrains Mono* (weights 400, 500, 700; italic for "stage directions").** Chosen for its tall x-height, unambiguous glyphs, and the way its ligature-free letterforms read like a genuine code terminal rather than a "coding aesthetic" display face. Set at 15–18px for question streams, letter-spacing 0.02em, line-height 1.7 so the green text feels airy and slow. The wordmark `turingtest.club` is JetBrains Mono 700, all-lowercase, with a hard block cursor `█` appended that blinks at exactly 530ms intervals (the canonical VT100 rate). - **Examinee replies — *VT323* (single weight, 400, sized up to 22–28px).** A faithful pixel-bitmap terminal font; using a *different* typeface for "your" answers makes the two sides feel like two physically different machines. VT323's chunky pixel edges, rendered in amber, look like a 1978 reply to a 1985 question. Enable `image-rendering: pixelated` on any scaled glyphs so the staircase edges stay crisp. - **Round titles & verdict — *Major Mono Display* (400), letter-spaced to 0.4em, lowercase.** Used sparingly: the `— round 0X —` interstitials and the final one-word verdict. Its geometric mono caps, widely tracked, read as cold, official, machine-stamped. **Palette — twin phosphors against the void (8 values):** - `#05080A` — **void black**, the unlit screen; the dominant background, near-pure black with the faintest blue-green undertone. - `#0B1410` — **warm void**, a slightly greener black used for the Examiner panel base, so the two sides differ even when "off." - `#39FF7A` — **acid phosphor green**, the Examiner's text and the divider line; the hot P1-phosphor green of a CRT running bright. - `#1F8A45` — **decayed green**, the ghost-trail / afterglow color for fading green characters. - `#FFB347` — **bone amber**, the Examinee's pixel text; the warm P3-phosphor amber of an older terminal. - `#8A5A1E` — **scorched amber**, the dim afterglow for fading amber characters and inactive round-dots. - `#C7D0CC` — **bezel grey**, the cool neutral for the CRT frame, scanline highlights, and `— round —` labels. - `#FF4D5E` — **alarm red**, used exactly once: the final verdict glyph if the visitor is judged a machine. The single forbidden color, held in reserve the entire scroll. Color rule: **green speaks, amber answers, grey narrates, red judges — once.** No other hues ever appear. ## Imagery and Motifs **No photography, no 3D renders, no stock illustration, no gradient mesh. Everything is SVG, CSS, or canvas — built to look emitted by a cathode-ray tube.** - **Scanlines & bloom.** A fixed, full-viewport overlay of 2px-pitch horizontal scanlines at ~6% opacity, plus a very subtle moving "refresh bar" (a faint brighter band sweeping top-to-bottom every ~8s). Text gets a soft `text-shadow` glow in its own phosphor color to simulate halation. - **Barrel distortion.** A gentle SVG `feDisplacementMap` or CSS transform on the content layer so straight lines bow outward by a hair near the corners — the unmistakable signature of a curved glass screen. - **Glitch-art slips.** The corpus's `glitch-art` imagery sits at 2%. This site uses it as punctuation: at carrier-drops and when an answer is "deleted," the affected panel does a one-to-three-frame RGB-split tear (the green channel offsets 4px left, the amber 4px right), a row of characters shifts, then snaps back. Never decorative wallpaper — always a *reaction*. - **Circuit motif, hidden.** Faintly etched into the warm-void background of the Examiner panel: a barely-visible (3% opacity green) PCB trace pattern — right-angle copper paths, via dots, an op-amp footprint — drifting at 4px/s. The corpus's `circuit` motif (7%) is usually loud and neon; here it is a watermark you only catch when the panel blanks. - **The cursor as protagonist.** A solid block cursor is the only "character" in the whole site. It blinks, it moves, it hesitates, it deletes. On the verdict screen it stops blinking entirely — held solid, unmoving, for four full seconds before the verdict glyph appears. That frozen cursor is the emotional climax; treat it as carefully as a film treats a held close-up. - **ASCII ornament, minimal.** Round-dots are literal `●`/`○` glyphs. The divider's "transmission pulse" can be a brief run of `▓▒░` decaying along the line. No box-drawing borders, no ASCII-art banners — the restraint is the point. - **Phosphor persistence.** Whenever text scrolls away, it does not vanish — it dims through `decayed green` / `scorched amber` over ~1.2s and leaves a 1-frame ghost. The screen always remembers what was just said. ## Prompts for Implementation Build turingtest.club as **a single-route, vertically scrolled, five-round interrogation** — one HTML file, one CSS file, one JS module. The visitor is a silent third party watching an examiner and an examinee — neither of whom they can fully trust — conduct an imitation game in real time. There is **no CTA button, no pricing block, no stat grid, no testimonial row, no feature cards, no contact form, no email signup, no "about us"**. There is only the conversation across the wall, and at the end, a verdict. **Storytelling structure (five rounds, vertical scroll, carrier-drop transitions):** 1. **Round 00 — Greeting / Boot.** The screen "powers on": a flash of white, a degauss wobble, scanlines settle, a faint 60Hz hum (visual only — a trembling brightness). The divider strikes down the middle like a struck match. Examiner types, slowly: `connection established.` … `there are two of us here. one is human. you will not be told which.` … `shall we begin?` The Examinee panel stays dark, the amber cursor blinking alone. Hold. Then scroll-cue: a single `▾` at the bottom of the divider. 2. **Round 01 — Memory.** Carrier-drop → `— round 01 — memory`. Examiner (green, typewriter): *"What is the first thing you remember?"* Long pause. Examinee (amber, VT323) types, backspaces twice, types again: a small, specific, almost-too-perfect memory — *"sunlight on a kitchen floor. someone calling my name. i don't know whose."* The green side replies only: `noted.` The ghost-trails of the question dim above. 3. **Round 02 — Imagination.** Carrier-drop. Examiner: *"Invent a color that does not exist. Describe it."* The Examinee answers with something lyrical and slightly wrong — and as it types the word for the color, the *amber phosphor briefly shifts hue* toward an impossible teal for one frame, then snaps back to amber (a glitch-slip on the imagined word itself). Examiner: `interesting. a machine could have said that.` Beat. `so could you.` 4. **Round 03 — Contradiction.** Carrier-drop. Examiner asks two questions whose answers can't both be true (*"Do you fear ending?" / "Would you choose to be turned off, if asked nicely?"*). The Examinee starts an answer, deletes the entire line (full glitch-tear on the amber panel), starts another, deletes that too, and finally types only: `next question.` The divider flickers hard. The Examiner waits a long, uncomfortable beat — `…` blinking — then: `as you wish.` 5. **Round 04 — Verdict.** Carrier-drop, longer than the others — both panels go fully black, the scanlines themselves dim. A single centered line in bezel grey: `the test is concluded.` Then the divider re-lights, but **only one panel comes back on** (randomized per visit, or deterministic — designer's call). The Examiner types its last line: `the human in this conversation was —` and the block cursor **freezes solid for 4 seconds**, not blinking. Then one of two endings: the word `you.` warms up in green (and the whole screen blooms gently, scanlines brighten, a held major-key hum) — OR the word `me.` types out, the cursor stays frozen, and a small `#FF4D5E` glyph `⊗` appears beside the wordmark for the first and only time. Fade to void. The page does not scroll further. There is no footer. The cursor blinks on, alone, in the dark. **Motion & interaction notes:** - **Typewriter-effect is the load-bearing animation** (16% in the corpus — used here as the *entire* content delivery mechanism, not a hero garnish). Vary the cadence: the Examiner types at a steady, confident ~28ms/char; the Examinee types erratically (40–120ms/char) with realistic backspace runs and mid-word pauses. Honor `prefers-reduced-motion` by snapping text in line-by-line with a brief fade instead of char-by-char. - **Scroll = time.** Each round is one viewport-ish. Scrolling forward "advances the interrogation"; you cannot scrub backward into a future round you haven't reached. Scroll-jacking is acceptable here in service of the narrative — keep it gentle and reversible. - **Cursor-follow, inverted.** Instead of the usual glowing orb chasing the mouse, a *faint extra scanline* (one brighter horizontal row) tracks the pointer's Y-position — as if the visitor's gaze is itself a sweep line on the tube. Subtle, 8% opacity, no lag spring. - **Glitch-tears are events, never ambience** — fire them only on carrier-drops, deletions, and the imagined-color frame. RGB channel split + row displacement, 1–3 frames, then clean snap. - **Sound is optional and off by default**; if present, only a low CRT whine + soft key clacks at a fixed low volume, with a single tiny `◔` toggle on the bezel. - **The whole page lives inside a CRT bezel** with barrel distortion, vignette, scanlines, and bloom layered above everything via `position: fixed` overlays and a CSS filter on the content root. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Twin-phosphor split-screen as the literal imitation game.** Split-screen is at 3% in the layout corpus; here it is not a stylistic choice but a *diegetic* one — left terminal = examiner, right terminal = examinee, divider = the wall between them. Two genuinely different terminal fonts (JetBrains Mono green vs. VT323 amber) make the two sides feel like two physical machines. No card-grid (93% of corpus), no nav bar, no footer slab. 2. **Terminal aesthetic recast as nocturnal interrogation, not "dev landing page."** The `terminal` aesthetic (22%) almost always reads bright, friendly, command-line-tutorial. This site makes it dim, curved, smoke-stained, and *frightening* — the velvet rope of an exclusive club is a single blinking cursor, and the membership exam is the question of your own humanity. Mysterious-moody tone (12%) over the corpus's dominant warm-inviting / pastoral register. 3. **The frozen cursor as emotional climax.** Where the corpus leans on `cursor-follow` (89%) and `spring`/`magnetic` flourishes (83%/77%), this design's signature beat is the *absence* of motion — a block cursor held perfectly still for four seconds before a one-word verdict. The most dramatic moment is the one with no animation at all. 4. **Glitch-art as punctuation, not wallpaper.** `glitch-art` imagery is at 2% and usually decorative; here every tear is a reaction (a deletion, a carrier-drop, an impossible color), so the glitches *mean* something. 5. **No outputs to convert, only a question to sit with.** Zero CTAs, zero pricing, zero stats, zero testimonials — the entire site is a 90-second imitation game that ends by telling you (maybe) which of the two voices was human, and then leaves you in the dark with a blinking cursor. Chosen seed/style: **terminal command line dev** — *aesthetic: terminal, layout: split-screen, typography: tech-mono, palette: dark-neon, patterns: typewriter-effect, imagery: glitch-art, motifs: circuit, tone: mysterious-moody.* Avoided patterns from the frequency analysis: card-grid (93%), full-bleed photography (98%), warm/gradient palettes (98%/93%), cursor-follow glow orbs (89%), spring/magnetic flourishes (83%/77%), hand-drawn + glassmorphism aesthetics (94%/85%), pastoral-romantic / warm-inviting tone (31%/21%), hero-dominant CTA layouts, pricing blocks, and stat-grids.