# Design Language for simulai.dev ## Aesthetics and Tone simulai.dev is staged as **a derelict observatory floating inside a numerical wind-tunnel** — a place where a lone researcher runs the same simulation ten thousand times overnight just to watch how slightly different starting conditions diverge into entirely different worlds. The site is not a product page for an "AI simulation platform." It is the **logbook of that researcher's obsession**: the page itself behaves like a running solver. Numbers integrate forward as you scroll. Fields relax toward equilibrium when you stop moving. A particle system that lives behind every section is *the same* system — it carries momentum from chapter to chapter, so the swirl you disturbed at the top is still settling when you reach the bottom. The mood is **cold-room scientific, but reverent** — closer to a planetarium at 3 a.m. than to a SaaS dashboard. Think of the visual register of vintage CRT plotter output, NACA wind-tunnel smoke photographs, the indigo-on-black of an oscilloscope, and the quiet awe of a Conway's-Life glider gun finally stabilising. The tone of voice in copy is precise, slightly hushed, occasionally caught off guard by its own results: *"run 8,412 — the swarm chose a different attractor. We are not sure why yet."* Nothing here shouts. The drama is entirely in **emergence**: simple rules, patiently iterated, becoming something nobody designed. This is **generative** as the primary aesthetic — every decorative mark on the page is the output of a small simulation, never a static asset — fused with a **dark-mode** observatory shell and a thin **isometric** scaffolding that frames the live fields like grid paper under a moving fluid. It deliberately rejects the "AI = glowing brain / neon synapses / purple gradient mesh" cliché. There are no brains. There is a **lattice, a field, and time.** ## Layout Motifs and Structure The governing structure is **immersive-scroll over a single persistent canvas** — a layered-depth composition where one full-viewport `` element is *pinned* behind everything for the entire document, running a continuous solver, while HTML "instrument panels" scroll over it. The page is roughly 640vh, divided into **seven solver-stages** (not "sections" — stages, like timesteps): 1. **Cold start** — black viewport, a single seeded point, the title resolving as the field warms up. 2. **The lattice** — an isometric grid (30°/-30° axonometric) draws itself across the canvas with `path-draw-svg` strokes; this becomes the substrate every later field is computed on. 3. **Diffusion** — copy about *what simulai does* arranged as caption-cards along the left rail, while a reaction-diffusion pattern blooms across the lattice on the right two-thirds. 4. **N-body** — a horizontal-scroll inset (the only horizontal move in the page): a strip of orbiting bodies you scrub through, each labelled like a logbook entry. 5. **Divergence** — a split-screen moment: two identical seeds, one pixel of difference, rendered side by side, drifting apart as you scroll. The dividing line is a live, jittering 1px seismograph trace, not a static border. 6. **Equilibrium** — `ma`-style negative space; almost empty; the field has relaxed; a single paragraph centred in a vast dark plane; the particles barely move. 7. **The next run** — a quiet outro: the seed counter ticks up by one, the canvas dims to the cold-start state, and the loop conceptually restarts. Composition rules: - **Never a card-grid.** Content units are *instrument panels* — long, narrow, asymmetrically placed plates that read like strip-chart readouts. They cling to the left or right margin and leave the centre for the live field. - **The isometric lattice is load-bearing**, not decoration: panels are positioned *on its vertices*, snapping to a 64px axonometric grid, so the UI looks bolted onto the simulation substrate. - **Margins are wide and uneven** — left rail 12vw of breathing room on diffusion stages, near-zero on the n-body strip. The irregularity is intentional: a solver doesn't care about your symmetry. - **No hero-dominant CTA.** The "hero" is just stage 1: a field warming up. No buttons above the fold. No pricing. No stat-grid. No testimonial wall. - **Minimal-navigation:** a thin fixed left-edge "timeline" — seven tick marks, one per stage, that fill like a progress integral as you descend. That is the entire nav. ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **Space Grotesk** (weights 300, 400, 500, 700) — the display and headline voice. Its slightly mechanical, drafting-table letterforms suit an instrument. H1 (`simulai — ten thousand quiet runs`) at `clamp(44px, 7vw, 132px)`, weight 300, letter-spacing -0.02em, with the baseline of each word offset by a few pixels as if jittered by the field underneath. - **IBM Plex Mono** (weights 400, 500, 600; italic available) — the **mono / tech-mono** workhorse for every number, every logbook entry, every axis label, every "run NNNN" stamp, code-ish captions, and the timeline ticks. All live counters are set in this. Use `font-variant-numeric: tabular-nums` so integrating values don't reflow. - **Spectral** (weights 300, 400 italic) — the **serif-revival** quiet-narrator voice, reserved *only* for the contemplative passages at the Equilibrium stage and the outro: long-form, italic, generous line-height (1.8), to break the cold-instrument register exactly once and let the writing breathe. **Palette — oscilloscope-on-black, no purple, no neon-synapse cliché. Minimum three, here eight.** - `#05070A` — **near-black ground.** The void the simulation runs in. Almost-but-not-quite black so layered fields can sit *below* it tonally. - `#0C1118` — **panel slate.** Instrument plates, very slightly lifted off the ground, near-flat, 1px hairline borders only. - `#9FB3C8` — **cool ash.** Primary body text on dark — desaturated steel-blue-grey, the colour of pencil on grid paper. - `#E6EDF3` — **chalk white.** Headlines, key numbers, the brightest readouts. - `#3FE0C5` — **phosphor mint.** The live trace colour — particle highlights, the seismograph divider, active timeline ticks. Used sparingly, like the glowing line on a real scope. - `#F2B340` — **amber plot.** Second data series, divergence-stage "run B", warnings in the log. The classic CRT secondary-beam colour. - `#5C7AE0` — **deep electric indigo.** Field gradients, the reaction-diffusion low end, the cold-start seed glow. The *only* blue-violet allowed, and it's a working colour, not a brand gradient. - `#1C2530` — **lattice line.** The isometric grid strokes — visible but recessive, never competing with the field. Gradients are permitted **only as simulation output** — e.g. a heat field rendered from `#5C7AE0` through `#3FE0C5` to `#F2B340` — never as a flat decorative background wash. ## Imagery and Motifs **Everything visible is computed live. No stock photography. No illustration files. Three motif families:** **1. The persistent particle field (the soul of the site).** One `requestAnimationFrame` loop, one array of ~1,800 agents with position + velocity, advected by a curl-noise flow field that *re-seeds its parameters once per stage*. The field has memory: scroll velocity injects momentum, idleness lets it relax via damping. Rendered as faint mint and indigo points with short motion-trails (low-alpha clear, not full clear). This is the background of every stage; it is never a separate "hero animation." **2. The isometric lattice & strip-chart panels.** A 30° axonometric grid of `#1C2530` lines, drawn once with animated SVG `path-draw-svg` strokes, that the instrument panels sit on. Panels carry **generative micro-plots**: tiny inline sparkline canvases showing the local state of whatever the copy is describing — a 40×20px reaction-diffusion swatch, a 6-body mini-orbit, an integrating counter's history. These are *generated*, drawn into ``, never SVG illustration. **3. Logbook stamps & run-counters.** A recurring textual motif: monospace `run 0001`, `run 8412`, `seed 0xA17F`, `t = 4.812s`, `Δ = 1.0e-6` — set as small mint or amber tags pinned to panel corners. The global "run counter" in the corner of the viewport ticks upward continuously, a `counter-animate` that never stops, reinforcing "this thing is always running." Cellular-automata glyphs (small filled/empty grids) appear as section dividers — a Wolfram-rule strip, a Life still-life — drawn as live mini-simulations. Iconography, where unavoidable: hairline 1px strokes only, drafting-symbol style (a node, an arrow, a delta, a grid cell) — never filled glyphs, never the brain-network icon. ## Prompts for Implementation Build simulai.dev as **one HTML document, one CSS file, one ES module**. No framework. No router. No build step beyond bundling the module. The architectural centrepiece is a **single pinned full-viewport ``** behind everything, driven by one `rAF` loop that *never resets* across the page — it integrates a curl-noise-advected particle system continuously, and a small `StageController` (scroll-position → stage index, eased) hands it new flow-field parameters as the visitor descends. The HTML content is a stack of seven `
` "instrument panels" that scroll *over* the live canvas with `mix-blend-mode: screen` so the field shows through their hairline frames. **Storytelling is the organizing principle, not navigation.** The visitor lands on a cold, almost-black field with one seeded point, watches the title resolve as the simulation "warms," then scrolls through seven solver-stages — lattice draws itself, diffusion blooms, an n-body strip scrubs sideways, two near-identical runs diverge across a live split, the field relaxes into a vast quiet plane, and finally the seed counter ticks and the loop conceptually restarts. Every scroll moment should feel like advancing a timestep, not "scrolling a marketing site." Bias hard toward this full-screen narrative experience. Motion and interaction: - **Scroll-triggered + parallax** layering: panels, lattice, and field move at three different rates; the field is slowest, almost still. - **Cursor-follow with spring/elastic easing:** the pointer is a small "probe" that locally perturbs the flow field — particles near the cursor accelerate, then settle. Never a hard repel; always a damped, physical relaxation. - **counter-animate everywhere:** the global run-counter, the `t =` clock, the per-panel integrators — all `tabular-nums` IBM Plex Mono ticking upward; values *integrate*, they don't just count. - **path-draw-svg** for the isometric lattice reveal and for the seismograph divider on the divergence stage. - **fade-reveal + stagger** for panel entry — but staggered like solver iterations converging, with a slight elastic overshoot, not a generic slide-up. - **typewriter-effect** strictly limited to logbook stamps appearing (`run 8412 ▸ swarm chose a different attractor`), never for headlines. - Respect `prefers-reduced-motion`: freeze the field at a calm equilibrium frame, disable parallax, keep counters static. **Forbidden:** CTA-heavy layouts, pricing blocks, pricing tiers, stat-grids/stat-counters-as-bragging, testimonial carousels, feature card-grids, hero-with-two-buttons, glowing-brain imagery, purple-to-pink gradient meshes, glassmorphism frosted panels, hand-drawn doodle accents. If a section starts to look like a SaaS landing page, it has failed — return it to being a page of a solver's logbook. ## Uniqueness Notes Differentiators this design commits to, none to be duplicated by other CMassC sites: 1. **One persistent solver canvas with cross-stage memory.** Most generative-background designs spin up a decorative animation per section. Here a *single* particle/flow simulation runs unbroken for the whole 640vh page, carrying momentum between stages — the swirl you disturb at the top is still settling at the bottom. The site *is* a running simulation, not a site *about* one. 2. **Oscilloscope-on-black, deliberately purple-free.** Frequency analysis shows `gradient` at 94% and `warm` palettes at 98%; "AI" sites overwhelmingly default to purple/neon-synapse gradient mesh. simulai.dev runs cold: near-black `#05070A`, ash `#9FB3C8`, phosphor mint `#3FE0C5`, amber plot `#F2B340`, with indigo `#5C7AE0` allowed only as *simulation output*. No flat decorative gradient anywhere; no brain iconography; CRT-plotter, not synapse-glow. 3. **Generative + dark-mode + isometric, all three load-bearing together.** Generative aesthetic (~14%), dark-mode (~11%), and isometric (~13%) are each individually uncommon; their *intersection in service of one "running solver" metaphor* — isometric grid as the substrate the live field is computed on, panels bolted to its vertices — does not exist elsewhere in the registry. 4. **Instrument panels instead of card-grids.** Against `card-grid` at 92%, this design has zero cards: content lives in long, narrow, asymmetrically-margined strip-chart "instrument plates" with hairline borders and inline generative micro-plots, positioned on lattice vertices. 5. **Counters that integrate, not count.** A continuously-ticking `run NNNN` / `t = N.NNNs` / `Δ` logbook motif in IBM Plex Mono tabular-nums, where values move like a solver stepping forward — reinforced by the chosen seed. Avoided overused patterns from frequency analysis: glassmorphism (84%), hand-drawn (94%), photography (98%), card-grid (92%), warm+gradient palettes (98%/94%), hero-dominant CTA layouts, stat-grids, testimonial carousels. Documented chosen seed/style: **generative art background** (with dark-mode observatory shell and isometric lattice scaffolding).