# Design Language for sim-ai.xyz ## Aesthetics and Tone sim-ai.xyz is the digital presence of a simulation intelligence studio — the kind of place where a cognitive scientist who trained on mid-century systems theory, Norbert Wiener's cybernetics papers, and Charles and Ray Eames's short films about mathematics has finally built a product. The aesthetic is **mid-century functional curiosity**: not the retro pastiche of rounded-corner nostalgia, but the genuine intellectual confidence of designers who believed rational form could make ideas tangible. The site reads like a 1962 IBM research pamphlet redesigned by someone who has also absorbed Matisse cut-outs, Saul Bass title cards, and the quiet control panels of early NASA mission rooms. Every surface carries a sense of **deliberate material weight** — not skeuomorphic, but honest about the texture of things. The hero is massive and typographically declarative. Below it, the page breathes in long, unhurried sections, each one feeling like a page turned in a well-made saddle-stitched booklet. **Tone:** grounded, intellectually assured, unhurried. The site never shouts. It does not pitch — it demonstrates. The voice is the voice of a colleague who happens to know more than you, sharing ideas at a pace you can follow. No hyperbole, no "revolutionary", no countdown timers. The simulation is the argument. The design is the proof. **Mood references:** IBM Design Language 1963, Olivetti showroom catalogues 1958–1967, Charles Eames "Powers of Ten" (1977) title card palette, mid-century nautical chart typography, coastal California tide tables printed on kraft — serene, purposeful, slightly salt-faded. ## Layout Motifs and Structure The structural skeleton is **hero-dominant with staggered field sections** — a single full-viewport hero occupies the entire first screen, unbroken except by a thin navigation bar anchored to the top-left. Below the hero, content arrives in five distinct horizontal fields, each field running the full page width and alternating between two-column split and full-bleed single-column prose. There is no card grid. There is no pricing block. **Spatial logic:** - **Hero field (100vh):** Full-bleed background of algorithmic noise-texture (generated SVG turbulence, not a raster PNG), tinted with the `--tide-deep` primary. A single headline set in 14–18vw Sora at weight 800, left-aligned, occupying the left 62% of the viewport. Right 38%: a slowly rotating dial or compass-rose SVG built from concentric arcs in `--sand-warm` — the primary decorative element. Below the headline, one 22-word strapline in Karla Regular, then a single text-link CTA (no button shape, no border-radius pill). Vertical rhythm: 20px grid baseline. - **Section I — "What it simulates" (asymmetric two-column):** Left column 44%, right column 56%, no gutter. Left carries three numbered items (Sora 300 weight, large tracking), right carries a prose block in Karla 400. The section floats 12px above its `--sand-warm` background via a hairline top border in `--tide-pale`. - **Section II — "How it thinks" (full-bleed, dark):** `--tide-deep` background, reversed type. A single horizontal band of animated arcs — the same compass-rose vocabulary shrunk to icon scale — runs across the top of the section as a decorative divider. Prose left, SVG diagram right (flowchart rendered in line-drawing style, no fills, only `--sand-warm` strokes). - **Section III — "Live demonstration" (centered well):** A 720px centered column. The demo widget is rendered in a cream-beige inset panel (`--parchment`) with a 1px `--tide-pale` border and 32px internal padding. No box-shadow. No rounded corners (1px radius maximum). - **Section IV — "Field notes" (editorial prose):** Three narrow columns (each ~280px), set in justified Karla 400 with generous leading. Simulated page numbers printed in Karla 300 at 10px in the lower-right corner of each column — referencing the aesthetic of duplicated tide-chart handouts from the 1960s. - **Section V — Footer band:** One full-width horizon line in `--tide-pale`. Logo left, navigation center, a single contact text-link right. No social icon grid. **Micro-structural details:** The noise-texture background in the hero is an inline SVG `` filter applied to a `` — it shifts slowly via a CSS animation tweening `baseFrequency` between 0.025 and 0.055 over 18 seconds, creating the impression of a living chart. The compass-rose SVG uses `stroke-dasharray` animated with `stroke-dashoffset` to feel like a hand drawing itself. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Headlines — [Sora](https://fonts.google.com/specimen/Sora)**, weights 300 and 800. Sora is a humanist geometric that sits between Gill Sans's warmth and Futura's precision — its rounded terminals carry a mid-century handcrafted quality without the self-consciousness of a retro revival. Set at 14–18vw for the hero headline, 56–72px for section heads, 28px for subsection heads. Letter-spacing: -0.04em at hero scale, -0.02em at section scale, 0 at subsection. - **Body / Prose — [Karla](https://fonts.google.com/specimen/Karla)**, weights 300 and 400. Karla is a humanist grotesque with gentle inkiness; at small sizes it reads with the warmth of a typewriter corrected by a skilled editor. Measure locked to 64–70 characters per line. Line-height 1.72. - **Accent / Labels — [Karla](https://fonts.google.com/specimen/Karla)**, 300 weight, 11px, letter-spacing 0.18em, uppercase. Used for section numbers, field labels, and diagram callouts. No tertiary font family. **Palette — coastal-blend (low frequency, 2% in corpus):** - `--tide-deep`: `#1E3A4C` — deep tidal water, the dominant dark. Used for hero background tint, dark section background, all body text on light fields. - `--sand-warm`: `#C5A882` — sun-bleached coastal sand. Used for display accents, SVG strokes, compass-rose decorative element, hover state underlines. - `--parchment`: `#F0EBE1` — aged paper, coastal map document. Primary light background for most sections. - `--tide-pale`: `#A8BFC9` — pale estuary water at low tide. Used for hairline borders, field dividers, muted metadata text. - `--sea-moss`: `#4A6741` — salt-marsh green, the accent tone. Used sparingly: active navigation indicator, the single animated arc highlight in the hero compass-rose, block-quote left border. - `--horizon`: `#E8E0D4` — bleached horizon haze. Used for alternating section background tint, hover state background on navigation links. **Color ratios:** `--parchment` and `--horizon` together cover ~65% of total rendered surface area. `--tide-deep` covers ~25% (hero + dark section). `--sand-warm`, `--tide-pale`, `--sea-moss` split the remaining 10%. ## Imagery and Motifs **Imagery — noise-texture (low frequency, 3% in corpus):** The site uses no photographs, no icons sourced from icon sets, no stock vectors. All visual imagery is either: 1. **Inline SVG turbulence textures.** The hero background is a live-generated grain using `` composed with `` to map the noise into the `--tide-deep` / `--parchment` value range. The grain animates at 18s period, creating the sensation of looking at a tide-map chart under shifting light. On secondary sections, lighter turbulence overlays (`opacity: 0.04`) prevent flatness without competing with text. 2. **Constructed SVG diagrams.** Two functional diagrams appear in the site — a compass-rose rotational element (hero, Section II header) and a flowchart-style architecture diagram (Section II). Both are monochromatic, built from path elements with `stroke` only, no fills. The compass rose has 16 spokes of alternating lengths (long/short/medium/short), with an outermost ring bearing degree marks at every 22.5° — referencing Bowditch nautical charts and mid-century aeronautical plotting sheets. 3. **Typographic numerals as decoration.** In Section IV ("Field notes"), large ghost numerals (Sora 800, `--tide-pale`, `opacity: 0.08`, 220px) sit behind the three-column prose as watermarks — a motif from mid-century European science and engineering reports. **Motifs — vintage (contextualised, not pastiche):** The vintage register is disciplined: it draws from scientific instrument aesthetics (the dial, the chart grid, the degree marking), not from retro-nostalgia UI kits. Specific vintage signals: - The compass-rose SVG is the site's primary identifying mark — it appears at 120px in the hero corner, 40px in the navigation bar brand position, and at 20px in the footer. It functions as a logo-alternative. - Section dividers are single `1px` hairlines in `--tide-pale`, referencing the ruled borders of printed tide tables. - Section numbers are prefixed with a filled circle glyph (●) set in the same `--sea-moss` green as the nautical chart ink — referencing the plotting symbols of 1950s hydrographic surveys. - The hero strapline is set with a `0.12em` letter-spacing on key terms (the site name, the product verb), referencing the typesetting of 1960s research pamphlet covers. ## Prompts for Implementation Treat sim-ai.xyz as a **single continuous scroll experience divided into five nautical chart fields** — the metaphor throughout is that of reading a tidal chart: one large orientation field (the hero), then a series of detail fields that reward close reading. There is no hamburger menu, no sidebar, no modal overlay. The navigation is a single horizontal bar with five plain text links and the compass-rose mark. **Implementation priorities (ordered):** 1. **Hero:** Full-viewport div. Background: inline SVG with `` noise, CSS animated `baseFrequency` via `@keyframes` and a JS `requestAnimationFrame` loop tweening the filter primitive attribute. Overlay: a semi-transparent `rgba(30,58,76,0.82)` div on top of the texture. Text: Sora 800, 16vw headline, left 60%, baseline-aligned to the vertical center. Right 40%: the compass-rose SVG, centered vertically, slowly rotating at 0.3rpm clockwise. The two elements (text block + compass) are positioned so they feel compositionally balanced, not symmetrical. 2. **Section II (dark field):** `background: #1E3A4C`. All text in `--parchment`. The dividing decorative band is a horizontal strip of 12 evenly spaced compass-rose arcs (40px size each) at `opacity: 0.22`, running from left to right as a purely ornamental register. Below it: two-column layout (prose left, SVG diagram right). The SVG flowchart uses `stroke-dasharray` with a `stroke-dashoffset` animation triggered by `IntersectionObserver` — paths draw themselves on scroll-reveal, one after another with 120ms stagger. 3. **Noise animation:** Prefer animating the SVG filter's `baseFrequency` attribute directly via a `setInterval` or `requestAnimationFrame` loop in vanilla JS. Keep the animation subtle — the noise should feel like breathing, not strobing. Target 0.5Hz visual frequency. 4. **Magnetic CTA:** The hero text-link CTA uses a magnetic pull effect on mouse proximity (within 80px radius). The link text (not a button element) translates up to 12px toward the cursor with a `cubic-bezier(0.23, 1, 0.32, 1)` easing. On touch devices, the effect is disabled. 5. **Typography baseline grid:** All spacing values are multiples of 8px. Section padding: 96px top/bottom on desktop, 64px on tablet, 48px on mobile. Font-size scale uses a 1.333 major-third modular scale rooted at 17px body. 6. **Color application specifics:** Never use `--sand-warm` for body text — it fails contrast on `--parchment`. Never use `--tide-pale` as a background for `--parchment` text. `--sea-moss` appears as an accent only — maximum three instances on the full page. 7. **Scroll behavior:** `scroll-behavior: smooth` globally. The five sections use `scroll-margin-top: 72px` (navigation height) so anchor links land correctly. The compass-rose in the hero begins its rotation animation only after `IntersectionObserver` confirms the hero is 20% visible — preventing wasted GPU on users who never scroll to the hero. 8. **No JavaScript framework required.** All interaction is achievable in vanilla JS under 8KB minified. The SVG filter animation, compass rotation, path draw-on-scroll, and magnetic CTA are the four JS behaviors. Everything else is CSS. **Storytelling arc:** The user arrives on a site that feels geographically and intellectually located — the noise texture and compass rose ground the product in a navigational metaphor. They scroll and encounter a clean articulation of what the simulation does (Section I), then see how it reasons (Section II, with its self-drawing diagram). The demo in Section III is the climax — direct interaction with the product. Section IV's "Field notes" three-column prose signals that this studio writes and thinks, not just builds. The footer is the chart's legend: minimal, complete, honest. ## Uniqueness Notes **Differentiators relative to the existing corpus (informed by frequency analysis):** 1. **coastal-blend palette at 2% corpus frequency, used without any "ocean blue" cliché.** The corpus's dominant palettes are warm (88%) and gradient (76%). The coastal-blend here is the opposite of both: it is muted, analog-photographic, and refuses gradient. The `--tide-deep` navy is not a tech-blue — it is the specific dark of estuary water photographed at 5pm in November. The `--sand-warm` is not a warm-neutral filler; it is the exact color of Bowditch chart paper from the 1950s. The palette earns its coastal identity through material specificity, not scenic association. 2. **Noise-texture imagery via inline SVG filter, not a raster asset — a genuinely underused technique.** The corpus shows noise-texture at 3% frequency, and those instances are almost always PNG grain overlays applied as a CSS background-image. sim-ai.xyz generates its texture live in-browser using `` and animates it as the primary hero visual. This is the only site in the corpus where the primary imagery is a computed, animated, mathematical texture — fitting for a simulation product. 3. **Hero-dominant layout at 4% frequency, using the compass-rose as the sole visual counterweight.** The corpus's rare hero-dominant layouts still tend toward photography or illustration. Here the hero's visual complexity comes entirely from typographic scale and a single precision-drawn SVG instrument. The tension between 18vw type and a 40-spoke compass rose is purely compositional — no image sourcing, no licensing, no accessibility compromise from decorative rasters. 4. **mid-century aesthetic expressed through scientific instrument vocabulary, not furniture or graphic-design nostalgia.** The corpus's 5% mid-century instances lean toward Eames chairs, Memphis-adjacent geometry, or 1950s poster lettering. sim-ai.xyz sources its mid-century from a different subcultural register: the research pamphlet, the nautical chart, the IBM mission-room control panel. The result shares an era but reads completely differently. **Seed documented:** aesthetic: mid-century, layout: hero-dominant, typography: humanist, palette: coastal-blend, patterns: magnetic, imagery: noise-texture, motifs: vintage, tone: grounded-earthy **Patterns avoided from frequency analysis:** centered layout (84% — avoided in favor of left-aligned hero), photography imagery (86% — replaced with computed SVG texture), warm palette (88% — replaced with coastal-blend), gradient palette (76% — no gradients used), mono typography (74% — humanist grotesque used instead), parallax pattern (75% — replaced with magnetic + path-draw-svg), vintage motifs used in scientific-instrument register rather than retro-nostalgia register to distinguish from the 34% of corpus using generic vintage.