# Design Language for simulai.tech ## Aesthetics and Tone simulai.tech is staged as **an axonometric cutaway of a working mind** — the way an exploded technical drawing reveals the gearbox of a watch, or the cross-section poster reveals the decks of an ocean liner. The governing fiction: somewhere there is a *facility* — not a server farm, but a kind of impossible orrery — where a simulated intelligence is assembled out of stacked transparent floors, conveyor belts of tokens, glass tanks of "world," and slow rotating armatures of attention. simulai.tech is the **engineering plate** for that facility, drawn in clean isometric projection on a warm drafting-paper ground, the way a 1960s technical manual would draw a turbine: confidently, lovingly, with every part labeled in a tiny monospace hand and a thin leader-line pointing at it. The tone is **grounded-earthy meets futuristic-cutting-edge** — a deliberately analog rendering of a synthetic thing. It should feel like you found a beautifully printed broadsheet schematic folded into a drawer: matte, tactile, slightly warm, utterly precise. No hype, no glow, no "AI as oracle." Instead: *AI as apparatus you can walk around.* The mood is calm, curious, almost reverent toward the machinery — the quiet pride of an engineer showing you the inside of something they built. Wonder is delivered through **legibility**, not spectacle: the more you look, the more sub-assemblies resolve, the more leader-lines you can follow, the more the static plate reveals it is very slowly *turning*. ## Layout Motifs and Structure The structural spine is **isometric** projection laid over an **immersive-scroll** document — both underused (isometric ~13%, immersive-scroll ~15%) against the dominant card-grid (~92%) / centered (~80%) / full-bleed (~86%) defaults, which simulai.tech explicitly refuses. The page is **not** a stack of full-width bands. It is one long **drafting sheet**, ~560vh, and the viewport is a magnifier sliding down it. - **The Plate.** A single oversized SVG/CSS isometric scene — the "facility" — is pinned as the persistent backdrop. It is built on a true 2:1 isometric grid (30° axes). As you scroll, the magnifier (the viewport) descends through it floor by floor: **Intake** (raw world pours in), **Lattice** (the transparent stacked decks where representation forms), **Attention Armature** (slow rotating booms that sweep the decks), **Loop** (the recursive return belt), **Readout** (where structure leaves the building). Each "floor" is a section but they are *physically connected* in the drawing — belts and conduits run from one into the next, so scrolling reads as travelling *through one machine*, not flipping pages. - **Leader-line annotation as the only "copy block."** Body text does not sit in centered prose columns. It is set as **callouts**: a thin 0.75px leader line springs from a part of the isometric scene, doglegs once at a right angle, and terminates in a small left-aligned text plate (label in mono caps, then 2–4 sentences in the body serif). These callouts are scattered asymmetrically — upper-left, lower-right, never mirrored — like real annotations dodging the artwork. - **The title block.** Borrowed straight from engineering drawings: a ruled rectangle locked to the bottom-right of the first viewport — `simulai.tech`, "PLATE 01 — GENERAL ASSEMBLY", a fake revision letter, scale ratio (`1 : ∞`), and a "drawn by / checked by" line. It re-stamps subtly at each floor (`PLATE 02 — LATTICE`, etc.). - **Margin ruler.** A faint tick-ruler runs the full left edge of the page, numbered, so the whole document feels measured. Scroll progress = position on the ruler. - **No hero, no nav bar.** Entry is the closed facility seen from outside; the first scroll "cuts away" the outer shell. Navigation, if any, is four tiny floor-indicator squares stacked at the right edge — they fill in as you pass each floor. ## Typography and Palette **Type stack — Google Fonts only, three families, strict drafting-room roles.** - **IBM Plex Mono** (weights 400 / 500 / 600; italic available) — the *instrument hand*. Every label, every callout heading, the title block, the ruler numbers, dimension strings (`Ø 1024`, `seq · 8192`), revision letters. Always uppercase for labels, tracked +0.12em, small (11–13px). This is the "annotated by hand with a Rapidograph" voice and it must dominate all the technical chrome. - **Spectral** (weights 300 / 400; italic 400) — the *explanatory voice*. The 2–4 sentence bodies inside callout plates, and the longer "specification notes" near the bottom of the page. Set 16–18px, leading 1.65, near-black ink. Spectral's faintly mechanical serifs read as "well-set technical manual," not luxury editorial — which is exactly the register: a *manual* for a mind. - **Fraunces** (variable, weights 300–500, optical-size high, *soft* axis low; italic for asides) — the *plate titles only*. The big words that name each floor — INTAKE, LATTICE, ATTENTION ARMATURE, LOOP, READOUT — set in Fraunces at clamp(40px, 7vw, 96px), light weight, wide letterspacing, drawn as if **die-stamped into the paper** (a 1px inset light edge + 1px drop dark edge, no blur). Used nowhere else, so each title lands like a section divider in a printed atlas. **Palette — warm drafting paper, oxidized blueprint ink, two correction marks.** Warm/muted is common (~98% / ~37%), so the *differentiator is restraint and the isometric ink-on-paper logic*, not the hues themselves: - `#EFE7D6` — **drafting cream**, the paper. Slightly uneven, faint fiber grain. - `#E7DCC6` — **fold shadow / panel tint**, for the title block fill and the far isometric floors (atmospheric recession: deeper floors get this wash so the machine "fades back"). - `#1C2A2E` — **oxidized ink**, near-black with a green-petrol undertone — all line work, all type. Lines are *thin*: 0.5px–1px, never heavy. - `#2E5E73` — **blueprint blue**, the second line weight: used only for the *active* sub-assembly the magnifier is currently over (the rest stays oxidized ink), and for the leader lines that are "live." - `#B5462C` — **vermilion correction**, the rare accent: revision triangles, the "you are here" tick on the ruler, the single underline that draws under a floor title when it locks. Used on maybe 1% of pixels — it should feel like a proofreader's pen. - `#7A8B6F` — **olive draft pencil**, for ultra-faint construction lines and the isometric grid itself (almost subliminal). High contrast lives only between `#1C2A2E` ink and `#EFE7D6` paper; everything else is whisper-quiet. ## Imagery and Motifs **No photographs. No stock 3D renders. No glassmorphic cards.** (`photography` ~98% of the registry; simulai.tech carries zero.) Every visual is **drawn line-work in isometric projection** — SVG and CSS transforms, optionally a light `` pass for the slow rotation and the particle flow on the belts. Motif families, all on the 2:1 iso grid: 1. **The exploded facility (the spine).** Five stacked transparent decks rendered as wireframe boxes with rounded ribs, drawn in `#1C2A2E` hairlines. You can see *through* every floor to the ones below — depth via overlap and the `#E7DCC6` recession wash, never via shadow blur. Conduits, belts, and a central spindle thread all five together. 2. **Token conveyors.** Thin isometric belts carrying tiny tessellated tiles (the "tokens") — they advance slowly and continuously, a few px per second, looping. On the *Loop* floor the belt bends back on itself in a Möbius dogleg. 3. **The attention armature.** Two or three long booms pivoting from the central spindle, sweeping over the *Lattice* decks like the arm of a hard disk or a planetarium projector — one full revolution per ~90 seconds, the only large motion on the page. 4. **Dimension lines & leader callouts.** The decorative grammar everywhere: extension lines, arrowheads, balloon numbers, the dogleg leaders. These double as the layout system *and* the ornament — the page is "decorated" entirely by its own annotations. 5. **Margin ruler & title block.** Always present, the framing furniture of a real engineering plate. 6. **Construction grid.** The faint olive iso-grid bleeding through the paper — switched slightly more visible during scroll, then settling back, as if the drawing is being *set up* as you move. ## Prompts for Implementation Build simulai.tech as **one HTML document, one CSS file, one ES module**. No framework, no router. No above-the-fold hero with a CTA. **No pricing block, no feature-card grid, no testimonial carousel, no stat-counter row, no logo cloud, no email-capture bar.** This is an *engineering plate of an imagined machine*, not a SaaS funnel — atmosphere and legibility over conversion, always. **Storytelling is the organizing principle.** The visitor descends through one continuous machine — `intake` (world pours in, gets tiled into tokens), `lattice` (tokens climb the transparent decks, representation crystallizes), `attention armature` (the booms sweep, relevance is selected), `loop` (the recursive return belt, the Möbius bend, "the model reads itself"), `readout` (structure leaves the building as a clean ruled diagram). Each floor's callouts narrate that step in plain, confident manual-prose — present tense, second person where natural ("Here the plane is folded once and indexed."). **Layout & build.** True 2:1 isometric grid; place everything with `transform: rotateX(...) rotateZ(...)` or precomputed iso coordinates — be rigorous, misaligned iso reads as broken. Pin the facility SVG; scroll moves the "magnifier" down it (use position pinning + transform, IntersectionObserver per floor). Callout plates are absolutely positioned to their anchor part with the dogleg leader as an SVG path. Margin ruler is a tall thin SVG with `` tick numbers; the active tick gets the vermilion mark. Title block is a single ruled `
` bottom-right, contents swapped per floor. **Motion — slow, mechanical, never bouncy.** Honor reduced-motion by freezing all of it. - **Leader-line draw** (`path-draw-svg`, ~48% — fine, use it well): when a floor enters, its callout leaders draw themselves stroke-by-stroke (stroke-dasharray), then the text plate fades in, then — last — the vermilion underline draws under the Fraunces title. Staggered, deliberate, like a draftsman finishing a corner. - **The armature** rotates continuously, ~90s/rev, `linear`, requestAnimationFrame — the page's heartbeat. - **Token belts** translate continuously a few px/s, looping seamlessly. - **Magnifier descent**: as the active floor changes, the previously-blueprint-blue sub-assembly relaxes back to oxidized ink and the new one inks up to `#2E5E73` over ~600ms ease. - **Cursor**: a faint `cursor-follow` (~89% — keep it *subtle*) crosshair reticle with tiny iso-coordinate readout (`x +312 y −88`) trailing the pointer, like a CAD cursor. Hovering a callout part brightens just that part's leader. - **Construction grid** fades up ~8% opacity during active scroll, back to ~3% at rest. - Avoid: parallax depth-drift on the scene (the iso projection *is* the depth), tilt-3D card hover, magnetic buttons, typewriter effects, counters. **Texture.** A single fixed SVG-fractal-noise layer at ~4% over the cream for paper grain; one ultra-subtle vignette toward `#E7DCC6` at the page edges so it reads as a sheet on a table. Everything else is pure line. ## Uniqueness Notes - **Isometric exploded-machine projection as the entire site geometry** — not iso *icons* sprinkled in a normal layout, but the whole page rendered in rigorous 2:1 axonometric, with floors physically connected by belts and conduits so scrolling = travelling through one machine. Counters card-grid (~92%), centered (~80%), full-bleed (~86%); leans into isometric (~13%) and hexagonal/iso-grid logic that's near-absent. - **Engineering-plate grammar IS the UI and the ornament** — leader lines, dimension strings, balloon numbers, a ruled title block with revision letters, a numbered margin ruler. No decorative imagery at all; the page is "decorated" only by its own annotations. Distinct from sim-ai.com's generative flow-field treatment and from the registry's photography-saturated norm (~98%). - **Restraint-as-signature warm palette** — drafting cream + oxidized petrol-ink + a 1%-of-pixels vermilion correction mark; high contrast confined to ink-on-paper, blueprint blue used *only* to mark the active sub-assembly. Warm/muted is common but this ink-on-paper *logic* (two line weights, one accent, atmospheric recession via tint not blur) is the differentiator. - **One large slow motion (the 90s attention armature) instead of many small animations** — mechanical, linear, reverent; deliberately avoids spring/elastic/bounce/tilt-3D/typewriter patterns that dominate the registry. - Chosen seed/style: **isometric technical docs** (from seeds.json). Aesthetic vocabulary: isometric + evolved-minimal; layout: immersive-scroll + asymmetric + hexagonal/iso-grid; typography: tech-mono (IBM Plex Mono) + serif-revival (Spectral) + display via Fraunces; palette: warm + muted + high-contrast (ink/paper only); imagery: line-illustration + isometric-icons + minimal; motifs: tech + abstract-tech + grid-lines + sharp-angles; tone: grounded-earthy + futuristic-cutting-edge. - Avoided per frequency analysis: card-grid, centered, full-bleed, hero-dominant layouts; photography & glassmorphic-cards imagery; glassmorphism aesthetic; spring/magnetic/tilt-3d/typewriter/counter-animate motion clichés; CTA/pricing/stat-grid blocks.