# Design Language for turingtest.quest ## Aesthetics and Tone `turingtest.quest` is a **cultural interrogation parlor** — a horizontal salon where machines and humans face each other across a long table, and the question of what separates them dissolves into watercolor wash. The premise is the Turing Test, but rendered not as cold computer science but as an intimate, cross-cultural ceremony: part tea ritual, part carnival booth, part philosophical duel played out in ink and pigment. The aesthetic is **watercolor over geometry** — Futura's razor-sharp circles and right angles bleeding into hand-painted washes of navy and tarnished gold. Think of a 1930s Japanese modernist poster for a travelling lecture series: the typography is confident and mechanical, the background is living and stained. Nothing is pristine. Every panel looks like it was printed on dampened paper that took the ink unevenly. Tone: **energetic-ceremonial**. The site pulses. It has a heartbeat — a literal soft throb on key elements suggesting that something alive is waiting behind every question. There is levity but also weight. The cultural motifs — calligraphic brushwork, geometric mandalas, ukiyo-e horizon lines, Celtic knotwork fragments — rotate section by section, each one suggesting a different civilization's version of the same question: *can you tell?* Mood references: Bauhaus poster meets Hiroshige woodblock, animated by a quiet electrical current. ## Layout Motifs and Structure The entire site scrolls **horizontally**. This is the core structural commitment. Panels advance left-to-right like frames in a storyboard or pages in an accordion-folded book (orihon binding). This is rare — `horizontal-scroll` registers at 2% frequency — and it fits the domain perfectly: the Turing Test is a sequence of exchanges, not a stack. **Panel system:** - Each panel is `100vw × 100vh`, snapping on scroll with `scroll-snap-type: x mandatory` on the root container - Panels are labeled with large ordinal numerals (01, 02, 03…) rendered in Futura-weight geometry, acting as chapter markers - The horizontal axis is the **conversation axis** — questions move right, implying forward progress through an exchange - Panels alternate between two compositional modes: - **Inquiry panels**: text-dominant, large question set in the center against a pale watercolor field, with a thin navy rule framing it like a printed card - **Response panels**: full-bleed watercolor imagery (generated CSS `backdrop-filter` + SVG feTurbulence noise + layered radial gradients to simulate washes), with text overlaid in white Futura on dark **Navigation:** - A persistent horizontal progress indicator at the bottom: a thin `2px` navy line with a metallic gold dot (`#C5A028`) sliding along it — like an indicator on a cassette tape or a reel-to-reel - Left/right arrow keys and swipe gestures advance panels - Panel count shown as `01 / 07` in the top-right, Futura numerals, tarnished gold **Micro-layout within panels:** - Inquiry text: vertically and horizontally centered, constrained to `max-width: 640px`, generous padding `5vw` - Response panels: off-center composition, text anchored to bottom-left with `padding: 5vh 5vw` - Cultural motif SVGs appear in corners, rotating slowly (24s loop), serving as visual punctuation ## Typography and Palette **Primary display — [Jost](https://fonts.google.com/specimen/Jost)** (Google Fonts, weights 100–900) The closest Google Fonts equivalent to Futura's geometric sans-serif DNA. Used for all headlines, panel numerals, and UI labels. At display scale (`font-size: clamp(3rem, 7vw, 6.5rem)`), Jost's perfect circles and uniform stroke weight channel Futura's constructivist authority. Set in weight 600–700 for the main question text. **Secondary — [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono)** (Google Fonts, weights 300–700) Used for the "machine voice" — any content presented as coming from an AI respondent. Mono spacing implies computed output. Set at `font-size: 0.95rem`, `letter-spacing: 0.02em`, color `#A89060` (tarnished gold on dark) or `#1A2744` (deep navy on light). **Tertiary — [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville)** (Google Fonts) Used sparingly for pull-quotes, the "human voice" responses, long-form essay sections. Baskerville's humanist warmth contrasts with Jost's geometry — the typographic embodiment of the human-vs-machine axis. **Color Palette — Navy Metallic:** | Name | Hex | Usage | |------|-----|-------| | Deep Navy | `#0D1B3E` | Primary backgrounds, dark panels | | Ink Navy | `#1A2F5C` | Secondary navy, medium depth | | Pale Linen | `#F2EDE4` | Light panel backgrounds, the "paper" | | Tarnished Gold | `#C5A028` | Accents, the progress dot, metallic highlight | | Burnished Copper | `#A0693A` | Secondary metallic, watercolor warm mid | | Watercolor Cerulean | `#4A7FA5` | Wash tones in the CSS-simulated watercolor | | Wash Lavender | `#8B7CB6` | Accent wash color for cultural panel motifs | | Ghost White | `#F8F6F1` | Text on dark, UI labels | Watercolor simulation uses layered `radial-gradient` and `conic-gradient` at very low opacity (`0.12–0.30`), combined with `filter: blur(40px)` blobs and SVG `feTurbulence` displacement maps to produce soft, bleeding edges. No raster images needed for the "painted" effect. ## Imagery and Motifs **Cultural Motif Library (SVG, inline):** Each panel hosts one primary cultural motif, rendered as a thin-line SVG in `#C5A028` at `opacity: 0.18`, positioned absolutely in a corner or edge, slowly rotating: 1. **Enso circle** (Japanese Zen) — panel 01, top-right: a single brushstroke circle, simulated with SVG `stroke-dasharray` and `stroke-dashoffset` animation that draws it on entry 2. **Geometric mandala fragment** (Islamic geometric) — panel 02, bottom-left: an 8-fold star polygon, `stroke-width: 1px`, no fill 3. **Celtic knotwork band** — panel 03, top-left: a continuous interlace strip, SVG path, `stroke-width: 1.5px` 4. **Ukiyo-e horizon wave** (Hokusai-derived) — panel 04, bottom: a simplified wave crest silhouette in navy 5. **Mayan glyph block outline** — panel 05, top-right: abstract rectangular glyph structure, geometric abstraction 6. **African kente strip** — panel 06, left: a vertical strip of repeating geometric bands in gold and copper 7. **Greek meander border** — panel 07, bottom: a continuous key/meander pattern strip **Pulse-Attention Animation System:** The central question text in each inquiry panel has a `pulse-attention` behavior: - A soft radial glow (`box-shadow: 0 0 60px rgba(197, 160, 40, 0.15)`) pulses on a 3s `ease-in-out` loop - The question mark (or final word) pulses independently at a slightly different phase (3.4s), creating a heartbeat-like offset - This never distracts — opacity range `0.0 → 0.25 → 0.0`, always subtle **Organic Blob Underlayer:** Behind the Futura type in response panels, CSS organic blobs (`border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%`, animated with `border-radius` keyframes) in navy and cerulean float slowly, suggesting biological forms amid the mechanical typography. Each blob is `position: absolute`, `pointer-events: none`, `mix-blend-mode: multiply` on light panels and `screen` on dark. **Panel Transition:** Between panels, a `0.6s` ease horizontal transform. No fade — the scroll is physical, not cinematic. The horizontal momentum should feel like turning a page. ## Prompts for Implementation Build the site as a **single HTML file** with all CSS inline in `