# Design Language for simai.quest ## Aesthetics and Tone simai.quest is a **wind-tunnel for minds** — a quiet research facility where artificial agents are placed inside a tiny isometric model town and left to rehearse being alive while instruments watch. The whole site reads as the *operating manual and live telemetry wall* of that facility. The name carries three readings simultaneously, and the design honors all of them: **SIM·AI** (a simulation in which AI is the test subject), **σ-mai / "say-my…"** (the half-finished sentence of a model learning to speak), and the Japanese **舞 / mai** ("dance") — the small, looping, almost ritual choreography a synthetic agent performs when it has no real stakes, only a scenario. The aesthetic is **isometric blueprint** rendered in **phosphor line-work on deep night-glass**: imagine a hand-drafted axonometric of a model village — post office, café, two houses, a bus stop, a pond — printed in cyan and pale-amber hairlines onto a sheet of darkened drafting film, then back-lit so the lines glow faintly the way an old vector display does after the room lights go out. Nothing is filled; everything is *wireframe*. Buildings are open cages of edges. The agents inside are not characters with faces — they are **small luminous tokens** (a circle, a triangle, a notched square) that leave fading trails as they move between waypoints. Tone: **zen-contemplative**, but the specific zen of *watching a terrarium*. Patient. Slightly clinical. Faintly melancholy — these agents are very busy and none of it is real, and the copy never lets you forget that. The voice is the lab notebook of a researcher who has grown fond of the simulation: precise units, dry observations ("Agent C-7 has visited the closed post office four times today; it does not appear discouraged"), and the occasional unscientific sentence that slips through. No hype. No "revolutionary." The facility does not sell anything; it lets you look. ## Layout Motifs and Structure The page is built on **layered-depth**, not a card grid — depth is the entire metaphor, because an isometric world *has* layers (ground plane, building shells, agent layer, instrument overlay, annotation layer) and the site stacks its content the same way. **The standing diorama.** The hero is a single large isometric scene — the model town — that occupies ~92vh and is *pinned* while the first stretch of copy scrolls past it. As you scroll, parallax separates the layers: the ground grid drifts slowest, building shells a touch faster, agent tokens faster still, and a thin instrument grid (tick marks, a coordinate readout in the corner) floats nearly with the viewport. The town never leaves; it just gets *annotated* — callout lines draw themselves from a sentence in the running text to the exact rooftop or token it describes. **Sections as "passes."** Below the diorama, content is organized into numbered **Passes** (Pass 01 — Premise; Pass 02 — The Town; Pass 03 — The Agents; Pass 04 — A Day, Logged; Pass 05 — What Breaks; Pass 06 — The Glass), each ~100vh. A Pass is a **layered plate**: the isometric scene re-frames to a relevant corner (the café, a single house, the bus stop), and text columns sit at *two distinct z-depths* — a near column in crisp amber type, a far column set slightly smaller, slightly cooler, slightly blurred, as if read through the drafting film. Reading the page is reading *through* it. **The margin rail.** A persistent ~64px left rail carries an isometric "elevation key" — a vertical stack of tiny floor-plan glyphs marking which Pass you're in — plus a live coordinate-style scroll readout (`E 0420 · N 0117 · z 03`). On mobile the rail collapses to a 3px luminous spine with a single glowing node per Pass. **No card grid. No bento. No dashboard.** Where other facilities would put a stat-grid, simai.quest puts a **single slow log** — one line appearing every few seconds, timestamped, as if streaming from the running sim. Where they'd put a CTA, it puts a sentence and a fade. ## Typography and Palette **Typefaces (all Google Fonts, all real):** - **Space Grotesk** — display and headings. Used for Pass numbers, the wordmark, and section titles, set in `clamp(2.1rem, 4.4vw, 4.4rem)`, tight tracking, weight 500–700. Its faintly mechanical, slightly humanist letterforms read like instrument labelling that someone cared about. - **IBM Plex Mono** — the *near* body column, telemetry, log lines, coordinate readouts, agent IDs, captions. 0.95rem, line-height 1.7. Monospace because everything here is a reading from a machine; the even rhythm makes the prose feel logged rather than written. - **IBM Plex Sans** — the *far* body column (the text "behind the film"), set 0.9rem, line-height 1.78, letter-spacing +0.1px, color cooled and slightly translucent. Same family as the mono so the two columns feel like one voice at two distances. Numerals everywhere are tabular. Units are always written out small (`m`, `s`, `kcal-equivalent`, `ticks`). Italics are rare and reserved for the researcher's unscientific asides. **Palette — phosphor on night-glass (midnight-blue base, deliberately cool against the corpus's 98%-warm bias):** - `#0B1020` — *night-glass*, the base background; almost black, faintly blue. - `#10182E` — *drafting film*, panel and far-layer surfaces, one step up from base. - `#5FE3D0` — *phosphor cyan*, the primary line-work, agent trails, active callouts, the wordmark. - `#E9C77A` — *lamp amber*, the near body text and warm hairlines — the one warm note, used sparingly so it reads as *lamplight on a cool room*, not a warm palette. - `#8FA0C8` — *cool slate*, the far body text and inactive UI; the "behind the film" color. - `#C7556B` — *fault rose*, used only for anomalies in the log and "What Breaks" — an agent that has stalled, a contradiction in a scenario. Never decorative. - `#1B2742` — *grid ink*, the faint isometric floor lines, near-invisible until back-lit on hover. Contrast is intentionally hushed in the far layer and crisp in the near layer; the design *wants* you to lean in to read the thing behind the glass. ## Imagery and Motifs **The isometric model town (line-illustration, hand-drafted feel).** Every building is a wireframe shell — visible far edges, hidden edges drawn as 1px dotted lines, no fills, no textures, no shadows except a single thin ground-projection line per object. Drawn as inline SVG so paths can animate. Repeating cast: a hip-roofed post office with a clock that always reads the same time, a café with two outdoor tables, two near-identical houses (the "twin study"), a bus stop with no bus, a kidney-shaped pond, a single tree rendered as a small explosion of straight lines. The town is small enough to take in at once — that's the point. It is a *box*, and the agents know it. **Agents as tokens, not avatars.** Each simulated mind is a small glyph: `○` curious, `△` purposeful, `▽` resting, `▢ with a notch` confused. They glow phosphor cyan, leave a trail that fades over ~1.2s, and emit a tiny ID label (`C-7`, `D-3`, `K-1`) when the cursor nears them. When two agents share a tile, their tokens overlap and briefly brighten — the closest the site comes to depicting a relationship. **Instrument overlay.** A faint, optional layer of tick marks, a coordinate gnomon in one corner, ranging brackets `[` `]` that snap around whatever the running copy is currently describing, and a thin oscilloscope-style readout strip along the very bottom of the diorama showing one agent's "activity" as a quiet seismograph line. **The log.** A monospace ticker — `0731 · K-1 entered café · 0739 · K-1 ordered nothing · 0744 · K-1 left · ` — that streams slowly throughout the page, occasionally surfacing a `⚠ fault-rose` line in "What Breaks." **Motif of the closed door.** Recurring small drawing: a door drawn ajar with a dotted swing-arc, captioned variants ("the post office, modeled but never opened," "a door the town has but the simulation doesn't"). It's the site's quiet thesis about simulated worlds. No photography. No 3D renders. No stock anything. No mascots. Just drafted lines, glowing faintly. ## Prompts for Implementation Build simai.quest as **one long, single-document, immersive vertical scroll** — six Passes, no SPA router, no modals, no nav menu beyond the elevation rail, no hamburger. The visitor descends through the facility's manual; the model town is always somewhere on screen. - **The pinned diorama:** position the hero isometric SVG `sticky`/`fixed` for the duration of Passes 01–02, then let it re-dock into smaller framed positions for Passes 03–06 (corner-left, corner-right, center-small) via scroll-driven transforms. Use `prefers-reduced-motion` to disable parallax and trail decay but keep the static scene and the callout lines. - **path-draw-svg everywhere:** every callout line, every ranging bracket, every building outline draws itself with `stroke-dasharray`/`stroke-dashoffset` animation, triggered when its Pass enters view, staggered ~40ms per element so the town assembles like a drafting hand moving across the sheet. Re-drawing on scroll-back should *not* re-trigger jarringly — fade instead. - **The two-depth columns:** near column = IBM Plex Mono in lamp amber, full opacity, slight text-shadow glow `0 0 12px rgba(95,227,208,0.12)`. Far column = IBM Plex Sans in cool slate, `filter: blur(0.4px)`, opacity ~0.78, translateZ pushed back so parallax separates it. On hover of a far paragraph it sharpens to full clarity (`blur(0)`, opacity 1) — "wiping the film." - **Agent token animation:** small JS loop moving 5–7 tokens between predefined waypoints on the iso grid using spring easing (slight overshoot, settle), each leaving an SVG trail polyline whose oldest points are pruned on a timer. Tokens idle with a faint 2.4s breathing pulse. This is the only autonomous motion on the page; everything else is scroll-driven. - **The streaming log:** a `