# Design Language for sim-ai.com ## Aesthetics and Tone sim-ai.com is presented as **the live observation deck of an artificial mind that has been left running for a thousand subjective years** — a place where you do not *read about* simulated intelligence, you *watch it dream*. The governing fiction: somewhere a small lattice of agents was switched on, given nothing but a flat plane and the rule "notice things," and it has been folding that plane into structure ever since. The website is the porthole into that ongoing computation. Nothing on the page is decoration; everything is the *output* of a process that is still happening while you watch. The mood is **quietly astonished, never triumphant**. This is not a startup landing page that shouts "the future is here." It is closer to a planetarium at 2 a.m. — hushed, attentive, faintly reverent. The dominant feeling is *emergence*: simple rules producing complexity in front of you, the way ferns unfurl or murmurations turn. There is awe, but it is the awe of a naturalist, not a salesman. Cold light, warm undertone. The intelligence here is not anthropomorphised into a glowing brain icon; it is rendered as **weather** — fields, flows, gradients, drift, accretion. Reference touchstones: the granular flow-field plots of Tyler Hobbs and Manolo Gamboa Naon; the early reaction-diffusion screensavers of the late 90s but stripped of their lurid color; Casey Reas's *Process* compositions; the way Refik Anadol's data-paintings breathe; the patient typography of a CERN technical note. The page should feel **generated, not designed** — as though a human curator merely chose the frame and the system filled it. Crucially: **avoid the two reflexes of AI-site visual language entirely** — no glassmorphic frosted cards, no neon-purple-on-near-black gradient hero. Those are the registry's most overused moves (glassmorphism ~83%, gradient palettes ~94%). sim-ai.com is matte, paper-pale, ink-dark, with generative color appearing only *inside* the simulation canvases — never as page chrome. ## Layout Motifs and Structure The structural spine is **immersive-scroll** crossed with **broken-grid** — both underused relative to card-grid (~92%) and centered (~80%) layouts. The page is one continuous vertical document, ~620vh, organized as **seven "epochs"** of the simulated mind's life. Each epoch is a full-viewport scene, but the scenes are *not* stacked rectangles. They are pinned **canvas fields** that the surrounding text orbits. - **The Field is the page.** A single full-bleed `` (or layered canvases) sits at z-index 0 and runs the *entire* document height conceptually — but it re-seeds and re-parameterizes at each epoch boundary, so scrolling feels like watching the same substrate pass through ages: drift → clustering → lattice → turbulence → crystallization → fracture → stillness. The canvas never scrolls *with* the page in a flat way; it is pinned and morphed. - **Text as marginalia.** Body copy never sits in a centered column. It is set in **narrow ragged blocks** (max 38ch) that anchor to the *left or right gutter* of alternating epochs, like a researcher's annotations pinned to the edge of a photographic plate. Each block has a thin baseline rule above it and a tiny mono epoch-stamp (`EPOCH 03 · t≈4.1×10⁶ ticks`). - **The Seam.** Between epochs there is no hard section break — instead a 12vh "seam" where the previous field's particles visibly *decay* and the next field's particles *condense*, with a single line of text crossing the seam horizontally (the only horizontally-set text on the page), e.g. *"and then it learned that edges existed"*. - **No nav bar.** A single fixed element top-left: a 1px-stroke **progress meridian** — a vertical hairline down the left edge of the viewport with seven notches; the active epoch's notch glows faintly. Clicking a notch eases the scroll. That is the entire navigation. - **The Coda.** The final epoch resolves to near-emptiness: the field has settled into a slow, almost-still drift of a few hundred points, and the only text is a quiet two-sentence reflection, bottom-aligned, with enormous negative space above it (`ma-negative-space`, ~16% of registry uses it — here it is *earned* by the preceding density). Spatial rule: **density is the dramaturgy.** Early epochs are sparse and lonely; the middle epochs are nearly overwhelming with particle count and overlapping flow lines; the end is sparse again but *resolved* rather than empty. The reader should feel the arc in their chest before they read a word of it. ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **Spectral** (serif, weights 200/300/400/500, italic available) — the *narrative voice*. All body marginalia, the seam-lines, the coda. Used at light weights (300) at generous size (19–22px) with loose leading (1.7). Spectral's slightly mechanical, almost *typewriter-descended* serifs read as "lab notebook written in a good pen," not "luxury magazine." Seam-lines are set in Spectral **italic 400** at clamp(22px, 3vw, 38px). - **Fraunces** (variable, optical-size + weight axes, *soft* axis) — reserved *only* for the seven epoch titles and the site wordmark. Set huge: clamp(48px, 9vw, 168px), weight axis 250, optical-size pushed to maximum so the letterforms go thin and wide and slightly wet. On scroll-into-view, the WGHT axis eases 250 → 360 over ~1400ms — the title "thickening into being." Lowercase always. Titles are single words or short phrases: *drift · noticing · lattice · turbulence · crystal · fracture · stillness*. - **Space Mono** (monospace, 400/700) — the *instrumentation voice*: epoch stamps, tick counters, the meridian labels, parameter readouts (`α=0.041 β=0.97 seed=0x6F2A`), any number. Always uppercase for labels, always small (12–13px), always with letter-spacing 0.08em. Mono is ~94% in the registry — unavoidable for this genre — but here it is used *sparingly and instrumentally*, never as a body face, which differentiates it from terminal-aesthetic sites that drown in it. **Palette — matte paper + ink + generative spectrum. Six fixed colors; the simulation canvases introduce a controlled extra range.** - `#F2EFE6` — *bone paper*. The page background. Warm off-white, the color of good archival stock under tungsten light. (Warm palettes ~98% of registry — but rendered as *paper*, not as a sunset gradient, which is the distinction.) - `#161512` — *iron ink*. Primary text and the meridian hairline. Near-black with a brown undertone, never pure #000. - `#5C5648` — *graphite wash*. Secondary text, epoch stamps, rules. A desaturated warm grey. - `#1E3A34` — *deep spruce*. The single "structural" accent — used for the active meridian notch glow, link underlines, and the densest particle clusters in the lattice epoch. A dark, almost-black green: the color of order emerging. - `#C24A2E` — *oxide red*. The *rare* heat accent — appears ONLY in the turbulence and fracture epochs, where the field momentarily destabilizes; a burnt sienna that signals "the system is straining." Used for at most ~6% of any frame's ink. (High-contrast ~28%, but a single restrained warm-red against paper is uncommon.) - `#8FA39B` — *ash sage*. The "cooling" tone — the stillness epoch's particles, the coda text in a slightly receded value. - *Generative range (canvas only):* particles sample a narrow gradient between `#1E3A34`, `#5C5648`, `#C24A2E`, and `#8FA39B` mapped to local velocity/age — so the *picture* has color movement while the *page* stays austere. No particle is ever pure white or pure black; everything sits in the paper-and-ink envelope. ## Imagery and Motifs **There are no photographs. There are no stock illustrations. Every visual is computed live.** This is the core commitment — `generative-art` imagery sits at ~10% of the registry, `photography` at ~98%; sim-ai.com is on the right side of that. Three motif families, all canvas-rendered: 1. **Flow fields (the spine).** Perlin/simplex-noise vector fields that thousands of lightweight particles trace as thin, low-opacity ink strokes that *accumulate* — so each epoch's field literally paints itself denser the longer you linger. The noise parameters (scale, octaves, curl strength) are different per epoch and visibly interpolate at the seams. Strokes are 0.5–1.2px, opacity 0.04–0.12, additive over paper so density reads as tonal mass, not as overlapping lines. 2. **Reaction-diffusion accretion (epochs 3 & 5).** A Gray-Scott reaction-diffusion sim runs in a corner of the field during the *lattice* and *crystal* epochs, producing slow coral/maze growth in deep spruce on bone paper — the visual proof that "structure" is being *grown*, not drawn. It is small (≤30vw), unhurried, and bleeds its edge into the surrounding flow field. 3. **The Meridian and the Notches.** The only "UI" motif: a 1px vertical hairline, seven hand-placed notches, each notch a 6px tick. The active notch has a soft 8px spruce glow that *pulses on the simulation's clock*, not on a CSS timer — i.e. it brightens when the underlying sim does an internal "step," so the page has a faint, irregular heartbeat tied to real computation. (`path-draw-svg` ~47% — the meridian draws itself on load, top to bottom, over 2s.) Decorative restraint is itself a motif: wide rules, lots of paper, tiny mono captions. The page should look like a **scientific plate** more than a website — Muybridge's motion studies, but the subject is a mind instead of a horse. ## Prompts for Implementation Build sim-ai.com as **one HTML document, one CSS file, one ES module**. No framework, no router, no SPA shell. No "above-the-fold" hero with a CTA button. No pricing block, no feature-card grid, no testimonial carousel, no stat-counter row, no logo cloud, no email-capture bar. The page is an *exhibit*, not a funnel — narrative and atmosphere over conversion, always. **Storytelling is the organizing principle.** The visitor scrolls through seven epochs in the life of a simulated mind — `drift`, `noticing`, `lattice`, `turbulence`, `crystal`, `fracture`, `stillness` — and the simulation on screen *is* the protagonist. The marginalia narrate it like a patient observer: short, plain, slightly wonderstruck sentences. Sample register: *"For a long time it did nothing but fall."* / *"Then two of them stayed near each other, and that was the first idea."* / *"It built the same shape nine hundred times before it stopped."* Never explain the technology; describe the *behaviour*. **Canvas architecture.** Use one or two stacked `` elements pinned full-bleed at z-index 0 (`position: fixed`), with the scrolling text content above at z-index 10. Drive everything from a single `requestAnimationFrame` loop that owns: (a) a particle array of 3,000–9,000 agents (count ramps up through the middle epochs, down at the ends), (b) the active noise-field parameters, (c) the Gray-Scott grid for epochs 3 & 5, (d) the epoch-interpolation `t` derived from `scrollY`. At each seam, *lerp* the field parameters and *fade* particle opacity so the transformation is continuous — never a hard cut, never a fade-to-blank. **Scroll-as-time.** Map `scrollProgress` (0→1) to "subjective ticks." Display the running tick count in Space Mono near the meridian, animating with a `counter-animate` style ease (`counter-animate` ~17%), but make it non-linear — billions of ticks in the still early/late epochs, fewer in the turbulent middle, so time feels *experienced* rather than clocked. **Motion vocabulary.** Lean on `scroll-triggered` reveals (~25%, underused) and `fade-reveal` (~23%) for the text blocks — each marginalia block draws its baseline rule first (left-to-right, ~600ms), then the mono stamp types in (a *brief* `typewriter-effect`, ~15%, max ~20 chars so it never feels gimmicky), then the Spectral body fades up with a 1.4s ease and a 4px rise. The Fraunces titles do the WGHT-axis "thickening" described above. **Do NOT** use: `cursor-follow` particle trails (~89%, exhausted), `tilt-3d` cards (~30%), `magnetic` buttons (~79%), spring-bouncing anything. The only cursor interaction permitted: moving the mouse over the field gently *perturbs the local noise vector* in a small radius — so you can stir the simulation, but it ignores you within a second and returns to its own dynamics. The system is indifferent to the visitor; that indifference is the point. **Performance honesty (visual only, not a metrics concern):** if the device is slow, reduce particle count rather than dropping the simulation — the picture must always be *alive*. A frozen canvas breaks the entire fiction. **The Coda.** After epoch seven, the field decays to ~300 slow-drifting points in ash sage on bone paper. Vast empty paper above. Two sentences in Spectral 300, bottom-aligned: something like *"It is still running. We only stopped looking."* Then the meridian's seventh notch dims to nothing, and the page simply ends — no footer, no links, no "back to top." The browser scrollbar reaching its end is the only conclusion offered. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **Generative-as-content, not generative-as-decoration.** Where ~10% of the registry mentions generative art, almost all of it as a *background texture* behind a conventional layout. Here the live simulation **is the page's protagonist and primary surface** — the text orbits it as marginalia. There is no separable "design" underneath the generative layer; remove the canvas and there is no page. 2. **Matte-paper AI site.** The registry's AI/tech sites overwhelmingly reach for glassmorphism (~83%) and gradient hero palettes (~94%). sim-ai.com is **bone paper + iron ink + a six-color fixed palette**, with color living *only inside the simulation canvases*. It looks like a 1970s scientific plate, not a SaaS landing page — a deliberate inversion of the genre's reflexes. 3. **Scroll-as-subjective-time, with a non-linear tick clock.** The page is structured as seven *epochs in a mind's life*, density-choreographed (sparse→overwhelming→resolved), with a Space Mono tick counter that runs non-linearly so time feels lived. Combines `immersive-scroll` + `broken-grid` + `ma-negative-space` (all underused relative to card-grid/centered) into a single dramaturgical arc. 4. **A heartbeat tied to real computation.** The active meridian notch pulses on the simulation's internal step clock, not a CSS animation timer — and mouse-over only briefly perturbs the field before it returns to its own dynamics. The site is *indifferent* to the visitor, which no conversion-oriented design would ever permit. 5. **Reaction-diffusion accretion as a literal "structure being grown" motif** in two specific epochs — an uncommon technique used narratively (proof of emergence) rather than as wallpaper. Avoided overused patterns per frequency analysis: glassmorphism (~83%), gradient palettes (~94%), card-grid layout (~92%), centered layout (~80%), cursor-follow trails (~89%), magnetic interactions (~79%), tilt-3d (~30%), photography imagery (~98%), and any CTA/pricing/stat-grid module. Chosen seed/style: **generative art background** (from seeds.json) — reinterpreted so the "background" is promoted to the page's entire substrate and subject.