# Design Language for simulai.org ## Aesthetics and Tone simulai.org is staged as **the live control room of a many-worlds wind-tunnel** — a place where the only product on display is *the simulation itself, running*. The governing fiction: somewhere a research collective has wired a particle-physics solver, a cellular-automaton lattice, and a flock-behavior engine to the same clock, and the website is the **observation deck** where all three are projected onto the same dark glass. Nothing here advertises a SaaS plan. Everything here is *a process you are watching unfold in real time*. The mood is the hush of a planetarium crossed with the focused thrum of a mission-control floor at 3 a.m. — instruments glowing, fields evolving, the operator (you, the scrolling visitor) given a chair and a set of small dials. The aesthetic is **generative-first**: the visual surface is not decorated with imagery, it *is* the imagery, computed live in `` from deterministic seeds. Tone-wise this leans **futuristic-cutting-edge but not chrome-and-neon** — closer to a scientific oscilloscope than to cyberpunk. Restraint is the discipline: a near-black ground, a single warm signal-amber for "this is the running simulation," a cool slate for chrome and chrome-text, and one acidic chartreuse reserved exclusively for the cursor's influence on the field. The page should feel less like a brochure and more like *looking through a viewport at something alive*, with the chrome of the instrument framing it in thin hairlines. There is a deliberate **honesty-of-computation** ethic: nothing fakes motion with a video loop. If something moves, it is being integrated frame by frame from an actual (if toy) numerical model — Verlet particles, a reaction-diffusion field, a Boids flock, a 1D elementary cellular automaton ticking down the gutter. The visitor should sense that if they reloaded with a different seed, the whole page would be visibly, structurally different — and it should be. ## Layout Motifs and Structure The structural conceit is **hud-overlay over immersive-scroll**: a full-bleed living substrate in the deep background (one persistent `` fixed to the viewport, running the simulation continuously), with a foreground of **thin-ruled instrument panels** that the visitor scrolls *past*, never *replaces*. The simulation never stops or hides; the panels are translucent frames laid over it like glass slides on a microscope stage. - **The substrate.** One `position: fixed` canvas, full viewport, z-index 0, running at the device refresh rate. It hosts the "current model" — which model is active is driven by scroll position. Section 1: a 2D Verlet particle gas slowly settling under a weak central attractor. Section 2: a reaction-diffusion (Gray–Scott) field blooming in amber on charcoal. Section 3: a Boids flock of ~400 agents tracing slow lazy circuits. Section 4: an elementary cellular automaton (rule animated, default Rule 110) printing one new row per ~120ms, scrolling upward. Section 5: all four composited at low opacity, layered, the "ensemble." Transitions between models are *cross-dissolved over ~1.5s of scroll*, never hard-cut. - **The chrome.** A fixed top hairline bar — 1px slate rule, left-aligned wordmark `simulai` in mono, right-aligned a live readout: `seed 0x{8 hex} · t {frame count} · Δt 16.7ms · model {name}`. This readout *updates every frame*. It is the only persistent UI. - **The panels.** Each scroll section is a single off-center **instrument card**: a rectangle bounded by a 1px slate stroke, corners notched (small 45° clip on two opposing corners, like a lab-equipment faceplate), interior at `rgba(10,11,13,0.62)` with a 14px backdrop blur so the live field bleeds through dimly. Cards sit on a **broken 12-column grid** — never centered, alternating between columns 1–6 and columns 7–12, vertical rhythm deliberately irregular (some sections 90vh, some 140vh) so the scroll feels like passing instruments mounted at different heights on a rack. - **Marginalia.** The left gutter (≈64px) carries a perpetually-running 1D cellular automaton, one cell wide per column, scrolling down with the page like ticker tape — a structural echo of "computation happening in the margins." The right gutter carries thin tick-marks and a scroll-progress integer (`0314 / 1000`), styled as a film-frame counter. - **No footer in the conventional sense.** The page ends on Section 5's ensemble; the final panel simply reads, in mono, the closing line and a single faint link, then the field keeps running below the fold into black. ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **JetBrains Mono** — the instrument voice. All chrome: the wordmark, the live readout, the frame counter, axis labels, gutter ticker, the notched-card metadata strips. Used at 12–14px, `letter-spacing: 0.04em`, often `font-variant-numeric: tabular-nums` so the live readouts don't jitter. This is the "machine is speaking" register and it dominates the UI. - **Space Grotesk** — the operator's voice. Section headings and the short declarative body sentences ("Four solvers. One clock. Watch the gas find its center."). Set headings at `clamp(40px, 6vw, 92px)`, weight 500, tight `line-height: 0.98`, generous `letter-spacing: -0.02em`. Its slightly mechanical geometry sits between the mono chrome and ordinary prose without ever feeling corporate. - **Newsreader** (italic, optical) — the annotation voice, used sparingly: pull-quotes describing what a model *means* ("*reaction-diffusion: the chemistry of leopard spots, run backwards*"), set in italic at 18–22px, low opacity, as if pencilled onto the glass by a researcher. Never used for headings or UI. **Palette — translucent-frost over near-black, with one signal color.** Minimum well above three; the discipline is in how few are *bright*. - `#07080A` — the void ground (canvas clear color, page background). - `#0E1014` — panel interior fill (used at ~62% alpha over the canvas). - `#1A1E24` — chrome strokes, hairlines, grid rules at low alpha. - `#8B95A3` — slate, primary chrome text and inactive labels. - `#C7CEDA` — bright slate, headings and active body text. - `#E0A24A` — **signal amber**, reserved: the running-simulation accent — the active model name in the readout, particle highlights, the reaction-diffusion bloom color, the "live" dot. This is the only warm color and it always means "this is computing right now." - `#B6D94A` — **influence chartreuse**, reserved even more strictly: appears *only* where the cursor perturbs the field — the radius ring around the pointer, particles it has pushed, cells it has toggled. If the mouse is still, this color is absent from the page. - `#5A4A2E` — burnt-amber shadow, used for the soft glow falloff behind signal-amber elements only. Gradients are forbidden as decoration. The only "gradients" permitted are *physical*: the density falloff of a particle cloud, the concentration ramp of a diffusion field — emergent, not painted. ## Imagery and Motifs **No stock photography. No illustration files. The imagery is the running models.** Three motif families, all computed: 1. **The four solvers (load-bearing).** (a) *Verlet particle gas* — 600–900 dots, 1.5px, integrated with position-Verlet, weak central gravity, soft collision, faint motion-trails via low-alpha clear. (b) *Gray–Scott reaction-diffusion* — a 200×200 grid stepped a few iterations per frame, rendered as amber-on-charcoal, blooming organic Turing patterns; the feed/kill parameters drift slowly so the pattern type morphs over minutes. (c) *Boids flock* — ~400 agents, classic separation/alignment/cohesion, rendered as thin 6px chevrons with 8-frame ghost trails, tracing slow migratory loops. (d) *Elementary cellular automaton* — 1D, configurable rule, one row per ~120ms, scrolling up, the gutter version one column wide. 2. **Instrument chrome.** Hairline rectangles with 45°-notched corners; thin crosshair reticles that drift toward the cursor; tabular-numeric readouts; tick-mark rulers down the right gutter; a small blinking "REC"-style live dot in signal amber by the readout. Everything 1px, everything precise. 3. **Phase-space ghosts.** Faint decorative overlays drawn from the *history* of each model — e.g. a low-alpha scatter of where particles have been, or a thin path-traced line of one agent's trajectory over the last 600 frames. These are the only "patterns," and they are residue of computation, never invented. Decorative SVG path-draw is permitted in exactly one place: section dividers drawn as a single thin polyline that *traces the actual current state* of the gutter automaton — a literal cross-section snapshot, animated on with `stroke-dashoffset`. ## Prompts for Implementation Build simulai.org as **one HTML document, one CSS file, one ES module (split into small sim classes), zero frameworks, zero images, zero video**. Everything visual that moves is computed in `` 2D from a single global PRNG seeded once at load (`mulberry32` or `xorshift128` from a fixed-then-randomized seed shown in the readout). Reloading must visibly change the page. **Architecture.** One persistent fixed background canvas + `requestAnimationFrame` loop. A tiny scheduler reads `scrollY` against section boundaries and (a) sets which model is "active," (b) cross-dissolves the previous model's render into the new one over ~1.5s of scroll distance, (c) updates the live readout's `model` field. Each model is a small class (`ParticleGas`, `ReactionDiffusion`, `Boids`, `ElementaryCA`) with `step(dt)` and `render(ctx, alpha)`. The gutter ticker is its own tiny `ElementaryCA` instance, narrow, always on. **Storytelling is the spine, not navigation.** The visitor lands on the void with the particle gas already settling, the readout already ticking. They scroll through five "observations": the gas finding its center → the chemistry of spots blooming → the flock learning a circuit → the automaton printing its future row by row → all four overlaid as one ensemble. Each section's prose is two or three short sentences plus one Newsreader-italic annotation; the headings are declarative, never imperative. The closing panel states the thesis (something like "every page you have ever seen was, at bottom, a simulation pretending to be a page — this one declines the pretense") and ends. There is no "Get Started," no plan grid, no logos-of-customers strip, no testimonial carousel, no stat counters with `counter-animate` (the only counting numbers are the *real* frame/seed/scroll readouts, which are honest telemetry, not marketing theater). **Interaction — `cursor-follow` is the core mechanic, executed literally as physics.** The pointer is an actual force/probe in whichever model is active: in the particle gas it's a repulsor with a visible chartreuse influence ring; in reaction-diffusion it injects chemical where you hover; in Boids it's a predator the flock avoids; in the automaton, clicking toggles a cell in the next row. Idle the mouse and all chartreuse vanishes — the field returns to its undisturbed evolution. Add gentle `parallax` on the foreground panels (they drift ~8px against scroll), `spring`/`elastic` easing on panel entrance (translateY + opacity, staggered 60ms per element), `blur-focus` on panels not currently in the viewport center (they sit at backdrop-blur 14px → 6px as they enter focus), and a magnetic pull (~10px) on the one or two faint links. `prefers-reduced-motion`: freeze the sims to a single rendered still per section, keep the readout static, keep scroll. **Performance is out of scope per instructions, but keep the fiction intact:** grids capped (RD at 200², Boids at ~400), trails via low-alpha fills not stored history, one rAF loop total. ## Uniqueness Notes Differentiators this design commits to; none should be duplicated by other CMassC sites: 1. **The website is a real simulation, not a depiction of one.** Generative-art appears as imagery in ~11% of designs, but almost always as a *backdrop texture* (flow fields, particle ambiance). Here the generative engine is the entire content layer — four distinct numerical solvers (Verlet, Gray–Scott, Boids, elementary CA) wired to scroll position and to the cursor as actual physics — and the on-screen telemetry (`seed`, `frame`, `Δt`, `model`) is genuinely live, not faux. Reloading restructures the page. 2. **Generative + hud-overlay + honesty-of-computation, with zero gradients and zero images.** Gradient palettes appear in ~94% of designs and photography in ~98%; this design uses *neither* — the only "gradients" are physical density falloffs computed by the models, and there is not a single raster asset. That intersection (generative-art imagery × no-gradient palette × no-photography × hud-overlay layout) is effectively empty in the registry. 3. **A two-color reservation discipline as the entire color system.** One signal amber that *only* ever means "this is computing now" and one influence chartreuse that *only* ever appears under the cursor — if the mouse is still, an entire color is absent from the page. Most dark-mode designs spray neon freely; this one rations it to semantic meaning. 4. **The margins literally compute.** A 1D cellular automaton runs one cell wide down the left gutter as living ticker-tape, and the section dividers are polylines tracing its actual current state — decoration that is a cross-section of a running process rather than an invented motif. 5. **Cursor-follow re-implemented as model-specific physics.** Cursor-follow appears in ~89% of designs, almost universally as a glowing dot or magnetic offset. Here the pointer is a repulsor, a chemical injector, a predator, or a bit-toggle depending on which solver is active — the same input, four physically distinct consequences. Chosen seed/style: **generative art background** (from seeds.json), reinterpreted as a live multi-solver observation deck. Tone: futuristic-cutting-edge, mysterious-moody. Aesthetic register: generative + sci-fi-hud + evolved-minimal. Avoided patterns from frequency analysis: no glassmorphism-as-trend (panels are instrument faceplates, not frosted SaaS cards), no hand-drawn (94% — absent here), no warm/gradient palette (98%/94% — replaced with near-black + two rationed signal colors), no photography (98% — zero raster assets), no card-grid of features, no centered hero, no stat-counter `counter-animate`, no CTA grid, no pricing tiers, no testimonial carousel, no typewriter-effect prose.