# Design Language for simulai.net ## Aesthetics and Tone `simulai.net` is a **dense scholarly atlas of synthetic intelligence** — the visual equivalent of a university press monograph that has been printed on handmade rag paper, then illuminated with gradient-mesh ink gradients bleeding through the margins like medieval rubrics. The site does not sell. It does not convert. It annotates, cross-references, and theorizes. The tone is the considered calm of a tenured professor who has spent three decades thinking about the same problem and is finally, unhurriedly, willing to share the outline. Maximalism here is not chaos — it is **density of thought made visible**. Every square centimeter of the viewport earns its presence. The layering reads like geological strata: background gradient meshes pulse with deep amber and humus-brown; midground typographic columns float over them as transparent acetate overlays; foreground marginal annotations in smaller weight intrude from the gutters. The page breathes not through whitespace but through **tonal contrast** — a clay-dark #3D2B1F behind rich bone #F2EDE4 text, offset by gradients of moss #556B2F and ochre #C8952A. The atmosphere is the inside of a great research library during a late-autumn afternoon: warm tungsten light, warm-toned paper, the smell of oxidized leather. Nothing is rushed. Nothing is simplified. The site trusts that its reader has a graduate degree and a long attention span. ## Layout Motifs and Structure The primary structural logic is **full-bleed layered depth** — the page is a stack of autonomous horizontal planes that each run edge-to-edge without gutters. Each plane is compositionally asymmetric: text columns sit on a 13-column grid at 6:7 ratio splits, so the reading column is never centered but rather anchored at the golden-section point. **Structural vocabulary:** - **Hero plane:** Full-viewport gradient mesh in #3D2B1F → #6B4423 → #8C6239. Over it, a massive logotype `simulai` at 180px, weight 800, set in Jost, tracked at -0.05em, in bone #F2EDE4. A secondary etymological annotation — `< L. simulare (to simulate) + A.I.` — floats at 14px, weight 300, italic, positioned 48px below the wordmark baseline at a 3-degree clockwise rotation, as a marginal gloss. - **Depth layer system:** Three independent z-layers animate on scroll. The background gradient mesh drifts at 0.3× scroll speed (parallax slow). The midground acetate planes drift at 0.7× speed. The foreground text and diagrams scroll at 1.0× (normal). This 3-speed parallax produces spatial depth without trickery — the physics feel archival, weighty, real. - **Elastic column widths:** Body columns flex elastically. At 1600px viewport, the reading column spans 720px; at 1200px, 600px; at 900px, 92vw. The transition between breakpoints is not abrupt — column width is expressed as a CSS `clamp()` interpolation, so resize events produce a living contraction rather than a snap. - **Full-bleed section dividers:** Between sections, a 6px horizontal rule at 30% opacity in #C8952A separates planes. It is not a line — it is a **ruling** in the sense of a ruled law document: commanding, intentional, non-decorative. - **Marginal annotation system:** At ≥ 1400px viewport, a 220px sidebar column materializes to the right of the primary reading column. It contains cross-references, footnote expansions, and labeled diagram call-outs. These annotations use smaller type (11px, weight 400) and are connected to their referenced paragraphs by a thin 0.5px oblique rule in #C8952A. - **Breaking the grid deliberately:** On the `Corpus` section, four key theoretical terms are set at 96px weight 700 in a slight (2.5°) tilt, overflowing the grid column into the background plane — readable, intentional eruptions from the scholarly calm. ## Typography and Palette **Type system (Google Fonts only, verified):** - **Primary display & headings — `Jost`** (variable, wght 100–900). Used at H1: 180px weight 800 tracking -0.05em (hero wordmark), H2: 56px weight 700 tracking -0.02em (section titles), H3: 32px weight 600 tracking -0.01em. Jost is a geometric sans grounded in Futura's structural DNA — precisely the futura-geometric seed — but with humanist ink-trap details in the terminals that keep it warm and scholarly rather than cold. - **Body text — `Lora`** (variable, wght 400–700). Set at 18px weight 400, line-height 1.75, measure 66ch. Lora is a well-drawn transitional serif with calligraphic roots — its swelled strokes mirror the gradient-mesh warmth. Quotations use Lora at 22px weight 400 italic with a 3px left border in #C8952A. - **Marginal annotations — `Jost`** at 11px weight 300, letter-spacing +0.04em, uppercase. Against the body's lowercase warmth, these all-caps labels provide a bureaucratic contrast — index tabs, not prose. - **Inline code / data labels — `Fira Code`** (variable, wght 300–700). Used sparingly for schema annotations, model identifiers, and corpus labels. Set at 13px weight 400, background #3D2B1F at 8% opacity, padding 1px 4px, border-radius 2px. **Palette (earth-tones, verified hex values):** - `#3D2B1F` — Dark humus / background deep. The ground of the page. - `#F2EDE4` — Aged bone / primary text and light surface. Warm white. - `#C8952A` — Dry ochre / accent, rules, borders, highlight rims. - `#556B2F` — Moss / secondary accent, link underlines, subtle flora. - `#6B4423` — Bark brown / gradient mesh midtone, card backgrounds. - `#8C6239` — Tawny / gradient mesh highlight, hover states. - `#D4C4A8` — Parchment / body paragraph backgrounds in deep sections. - `#1C140E` — Near-black / deepest shadow plane, footer. **Gradient mesh construction:** The hero gradient mesh is a radial-layered CSS `background` with six color stops. Three radial gradients are composited using `background-blend-mode: multiply`: 1. `radial-gradient(ellipse 120% 80% at 20% 30%, #8C6239 0%, transparent 60%)` 2. `radial-gradient(ellipse 80% 120% at 80% 70%, #556B2F 0%, transparent 55%)` 3. `radial-gradient(ellipse 100% 100% at 50% 50%, #3D2B1F 0%, #1C140E 100%)` The mesh shifts across all six sections of the page: each section has a locally re-tuned mesh that shares the palette but rotates the radial centers — so the light source visually migrates from upper-left (hero) to lower-right (corpus), as if the sun moved across the library wall during your reading session. ## Imagery and Motifs The site has no stock photography. All visual content is **schematic, typographic, or self-generated**: - **Gradient mesh planes (primary visual element):** Full-bleed, CSS-only, constructed from overlapping radial gradients in the earth-tones palette. Each section has a unique mesh configuration. The meshes pulse at 8s/12s/16s staggered CSS animation cycles (opacity 0.85 ↔ 0.95) — a slow amber breathing that the reader may or may not consciously notice. - **Layered acetate overlays:** Semi-transparent white planes (`#F2EDE4` at 12–20% opacity) float over the mesh as rounded-rectangle surfaces. They carry typographic content but allow the gradient mesh beneath to remain visible, creating a sense of looking at text written on glass suspended over warm earth. - **SVG corpus diagram:** In the `Corpus` section, a hand-drawn-style SVG force-directed graph shows the conceptual relationships between simulai's knowledge domains. Nodes are 18px circles in #C8952A with 1px stroke in #3D2B1F; edges are 1px curves in #D4C4A8 at 60% opacity. Node labels use Jost 11px weight 400. The graph is static but with elastic spring animation on hover: hover a node and its connections stretch toward it, then snap back — the **elastic** pattern from the seed. - **Etymological marginalia:** At strategic moments, marginalia appear as handwriting-style annotations. These are SVG text paths rendered in a slightly irregular baseline (±2px sinusoidal drift) using Lora italic 14px, in #C8952A at 80% opacity. They annotate: Latin roots, historical precedents, definitional challenges. - **Section numbering:** Each section is prefixed with a large ordinal in #C8952A at 20% opacity, set at 160px weight 900 Jost, positioned behind the section heading as a watermark — `01`, `02`, etc. This is the **layered-depth** motif: the number belongs to the background layer, the heading belongs to the foreground. - **Typographic texture:** In the hero, the word `simulai` is split across two rendering layers. The first layer renders the letterforms at full opacity in #F2EDE4. The second layer renders the same word at 4% opacity in #C8952A, offset +3px right and +3px down — a displacement shadow that produces depth without the cliché of drop-shadow. ## Prompts for Implementation Build `simulai.net` as **a single-page scholarly monograph in six chapters**, scrolled top-to-bottom, with no horizontal navigation and no persistent sticky header beyond a discreet 32px top bar that fades in after 400px scroll. **Vow 1 — Full-bleed means edge-to-edge, always.** Every section must extend to the viewport boundaries — no container `max-width` wrapping the section background. The reading column inside may be constrained, but the gradient mesh plane behind it must fill 100vw. This is the single most important layout constraint. **Vow 2 — Depth is maintained by three scroll speeds.** Implement three parallax scroll speeds using `IntersectionObserver` + `transform: translateY()`: - `.layer-bg` (gradient meshes): `translateY(scrollOffset * 0.3)` - `.layer-mid` (acetate overlays): `translateY(scrollOffset * 0.7)` - `.layer-fg` (text, diagrams): `translateY(0)` — normal scroll Use `will-change: transform` only on `.layer-bg` and `.layer-mid` to contain compositing layers. Do NOT use `position: fixed` for parallax — use `position: sticky` + `translateY` to keep layout flow intact and prevent scroll-jacking. **Vow 3 — Elastic spring on the corpus graph.** The SVG force-directed graph must implement elastic spring behavior on node hover: ```js node.addEventListener('mouseenter', () => { connectedEdges.forEach(edge => { edge.animate( [{ strokeDashoffset: 0 }, { strokeDashoffset: -12 }, { strokeDashoffset: 0 }], { duration: 600, easing: 'cubic-bezier(0.34, 1.56, 0.64, 1)' } ); }); }); ``` The `cubic-bezier(0.34, 1.56, 0.64, 1)` easing is the spring — it overshoots and snaps back. This is the **elastic** pattern from the seed. **Section outline:** 1. **Hero** — Full-viewport gradient mesh, wordmark, etymological gloss. No CTA. Just the name and its roots. 2. **Thesis** — What simulai believes about AI. Dense prose in Lora. Marginal annotations active. 3. **Corpus** — The knowledge graph SVG. Force-directed, elastic hover, labeled nodes. 4. **Method** — How simulai approaches simulation and synthesis. Breakout typographic terms erupting from the grid. 5. **Archive** — Reference citations in Lora 15px weight 400, formatted as a hanging-indent bibliography. No cards. No thumbnails. Pure text scholarship. 6. **Contact** — Sparse. Email address set in Jost 32px weight 300. A physical postal address in Lora 14px italic. Nothing else. **AVOID:** Hero video backgrounds, hero CTAs, stat counters, feature-icon grids, pricing tables, testimonial carousels, sticky mobile bottom bars, cookie consent popovers, animated loading screens, parallax horizontal sections. This is a scholarly monograph, not a SaaS landing page. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **maximalist**, layout = **full-bleed**, typography = **futura-geometric**, palette = **earth-tones**, patterns = **elastic**, imagery = **gradient-mesh**, motifs = **layered-depth**, tone = **scholarly-intellectual**. **Differentiators from other designs in the registry:** 1. **Gradient mesh as structural geology, not decoration.** The registry has gradient-mesh at 8% usage, but in existing designs it is purely decorative — a hero background that disappears. In simulai.net, the gradient mesh is structural: it migrates across all six sections, its light-source coordinates shift over the reading session, and every section has a unique mesh configuration derived from the same earth-tone palette. The mesh is the *architecture*, not the wallpaper. 2. **Maximalism through density of scholarship, not visual noise.** Most maximalist designs in the registry express density through bright colors, competing typefaces, and heavy ornamentation. simulai.net achieves maximalism through *scholarly density*: marginal annotations, etymological marginalia, a corpus relationship graph, ordinal watermarks, and a six-chapter scroll all within a warm, restrained earth-tone palette. The maximalism is intellectual, not decorative. 3. **Three-speed parallax with archival weight.** The 0.3×/0.7×/1.0× layered scroll produces spatial depth that feels geological rather than flashy. Other parallax designs (75% of registry) use 2-speed parallax for a surface-level 3D effect. The three-speed approach, combined with the acetate overlay metaphor, produces a sensation of looking through translucent strata — consistent with the scholarly-intellectual tone. 4. **Elastic spring confined to one semantic element.** The elastic pattern is used precisely once (the corpus graph), which makes it meaningful rather than decorative. It communicates the *relational tension* between knowledge domains — a conceptual metaphor embedded in the interaction. 5. **Avoided patterns:** photography (87% in registry — simulai.net uses zero), CTA buttons (ubiquitous — simulai.net has none), stat-grids (common in tech sites — replaced by bibliography and corpus graph), sticky header (replaced by fade-in minimal bar at 400px scroll).