# Design Language for simai.dev ## Aesthetics and Tone simai.dev is presented as **the operator's console of a "soft simulation atelier"** — a place where models of physical and social systems are built not as cold engineering diagrams but as *axonometric dioramas you can lean into*. The governing image: imagine an architect's drafting table at dusk, lit by a single warm desk lamp, where every project is a small isometric world rendered in trace-paper greens and graphite — a watershed model, a traffic micro-sim, a crowd-flow study, a thermal-diffusion lattice — each one a tiny city floating on its own sheet of vellum. The tone is **grounded-earthy** crossed with **scholarly-intellectual**: precise, tactile, quietly confident, never glossy. This is not "AI startup chrome." It is closer to a 1970s systems-dynamics monograph reissued by a letterpress shop — drafting-pen line weights, blueprint-cyan annotation, the smell of toner and graph paper — but the dioramas *breathe*: gridlines drift, particles flow through the lattices, shadows lengthen as you scroll. The mood word is **considered**. Everything looks measured twice. The site should feel like being handed a beautifully made physical kit of parts and being trusted to assemble understanding yourself. Explicitly rejected: glassmorphism's frosted blur, dopamine neon, hero-with-CTA SaaS canon, gradient-mesh blobs, the warm-amber pastoral palette that dominates the registry. simai.dev is cool, paper-toned, structural, and unhurried. ## Layout Motifs and Structure The structural spine is **isometric layered-depth** — but committed fully, not as decoration. The entire page is rendered on a **single fixed 30°/30° axonometric ground plane**. Content does not sit in flat rectangular sections stacked vertically; instead it occupies **plots on an isometric grid**, like buildings in a SimCity block. As you scroll, the camera *trucks* across this ground plane (CSS `transform` on a parent stage, driven by scroll position) rather than the page scrolling in the usual flat way — the dioramas slide past at a believable parallax because they genuinely sit at different depths on the same plane. - **The ground grid**: a faint isometric lattice (two families of parallel lines at +30° and −30°, ~64px cells in screen space) covers the whole canvas as a fixed background layer, like engineering graph paper. It never scrolls with content — content floats above it — reinforcing the drafting-table conceit. - **Plots / dioramas**: each major content block is an **isometric "tile"** — a parallelogram footprint with a low extruded edge (4–10px of faked Z-thickness on the bottom-right and bottom edges, drawn as solid darker green polygons, not box-shadow). On each tile sits a small built world: stacked translucent strata, tiny extruded blocks, flowing particle paths. Tiles are 1×1, 2×1, or 2×2 grid units. Layout is a **broken-grid on the iso plane** — tiles are deliberately not flush; gaps of bare graph-paper show through, and a few tiles are rotated 90° in plan to break monotony. - **Annotation rails**: text lives in **flat overlay callouts** anchored to tiles by thin leader lines (1px, blueprint-cyan, with a small filled circle at the diorama end and a 6px tick at the text end) — exactly like dimension annotations on a technical drawing. The text itself is *not* isometric; it stays screen-aligned and crisp. This is the key tension: rigorously skewed worlds, perfectly upright labels. - **Vertical flow**: roughly 7 "districts" the camera visits — Front Plate, The Premise, How A Model Is Built (4-stage axonometric assembly that constructs itself), A Gallery Of Small Worlds, The Solver Room, Notes From The Atelier, Colophon. No nav bar in the conventional sense — instead a **fixed mini-map** in the lower-left corner: a tiny isometric thumbnail of the whole ground plane with a moving viewport rectangle, clickable to truck the camera. - **No** card-grid of features, no pricing tiers, no stat counters, no testimonial carousel, no centered hero with a button. ## Typography and Palette **Type stack — Google Fonts only, three families, strict roles.** - **Sora** (variable, weights 100–800) — the structural/display voice. Used for the page title (`simai.dev — small worlds, carefully modelled`), district headings, and the mini-map labels. Sora's geometric-but-slightly-humanist letterforms read like a modern revival of a drafting stencil. Set H1 at `clamp(40px, 6vw, 104px)`, weight 600, letter-spacing −0.02em; district headings at weight 500, tracked +0.06em, uppercase, small (18–22px) — they behave like sheet titles in a drawing set, not banners. - **Spectral** (serif, weights 300/400/500, italic available) — the body/prose voice for "Notes From The Atelier" and longer explanatory paragraphs. A transitional serif with low contrast and a calm, monograph-page texture. Body at 18–20px, line-height 1.7, measure capped at 62ch. Italics carry asides and figure captions. - **IBM Plex Mono** (weights 400/500) — the annotation/instrument voice. ALL leader-line callouts, dimension labels, axis ticks, the solver-room readouts, coordinates, and the colophon are set in Plex Mono at 12–14px, tracked +0.04em. This is the typeface of the measuring instruments. **Palette — cool drafting-room neutrals + blueprint accent + a single warm lamp.** Minimum-three-plus, all explicit: - `#EDEAE0` — *vellum*: the base canvas / graph-paper sheet. Warm-leaning off-white, like aged trace paper. - `#1B2A1F` — *graphite green*: primary ink — text, tile edges, the darkest extruded faces. Almost black but with a forest undertone. - `#3E5C44` — *atelier green*: mid-tone fills for diorama strata and tile tops; the "land" color of the small worlds. - `#8FA88E` — *moss line*: secondary line weight, hairline grids, faded annotation, hover states for inactive tiles. - `#1F6FEB` — *blueprint cyan*: the single cool accent — leader lines, active links, the mini-map viewport rectangle, particle flow trails through lattices. Used sparingly and always thin. - `#E3873B` — *desk-lamp amber*: the lone warm accent — the directional "sun" that casts the dioramas' shadows, a faint radial glow behind the Front Plate title, and the one hover-highlight on a tile when the camera focuses it. Never more than ~5% of any viewport. - `#C7C2B2` — *toner gray*: subtle panel separators, disabled text, the printed-edge texture on tile borders. Shadows in the dioramas are not `box-shadow` blurs — they are **solid flat parallelogram polygons** in `#1B2A1F` at 14–22% opacity, projected at the lamp-amber light angle, with crisp edges. Drafting projections, not soft drop shadows. ## Imagery and Motifs Three motif families, all line-and-flat-fill, zero photography. **1. Isometric small worlds (the load-bearing imagery system).** Each diorama is built from primitives drawn in CSS/SVG: extruded cubes and slabs (three visible faces — top in atelier green, left in graphite, right in a mid-shade — never gradients), translucent stacked strata (5–9 thin sheets at decreasing opacity, like a sediment core or a CT slice stack), and **flowing systems** — particle paths that travel along bezier curves laid on the iso plane (water in a watershed model, vehicles in a traffic sim, heat in a diffusion lattice), rendered as small blueprint-cyan dots leaving brief fading trails. The "Gallery Of Small Worlds" shows 5–6 of these side by side, each ~2×2 grid units, each obviously a different *kind* of model. **2. Drafting-table apparatus.** Iso graph-paper ground; dimension lines with arrowheads and tick marks; a corner **title block** (lower-right of the Colophon) styled exactly like an architectural drawing's title block — ruled boxes containing "SHEET / SCALE / DRAWN BY / REV" filled with playful metadata. North arrows (isometric, of course — they point "up-left" in screen space). A faint **registration-mark** cross in each page corner like a printer's crop mark. **3. The solver pulse.** In "The Solver Room," a single recurring icon: a small lattice of nodes-and-edges that *relaxes* — on load and on a slow loop, edge lengths spring toward equilibrium, nodes settle, a tiny Plex-Mono readout next to it counts iterations and a falling "residual" number. This is the one place the abstract math becomes a visible, breathing creature. It also serves as the cursor companion: a 3-node mini-lattice trails the pointer with spring physics, edges flexing. Decorative grammar throughout: everything that *can* be a thin precise line *is* one; everything filled is flat; the only blur permitted anywhere is the soft amber radial behind the title. ## Prompts for Implementation Build simai.dev as **one HTML document, one CSS file, one ES module** — no framework, no router, no SPA. The page is a *visited place*, an isometric atelier you truck a camera across; it is a narrative diorama tour, not a landing page. - **The stage**: a single `.world` container with `transform: rotateX(60deg) rotateZ(-45deg)` (or an equivalent 2:1 isometric matrix) establishing the ground plane; all tiles are children positioned in plan coordinates. Scroll progress (use a long `body` height + `scroll` listener, throttled via `requestAnimationFrame`) maps to a camera translate across the plane — sideways and forward truck, with gentle easing, never a hard jump. Honor `prefers-reduced-motion` by falling back to discrete snapped district views with no continuous truck and frozen particle systems. - **Storytelling first**: copy walks the visitor through *how a model of a system gets built* — premise → discretize the world → define the rules → run the solver → read the result → caveats — using the four-stage self-assembling diorama in "How A Model Is Built" as the centerpiece (each stage adds blocks/strata/flows to the same tile as it enters view, with staggered spring entrances). Text is sparse, declarative, a little wry; let the dioramas carry the load. - **Animation vocabulary**: spring/elastic entrances for tiles and blocks (stagger by 60–110ms across a diorama's parts); `path-draw-svg` for every leader line and dimension line (they *draw themselves* toward the diorama when their callout enters view); the solver-relaxation loop; the cursor mini-lattice with real spring physics; particle flows on bezier paths along the plane. NO parallax-of-flat-layers, NO fade-in-on-scroll boilerplate as the primary device, NO tilt-3d card hovers — depth here is *real isometric geometry*, not faux-3D card tricks. - **The mini-map** (lower-left, fixed): a scaled SVG of the whole ground plane with a draggable/clickable viewport rect that truck the camera; district labels in Plex Mono appear on hover. - **Texture**: a very subtle SVG noise/toner grain over the vellum (≤4% opacity) and a faint printed-edge roughness on tile borders — the page should feel *printed*, not screen-born. - **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, conventional top nav, glassmorphism, gradient meshes, neon, warm-amber pastoral palettes, hero-dominant centered headlines with buttons. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by another CMassC site: 1. **A truly isometric *scene-graph*, not isometric *icons*.** Frequency analysis: `isometric` aesthetic ~13%, `isometric-icons` imagery ~4%, but the registry's isometric work is almost entirely decorative icon sets on otherwise flat pages. simai.dev makes the *entire page* a single axonometric ground plane the camera trucks across — layout, navigation (mini-map), and content all live in one consistent iso world. That commitment is the differentiator. 2. **Drafting-monograph palette in a sea of warm gradients.** Frequency analysis: `warm` palette ~98%, `gradient` ~94%. simai.dev is cool vellum + graphite-green + blueprint-cyan with a single 5%-max desk-lamp amber and *zero gradients on content* (the only soft glow is one radial behind the title). It deliberately reads as letterpress/blueprint, not screen-glossy. 3. **Solid-polygon projected shadows + self-drawing dimension lines as the core motion language** — replacing the registry-ubiquitous `parallax` (89%), `cursor-follow` (89%) blur-and-fade kit. Shadows are flat skewed polygons at a fixed lamp angle; leader/dimension lines `path-draw` themselves like a draughtsman inking a sheet; the one breathing element is a relaxing node-lattice "solver." 4. **Upright crisp labels tethered to skewed worlds.** The signature visual tension: every diorama is rigorously isometric, but every piece of text stays screen-aligned and sharp, connected only by thin annotation leaders — a discipline most isometric layouts (which skew their type too) never observe. 5. **No conventional nav, no CTA, no hero-with-button.** Navigation is a SimCity-style mini-map; the page is structured as 7 "districts" / "sheets" of a drawing set, ending in a literal architectural title block instead of a footer. Chosen seed/style: **isometric technical docs** (from seeds.json). Avoided patterns per frequency analysis: glassmorphism (84%), hand-drawn (94%), warm palette (98%), gradient (94%), parallax (89%), cursor-follow blur kit, card-grid (92%), centered hero-dominant CTA layouts, photography (98%).