# Design Language for simulai.xyz ## Aesthetics and Tone simulai.xyz is staged as **a derelict atmospheric-physics observatory that has been quietly repurposed into a wind tunnel for synthetic minds** — a long, cold, north-lit hangar where researchers no longer measure clouds and turbulence but instead release small artificial agents into hand-built worlds and watch the eddies they leave behind. The whole site reads like the interior of a *fog chamber*: not the clean blue-glass futurism of an AI startup, and emphatically not a "platform" with feature cards — instead, a damp, instrument-cluttered laboratory where the air itself is the subject. Picture frosted bell-jars on steel benches, smoke threaded through laser sheets, soot-on-glass photographs of vortices, a draughtsman's annotations in grease pencil, and a slow hiss of compressed air that never quite stops. The AI here is never anthropomorphised into a face or an orb; it is treated as **weather** — a field you seed, perturb, and then read in the patterns it deposits. The emotional register is **mysterious-moody** crossed with **scholarly-intellectual**: hushed, attentive, faintly melancholic, the mood of a night-shift in a vibration-isolated room. Copy speaks in the register of lab notebooks and flow-visualisation captions — "Run 0419 — agent released at t=0 into a torus world; note the persistent counter-rotating wake near the reward gradient." Nothing shouts. Nothing converts. The visitor is a guest in an experiment that does not need them, and that detachment is the point: simulai studies *emergence*, and emergence is something you observe, not something you sell. The look is **grainy-textured** above all — every surface carries photographic grain, schlieren shimmer, dust on the lens. Light is volumetric and low-angle, raking across the frame like a single window in a deep room. Where most "generative" sites render crisp particle confetti on pure black, simulai renders **smoke** — diffuse, soft-edged, accumulating, with the heavy slow physics of a real chamber rather than the weightless sparkle of a screensaver. ## Layout Motifs and Structure The structural spine is **immersive-scroll** built as a **single continuous wind-tunnel section** — one HTML document, one column, roughly 620vh tall, that the visitor reads *left-to-right in mind even while scrolling top-to-bottom*, because the governing metaphor is the length of a tunnel: an intake, a contraction, a working section, a diffuser, an exhaust. Each scroll-stage corresponds to one segment of the tunnel and one chapter of the research story. - **Stage I — Intake (0–80vh):** A near-empty frame. A thin horizon line of instrument readouts along the bottom edge (atmospheric pressure, "flow velocity," run index) tick quietly. The title `simulai` sits small in the upper-left like a stencilled facility name, not a hero headline. Smoke begins to bleed in from the right edge only. - **Stage II — Contraction (80–180vh):** The viewport literally narrows: left and right margins close inward as you scroll (clip-path on the main column), so the smoke and type are squeezed into a tighter, faster channel. This is where the thesis paragraph lives — set in the constricted center band, the words crowding together as the column tightens, mimicking flow acceleration. - **Stage III — Working Section (180–400vh):** The widest, deepest part. This is the **layered-depth** core: a glass-walled test chamber rendered as four Z-strata — (1) far wall: a faint chalk grid and old burn-marks; (2) mid: the live smoke simulation; (3) the agent's traced path drawn as a luminous filament with path-draw-svg; (4) near: a sheet of scratched observation glass with grease-pencil annotations and a reticle that follows the cursor. Content here arrives as **lab plates** — irregular off-white cards pinned at slight rotations, each documenting one "run," each partly translucent so the smoke shows through. - **Stage IV — Diffuser (400–520vh):** The channel widens again and everything *slows* — animation easings lengthen, the smoke disperses, type spaces out into wide tracking. This is the reflective chapter: what the wakes mean, why emergence resists prediction. - **Stage V — Exhaust (520–620vh):** The frame empties to a single faint plume drifting up and out of the top edge, the readouts fade to their resting values, and the facility name returns, smaller still, with a colophon set like a plaque screwed to the wall. No card-grid. No bento. No centered hero with three columns of features. The asymmetry is constant: the live tunnel imagery hugs the right two-thirds, the marginal annotations and readouts cling to the left edge and bottom rail, and the lab plates break the grid at hand-set angles. Navigation, if present at all, is a thin vertical "tunnel station marker" rail on the far right — five notches, one per stage, that the smoke flows past. ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **Spectral** (serif, weights 200–800, italic available) — the **scholarly-intellectual** body and reflective voice. Run reports, the thesis paragraph, the diffuser chapter. Set body at 18–20px / line-height 1.7, generous, like a journal article. Pull-quotes in Spectral Italic 300 at clamp(28px, 4vw, 56px), set ragged-right against the left margin so they read as marginalia. - **Fraunces** (variable, optical-size + soft + weight axes, italic available) — the **expressive** display voice, used sparingly: the facility name `simulai`, the five stage labels (INTAKE / CONTRACTION / WORKING SECTION / DIFFUSER / EXHAUST), and the large "Run NNNN" plate headers. The trick: as the column contracts in Stage II, animate the OPSZ axis downward and the WGHT axis upward so the type literally *compresses* — narrower, denser, more urgent — then relax both axes back in the Diffuser. Stage labels are set in small-caps, letter-spacing 0.32em, weight axis ~480. - **IBM Plex Mono** (weights 300–600) — the **tech-mono** instrument voice. Every readout, timestamp, coordinate, axis label, the cursor-reticle coordinates, the colophon plaque. 12–14px, letter-spacing 0.04em. This is the *machine's* handwriting, kept rigorously separate from the two human typefaces. **Palette — a fog chamber lit by one cold window, with a single warm filament.** - `#0E1113` — **chamber black**: not pure black; a deep cold graphite, the unlit far reaches of the hangar. Primary background. - `#1A2024` — **steel shadow**: the benches, the tunnel walls, slightly bluer. Secondary surfaces, the right-side imagery base. - `#C7CDC8` — **smoke white**: a desaturated cool off-white with the faintest green-grey cast — the colour of actual visualisation smoke, never #FFFFFF. Primary text, plumes, the lab plates. - `#8A938E` — **dust grey**: muted mid-tone for secondary text, the chalk grid, instrument idle states. - `#5C6B66` — **moss verdigris**: a damp, oxidised green-grey for the bottom-rail readouts, the station-marker notches, hover states on annotations. The "lab equipment that's been here too long" colour. - `#E8893E` — **filament amber**: the one warm accent, used *only* for the agent's traced path, the active stage notch, and the live "run in progress" indicator. A heated-tungsten orange, glowing, scarce — the single point of life in a cold room. - `#A6452B` — **scorch**: a darker burnt-sienna for the burn-marks on the far wall and the amber's pressed/visited state. Smoke imagery may briefly carry a cool laser-sheet tint (`#3E5A57`) where the simulated light-plane cuts through it. Otherwise the palette holds the line: cold greys, one warm filament. ## Imagery and Motifs **Four motif families, layered front-to-back.** 1. **Schlieren smoke (the load-bearing system).** The centerpiece is a continuously running fluid-like smoke field, rendered as layered semi-transparent canvas/CSS — soft-edged plumes that drift, curl, and accumulate against the chamber walls, driven by a slow simfrom-the-right airflow. It is *never* crisp particle confetti; it is diffuse, grainy, slow, with the heavy easing of real smoke (long sustains, gentle dispersal). Mouse movement nudges the local flow — the cursor is a small obstacle in the stream. On scroll into the Contraction stage the smoke accelerates and tightens; in the Diffuser it disperses and goes still. 2. **The traced agent path (path-draw-svg).** Through the Working Section, a single luminous **filament-amber** line draws itself across the chamber — the recorded trajectory of one synthetic agent through a simulated world. It loops, doubles back near invisible "reward gradients," forms little vortices of its own. Implemented as an SVG path with `stroke-dasharray` animation tied to scroll progress, with a soft amber glow (layered blurs). Old runs from earlier stages remain as ghost-paths in dust-grey at 12% opacity, accumulating like a long-exposure photograph. 3. **Lab plates & marginalia (custom-illustration, hand-set).** Content units are **off-white lab plates** — slightly translucent rectangles with a torn or trimmed bottom edge (irregular clip-path, 8–12 points, soot-stained), pinned at rotations between −3° and +4°. Each carries a stencilled "Run NNNN" header, a Spectral run-report, and a small inline diagram: a hand-drawn vector field, a phase portrait, a tiny torus or grid "world" sketched in mono linework. Grease-pencil annotations (Plex Mono, set in moss-verdigris, slightly hand-jittered with per-glyph transforms) point at things with thin arced leader lines. 4. **The instrument rail & reticle (data-viz, machine voice).** A persistent bottom rail of softly ticking readouts (pressure, flow velocity, run index, "agents observed today" — a slowly counting figure with counter-animate). The cursor carries a thin crosshair reticle with live mono coordinates, like a flow-vis camera's overlay. The far-right station-marker rail: five small notched lines, the active one lit filament-amber, the smoke visibly streaming past them. Decorative grain everywhere: a fixed film-grain overlay (subtle animated noise), faint lens-vignette darkening at the corners, occasional dust motes catching the raking light. ## Prompts for Implementation Build simulai.xyz as **one HTML document, one CSS file, one ES module, one `` for the smoke field, a handful of inline SVGs for paths and diagrams**. No framework, no router, no SPA. There is **no above-the-fold pricing block, no CTA grid, no testimonial carousel, no pricing tiers, no stat-grid of feature icons**. The page is a *flow-visualisation log* — narrative over conversion, observation over persuasion. **Storytelling is the organizing principle.** The visitor walks the length of a wind tunnel for synthetic minds: intake → contraction → working section → diffuser → exhaust, each segment a chapter. They are an unannounced guest at an experiment that proceeds without them. - **Smoke engine:** a lightweight canvas particle/fluid approximation — a few hundred large, soft, low-opacity sprites advected by a slow rightward field plus curl noise, with the cursor as a moving obstacle. Tune for *weight*: long fade tails, gentle accumulation against the right and bottom walls, never sparkly. Respect `prefers-reduced-motion` by freezing it into a single beautiful soot-on-glass still. - **Variable-font compression:** drive Fraunces' OPSZ/WGHT/SOFT axes from scroll progress so the display type literally constricts through Stage II and relaxes through Stage IV. This is the signature interaction — make it physical. - **Column contraction:** animate the main content column's left/right insets (clip-path or margins) tied to scroll so the viewport narrows and widens like the tunnel cross-section. Smoke and type get squeezed and released with it. - **Path drawing:** the amber agent trajectory uses `stroke-dasharray`/`stroke-dashoffset` keyed to Working-Section scroll; layer 2–3 blurred copies for the tungsten glow; leave ghost-paths from prior stages. - **Lab plates:** entrance via fade-reveal + a slight settling tilt (spring easing, small overshoot), as if pinned to the glass. Stagger them. On hover, the grease-pencil leader line draws toward the cursor and the plate lifts a few px out of the smoke. - **Instrument rail:** mono readouts tick on a slow interval; one counter slowly counts up (counter-animate); the cursor reticle tracks live coordinates. Keep this voice strictly Plex Mono, strictly moss-verdigris/dust-grey. - **Sound (optional, opt-in only):** a barely-there compressed-air hiss that rises with flow velocity. Muted by default; a tiny mono toggle on the bottom rail. - **Palette discipline:** the page is cold graphite and smoke-white. Filament amber appears *only* on the agent path, the active stage notch, and the live-run indicator — nowhere else. Protect its scarcity. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site. 1. **Wind tunnel / fog chamber as the controlling metaphor for AI.** The registry's "generative" and "sci-fi" designs render AI as orbs, neural-net graphs, glowing grids, or particle confetti. simulai treats artificial intelligence as **fluid weather in an atmospheric-physics test rig** — intake, contraction, working section, diffuser, exhaust — and structures the entire scroll as the physical length of that tunnel. No other site is a wind tunnel. 2. **Schlieren *smoke*, not particles.** Where generative backgrounds are crisp, weightless, sparkly point-clouds on pure black, this is diffuse, grainy, heavy, accumulating smoke with real-flow easing, lit by a single raking laser sheet — a flow-visualisation photograph that breathes. The cursor is an obstacle in the stream, not a magnet for confetti. 3. **Variable-font compression driven by tunnel cross-section.** Fraunces' optical-size and weight axes animate *down/up* as the column physically narrows through the Contraction stage, so the type accelerates and densifies with the airflow, then relaxes in the Diffuser. Typography as fluid dynamics. 4. **Cold-graphite + smoke-white with one scarce tungsten filament.** Against the registry's overwhelmingly *warm* (98%) and *gradient* (94%) palettes, simulai is austerely cold and almost gradient-free; its lone warm note (`#E8893E`) is rationed to a single object — the agent's traced path. Frequency analysis flags warm-palette + gradient as near-universal; this design deliberately abstains. 5. **Three-voice typography with a strict machine/human partition.** Spectral (the scholar's prose), Fraunces (the facility's display stencils), IBM Plex Mono (the instruments) never overlap roles — the machine's handwriting is kept rigorously separate from the humans'. 6. **Anti-conversion lab-log structure.** No card-grid (92% of sites), no bento-box, no hero-with-feature-columns, no stat-grid, no CTA stack. Content is irregular soot-stained lab plates pinned at hand-set angles, plus a ticking instrument rail — a research notebook, not a landing page. 7. **Avoided overused patterns from frequency analysis.** Skips hand-drawn aesthetic (94%), glassmorphism (84%), card-grid layout (92%), warm palette (98%), and decorative photography (98%). Leans instead on under-represented territory: grainy-textured aesthetic, immersive-scroll + layered-depth layout, tech-mono + serif-revival type, path-draw-svg and counter-animate motion, and data-viz/custom-illustration imagery. 8. **Chosen seed/style: "generative art background"** — reinterpreted away from its usual ambient-blob-canvas cliché into a *physically simulated flow-visualisation chamber*, where the generative system is diegetic (it is literally the experiment the site documents), not mere decoration behind the content.