# Design Language for sim-ai.net ## Aesthetics and Tone sim-ai.net is **a glass-walled simulation chamber suspended in deep water at three in the morning** — the place where artificial minds are run forward, paused mid-thought, and watched. The aesthetic is **generative-computational rendered in ethereal aquarium-blue**: not the chrome-and-neon cliché of "AI websites," but something quieter and stranger — the cool hush of a research vessel's observation deck, where the only light comes from the simulations themselves drifting past the portholes. Imagine if a Karl Sims evolved-creatures film, a 1970s Conway *Life* terminal, and the bioluminescent glow of a deep-sea jellyfish tank were composited onto a single dark pane of float glass. The tone is **futuristic-cutting-edge but contemplative** — confident the way a scientist is confident watching an experiment unfold, never the way a salesperson is confident. Nothing shouts. The interface behaves like an instrument, not an advertisement: it measures, it traces, it lets the simulation breathe. Type is set as if printed by a plotter on velum. Every motion is the motion of something *alive in a medium* — drifting, settling, propagating, never snapping or bouncing. The mood word is **submerged** — colors bleed and diffuse as if seen through water, edges soften toward their peripheries, and a faint current seems to move everything a few pixels off-true. This is a site that feels like *standing very still and watching something think*. ## Layout Motifs and Structure The composition rejects the card-grid (92% of the corpus) and the centered hero (80%) entirely. Instead it uses **organic-flow** (6% in frequency analysis — a near-empty room) built around a single governing metaphor: **the simulation runs continuously down the page like a vertical current, and content settles into the eddies.** - **The Current Spine.** A single, ever-present generative ribbon — a continuous flow-field path, drawn live — runs down the full height of the document, never perfectly straight, always meandering 8–14% of viewport width left and right of center. It is the page's circulatory system. Sections do not stack in rows; they *nest into the bends of the spine* the way silt collects on the inside of a river curve. - **Eddies, not panels.** Each block of content is an "eddy": an irregular soft-edged region (clipped with an animated SVG blob path, never a rectangle) where the current slows and text becomes legible. Eddies alternate which bank of the spine they cling to, producing a natural left-right zigzag without any hard grid. - **No fold, no sections-as-slabs.** Scrolling feels like drifting downstream. There is no "above the fold" composition; the first viewport shows the spine emerging from the top edge and the title forming in the first eddy as particles coalesce. - **Margins as open water.** The outer 18–22% of the viewport on each side is deliberately empty dark water — only stray particles and faint depth-gradient drift there. This is **ma-negative-space** (16%) used as actual *medium*, not just whitespace. - **Three depth planes.** Background: slow abyssal gradient + the largest, blurriest drifting forms. Midground: the current spine and the eddies. Foreground: a thin scatter of sharp, in-focus particles that parallax fastest and occasionally cross *in front of* text, as if floating between the reader and the glass. - **The instrument footer.** The page does not "end" with a CTA — it ends with the current spine flowing off the bottom edge and a single thin readout line: a live simulation tick-count and a small legend of the generative system's parameters, like the status bar of a scientific instrument. ## Typography and Palette **Fonts (Google Fonts only — a plotter-printout pairing: one mono for the machine's voice, one humanist for the human reading along):** - **Display, headings, the wordmark, and all numeric readouts — `Space Mono` (400, 700, and 700 italic).** Chosen for its slightly mechanical, slightly off-kilter monospace personality — the ovoid bowls and the chunky serifs read like output from a real device, not a stylized "code font." The wordmark "sim-ai.net" is set in Space Mono 700, lowercase, with the `.net` rendered at 60% opacity as if the simulation hasn't finished resolving it. Major headings are Space Mono in a wide tracking (0.04em), letterspaced like a control-panel label. - **Body copy, captions, and longer prose inside eddies — `Inter` (400, 500).** A neutral humanist sans that recedes and lets the generative imagery carry the personality. Set at a generous 1.7 line-height, 64–70ch measure, in a soft pale cyan rather than pure white so it reads as *underwater paper*. - **One accent voice — `IBM Plex Mono` (400 italic), used sparingly** for inline simulation-state annotations ("// generation 4,096", "// fitness rising") that appear beside content as if hand-noted by the observer. **Palette — ethereal-blue (only 3% of the corpus), tuned cold-and-luminous like a deep tank lit from within. Eight values:** - `#04070D` — **Abyss.** The base background; near-black with a drop of navy, the color of water with no light reaching it. - `#0A1424` — **Deep Tank.** Secondary background for the lowest depth plane; a slow gradient runs from Abyss at the edges to Deep Tank down the spine. - `#13283F` — **Glass Shadow.** The faint fill inside eddy regions, just barely lighter than the surround so text has a place to sit. - `#2E6F8E` — **Tidewater.** Midtone structural color — the current spine's core stroke, eddy hairline borders. - `#5BC8D6` — **Lumen Cyan.** The primary glow — particles, the spine's bright inner filament, link underlines, active states. This is the bioluminescence. - `#9FF0E6` — **Foam.** The brightest accent; cresting highlights on particles, the cursor's trailing wake, hover states. Use rarely — it should feel like a flash of light off something turning over. - `#C7D8E6` — **Velum.** Body text and most UI text — a cool pale cyan-grey, never #FFFFFF. - `#6E4DBF` — **Violet Drift.** The single warm-shifted accent, a deep-sea iridescent purple, used only in the background's blurry largest forms and in one heading gradient pass — a reminder that not everything in the tank is blue. Glows are layered `box-shadow`/`filter: drop-shadow` in Lumen Cyan at low alpha — never a hard neon outline; always a diffuse halo as if light is scattering through water. ## Imagery and Motifs **No photography. No stock illustration. No 3D product renders. Everything visual is generated live in `` and `` — the imagery IS the simulation.** This is **generative-art** imagery (10%) with **particle-effects** motifs (1% — almost untouched in the corpus). - **The Flow-Field Spine.** A Perlin/simplex flow field, sampled continuously, draws the meandering vertical ribbon. It is rendered as a layered stroke: a wide soft Tidewater base, a thin bright Lumen Cyan filament, and a faint Foam highlight that slides along it like a pulse traveling a nerve. - **The Drift Particles.** A few hundred soft circular particles, sized across three depth tiers, advected by the same flow field. Near particles are small, sharp, bright Lumen Cyan; far particles are large, blurred, dim, tinted toward Violet Drift. They never collide, never form a grid — they *school* loosely and disperse. On scroll, the field's "wind" gains a downward bias so particles stream past faster, reinforcing the descent. - **Cellular-automaton glyphs.** In the background of certain eddies, a tiny Conway's-Game-of-Life or cyclic-CA grid runs at very low opacity (8–12%) in monochrome cyan — a quiet nod to the lineage of artificial life. It is decorative texture, never a focal element. - **The Coalescence Title.** The site title doesn't fade in — its letterforms are *assembled from drifting particles* that flock into the shape of "sim-ai.net" over ~2 seconds, then relax into crisp type. On a hard reload it does this again. - **Agent traces.** Where a section discusses behavior or learning, a handful of small "agent" dots wander the eddy leaving fading dotted trails (path-draw SVG, drawn then erased) — like watching a few simulated creatures explore. - **No icons in the conventional sense.** Any necessary affordance (scroll cue, expand toggle) is drawn as a minimal generative mark — a small orbiting particle pair, a single drawn-and-redrawn arc. - **Depth haze.** A subtle full-screen radial vignette + barely-perceptible animated noise gives the float-glass-and-water atmosphere; nothing is ever perfectly crisp at the edges of the frame. ## Prompts for Implementation Build sim-ai.net as **a single-route, vertically-scrolled drift through a simulation chamber** — one HTML file, one CSS file, one JS module, plus one `` running the generative system. Treat the whole page as roughly a 70-second descent: the reader scrolls *down through the tank*, content settling into the bends of a living current. **There is no CTA section, no pricing table, no stat-grid, no testimonial row, no feature-card matrix, no email-capture band, no logo cloud.** There is the current, the eddies, the particles, and a quiet instrument readout at the bottom. **Narrative structure (eddies along the spine, top to bottom):** 1. **Surface.** The spine emerges from the top edge. Drift particles flock inward and coalesce into the wordmark "sim-ai.net"; a one-line subtitle resolves beneath it ("a place to run minds forward"). The current is calm here, near the top of the tank. 2. **What's in the tank.** First real eddy, clinging to the left bank: a short prose passage on what sim-ai.net is — somewhere artificial minds are simulated, paused, observed. Background CA grid ticks faintly behind the text. 3. **Watching it think.** Eddy on the right bank: agent-trace dots wander the region leaving fading trails while a passage describes observing behavior emerge. The current speeds slightly; particles stream faster past this eddy. 4. **The mid-deep.** A wide bend where the spine swings furthest from center; background goes darkest (Deep Tank → Abyss), the biggest Violet-Drift blurred forms pass slowly. Sparse, contemplative copy — the deepest, quietest moment of the page. 5. **Lineages.** Eddy on the left: the spine briefly *splits* into two thinner braided strands that rejoin — a passage on iteration, generations, evolved behavior. The split is drawn live, the strands' brightness pulsing alternately. 6. **Resurfacing / the readout.** The current straightens and brightens (more Lumen Cyan, a Foam pulse traveling the full spine), then flows off the bottom edge. Below it: the instrument footer — a live tick counter ("simulation step 00:14:923…" incrementing), a tiny parameter legend, and the smallest possible set of links rendered as faint underlined Velum text. No "Get started." Maybe just "observe →" linking to nothing grandiose. **Animation & interaction (favor `morph` 14% and `path-draw-svg` 47% executed unusually — everything fluid, nothing springy):** - **Cursor as a disturbance in the medium.** The pointer doesn't have a custom shape — instead it *pushes the flow field*: particles within ~120px curve gently away, then drift back. A faint Foam wake trails the cursor and dissipates. This replaces the corpus-cliché magnetic/spring cursor-follow with something physical. - **Scroll = current speed.** Scrolling adds downward bias and turbulence to the flow field proportional to scroll velocity; stop scrolling and the current eases back to calm over ~1.5s. Parallax across the three depth planes is *fluid*, never stepped — far plane drifts slowest. - **Eddy entrances morph, don't slide.** As an eddy enters view, its blob clip-path *animates open* from a small irregular seed shape to its full form (SVG path morph), and the text inside fades up word-by-word at a slow, even cadence — no stagger-bounce, just a gentle wave of opacity. Use `prefers-reduced-motion` to drop straight to the resolved state with the canvas running at minimal/static intensity. - **Live, not looped.** The flow field, particles, CA grids, and agent traces are genuinely simulated each frame (capped ~45fps, paused when tab hidden) — not a pre-baked Lottie. The point of the site is that it is *itself a small running simulation*. - **The title coalescence** uses particles tweened toward sampled glyph-outline points (sample the text path once, distribute particles, ease them in with slight overshoot-free settling), then hands off to real rendered type once converged. - **Hover states are bioluminescence.** Links and interactive marks don't underline-slide — they *bloom* a soft Lumen-Cyan glow that swells and recedes like something lighting up in the dark. The reader should leave feeling they spent a minute watching something alive in cold blue water — not feeling they were sold a product. ## Uniqueness Notes Differentiators, each a deliberate move away from the patterns in the frequency analysis: 1. **Generative-as-circulatory-system, not generative-as-wallpaper.** Generative aesthetics sit at 13% and almost always show up as a static gradient-mesh or decorative blob behind a normal layout. Here the live flow-field current is the page's actual spine — content nests into its bends — and the imagery (particles, CA grids, agent traces, the coalescing title) is the simulation itself running, not decoration applied over a grid. 2. **Organic-flow + particle-effects, the two emptiest rooms.** Organic-flow layout is 6% and particle-effects motifs are a near-untouched 1%. This design commits to both fully — no card-grid (92%), no centered hero (80%), no card-flip, no stat counters — replacing the entire conventional skeleton with eddies along a meandering current. 3. **Ethereal-blue rendered as *deep water*, not "AI tech blue."** Ethereal-blue is only 3% of the corpus, and where it appears it's usually airy and pastel. sim-ai.net pushes it cold, dark, and bioluminescent — an abyssal aquarium (#04070D Abyss → #5BC8D6 Lumen Cyan → one #6E4DBF Violet Drift accent) — deliberately rejecting the chrome/neon "artificial intelligence website" cliché. 4. **Motion as fluid advection, not spring/magnetic physics.** Spring (84%), magnetic (79%), and cursor-follow (89%) dominate the corpus. Here there is no bounce, no snap, no magnet — the cursor is a *disturbance in a flow field*, scroll *is* current velocity, and section entrances are SVG path *morphs* opening like blooming forms. The whole site moves like something suspended in a medium. 5. **No conversion architecture at all.** No CTA band, pricing, stat-grid, testimonials, logo cloud, or email capture — the page ends on a live simulation tick-counter and a faint "observe →", treating the visitor as someone watching an instrument rather than a lead to capture. Chosen seed/style: **generative art background** — *aesthetic: generative, layout: organic-flow, typography: tech-mono, palette: ethereal-blue, patterns: morph, imagery: generative-art, motifs: particle-effects, tone: futuristic-cutting-edge*. Avoided overused patterns from frequency analysis: hand-drawn (94%), glassmorphism (83%), photography (98%), card-grid (92%), full-bleed-as-hero / centered (86%/80%), warm palette (98%), gradient (94%), parallax-cliché / cursor-follow (90%/89%), spring (84%), magnetic (79%), stagger (70%), mono-only typography treated as "terminal" — here mono is a *plotter printout*, not a hacker terminal.