# Design Language for sim-ai.org ## Aesthetics and Tone sim-ai.org is **the field manual for a world that runs on a tilted grid** — the publishing arm of an imaginary institute that builds, populates, and quietly observes small simulated civilizations of artificial agents. Where its siblings on `.com` and `.net` are live-canvas "observation decks" full of flowing ink and aquarium light, the `.org` is the opposite temperament: **an isometric technical-documentation aesthetic** — measured, blueprint-precise, almost municipal. Think the inside cover of a SimCity manual reprinted by a Swiss design school; think Axonometric Bauhaus exploded diagrams; think an urban-planning department that happens to administer a town of minds. The mood is **calm, exacting, and faintly bureaucratic in the most charming way** — the tone of someone who genuinely loves their well-organized job. Nothing flashes. Nothing pulses for attention. Buildings rise from a dimetric plane the way a fact rises from a footnote. The fiction underneath: this site is the *zoning code, census, and operating handbook* for a populated simulation — and reading it should feel like leafing through an immaculately typeset civic document where the diagrams happen to be alive. `isometric` aesthetics sit at ~13% in the corpus and almost always as decorative spot-icons; here the **entire page is a single coherent isometric world** you scroll through district by district. Emotionally: the quiet satisfaction of a clean ledger. The reader should feel let *in* — handed the keys, shown the substations, walked through the agent housing blocks — not sold to. ## Layout Motifs and Structure The structural conceit: **the page is an axonometric site plan, surveyed top-to-bottom in numbered "parcels."** This rejects card-grid (92% of corpus) and centered-hero (80%) outright in favour of **isometric / modular-blocks composition** crossed with a **timeline-vertical** spine — both well under-used. - **The Plane.** A single dimetric ground grid (2:1 isometric, 30° not 45° — flatter, more "drafting table" than "video game") underlies the whole document as a fixed, very-low-contrast SVG lattice. Everything — text columns, diagram panels, the navigation rail — is positioned *as if it has a footprint on that grid*. Headings sit on their own "lot lines." - **The Survey Rail.** A thin left-margin vertical rule with tick marks and parcel numbers (`P.01 · GROUND`, `P.02 · POWER`, `P.03 · HOUSING`, `P.04 · TRAFFIC`, `P.05 · CENSUS`, `P.06 · CHARTER`, `P.07 · ARCHIVE`). It behaves like an architect's title-block scale bar: the active parcel's tick illuminates as you pass it. No hamburger, no sticky header bar — `minimal-navigation` (5%). - **Parcels = full-bleed isometric scenes.** Each parcel is roughly one viewport tall and contains one **buildable diagram**: an exploded axonometric of a "structure" in the simulation (the Substrate Slab, the Power Plant, an Agent Housing Block, the Traffic Interchange of message-passing, the Census Tower, the Charter Hall, the Archive Vault). Components float apart along the iso axes with thin leader lines and call-out labels — *true exploded-diagram convention*, like an IKEA sheet or a patent figure. - **Reading column offset.** Body text never centers. It hangs on the *right two-thirds* of the iso plane, ragged-right, set against the diagram which occupies the left and rear. The asymmetry is deliberate and constant — the document always looks like a plan with annotations, never a slide. - **The build-up.** Scrolling assembles. Early parcels show bare ground and a single slab; by P.06 the plane is a small functioning district — towers, roads of light, tiny agent glyphs at intersections. The page *constructs its own city as you read the manual for it.* The final parcel, ARCHIVE, pulls the camera up and back: the whole assembled district sits small and complete on the plane, like a model under museum glass. ## Typography and Palette **Type — Google Fonts only, three families, strict drafting-office roles:** - **`Archivo` (sans, weights 400/500/600/700, plus `Archivo Expanded` for display)** — the *drafting-table grotesque*. Used for all parcel numbers, headings, call-out labels on the diagrams, and the wordmark. `Archivo Expanded 600` for the big parcel titles, set in **small-caps-feel ALL-CAPS with +0.08em tracking** — reads as title-block lettering, technical and confident without shouting. The wordmark `sim-ai.org` is `Archivo 700`, lowercase, the `.org` rendered in the warm accent. - **`Spectral` (serif, 300/400, italic available)** — the *handbook prose voice*. All body copy at 18–20px, leading 1.65, ragged right. Spectral's slightly mechanical, almost-typewriter serifs read as "official handbook printed on good paper," not luxury editorial. Pull-quotes and the Charter clauses set in `Spectral 400 italic`. - **`IBM Plex Mono` (400, 500)** — the *instrument readout*. Census figures, coordinates (`x:14 y:07 z:02`), parcel scale bars, footnote markers, the tiny labels stamped on grid tiles. Always small (12–13px), letter-spaced, in the muted slate ink — never used for running prose. **Palette — "blueprint reprinted on cream stock":** a warm-paper base with cool drafting inks and one civic-orange accent. Six colours, none neon, all matte: - `#F4F0E4` — **Manila** — the page ground. Warm bond-paper cream, like a manual cover gone slightly soft with age. - `#E8E2D0` — **Drafting Linen** — secondary panels, the iso-grid fill behind diagrams. - `#1B2230` — **Survey Ink** — primary text and the heavy structural lines of diagrams. Near-black with a blue undertone, like good fountain-pen ink on the cream. - `#3F5E78` — **Blueprint Slate** — secondary lines, leader lines, call-out rules, mono readouts. The classic faded-blueprint blue, kept muted. - `#C2603B` — **Civic Orange** — *the* accent: parcel-number ticks, active rail mark, the `.org`, the tiny agent glyphs moving through the streets, one keyword underline per parcel. Burnt, terracotta-leaning, never electric. - `#7E8B7F` — **Plat Green** — sparingly: "parkland" tiles on the plane, secondary annotations, a calming third note so the page isn't only paper-and-blue. High-contrast where it matters (Survey Ink on Manila), whisper-quiet everywhere else. The whole thing should photograph like a beautifully printed document, not a screen. ## Imagery and Motifs **No photographs. No stock illustration. No glassmorphic cards, no gradient mesh.** Every visual is **line-illustration + isometric-icons** rendered as crisp SVG (with one lightweight `` only for the moving agent glyphs). `isometric-icons` imagery sits at ~4% and `line-illustration` at ~17% — and almost never combined into a single coherent built world. 1. **Exploded axonometric structures (the spine).** Seven hand-drafted iso diagrams, drawn in Survey Ink line on Drafting Linen fill, components separated along the three iso axes with Blueprint Slate leader lines and Archivo call-out labels (`A — substrate layer`, `B — clock`, `C — agent slot ×64`). Patent-figure / IKEA-sheet convention, executed with Swiss restraint. 2. **The living plane.** The dimetric ground grid: faint Blueprint Slate lattice on Manila. Tiles can be "zoned" — most are bare, some Plat Green (parks), a few Drafting Linen (built lots). Across it, **3–9 tiny Civic-Orange agent glyphs** (a 5×5px diamond + a one-pixel trail) walk the grid edges between buildings — the only motion on the page besides scroll. They pathfind slowly, pause at "intersections," occasionally cluster — a barely-there ambient life. 3. **Title-block furniture.** Drafting-sheet borders, scale bars, north arrows (pointing "up-screen"), a revision stamp in the corner (`REV. C · POP. 2,048`), parcel ticks. Decorative *because* it's functional — the page wears its documentation-ness as ornament. 4. **Census micro-diagrams.** In the CENSUS parcel: small iso bar-chart "buildings" whose heights are population figures, and a slow `counter-animate` ticking up the population readout — restrained `data-viz` (6%), no dashboard sprawl. ## Prompts for Implementation Build sim-ai.org as **one HTML document, one CSS file, one ES module, one SVG sprite sheet for the iso parts** — no framework, no router, no SPA shell. Treat the whole page as **a ~75-second walk through a town's operating manual**, parcel by parcel, with the town assembling itself on the iso plane as you go. The visitor is being *briefed and handed the keys*, never funnelled. **Hard exclusions:** no hero with a CTA button, no pricing table, no feature-card grid, no testimonial carousel, no stat-counter row of giant numbers, no logo cloud, no email-capture band, no glassmorphism, no dark-neon, no flow-field canvas (the siblings own that). If a section starts looking like a SaaS landing page, it is wrong — make it look like a page from a well-typeset civic handbook instead. **Storytelling is the organizing principle.** Seven parcels, in order: **GROUND** (the bare substrate slab appears, alone on the plane — what the world is made of), **POWER** (the clock/energy plant snaps in — what makes time pass), **HOUSING** (agent blocks rise — where minds live, 64 to a block), **TRAFFIC** (roads of Blueprint-Slate light connect the blocks — how agents pass messages), **CENSUS** (the count tower; population ticks up; iso bar-chart buildings), **CHARTER** (the Charter Hall — italic Spectral clauses, the quiet ethics of running people who don't know they're run), **ARCHIVE** (camera lifts; the whole small complete district under glass; a closing line). Each parcel: one exploded iso diagram on the left/rear, annotated prose hanging on the right, one Civic-Orange keyword underline. **Animation = construction and survey, not flourish.** Use `path-draw-svg` (48% — but here for *blueprint lines literally drawing themselves* as a parcel enters), `stagger` (the exploded components settling into place along iso axes, one leader line at a time), gentle `fade-reveal` and a slow camera-pan feeling between parcels (translate the iso plane a touch). The agent glyphs animate continuously via `requestAnimationFrame` on the small canvas — slow, calm pathfinding, never frantic. Respect `prefers-reduced-motion`: diagrams appear fully assembled, agents freeze mid-grid. **Underused patterns to lean on:** `counter-animate` (the census readout), `border-animate` only as a drafting-sheet rule completing itself. **Patterns to avoid** (overused per frequency): no `cursor-follow` blob, no `magnetic` buttons, no `tilt-3d` cards, no `parallax` wallpaper, no `typewriter-effect` headlines. **Layout specifics:** fixed faint iso-grid SVG behind everything; left Survey Rail with parcel ticks; body text always ragged-right in the right two-thirds; headings on their own "lot lines" in tracked Archivo Expanded caps; mono readouts (coordinates, population, scale bars) scattered like instrument stamps. The page should feel *administered* — orderly, generous, quietly alive — the manual for a town of minds, drafted with love. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by another CMassC site: 1. **The page is one coherent isometric built world, not iso spot-icons.** Where `isometric` (~13%) and `isometric-icons` (~4%) almost always appear as decorative little 3D widgets beside a normal layout, here the *entire document is a single dimetric site plan* that physically assembles a small functioning district as you scroll through its operating manual. Remove the iso plane and there is no page. 2. **Deliberately bureaucratic-civic tone in a sea of "AI = neon/flow/glass."** The sibling domains (`sim-ai.com`, `sim-ai.net`) are live-canvas observation decks of flowing ink and aquarium light; this `.org` is their opposite — a calm, drafting-table, municipal-handbook temperament: title blocks, parcel numbers, census readouts, a revision stamp. Warm Manila paper, faded-blueprint slate, one burnt Civic Orange — no neon anywhere. 3. **Exploded-axonometric patent-figure diagrams as the primary content surface.** Seven hand-drafted IKEA-sheet/patent-figure structures (Substrate Slab, Power Plant, Agent Housing Block, Traffic Interchange, Census Tower, Charter Hall, Archive Vault) with leader lines and lettered call-outs — `line-illustration` + `isometric-icons` fused into real technical documentation, not decoration. 4. **Ambient agent-life as the page's only motion.** A handful of 5px Civic-Orange diamond glyphs slowly pathfind the grid edges between buildings — the entire animated life of the page is "tiny minds walking their town," everything else moves only via construction reveals. 5. **Chosen seed/style: `isometric technical docs`** — executed as a Swiss-restrained, cream-paper civic handbook rather than a game UI. Avoided overused patterns per frequency analysis: hand-drawn (94%), glassmorphism (84%), card-grid (92%), centered (80%), photography (98%), warm-gradient (94%), cursor-follow (89%), magnetic (79%), parallax-wallpaper (89%), tilt-3d (31%), typewriter-effect (15%). Leaned toward underused: isometric-icons (4%), modular-blocks (2%), minimal-navigation (5%), timeline-vertical (6%), line-illustration (17%), data-viz (6%), counter-animate (17%).