# Design Language for simulai.org ## Aesthetics and Tone simulai.org is **a tea ceremony for artificial minds** — a site that treats AI simulation not as cold computation but as a living, breathing thing that ages, grows imperfect, and finds beauty in its own decay. The name collapses "simulate" and "AI" into a word that sounds almost Italian, almost musical, and that is the intention: this is an AI lab that plays. The governing aesthetic is **wabi-sabi applied to computation**: the beauty of incomplete algorithms, of frayed edges in neural nets, of the graceful imperfection of emergent behavior. A blank terminal cursor blinking in an ancient amber glow. A hexagonal lattice that doesn't quite tile perfectly — one cell slightly rotated, one edge slightly thicker. The site celebrates the cracks, the asymmetries, the happy accidents that make simulated intelligence feel alive rather than manufactured. Tone is **whimsical-creative without being frivolous**: a scientist who laughs at their own blackboard equations, who has named every server after a Borges story, who genuinely finds joy in watching a cellular automaton discover a glider pattern. The site does not pitch. It does not sell. It invites you to sit down at the workbench and watch something emerge. Mood references: a Kyoto craft studio that builds machine learning models; a notebook filled with both precise equations and loose ink sketches in the margins; the smell of cedar and solder; the sound of a mechanical keyboard in a silent room. ## Layout Motifs and Structure The primary structural motif is a **broken hexagonal honeycomb** — but broken deliberately, the way Japanese *kintsugi* breaks pottery on purpose to fill it with gold. The hexagonal cells are not a perfect tessellation. They are offset, slightly misaligned, some edges missing, as if the lattice was grown organically rather than constructed. This is the central visual metaphor: simulation growing into form. **Macro structure:** - The viewport is divided into a **primary hex cluster** — 7–11 large hexagonal cells, each ~220px wide at desktop, arranged in a honeycomb pattern that bleeds off the right edge of the screen. The left edge of the cluster is anchored; the right edge is always clipped. This asymmetry is intentional: things are still growing. - Each hexagonal cell contains exactly one piece of content: a concept name, a brief phrase, a single abstract-tech SVG element, or whitespace (empty cells are valid; silence is content in wabi-sabi). - A **secondary micro-lattice** runs behind the hex cluster at ~30% opacity — tiny 18px hexagons, hand-trembled using `feTurbulence` SVG filter so they appear slightly organic rather than mechanical. - Navigation is a single horizontal strip at the very top, flush left, typeset in uppercase Commissioner at 11px, letter-spacing 0.25em. No mobile hamburger — the nav collapses to three dots that expand inline. - The footer is a single line of text, centered, in 10px Commissioner italic — a date, a version number, and a phrase: *"things are still running."* **Micro interactions:** - Hovering a hex cell causes its edges to slowly breathe — `stroke-width` pulsing from 1px to 2.5px over 2.4 seconds, not uniform but staggered per edge, so the cell seems to inhale unevenly. - Scrolling past the hex cluster reveals a **typewriter reveal** zone: individual paragraphs of text appear character by character, but at an imperfect cadence — characters occasionally arrive in pairs, occasionally with a 200ms pause, as if the simulation is thinking. - The background hex micro-lattice drifts slowly upward at 0.04px/frame — so slowly you can't be sure it's moving unless you stare at one point for ten seconds. **Spatial philosophy:** Empty space is not waste — it is breath. The registry shows centered layout at high frequency; this site uses **asymmetric clustering** instead: content masses toward the right, negative space hovers on the left like an incomplete thought. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Primary display / wordmark — `Commissioner`** (variable, wght 100–900). Commissioner is geometrically grounded but has humanist warmth — the corners of its O are not perfect circles, which is exactly right for wabi-sabi. The wordmark `simulai` is set at clamp(5rem, 10vw, 11rem), weight 200, tracked at -0.02em, in Ink (#2b2118). The `.org` suffix is weight 100, 40% opacity, positioned as a superscript slightly above the baseline. The entire wordmark breathes: on page load, a typewriter effect writes it one character at a time, but the period before "org" arrives with a 600ms pause — making the site feel like it took a breath. - **Body / prose — `Commissioner`** at weight 400, size 17px / line-height 1.72. Commissioner is versatile enough to carry body copy without a companion face. This unusual single-font approach (the registry uses two fonts almost universally) reads as deliberate economy, a wabi-sabi choice. - **Mono / code / data — `JetBrains Mono`** (Google Fonts), weight 300. Used only for: hex cell labels (short codes like `sim-001`, `ent-012`), and footer metadata. Renders in Amber (#c17f24) against dark backgrounds. - **Accent labels — `Commissioner`** weight 700, uppercase, 10px, letter-spacing 0.3em. Used for section tags like `EMERGENCE`, `DECAY`, `FLOW`. These are not headings — they are taxonomy tags, typeset in Rust (#a04832) at the top-left of each content section. **Palette — strict duotone with one accent:** | Name | Hex | Use | |------|-----|-----| | Paper | `#f2ede6` | Background, empty hex cells, page ground | | Ink | `#2b2118` | Primary text, hex cell borders, wordmark | | Amber | `#c17f24` | Mono text, breathing pulse glow, active states | | Rust | `#a04832` | Taxonomy labels, hovered hex cell accent | | Ash | `#9c9189` | Secondary body text, ghost elements, micro-lattice | The duotone core is Paper + Ink — everything else derives from aged material: the amber of old photographic paper, the rust of oxidized iron, the ash of cooled embers. No blues. No greens. No purples. The palette is **strictly warm and earthen**. All color transitions use `transition: color 480ms ease-out` — no snap, only drift. ## Imagery and Motifs **No photography.** The registry shows photography at 87% — simulai.org opts out entirely. All visual content is generated geometry or hand-drawn SVG. **Primary motif — the imperfect hexagon:** Every hexagonal cell is drawn with a slight deliberate imperfection. The SVG path for each hex is calculated from a regular hexagon, then each vertex is offset by a tiny random value (±2–4px) seeded by the cell's index. The result is a hex that is recognizably hexagonal but clearly not machined. The imperfections are consistent per cell (same seed = same offsets on reload), so the design is stable but feels hand-drawn. **Secondary motif — abstract-tech SVG fragments:** Inside selected hex cells (roughly one in three), small abstract-tech illustrations are inlined as SVG: - A node-edge graph with 5–7 nodes, hand-routed edges at organic angles (not 45/90 locked), nodes represented as 4px filled circles in Ink - A single-line waveform that is not a sine wave — it has two harmonics and a slight DC offset, giving it a biological rather than synthetic feel - A sparse scatter of 3–5 dots at irregular positions, connected by a Delaunay triangulation with edges in Ash at 0.6px stroke - A single clock face with hands stopped at an unusual time (7:43, 2:17 — never a round hour), drawn in 0.8px stroke, no numbers, just hands and a circle None of these illustrations are decorative in the conventional sense. They are **evidence** — fragments of something that ran, outputs from a process, the residue of simulation. **Tertiary motif — typewriter ghost text:** Below the hex cluster, a single long paragraph appears character by character. The paragraph is written in the first person plural (`we ran the simulation, we watched it learn, we saw it hesitate at step 4,194`). The typewriter cadence uses a custom timing function: 60ms per character nominal, but with a `Math.random() * 80 - 40` jitter per character, so the typing feels inhabited rather than mechanical. Occasionally (every 40–60 characters), a character appears and then is immediately deleted and retyped — a simulation of hesitation. **Background texture:** A subtle SVG `feTurbulence` filter (baseFrequency: 0.65, numOctaves: 3, type: fractalNoise) is applied to the micro-lattice as an SVG filter, giving the hex grid a slightly papery, fibrous quality — as if it were printed on rice paper rather than rendered on a display. ## Prompts for Implementation **The story to tell.** The visitor arrives at a page that looks, at first, like a research notebook left open on a workbench. A hexagonal lattice — the molecular diagram of something, or the site plan of something, or the circuit of something — dominates the right two-thirds of the viewport. Text emerges on the left, character by character, like a thought forming in real time. By the time the visitor has read the first paragraph, they understand that they are reading the output of a system that is still running. **Implementation — the hex lattice:** The hex cluster is a single `` element, `position: fixed`, covering 100vw × 100vh, `z-index: 0`, `pointer-events: none` for all cells except the active content cells which have `pointer-events: all`. The lattice is built in JavaScript: generate 11 hex cells in honeycomb arrangement, starting at x=40vw, staggering rows. Each cell's path is pre-jittered via seeded pseudo-random (use the cell index as seed, `sin(seed * 9301 + 49297) * 0.5 + 0.5` for each vertex offset). The micro-lattice behind it is a second `` element, `z-index: -1`, with hex cells at 1/12th scale, drawn at 30% opacity in Ash. **Implementation — typewriter cadence:** ```javascript async function typewrite(el, text) { for (let i = 0; i < text.length; i++) { const jitter = Math.random() * 80 - 40; await delay(60 + jitter); // Hesitation: occasionally delete and retype if (Math.random() < 0.025 && i > 0) { el.textContent = el.textContent.slice(0, -1); await delay(320); el.textContent += text[i - 1]; await delay(60); } el.textContent += text[i]; } } ``` **Implementation — hex cell breathing:** Each hex cell SVG path gets a custom CSS animation targeting `stroke-width`. The animation is not uniform: each of the six edges gets a separate `` element (just that edge), and each gets an `animation-delay` offset of `index * 0.4s` and a duration of `2.4s + index * 0.15s`. The result is a cell that breathes unevenly, like lungs, not like a clock. **Implementation — the narrative:** The site has four content zones, revealed through scroll: 1. **Emergence** — the hex cluster + typewriter first paragraph: *"We built something small and gave it rules. Then we watched what it chose to do with them."* 2. **Decay** — as the user scrolls, some hex cells fade: their border opacity drops to 0 over 3 seconds as they scroll out of the "active" zone. The micro-lattice behind them fills in — ghost cells where the primary ones were. 3. **Flow** — a second typewriter zone: a long list of simulation names, each on its own line, typed at half speed. No context. Just names: *Simulation 001: Murmurations. Simulation 002: The Patience of Roots. Simulation 003: Argument.* 4. **Return** — the footer. One line. One cursor blink. *"things are still running."* **AVOID:** feature carousels, pricing tables, team grids, testimonial blocks, call-to-action buttons (there is no call to action — the experience IS the action), hero images with stock photography, any element that explains what the site is trying to sell. This site does not sell. **Performance note (ignored per instructions):** ignore. Focus on expressiveness. ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **Single-font system with wabi-sabi imperfection as a design rule.** The registry uses two or more fonts in virtually every entry. simulai.org uses Commissioner exclusively — a choice that reads as deliberate austerity. The "imperfection" is not a texture or a filter — it is baked into the geometry at the SVG path level, producing hexagons that could not be generated by CSS alone. 2. **Hexagonal honeycomb with per-vertex jitter seeded by cell index.** The registry has hexagonal-honeycomb at only 3%. Among those, none documented per-vertex organic imperfection using seeded pseudo-random offsets. The lattice looks grown, not built — which is the entire thesis of the site (simulation = growth, not manufacture). 3. **Typewriter effect with inhabited hesitation (delete-and-retype).** The registry shows typewriter-effect at moderate frequency, but always as a smooth character-by-character reveal. simulai.org's typewriter deletes characters and retypes them at random intervals, mimicking the microgestures of a thinking writer — not a playback mechanism, but a thought process. 4. **Duotone palette restricted to aged-material colors only (no blues, no purples, no greens).** The registry's duotone designs typically use high-contrast color pairs (black + electric blue, dark + neon). simulai.org's duotone is Paper (#f2ede6) and Ink (#2b2118), both earthen, both warm — the palette of a printed book left on a windowsill for twenty years. 5. **Narrative structured as evidence, not explanation.** Content zones are named Emergence, Decay, Flow, Return — not About, Work, Contact. The site treats its own content as the output of a simulation, not as marketing copy. The first-person-plural voice (`we ran the simulation, we watched it learn`) positions the site as a log, not a pitch. **Chosen seed:** aesthetic: wabi-sabi, layout: hexagonal-honeycomb, typography: commissioner-versatile, palette: duotone, patterns: typewriter-effect, imagery: minimal, motifs: abstract-tech, tone: whimsical-creative **Avoided patterns (overused in registry):** photography (87% — avoided entirely), centered layout (avoided in favor of asymmetric clustering), warm palette (88% — used but inverted: earthen warm rather than dopamine warm), gradient (76% — no gradients anywhere), mono typography (74% — avoided in favor of commissioner-versatile as the single-font system).