# Design Language for sim-ai.xyz ## Aesthetics and Tone sim-ai.xyz is **a planetarium of artificial life rendered in chalk on a slate floor** — imagine a clean white research room where the only light source is the soft glow of a million simulated agents drifting across the walls, and a single scientist stands in the middle watching emergent behavior bloom in real time. The aesthetic is **generative-art-background as the primary surface, not the decoration** — the whole page is a living substrate (flow fields, reaction-diffusion blooms, boids, cellular automata) and the text floats on top of it like field notes pinned to a glass observation deck. The mood is **calm-serene meets futuristic-cutting-edge**: not the neon-saturated "AI hype" look (cyberpunk is at 12%, dark-neon palettes everywhere), and not the corporate-gradient SaaS template (corporate aesthetic 13%). Instead it is the quiet, patient tone of a long-running simulation — the kind that takes 40 minutes to converge and is mesmerizing the entire time. Think of the visual register of a Conway's Game of Life screensaver dignified into a museum exhibit, or the plotter-pen drawings of Vera Molnár given a heartbeat. Restraint is the rule: one generative system visible at a time, lots of paper-white air around it, type that whispers. Crucially, **the site is honest about being a simulation** — it never pretends the motion is "magic." Tiny monospace annotations name what you're watching ("// flow field, 12k particles, perlin seed 0x3F"), the way a good wall label tells you the medium. The tone is that of a generative artist who is also a scientist: precise, unhurried, a little wry. ## Layout Motifs and Structure The composition is **layered-depth over a single full-bleed generative canvas** — there is exactly one `` element pinned `position: fixed` behind everything, and the document is a sequence of translucent "observation panels" that scroll over it. (Layered-depth sits at 12%, immersive-scroll at 14% — this site sits in that quieter band rather than the 92% card-grid / 80% centered mainstream.) - **The substrate layer (z-index 0).** The fixed generative canvas. It is *never* hidden. Across the scroll it transitions through five distinct generative systems, one per chapter — flow field → boids flock → reaction-diffusion → cellular automaton → particle attractor — each cross-fading into the next over ~400px of scroll. The canvas tints subtly per chapter but the base remains near-white so the room never goes dark. - **The annotation rail (z-index 1, left edge).** A 64px-wide vertical strip running the full document height, hairline-ruled, carrying a continuously-updating monospace readout: current system name, particle count, frame time, RNG seed, generation number. It reads like the side margin of a lab notebook. On narrow screens it collapses to a thin ticker under the header. - **The observation panels (z-index 2).** Each chapter's text lives in a single panel — a frosted, barely-there white rectangle (≈92% opaque, 1px slate hairline, no shadow or the faintest possible one) — placed asymmetrically: chapter 1 panel pinned bottom-left, chapter 2 top-right, chapter 3 a narrow centered column, chapter 4 a wide low band, chapter 5 a small square dead-center. The panels are deliberately *small* relative to the viewport; the simulation always has more room than the words. - **The seam.** Between chapters, the panel slides away and for one full viewport-height there is *only* the canvas with its annotation — a held breath, a pure-simulation interlude before the next system fades in. - **No grid of cards. No bento. No hero-with-CTA.** The structure is: header (wordmark + one line) → five chapters, each = [interlude → panel → interlude] → a closing colophon panel. That's the entire skeleton. ## Typography and Palette **Fonts (Google Fonts only — two voices: one for the field notes, one for the readouts):** - **Body, headings & wordmark — *Spectral* (serif, weights 300 / 400 / 600, plus *Spectral SC* small-caps for the wordmark).** Spectral is a screen-first serif with a slightly mechanical, almost technical-drawing crispness — it reads like a scientific journal that has been carefully typeset, not a romance novel. Headings set in Spectral 600 at large sizes (clamp 2.4rem → 4rem) with generous line-height; body in Spectral 400 at 1.15rem, max 62ch, line-height 1.75. The wordmark "SIM·AI" is Spectral SC, letter-spaced +0.14em, with a literal mid-dot glyph between the syllables. - **Annotations, readouts, captions, code — *Spline Sans Mono* (weights 400 / 500).** Spline Sans Mono is a humanist monospace — round, friendly, modern — used for everything in the annotation rail, the wall-label captions under each system ("// reaction-diffusion · F=0.0367 · k=0.0649"), and any inline parameter names. Set small (0.72rem–0.82rem), uppercase only for system *names*, lowercase for parameters, tracked +0.04em. The contrast is deliberate: a humane serif for the human (the observer's notes) and a humane monospace for the machine (the simulation's vital signs). No grotesk, no display face, no handwriting. **Palette — "chalk and slate and one live spark":** - `#FAFAF7` — **Paper White.** The dominant surface; the canvas base, the panel fill, the page background. Warm enough to not be clinical. - `#1C1F26` — **Slate Ink.** Body text, hairlines, the annotation rail's rules. Near-black with a cool blue undertone, like graphite on cold-press paper. - `#5B6472` — **Ash.** Secondary text, captions, the resting color of simulation particles. The "thinking" gray. - `#E7E4DC` — **Dust.** Panel borders, interlude wash, the faint texture of the substrate when a system is idle. - `#2E6F6A` — **Pondglass Teal.** The structural accent — the wordmark dot, link underlines, the annotation rail's active-line highlight, the leading edge of a flow field. A deep, slightly grayed teal; the color of deep still water, not a tech-brand cyan. - `#E2603A` — **Live Spark.** Used *once per chapter, briefly* — the moment a cellular automaton cell ignites, the apex of a particle attractor, the single agent the camera is tracking. Burnt-coral. It is the only warm-saturated color on the entire site and it is rationed like a precious reagent. Gradients are forbidden as decoration; the only "gradients" are the genuine density falloffs the simulations produce on the canvas. ## Imagery and Motifs **There is no photography, no stock illustration, no 3D render, no icon set. Every visual element is either (a) the live generative canvas or (b) hand-built SVG diagrams in the style of a scientific paper's figures.** The recurring motifs: - **The five systems.** Each chapter *is* an algorithm, visibly running: (1) **Flow Field** — thousands of pale particles streaming along a Perlin-noise vector field, leaving faint trails. (2) **Boids Flock** — a few hundred agents with separation/alignment/cohesion, one tracked in Live Spark. (3) **Reaction-Diffusion** — Gray-Scott blooms spreading across the viewport in Pondglass on Paper. (4) **Cellular Automaton** — a slow-stepping Life-like grid, cells fading in Ash, ignitions flashing coral. (5) **Particle Attractor** — a strange-attractor curve (Clifford or de Jong) drawn point-by-point, building over the chapter. - **Figure-style SVG diagrams.** Inside the observation panels, small monochrome line diagrams — a phase-space plot, a rule-table for the automaton, a neighborhood stencil, a vector-field arrow patch — drawn with 1px Slate strokes, labeled in Spline Sans Mono, exactly as they'd appear in a printed paper. These animate their own draw-on (path-draw-svg is at 48% but used here in a *figure* register, not a logo flourish). - **The annotation rail's tick marks.** Tiny horizontal hairlines along the rail, one per 100px of scroll, like a ruler — a quiet nod to the simulation being a measured, bounded experiment. - **Grain.** A nearly-imperceptible static-noise overlay (≤3% opacity) on the whole page, so the white never looks like flat #FFF screen-white but like illuminated paper. (Grain-overlay 10%, noise-texture 5% — used here at homeopathic strength.) - **The mid-dot.** The "·" from the wordmark recurs as the bullet in lists, the separator in captions, the pause glyph in the readout. One small typographic atom, repeated. ## Prompts for Implementation Build sim-ai.xyz as **a single-route, vertically-scrolled observation deck**: one HTML file, one CSS file, one JS module, plus one small JS file per generative system if that keeps things clean. Treat the page as a ~90-second guided walk past five running simulations in a quiet white room. There is **no CTA, no pricing table, no stat grid, no testimonial row, no feature-card grid, no email capture, no nav menu** — there is the canvas, the annotation rail, five observation panels, and a closing colophon. **The canvas engine:** - One `` `position: fixed`, full-viewport, `z-index: 0`, devicePixelRatio-aware, drawn in a single `requestAnimationFrame` loop. - A `SystemManager` holds five system objects, each with `init()`, `step(dt)`, `render(ctx)`, and a `tint`. Scroll position picks the active system; near a chapter boundary, render both and cross-fade by alpha over ~400px. - Each system is a real, simple implementation — Perlin/simplex noise for the flow field, classic boids rules, Gray-Scott for reaction-diffusion, a Life-variant for the automaton, a Clifford attractor for the last. Keep particle counts modest and tunable; the *behavior* is the spectacle, not the count. - Respect `prefers-reduced-motion`: if set, freeze each system on a single beautiful static frame and cross-fade those instead. **Scroll storytelling structure (five chapters, each = interlude → panel → interlude):** 1. **"It starts as drift."** Flow-field interlude. Panel bottom-left: the premise — sim-ai.xyz is a place where artificial behavior is *grown and watched*, not shipped. A small vector-field stencil diagram draws on. 2. **"Then they start watching each other."** Boids interlude, one agent in Live Spark. Panel top-right: on emergence — how three trivial rules make a flock; the tracked agent's neighbor-list rendered as a tiny SVG. 3. **"Patterns eat patterns."** Reaction-diffusion interlude. Panel: a narrow centered column on instability and pattern formation; a Gray-Scott F/k phase diagram diagram animates. 4. **"Every cell obeys, no cell decides."** Cellular-automaton interlude, ignitions flashing coral. Panel: a wide low band on local rules / global form; the rule table draws on cell by cell. 5. **"And sometimes it converges."** Particle-attractor interlude, the curve building point by point. Panel: a small centered square — the closing thought: every simulation is a question we couldn't ask in words. 6. **Colophon panel.** Wordmark "SIM·AI", the build/seed line, fonts, the line "rendered live in your browser — refresh for a new universe." Reload genuinely re-seeds every system. **Motion vocabulary:** the canvas is continuously alive; everything *else* is nearly still. Panels fade + rise 16px on enter (one easing, `cubic-bezier(.2,.7,.2,1)`, ~600ms). SVG figures draw their paths on. The annotation rail's active line slides and highlights in Pondglass. Link underlines draw left-to-right on hover. Live Spark elements get a single 250ms pulse when they trigger, never a loop. No parallax-of-images, no tilt-3d cards, no magnetic buttons, no typewriter headlines — the only "typewriter" is the readout in the rail, which legitimately types out new values. **The annotation rail must feel real:** it updates from the actual simulation state every frame (throttled to ~10fps for readability) — `frame 0144 · boids · n=320 · dt 16.6ms · seed 0x3F2A · gen —`. This is the thread that ties the whole experience together: proof that what you're looking at is computed, not animated. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Generative art as the *page substrate*, not a hero accent.** Generative-art imagery sits at 11% and "generative" aesthetic at 14% — but in nearly every case it's a decorative blob behind a hero, then a normal card-grid site below. Here the generative canvas is `position: fixed` behind the *entire* document, running five real algorithms across the scroll, and the content is just field notes floating on it. The simulation is the site. 2. **A live, honest "lab readout" rail instead of decoration.** The 64px annotation rail showing real per-frame simulation state (particle counts, dt, RNG seed, generation) is, as far as the corpus shows, unique — it's the opposite of the 89% cursor-follow / 79% magnetic-button playbook. It's instrumentation, not interaction-candy. 3. **Anti-neon AI palette.** "AI" sites overwhelmingly reach for dark-mode + neon-electric/dark-neon (and cyberpunk 12%). sim-ai.xyz is Paper White #FAFAF7 with Slate Ink, a grayed Pondglass Teal #2E6F6A as the only structural accent, and a single rationed Live Spark #E2603A coral — a calm, paper-and-graphite register that treats AI simulation as patient science, not glowing spectacle. 4. **Scientific-figure SVGs instead of icon sets or 3D renders.** Phase diagrams, rule tables, neighborhood stencils — drawn like a printed paper's figures in 1px Slate + Spline Sans Mono labels. No icon-heavy UI (1%), no 3d-render. 5. **Held-breath interludes.** Between every chapter there is one full viewport of *only the canvas* — no text, just the simulation and its readout. This rhythm of [pure simulation → notes → pure simulation] is the structural signature; it deliberately avoids the 92% card-grid / 80% centered / 86% full-bleed-hero default. Chosen seed/style: **generative art background** — expressed as *aesthetic: generative, layout: layered-depth, typography: serif-revival + tech-mono, palette: cool-grays (paper-and-slate), patterns: path-draw-svg, imagery: generative-art, motifs: particle-effects, tone: calm-serene*. Avoided patterns from frequency analysis: card-grid (92%), centered (80%), full-bleed hero (86%), cursor-follow (89%), magnetic (79%), spring (83%), parallax (89%), glassmorphism (84%), hand-drawn (94%), photography (98%), warm gradient (94/98%), tilt-3d (31%), typewriter-effect as headline gimmick (15%), dark-mode/neon AI clichés.