# Design Language for simai.xyz ## Aesthetics and Tone simai.xyz is presented as **the observation gallery of a probabilistic simulation engine** — not a SaaS product page about AI, but a *live window into a machine that is currently running thousands of parallel futures and showing you the wind they make*. The governing image is a **wind tunnel for possibility**: a long, smoke-streaked chamber where translucent vanes of "what-could-happen" are blown past a fixed observer, each vane a thin chrome-edged membrane carrying a single simulated outcome. The mood is **futuristic-cutting-edge but never loud** — closer to a fluid-dynamics lab at 3am than a launch keynote. There is reverence here: the engine is patient, the visitor is a guest in a control room, and the interface speaks in the hushed register of telemetry rather than marketing. The aesthetic combines **blobitecture** (the simulated outcomes are soft, swelling, mercury-like volumes — never boxes, never cards) with a thin **hud-overlay** layer of instrument readouts in a tech-mono voice. The contrast is the whole point: organic liquid-metal masses *underneath*, precise crystalline measurement *on top of glass*. Nothing is flat. Nothing is brand-bright. The palette breathes in **chrome and graphite with two cold accents** — a cyan that reads as coolant, an amber that reads as a warning the engine has not yet triggered. Tone words: instrument, current, membrane, coolant, parallax of futures, the observed and the observer, quiet machine. ## Layout Motifs and Structure The site is **one continuous horizontal-scroll wind tunnel**, ~700vw wide, read left-to-right as the simulated air moves *toward* you and past. There is **no card grid, no centered hero stack, no bento box**. The structure is a sequence of **six "test sections" of the tunnel**, each a full-viewport bay: - **Bay 01 — Intake.** The title `simai` is rendered as a single liquid-metal blob that *inhales* on load: a perfectly still chrome droplet at center that suddenly elongates into the wordmark as if pulled by airflow, trailing six ghost-streamlines. A thin HUD frame draws itself around the viewport edge — corner brackets, a frame-rate readout, a "RUN 0x3F9A" session tag, all in tech-mono at 11px. - **Bay 02 — The Vanes.** As you scroll right, **translucent membranes** drift past at three depths (foreground at 1.4× scroll speed, mid at 1×, far at 0.6×) — this is the only parallax in the site, and it is doing real narrative work: each membrane is a *single simulated future*, labeled with a tiny HUD callout (`outcome Δ +0.0412`, `confidence 0.71`, `branch 9,204`). Membranes are blobs, not rectangles — soft-cornered, faintly iridescent at the chrome edge, with the content read *through* them like reading text on a soap film. - **Bay 03 — Convergence.** The drifting membranes slow and **morph together** into one large mercury mass that holds the core explanatory text — the merged consensus of the simulation. Text sits in negative-space pockets *inside* the blob's silhouette (CSS shape-outside against an SVG path that is itself slowly animating). - **Bay 04 — Turbulence.** A deliberately unstable bay: the blob mass shudders, splits into a dozen smaller droplets that scatter and re-coalesce on a loop. HUD overlay flickers a `RECOMPUTING` strip. This is the "edge cases / uncertainty" section. - **Bay 05 — The Standing Wave.** Everything settles into a single slow sine of liquid metal that fills the bay floor-to-ceiling — a calm rolling wave-form. The longest-form text lives here, set in wide measure against the wave's trough. - **Bay 06 — Exhaust.** The wordmark blob re-forms, then *dissolves into streamlines* that exit stage-right. The HUD frame retracts into the corners. Session tag updates to `RUN COMPLETE`. A single quiet line of contact/colophon text remains, no button. A persistent **left-edge HUD rail** (40px wide) shows scroll progress as a vertical "airspeed" gauge — a thin needle and six tick marks, one per bay. That is the entire navigation. No top bar, no logo cluster, no hamburger, no footer block. ## Typography and Palette **Type system — Google Fonts only, three families:** - **Familjen Grotesk** (variable, weights 400–700) — the primary display + body voice. A Scandinavian neo-grotesque with a faintly mechanical, slightly squared character that suits instrument panels. Used for the wordmark (set at clamp(64px, 11vw, 200px), weight axis animating 420→640 during the intake animation), all bay headings, and all body copy. Letter-spacing `-0.01em` on display, `0` on body, measure capped at 62ch in Bay 05. - **Space Mono** — the HUD voice. Every overlay readout, every membrane callout, the session tag, the airspeed ticks, the colophon. Always 11–13px, uppercase for labels, `0.08em` tracking, color `#7FE3E8` (coolant cyan) or `#4A4F55` (dim graphite) depending on whether it is live or idle data. - **Fraunces** (variable, optical-size axis, *italic*) — used *sparingly*, only for the single pull-quote-style line in Bay 05 and the colophon line in Bay 06, set in italic at the optical-display end. It is the one warm, humane voice in an otherwise instrumented room — the observer's own handwriting on the lab log. **Palette (8 values):** - `#0B0D10` — tunnel-dark (primary background, near-black with a blue undertone) - `#15181C` — chamber-graphite (secondary surfaces, the HUD rail) - `#C8CDD3` — brushed-chrome (the liquid-metal highlight, primary text on dark) - `#8A9099` — steel-mid (the body of the metal blobs, secondary text) - `#3A3E44` — graphite-shadow (blob underside, recessed HUD geometry) - `#7FE3E8` — coolant-cyan (live HUD data, the chrome edge highlight on membranes, scroll needle) - `#E8A24A` — pre-warning amber (used at exactly 3 moments: the Turbulence `RECOMPUTING` strip, a single membrane in Bay 02 flagged `branch anomalous`, the airspeed needle when scrolling fast) - `#F4F6F8` — vapor-white (used only in Bay 05's standing-wave crest and the Fraunces pull-quote) Gradients are present but disciplined: blobs use a 3-stop chrome ramp (`#3A3E44` → `#8A9099` → `#C8CDD3`) angled to a moving light source; the tunnel background is a faint radial from `#15181C` at center to `#0B0D10` at edges, drifting 2% with cursor. ## Imagery and Motifs **1. Liquid-metal blobs (the load-bearing imagery system).** Every primary content surface is a soft mercury-like volume — rendered with SVG paths (8–14 bezier anchor points) that are *continuously* animating via small noise-driven offsets, plus a CSS/SVG feGaussianBlur + feColorMatrix "metaball" treatment so adjacent droplets visibly *merge and separate* (gooey filter). Chrome edge done with a 1.5px stroke in `#7FE3E8` at 30% opacity plus an inner highlight band. Content is composited *through* the more translucent membranes (Bay 02) and *inside negative-space pockets* of the opaque masses (Bays 03–05) via `shape-outside`. **2. Streamlines.** Thin (0.75px) curved SVG strokes in `#8A9099` at low opacity that trace the airflow through every bay — they bend around the blobs, accelerate where the bay narrows, and the wordmark explicitly dissolves into ~24 of them at the start and end. These are the "wind made visible." A few are dashed and animate their `stroke-dashoffset` to read as moving particles. **3. HUD instrument frame.** A vector overlay layer that never moves with content: corner brackets `⌐ ⌐`, a 4px tick scale along the top edge, the airspeed gauge on the left rail, and floating callout boxes (a 1px `#4A4F55` border, a tiny leader line to the membrane it labels, Space Mono text). The frame *draws itself* (path-draw) on load and *retracts* on exit. **4. The light source.** A single soft specular hotspot that travels slowly across the whole tunnel as you scroll, so every chrome surface reflects it in sequence — it is the only thing that makes the metal look like metal. Implemented as a CSS radial-gradient overlay with `mix-blend-mode: overlay` and a position bound to scroll progress. **No photography. No icons-as-decoration. No stock illustration.** The entire visual world is generated: blobs, streamlines, HUD vectors, the moving light. ## Prompts for Implementation Build simai.xyz as **one HTML document, one CSS file, one ES module** — no framework, no build step, no router, no service worker. The page is a ~90-second walk down a wind tunnel of simulated futures. It must contain **no CTA buttons, no pricing tiers, no stat-counter grid, no testimonial carousel, no feature cards, no email capture, no FAQ accordion, no logo wall, no cookie banner, no chatbot**. The only "conversion" is a single quiet colophon line in Bay 06. **Storytelling is the spine, not navigation.** The narrative arc: *intake → the engine shows you many possible futures drifting past (Vanes) → they converge into one consensus (Convergence) → but the edges are unstable (Turbulence) → and yet a stable long-run pattern emerges (Standing Wave) → and the run completes, exhausting back to stillness (Exhaust)*. Every section's copy should be written in the voice of telemetry and observation — "the engine has run 3F9A simulations; here is the wind they made" — never "Sign up for the future of AI." **Motion specification:** - **Horizontal scroll** is the master axis. Hijack vertical wheel/trackpad to horizontal translate of a wide flex track; on touch, allow native horizontal swipe. Respect `prefers-reduced-motion` by collapsing to a vertical-stack fallback with the blobs static. - **Intake animation (Bay 01):** wordmark blob starts as a 40px still droplet, then over 1400ms eases (custom cubic-bezier, slight overshoot) into the full `simai` silhouette while 6 streamlines whip out behind it; HUD frame path-draws over the same window. - **Membrane parallax (Bay 02):** three depth layers at 1.4× / 1.0× / 0.6× scroll velocity; each membrane gently bobs on a sine independent of scroll; the chrome edge shimmer is a looping gradient sweep. - **Morph / metaball merge (Bay 03):** as scroll enters the bay, animate the SVG path `d` attribute (or use a metaball gooey SVG filter on multiple ``s) so the drifting membranes visibly fuse into one mass; `shape-outside` text reflows against the merging silhouette. - **Turbulence (Bay 04):** the mass splits into ~12 droplets that scatter on noise-driven paths and re-coalesce on a 6s loop; the `RECOMPUTING` HUD strip flickers (opacity stutter, not a strobe — keep it gentle). - **Standing wave (Bay 05):** one slow sine of liquid metal (~14s period) filling the bay; the Fraunces italic pull-quote fades in over the trough. - **Exhaust (Bay 06):** reverse of intake — wordmark dissolves into 24 streamlines exiting right, HUD retracts to corners, session tag flips to `RUN COMPLETE`. - **Cursor:** the traveling light hotspot subtly tracks horizontal cursor position blended with scroll; the tunnel background radial drifts ~2%. No literal cursor-follow blob, no magnetic buttons (there are no buttons). - **Left HUD rail:** vertical airspeed needle bound to scroll progress; six ticks; needle goes amber above a velocity threshold then settles back to cyan. Lean on SVG filters (`feGaussianBlur`, `feColorMatrix`, `feTurbulence` for the noise-driven path jitter), CSS custom properties driven from a single `requestAnimationFrame` scroll loop, and `mix-blend-mode` for the chrome light. Keep the JS to: scroll-axis remap, the rAF loop that publishes `--scroll-progress` and `--cursor-x`, and the few keyframed sequence triggers (intake, convergence, turbulence loop, exhaust). ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **Horizontal wind-tunnel as the entire structure.** Horizontal-scroll appears in ~8% of designs and is almost always a "gallery of cards" pattern. Here the horizontal axis *is the simulated airflow* — the layout metaphor and the subject matter are the same object. No card-grid, no centered hero stack, no bento — three of the most overused layouts in the corpus (92% / 80% / 17%) are all explicitly absent. 2. **Blobitecture rendered in cold chrome, not warm candy.** Blobitecture is rare (~3%) and when it appears it is invariably soft-pastel, playful, candy-bright, organic-warm. simai.xyz renders blobs as *liquid metal* — graphite-and-chrome mercury masses with a coolant-cyan edge — fusing blobitecture's organic geometry with a near-monochrome cool-gray instrument palette. That intersection (blobitecture × chrome-metallic × tunnel-dark) does not exist elsewhere in the registry. 3. **HUD-overlay used as restrained telemetry, not sci-fi cockpit drama.** Hud-overlay is rare (~2%) and usually maxed-out: glowing reticles, dense radar, neon stat readouts. Here the HUD is a thin, quiet 11px Space Mono instrument layer — corner brackets, an airspeed needle, small leader-line callouts — that *draws itself and retracts*. Cutting-edge mood (~3% futuristic-cutting-edge tone) delivered through hush, not spectacle. 4. **No photography in a corpus where 98% of designs use it.** The entire visual field is generated (SVG blobs, streamlines, HUD vectors, a moving specular light). 5. **Zero conversion furniture.** No CTA, no pricing, no stat grid, no testimonials, no email capture — the page ends on a single italic colophon line. The "AI product site" genre is inverted into an observation gallery. Avoided overused patterns from frequency analysis: hand-drawn (94%), glassmorphism (84%), card-grid (92%), full-bleed centered hero (80%), warm gradient palette (98%/94%), photography imagery (98%), cursor-follow (89%), magnetic (78%), pastoral-romantic tone (33%). Chosen seed/style: *aesthetic: blobitecture, layout: horizontal-scroll + hud-overlay, typography: variable-fluid (Familjen Grotesk + Fraunces) with tech-mono (Space Mono), palette: chrome-metallic + cool-grays, patterns: morph + parallax (narrative-purposed) + path-draw-svg, imagery: generative-art + organic-blobs, motifs: wave-forms + crystalline, tone: futuristic-cutting-edge.*