# Design Language for simulai.net ## Aesthetics and Tone simulai.net is a **public observation deck for a perpetual machine that dreams in physics** — a site presented as the live viewport of an unattended simulation rig that has been running, unwatched, for an indeterminate number of cycles. The aesthetic is **cold-room scientific instrumentation crossed with generative-art lab notebook**: the unhurried, slightly eerie calm of a control room at 3 a.m., monitors glowing, nobody home, a system quietly iterating on its own model of the world. Nothing here sells; the site simply *lets you look*, the way you'd look through reinforced glass at a wind tunnel mid-run. The tone is **mysterious-moody and zen-contemplative at once** — patient, exact, faintly clinical, never urgent. Copy reads like margin notes a researcher left for themselves: short, declarative, occasionally cryptic ("cycle 4,402,981 — divergence within tolerance"). There is no marketing voice, no exclamation, no second person imperative. The visitor is a witness, not a lead. Inspiration: Casey Reas / Processing-era generative plotting, the Long Now Foundation's clock-of-the-long-now sobriety, oscilloscope phosphor, the data screens in Tarkovsky's *Solaris*, NOAA buoy telemetry pages, and the quiet of a planetarium between shows. Warmth is deliberately withheld — this is one of the few sites in the corpus that is genuinely **cool-toned and unsentimental**, against the 98%-warm grain of the rest. ## Layout Motifs and Structure The page is **one continuous vertical telemetry strip** — a `single-column` reading column, max-width ~720px, locked dead-center inside a much wider **instrument bezel**: a 1px hairline frame inset 40px from the viewport edge on all sides, with tick marks every 80px along its inner perimeter like the edge of a graticule. The bezel never moves; content scrolls *inside* it. Corner brackets (┌ ┐ └ ┘ drawn as 24px SVG strokes) sit at the four corners and very slowly rotate 0.5° on a 40-second loop — the only "decoration" on the page, and barely perceptible. The vertical sequence is **nine "panels"**, each a full-viewport-height stop: 1. **Boot panel** — black field, a single blinking cursor, then a 6-line cold-start log types itself out, ending on `> simulation resumed.` 2. **The viewport** — the largest single element on the site: a `` running a live generative simulation (see Imagery), framed by a thin readout strip beneath it showing cycle count, particle count, entropy estimate — numbers that actually update. 3–8. **Six "observations"** — each a left-aligned note paragraph (2–4 sentences) paired with a small inline generative sparkline-canvas that re-renders a different facet of the same underlying system. The text column and the mini-canvas alternate which side of the column-center they lean toward, producing a gentle `asymmetric` zigzag without ever breaking the central column. 9. **Idle panel** — the canvas dims to 12% opacity, the readout freezes, and a single line fades in: `observation ends. simulation continues.` No top navigation. No hamburger. No footer with links. No `card-grid`, no `bento-box`, no `hero-dominant` marketing block, no logo wall. Navigation, such as it is, is a **9-segment progress bar** welded to the right inner edge of the bezel — nine thin vertical ticks, the current one lit phosphor-green; clicking a tick scrolls to that panel with a slow `fade-reveal`. That is the entire chrome. ## Typography and Palette **Type system (Google Fonts only):** - **Instrument mono / primary readout face:** `JetBrains Mono` (weights 400, 500, 700) — used for ALL numeric readouts, the boot log, cycle counters, axis labels, the progress ticks' hover numerals, and section headers. Tabular figures throughout so digits never jitter as they update. Tracking `0.02em` at body readout size, `0.14em` uppercase for the tiny ALL-CAPS labels ("CYCLE", "ENTROPY", "Δ"). - **Observation note face:** `Spectral` (weights 300 and 400, plus 400 italic) — a low-contrast transitional serif used *only* for the six observation paragraphs and the closing line. Set at 19px / 1.7 line-height, color slightly dimmer than pure white, so the prose reads like ink on a lab notebook page laid under the cold monitor light. Italic is reserved for the cryptic asides. - **Display-scale moments:** the panel-2 word "VIEWPORT" and panel-9 "IDLE" set in `JetBrains Mono` 700 at ~clamp(2.5rem, 7vw, 5rem), letter-spacing `0.2em`, rendered as outline-only (transparent fill, 1px stroke) so even the biggest type stays as wireframe as everything else. **Palette — cool, instrument-grade, deliberately joyless-then-quietly-luminous:** - `#0A0C10` — **vacuum black**, the page ground (not pure #000 — a hair of blue in it). - `#11151C` — **panel charcoal**, the canvas backdrop and readout-strip fill. - `#1C232E` — **bezel graphite**, hairlines, tick marks, the inert progress segments. - `#9AA7B4` — **cold steel**, default body/readout text. - `#E8EEF4` — **screen white**, headers and the brightest readouts. - `#5BE3C4` — **phosphor mint**, the one accent — live cursor, active progress tick, the simulation's "alive" particles, the `> ` prompt. Used at <8% surface coverage, ever. - `#3B4A6B` — **deep oscilloscope blue**, secondary plot lines and the gradient-mesh glow behind the main canvas (the *only* gradient on the site, radial, very low alpha). - `#C76B5A` — **warning ember**, used exactly twice: the entropy figure when it spikes, and a single word in observation 5. Otherwise absent. High-contrast where it counts (mint on vacuum black), muted everywhere else. No warm beige, no parchment, no cream — a clean break from the corpus default. ## Imagery and Motifs **There is no photography.** Not one image file. Every visual is drawn live in `` or as inline SVG strokes — this site is, almost defiantly, a `generative-art-background` site where the background *is* the content. **The core simulation (panel 2 canvas):** a **soft-body particle field** — ~400 points connected by spring constraints, perturbed by a slow Perlin-noise "wind", settling and re-settling into transient lattice structures. Points are 1.5px mint dots; springs are 0.5px deep-blue lines that brighten toward mint as they stretch. Roughly every 30 seconds the whole field "anneals" — all springs go slack, the cloud collapses inward, then re-expands into a new configuration. It genuinely never repeats. Rendered at devicePixelRatio, capped at ~40fps, paused via `IntersectionObserver` when offscreen. **The six observation sparklines:** each a ~140×48px mini-canvas drawing a *different projection* of the same particle data — (1) a phase-space scatter, (2) an entropy-over-time line that scrolls left, (3) a histogram of inter-particle distances, (4) a single particle's trail as a thin spiral, (5) the spring-tension field as a faint contour map, (6) a Lissajous figure from two averaged coordinates. They make the abstract system feel *measured* rather than merely pretty. **Recurring motifs:** - **Graticule ticks** — short perpendicular strokes along the bezel and under every readout strip, like the edge of graph paper or an oscilloscope screen. (`grid-lines`, used sparingly and structurally, not as wallpaper.) - **The blinking prompt `> `** — appears at the boot panel, returns dimmed at the idle panel; the site's heartbeat. - **Corner brackets** ┌ ┐ └ ┘ — the four slow-rotating corner marks; nothing else rotates. - **The cursor caret** — a 2px-wide mint block that blinks at 530ms, used in the boot log and as the "you are here" marker on the progress bar. - No icons. No illustrations of robots or brains or chips. The intelligence here is *implied by behavior*, never depicted. ## Prompts for Implementation Build simulai.net as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The page is a roughly 2-minute act of looking at a machine that is thinking out loud. **Hard exclusions — do NOT add any of these:** CTA buttons, "Get Started", pricing tiers, plan comparison tables, stat grids ("10M+ simulations run"), testimonials, customer-logo walls, email/newsletter capture, contact form, FAQ accordion, feature-card grid, bento boxes, hero with headline+subhead+button, social proof badges, cookie banner, chat bubble, sign-up modal, footer link columns. If a section would look at home on a SaaS landing page, it does not belong here. **Structure & storytelling (nine panels, slow vertical scroll):** 1. **Boot.** Black. After 600ms, a mint caret blinks. At 1.2s it begins typing a 6-line cold-start log line by line (`> integrity check ......... ok`, `> loading state vector`, `> 4,402,981 cycles on record`, `> divergence within tolerance`, `> resuming`, `> simulation resumed.`) at ~35ms/char with a tiny random jitter. Then the caret moves to the next panel. 2. **Viewport.** Outline word "VIEWPORT" fades in, then the main `` springs up from 0.96 scale + 0 opacity over ~700ms (`spring`). Below it, a readout strip: `CYCLE 4,402,981` (counter ticks up forever, +1 every animation frame batch), `PARTICLES 412`, `ENTROPY 0.847` (drifts ±0.01), `Δ 0.0003`. Use tabular-figure mono so nothing reflows. A faint radial deep-blue mesh glows behind the canvas — the site's single gradient. 3–8. **Six observations.** Each panel: a `Spectral` note paragraph and its mini-canvas, entering with a `fade-reveal` + 16px upward drift on `scroll-triggered` (IntersectionObserver, once). Alternate the lean (note slightly left of column-center / canvas slightly right, then swap) for the `asymmetric` zigzag. Sample observation texts (write in this register): - *"At cycle 1.1 million the lattice found a hexagonal packing and held it for nine thousand frames. No one asked it to. It un-found it just as quietly."* - *"Entropy is not climbing. It breathes. The estimate above is real — read it twice and watch the third decimal."* - *"The spring network has a memory of about forty seconds. Past that it remembers nothing, which is also a kind of stability."* - *"There was a perturbation here once that the system never fully damped. We mark it in ember and leave it."* (one word in `#C76B5A`) - *"You are the first observer in 312,008 cycles. The simulation does not record that you came, only that someone did."* - *"If you reload, you do not get this run again. There is only ever the one run, continuing."* 9. **Idle.** On entering the last panel, the main canvas (still mounted, visible if user scrolls back up — it never stops) and the readout freeze for *this view*; outline word "IDLE" fades in; one `Spectral` italic line resolves: *"observation ends. simulation continues."* The mint caret blinks once more, dimmed to 40%, and stays. **Motion language:** everything is slow and damped. Spring entrances at low stiffness (no `bounce-enter` overshoot you can feel). Scroll uses native scroll; the progress-bar ticks update via IntersectionObserver. No `parallax` layers, no `cursor-follow` blob, no `magnetic` buttons, no `tilt-3d` cards, no `typewriter-effect` *except* the boot log (which is the one diegetic exception). The only perpetual motion is the canvas simulation itself and the 40-second corner-bracket rotation. Respect `prefers-reduced-motion`: freeze the canvas on its current frame, skip the boot typing (show the log instantly), keep everything else static. **Build notes:** canvas at `devicePixelRatio`, rAF loop throttled to ~40fps, `IntersectionObserver` pauses any offscreen canvas, all six sparklines share one data buffer with the main sim. Total JS budget is small — this is geometry and noise, not a library. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Genuinely cool-toned and unsentimental.** Against a corpus that is 98% warm palettes and dominated by pastoral-romantic / warm-inviting tones, simulai.net is vacuum-black, oscilloscope-blue, phosphor-mint — instrument-room cold. No beige, no parchment, no cream, no sunset gradient. The single radial blue glow is the *only* gradient on the entire page, where 94% of the corpus leans on gradients heavily. 2. **The generative canvas IS the content, not a background flourish.** "Generative-art background" appears in ~11% of sites as decoration behind real content; here a live soft-body particle simulation is the largest element on the page and every observation is literally a different *measurement* of it. The site has zero photography, zero icons, zero illustrations — purely procedural. 3. **No marketing surface anywhere.** No CTA, no pricing, no stat grid, no testimonials, no feature cards, no email capture, no logo wall, no hero-with-button — this site refuses the entire SaaS-landing vocabulary that `card-grid` (92%) + `hero-dominant` (16%) + dashboard tropes pull most sites toward. It's a single-column witness experience inside a fixed instrument bezel. 4. **Anti-pattern motion stance.** Deliberately omits the corpus's near-universal motion clichés — `parallax` (89%), `cursor-follow` (89%), `magnetic` (78%), `spring`-bouncy entrances, `tilt-3d` (31%) — keeping motion to one damped canvas sim and a barely-visible 0.5°/40s corner rotation. The one `typewriter-effect` use (the boot log) is diegetic, not a hero gimmick. 5. **Diegetic framing.** The visitor is positioned as an *observer of an unattended machine*, with copy written as a researcher's margin notes and live-updating cycle counters in the millions — a fiction sustained from boot panel to idle panel, rather than the usual "here's what our product does" address. **Chosen seed/style:** `generative art background` (from seeds.json) — interpreted as a perpetual physics-simulation observation deck. **Avoided overused patterns (per frequency analysis):** warm palette, gradient-heavy palette, hand-drawn aesthetic (94%), glassmorphism (84%), photography imagery (98%), card-grid layout (92%), full-bleed/hero-dominant marketing, parallax (89%), cursor-follow (89%), magnetic (78%), spring-overshoot entrances, tilt-3d, pastoral-romantic/warm-inviting tone.