# Design Language for simai.tech ## Aesthetics and Tone simai.tech is staged as **a public observation deck overlooking a running simulation** — not a product page about AI, but a literal window into a synthetic universe that is *being computed in real time while you watch*. The conceit takes the name apart: **sim + ai** = a mind that lives inside a model of the world. So the entire site behaves like the readout console of a long-running cosmological sim — a "world-engine" that has been ticking for billions of synthetic years, and the visitor has been handed a chair in front of the glass. The mood is **cold, lucid, and quietly awed** — the opposite of the warm-gradient, friendly-startup default. Think the control room of a particle accelerator at 4am: matte-black surfaces, a single phosphor-green or cyan trace doing something hypnotic, a low hum, everything precise and a little reverent. There is no marketing cheer here. The copy reads like a research log written by someone who has been watching the sim so long they have started to find it beautiful. Tone words: **lucid, generative, instrument-grade, vast, patient**. Visual reference points: the Game of Life rendered on an oscilloscope; Conway gliders printed on graph paper; Karl Sims' evolved virtual creatures; a planetarium dome turned inside-out; the readout panels of Kerbal-Space-Program flight computers reimagined by a minimalist; the cover of a 1970s physics preprint. Critically, the *page itself is generative*. The background is not a static gradient mesh and not stock photography — it is a live cellular-automaton / reaction-diffusion field, computed in a canvas, that the visitor's scroll position **feeds parameters into**. Scrolling is not navigation; it is *turning the dials of the sim*. The site is the simulation it describes. ## Layout Motifs and Structure The structure is **organic-flow over a hidden lattice** — a deliberate tension between two grids. Underneath everything sits a faint **8-column × infinite-row engineering grid** (1px lines at 4% opacity, `#1FB6A8` hairlines), the "world-space coordinate system." On top of that lattice, content arrives as **organic blobs of automaton growth** — text and panels are not boxed into cards; they are *colonies* that have grown into irregular regions of the canvas, their edges defined by `clip-path` polygons that match the contour of the live cellular field behind them. The page is **one continuous vertical scroll, ~640vh**, divided into **seven "epochs"** of the simulation rather than seven sections: 1. **Epoch 0 — Cold Start.** A near-black field, one blinking cell at dead center, a single line of monospace: `simai // a world that runs while you read it`. The cell begins to divide as the visitor's cursor moves. 2. **Epoch I — Rules.** The four or five "laws" of the engine, each law rendered as a small live mini-automaton demonstrating itself (a glider gun, a wave front, a diffusion bloom). Laws float at the left margin; their demonstrations occupy the right two-thirds. 3. **Epoch II — Emergence.** A long passage where structure self-organizes out of noise. This is the most full-bleed moment — the canvas fills the viewport, text is sparse, white-on-near-black, and the whole field is reacting to scroll velocity. 4. **Epoch III — Bodies.** Where the sim grows "agents." Each agent is a small evolved-creature SVG that crawls along the scroll path. 5. **Epoch IV — Minds.** The conceptual heart: what it means for the sim to model *itself*. A recursive motif — a tiny copy of the entire page rendered inside a panel inside the page. 6. **Epoch V — The Deck.** Who built the engine, what it's for — written as field notes, never as an "About Us" with headshots. 7. **Epoch VI — Still Running.** The footer is a live tick-counter: `T+ 13,798,000,000 yr — simulation continues`. No CTA. The counter just keeps going after you leave. Navigation is a **thin left-margin "timeline rail"** — a vertical 1px line with seven notches; the current epoch's notch glows; clicking jumps. No top nav bar, no hamburger, no hero-with-CTA. Asymmetry is the rule: content hugs left margins, gutters are uneven, and the canvas always claims more than half the screen. ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **Space Mono** (the instrument voice) — every label, coordinate, tick-count, law, and caption. Used at small sizes (13–15px), `letter-spacing: 0.04em`, often uppercase for system labels (`EPOCH II`, `T+`, `RULE 04`). This is the oscilloscope-readout typeface. It gives the whole site its "this is a real console" credibility. Tabular figures only — numbers must never reflow. - **Fraunces** (variable; the awed voice) — the seven epoch titles and the rare full-screen statement lines. Set large: `clamp(44px, 7vw, 130px)`, weight axis 340, *optical-size axis pushed to 144* for the most "engraved on a brass plate" feel, soft-axis at 0 (crisp, not friendly). One epoch title (`Minds`) gets its WGHT axis animated 340→600 over 2s on entry, as if the word is *thickening into existence*. Italic Fraunces, light weight, for the field-note interludes. - **IBM Plex Sans** (the body voice) — running prose in Epochs IV and V, 17–19px, weight 400, `line-height: 1.62`, max 62ch. Neutral, technical, calm — it stays out of the way so the canvas can perform. **Palette — cold instrument black with two live traces.** Minimum-three rule satisfied; full set: - `#07090C` — **void black**, the canvas base and page background. Not pure `#000` — a hair of blue so the phosphor traces glow against it. - `#0E1318` — **panel black**, for the faint colony regions / panel fills (used at 70–88% opacity over the canvas). - `#1FB6A8` — **trace cyan**, the primary living color: the cellular field's "alive" cells, the grid hairlines, the active timeline notch, link underlines. The single hue that carries the brand. - `#C7F9B0` — **phosphor green**, the secondary trace: used only for *new* growth — cells in their first few ticks of life flash this before settling to cyan. Also the tick-counter. - `#E8E4D8` — **bone white**, all type that must be read as prose or titles. Slightly warm against the cold field — the human reading the machine. - `#5A6670` — **ash gray**, secondary labels, inactive notches, the "this hasn't happened yet" state. - `#F25C54` — **alert coral**, used *exactly once*, in Epoch IV, on the recursive self-model — the only warm accent in the entire site, deployed like a single red light on a black panel. Restraint is the point. Gradients are essentially absent (a deliberate counter to the registry's 94% gradient rate) — the only "gradient" is the radial falloff of glow around live cells, generated by the canvas, not by CSS `linear-gradient`. ## Imagery and Motifs **Three motif families, all generated, zero stock photography.** **1. The living field (load-bearing).** A full-page `` running a hybrid **cellular automaton + reaction-diffusion** simulation at ~24fps, fixed behind all content. Cells render as small soft squares (3–5px) glowing trace-cyan, new cells flashing phosphor-green. Scroll position maps to the rule-set: early scroll = sparse Conway-like life; mid-scroll = denser reaction-diffusion (Gray-Scott parameters lerped by scroll y); late scroll = a slow, almost-still "heat death" state. Cursor velocity injects "energy" — fast mouse movement seeds new colonies. This canvas is the single most important visual asset; everything else is a quiet overlay on it. **2. Self-demonstrating diagrams (line-illustration, generated-art).** The "laws" in Epoch I are not icons — each is its own tiny canvas running the exact rule it names: a Gosper glider gun, a Belousov-Zhabotinsky-style spiral, a Turing spot/stripe pattern. Drawn in 1px trace-cyan strokes on transparent ground, captioned in Space Mono. The diagrams *are* the explanation. **3. Evolved-agent SVGs (custom-illustration).** In Epoch III, ~12 small (24–40px) creature glyphs — articulated stick-bodies with 3–6 segments, drawn as if evolved by a genetic algorithm: asymmetric, slightly grotesque, no two alike, all in single-weight bone-white stroke. They crawl along an invisible curve as the visitor scrolls past, legs cycling. They never become "mascots" — they stay sketch-like, like figures from an evolutionary-robotics paper. **Decorative grammar:** crosshair fiducial marks at colony corners (`+` in ash gray, like registration marks on a printing plate); coordinate readouts that update with scroll (`x: 0.42 y: 0.88 ticks: 4,210,556`); a faint perpetual scanline (one 2px line, 3% opacity, drifting top-to-bottom over 18s) to give the "live monitor" feel. No drop shadows, no rounded "soft UI," no glassmorphic blur — surfaces are flat and matte; only the canvas cells glow. ## Prompts for Implementation Build simai.tech as **one HTML document, one CSS file, one ES module, and the simulation engine in a Web Worker** (so the canvas sim never blocks scroll). No framework, no router, no SPA shell. No pricing tiers, no CTA grid, no testimonial carousel, no stat-counter bar, no hero-with-signup, no feature-card 3-up. The page is an **observation deck**, not a funnel — narrative and atmosphere outrank conversion entirely. **The simulation is the spine.** First task: implement the canvas engine (cellular automaton blending into Gray-Scott reaction-diffusion), running in a worker, posting `ImageData`/`OffscreenCanvas` frames back at ~24fps. Expose three tunable parameters — `density`, `feed`, `kill` — and drive them from `scrollProgress` (0→1) via eased lerps. Inject perturbations from `pointermove` velocity. This must run smooth on a mid laptop; if it can't hit 24fps, drop cell resolution, never the concept. **Scroll is the dial, not a menu.** Use a scroll-linked timeline (IntersectionObserver per epoch + a `requestAnimationFrame` reader of `scrollY`). As the visitor scrolls: (a) the sim parameters shift through the seven epochs; (b) the left timeline rail's active notch moves and glows trace-cyan; (c) the coordinate readout updates; (d) epoch titles fade/translate in with a 90ms stagger across their letters; (e) Fraunces variable WGHT animates on the `Minds` title only. Respect `prefers-reduced-motion` by freezing the sim to a single handsome static frame and disabling parallax — but this is otherwise an *unapologetically full-screen, motion-forward narrative experience*. **Storytelling beats:** Cold Start (a single dividing cell, near silence) → Rules (laws that demonstrate themselves) → Emergence (full-bleed, the field self-organizing, text almost absent) → Bodies (creature SVGs crawling the scroll) → Minds (the recursive self-model, the lone coral accent) → The Deck (field notes, no headshots) → Still Running (live tick-counter footer that keeps counting). Each beat should feel like *advancing the simulation*, not loading the next slide. **Implementation specifics:** content panels get `clip-path` polygons recomputed (cheaply, ~once per second) to roughly match the live field's contour behind them — content should feel *grown into* the sim, not floated above it. Colony corners get `+` fiducial marks via pseudo-elements. One drifting scanline via a `translateY` CSS animation on a fixed 2px element at 3% opacity. Links: no buttons — inline text with a trace-cyan underline that draws in left-to-right on hover (`path-draw`-style via `background-size` transition). Type all numbers with `font-variant-numeric: tabular-nums`. Keep total custom JS lean; the worker does the heavy lifting. Ship a graceful no-canvas fallback: a static SVG of one beautiful frozen automaton frame plus all the prose. ## Uniqueness Notes Five differentiators this design commits to; none should be duplicated by other CMassC sites: 1. **The page is the product it describes.** Most "AI" sites *talk about* computation behind a gradient mesh; simai.tech *is a running simulation* — a live cellular-automaton + reaction-diffusion canvas whose parameters the visitor controls by scrolling. The medium and the message are the same object. No other registry design uses a continuously-computed generative field as the literal subject. 2. **Generative-art as the entire visual system, with photography at zero.** Frequency analysis: `photography` appears in ~98% of designs and `generative-art` in only ~11%. This design carries 0% photography, 0% stock, 0% gradient-mesh-as-decoration — every pixel of imagery is computed at runtime (the field, the self-demonstrating law diagrams, the evolved-creature SVGs). It is the registry's purest commitment to `generative` aesthetic + `generative-art` imagery. 3. **Cold instrument-black against the registry's warm-gradient monoculture.** `warm` palettes appear in ~98% of designs and `gradient` in ~94%; this design is `#07090C` void-black with essentially no CSS gradients, two phosphor traces (`#1FB6A8`, `#C7F9B0`), and a single coral accent used exactly once. An oscilloscope, not a sunset. 4. **No CTA, no funnel, no cards — an "observation deck" IA.** Seven *epochs of a simulation* replace seven marketing sections; the footer is a tick-counter that keeps running, not a signup. Deliberately rejects the overused `card-grid` (~92%) and `hero-dominant` patterns in favor of `organic-flow` colonies grown over a hidden engineering lattice. 5. **Avoided patterns, explicitly:** no `glassmorphism` (~84% — zero blur surfaces here, everything flat/matte), no `hand-drawn` (~94% — diagrams are machine-precise, not sketchy), no `cursor-follow` glow-orb cliché (the cursor instead *injects energy into the sim* — a functional, not decorative, reaction), and no `parallax` velocity-layers (depth comes from the Z-less flatness of a monitor screen, on purpose). Mono typography (`Space Mono`) is used, but as instrument-readout, not as the trendy "tech-startup mono headline." Chosen seed / style: **generative art background**.