# Design Language for sim-ai.org ## Aesthetics and Tone sim-ai.org is a **Memphis-pattern instructional zine from 1987 that somehow teaches you how large language models work** — imagine if the Bell Labs technical manual for Unix was redesigned by Sottsass Ettore using offset-printed fluorescent ink on recycled newsprint, with typewriter annotations stamped in the margins. The site is a tech tutorial surface that refuses to look like a tech tutorial site. Every section teaches something real about AI simulation while being visually structured around **bold Memphis geometry**: thick black outlines, flat color fills, polka dots, zigzags, and confetti-squiggle patterns layered directly onto the layout. The tone is **authoritative but playful** — a professor who draws diagrams with a fat Sharpie. Content is instructional and dense, but the visual grammar breaks every convention of "clean developer documentation." There are no gradients, no photography, no glass. Just shapes, type, and color collisions. The overriding metaphor is a **blackboard-and-corkboard classroom** cross-bred with a 1980s Italian design journal. The duotone palette — electric coral against deep indigo — gives the site its visual unity across the Memphis chaos. Typewriter-effect text reveals simulate the experience of watching a model generate tokens in real time. ## Layout Motifs and Structure The page is built as a **stacked-sections narrative scroll** — a vertical stack of discrete, full-viewport-width panels, each with a different Memphis-patterned background treatment. No sidebar. No sticky nav. No grid of cards. Each section is its own contained rectangle with an intentional collision between background pattern and foreground content. **Panel anatomy (top to bottom):** 1. **Hero Panel** — full viewport height. Indigo (`#1C1464`) background with a white polka-dot field (dots at 28px spacing, 6px radius, 15% opacity). The domain wordmark `sim-ai.org` is set in 96px weight-800 rounded-sans, left-aligned with a `clamp(2rem, 6vw, 5rem)` left margin, coral colored (`#FF4136`). Beneath it, a typewriter-effect subtitle types out: "a simulation of machine learning, in real time." Below that, a thick 8px coral horizontal rule, full width. No hero image. 2. **Explainer Panel** — white background with a Memphis squiggle-pattern border (top and bottom edges: repeating zigzag SVG, 32px tall, alternating coral and goldenrod). Content: a 2-column text-plus-diagram layout. Left column is body copy (24px line-height, 1rem font-size). Right column is an annotated ASCII-style diagram of a transformer block, rendered in `Courier Prime`, surrounded by a thick black 3px border with coral fill on the border corners (Memphis corner squares). 3. **Typewriter Demo Panel** — deep indigo background. A large centered terminal window (3px coral border, no border-radius — Memphis is orthogonal) shows live typewriter text output simulating a language model completing a sentence token by token. The panel title `HOW TOKENS APPEAR` is set in 72px, goldenrod (`#FFD700`), bold rounded-sans, left offset. Background: sparse diagonal stripe pattern in near-black (`#0a0a1a`). 4. **Concept Stack Panels (×4)** — alternating backgrounds: goldenrod/indigo/white/coral. Each panel teaches one concept (embeddings, attention, sampling, context windows) via a 3-part structure: (a) a large Memphis-style icon (flat, outlined, 200×200px SVG with squiggle decoration), (b) a punchy 3-line typewriter-effect definition that types in on scroll-enter, (c) 2–3 short body paragraphs. No bullet lists. No numbered steps. Prose only. 5. **Interactive Panel** — off-white (`#F5F0E8`) background with a Memphis dot-grid wallpaper. A self-contained demo widget: the user types a prompt, the site echoes back a token-by-token typewriter simulation (no actual AI — pure JS animation). Panel is labeled `GENERATE` in 64px coral. 6. **Coda Panel** — indigo background. Goldenrod large quote in Courier Prime: "a simulation is not a lie — it is a controlled partial truth." Below: the domain name again, smaller, in white. No CTA, no signup form, no pricing. **Spatial rules:** - Panels are separated by Memphis zigzag dividers (SVG, 40px tall, drawn in the next panel's background color) - All text blocks are left-aligned within a `max-width: 880px` container with `margin: 0 auto` inside each panel - No horizontal centering of headlines — always left-flush (to break corpus habit of `centered` at 84%) - Negative space is controlled by panel padding: `clamp(3rem, 8vw, 7rem)` top/bottom per panel ## Typography and Palette **Typography — rounded-sans led, with mono accent (both Google Fonts only):** - **Display / Headlines:** `Nunito` — weight 800, used for all section titles and the hero wordmark. Letter-spacing `-0.02em`. Nunito's rounded terminals give the Memphis shapes a friendly but bold counterweight. Used at sizes from 48px (section heads) to 96px (hero). All uppercase where size ≥ 72px. - **Body:** `Nunito` — weight 400/600, 17px, line-height 1.75. The same face at a different weight maintains cohesion across the single-typeface-dominant system. Nunito at body weight reads exceptionally cleanly. - **Mono / Typewriter / Code:** `Courier Prime` — weight 400, 16px. Used exclusively for: typewriter-effect animated spans, terminal demo window, transformer diagram annotations, and the coda quote. Courier Prime is a refined version of Courier with better ink traps — it feels like a 1970s IBM Selectric output, which is exactly right for the classroom-blackboard metaphor. - **Accent Label:** `Nunito` weight 900, uppercase, 11px, letter-spacing `0.15em` — used for category tags, panel sub-labels (e.g., "CONCEPT 01"), and the Memphis-style caption strips. **Palette — strict duotone with two accent punctuation colors:** | Role | Name | Hex | |------|------|-----| | Primary background / deep field | Indigo Night | `#1C1464` | | Primary accent / signal color | Memphis Coral | `#FF4136` | | Secondary accent / warmth | Goldenrod Press | `#FFD700` | | Light surface / panel background | Chalk White | `#F7F4EE` | | Pure white | Paper | `#FFFFFF` | | Near-black outline / structure | Press Black | `#0D0D0D` | | Mid-tone separator | Typewriter Gray | `#C8C4BC` | **Duotone application:** Every panel uses exactly two colors from this palette as its primary color pair — Indigo+Coral, Chalk+Goldenrod, White+Indigo, Coral+Press-Black. The duotone discipline unifies the Memphis variety into a coherent system. ## Imagery and Motifs **No photography.** The site contains zero photographic images. The entire visual world is constructed from: 1. **Memphis Pattern Fills (SVG, inline).** Three repeating background patterns generated as SVG `` elements, all in theme colors: - *Polka Smash:* 28px-spaced circles of alternating coral and goldenrod on indigo, 8px radius - *Zigzag Rail:* Horizontal zigzag lines, 8px amplitude, 24px wavelength, 2px stroke, coral on chalk - *Confetti Squiggle:* Random 40px SVG squiggle glyphs (tilted, scaled 0.6–1.4×) scattered at 60px grid positions, press-black on white 2. **Memphis Icon Set (SVG, inline, 6 icons).** Flat, outlined, zero-gradient icons for the concept panels — each 200×200px, drawn on a 24-grid with 3px stroke weight and corner-square decoration: - Embedding: a 3D cube with a diagonal arrow through it, coral outline - Attention: two overlapping circles with radial lines between them, goldenrod fill areas - Sampling: a die (d6) with exaggerated pips, coral corners, press-black outline - Context: a horizontal scroll/roll with text lines, indigo fill - Token: a puzzle piece, goldenrod with coral dot at connector - Generation: a zigzag lightning bolt inside a thick square frame, press-black 3. **Typewriter Cursor Animation.** A blinking block cursor (8px × 18px rectangle, coral) accompanies all typewriter-effect text. The cursor blinks at 0.7s CSS animation. The typing speed is 38ms per character. No sound. 4. **Memphis Corner Squares.** Every bordered box (diagram frames, demo widget, icon containers) has 12px × 12px solid-color squares stamped at each corner — a Memphis motif that replaces border-radius entirely. Corners are coral on indigo boxes, indigo on coral boxes. 5. **Zigzag Section Dividers.** Full-width SVG elements between every panel. The zigzag tooth height is 32px, tooth width is 48px. The divider is drawn in the background color of the arriving section, creating a clean separation that also announces the next panel's color. 6. **Vintage Motifs — Stamp Marks and Halftone Dots.** Scattered across panels: circular "APPROVED" / "DRAFT" / "V1.0" stamp-style elements (SVG, 48px diameter, coral or goldenrod, 60° rotation, 30% opacity). These are vintage office-stamp aesthetics transposed into Memphis geometry. Also: halftone dot grids (6px dots, 18px spacing, 12% opacity) applied as a CSS background-image to the chalk-white panels for aged-print texture. ## Prompts for Implementation Build sim-ai.org as a **vertical scroll through a series of instructional panels**, each panel a self-contained lesson unit in the Memphis-zine format. There is no modal, no horizontal carousel, no nav drawer. The user reads downward, like turning pages in a 1987 Domus magazine that somehow explains transformers. **Implementation priorities:** 1. **Typewriter Effect (priority one).** Every headline and definition text in the concept panels uses a typewriter reveal. Use `IntersectionObserver` — when the element enters `rootMargin: "-10% 0px"`, the JS typewriter starts. The class `.is-typing` triggers the animation. Speed: 38ms/char. Cursor blinks independently of typing. Typed text is never re-typed on re-entry (use `dataset.typed = 'done'` guard). The hero subtitle types on page load after a 400ms delay. 2. **Memphis SVG Patterns (priority two).** Generate all three background patterns as inline `` blocks at the top of the HTML body (hidden), then reference them via `fill="url(#pattern-polka)"` on background rectangles. Do NOT use CSS `background-image: url()` with external files — everything inline, no HTTP requests for patterns. 3. **Panel Stacking.** Each section is a `
` element with `min-height: 100svh` and `display: flex; flex-direction: column; justify-content: center`. No overlap, no sticky. Each panel is fully visible and scannable at the viewport height where it enters. 4. **Memphis Corner Squares.** Implement as a CSS utility class `.memphis-corners` that uses `::before` and `::after` pseudo-elements with `box-shadow` spread to simulate all 4 corners. The corner squares do not use separate DOM elements. 5. **Scroll-Triggered Color Body Changes.** As the user scrolls between panels, use `IntersectionObserver` to update `document.body.dataset.panel` to the current section's color pair. This enables smooth background-color transitions on `
` as a fallback for print and low-motion modes. 6. **Zero Gradients.** Enforce flat color everywhere. If a gradient creeps in during implementation, remove it. The duotone discipline is the entire visual rationale. 7. **Zigzag Dividers.** Implement as inline SVG `` elements between sections. The path is a polyline that traces the zigzag across 1440px. On resize, SVG stretches because `preserveAspectRatio="none"`. 8. **Interactive Token Demo.** The demo panel uses a `
` below it that displays the typewriter output. No external API calls — the JS randomly selects from 5 pre-authored completions and reveals them token-by-token. The button `GENERATE →` is 3px coral border, Nunito 700, uppercase, no border-radius, coral background, white text. On click, the button label changes to `GENERATING` with a bouncing dot indicator (CSS only). 9. **Vintage Stamp Decoration.** Place 2–3 stamp elements per panel using `position: absolute` with `pointer-events: none`. They rotate with `transform: rotate(-12deg)` and `rotate(7deg)` alternately. They do not animate on scroll — they are static decorative elements. 10. **Responsive Breakpoints.** At 768px and below: single-column layout inside explainer panel (the 2-column text+diagram collapses to stacked). Memphis icons scale to 140×140px. Typewriter text font-size drops to `clamp(1.5rem, 6vw, 3rem)`. Stamp elements are hidden on mobile (clutter reduction). Zigzag dividers remain. **AVOID:** - CTA buttons like "Sign Up Free" or "Get Started" - Pricing tables - Testimonial carousels - Photography or photographic backgrounds - Any CSS `gradient` (linear, radial, conic) anywhere - Centered headlines (all left-aligned) - Parallax effects - Sidebar navigation ## Uniqueness Notes 1. **Memphis at 2% in corpus — first true Memphis instructional site.** The frequency analysis shows Memphis at only 2% across all designs. sim-ai.org is the first site in the registry to use Memphis not as decoration but as *structural metaphor* — the bold outlines, flat fills, and geometric confetti directly encode the "exploded diagram" visual language of technical education. Memphis shapes are used where other sites would use diagrams or infographics. 2. **Duotone as discipline, not decoration.** The corpus shows `duotone` at 11% and `duotone-photo` at 3%, but these usages are typically duotone photography filters. sim-ai.org uses duotone as a strict color-system rule — exactly two colors per panel, enforced algorithmically. No duotone photography. No gradients. This makes the duotone functional (legibility through contrast) rather than decorative. 3. **Typewriter-effect tied to educational content flow.** At 5% in the corpus, typewriter-effect is present but typically used only for hero taglines. sim-ai.org uses typewriter-effect throughout the instructional content — every concept definition types in on scroll entry, simulating the experience of watching a language model generate the very text being read. The medium is the message. 4. **Zero photography in a domain about AI/imagery.** AI sites almost universally feature robot imagery, generated art, or abstract photography. At 86% corpus frequency, photography is the single most overused pattern. sim-ai.org has zero photographic content — the entire visual language is constructed from SVG geometry and Memphis pattern, a deliberate counter-statement. 5. **Vintage stamp motifs as documentation metadata.** Rather than using vintage aesthetics decoratively (32% of the corpus uses vintage loosely), sim-ai.org applies vintage office-stamp imagery to annotate the instructional content — "DRAFT", "V1.0", "APPROVED" stamps on diagram panels, mimicking how technical documents were marked up before digital annotation. The vintage motif carries semantic weight. 6. **Stacked-sections at 2% — used as lesson-unit architecture.** The corpus shows stacked-sections at only 2%. sim-ai.org uses the stacked-sections structure not as a marketing page convention but as a chapter/lesson architecture — each panel is a discrete instructional unit with its own Memphis color pair, pattern, and typewriter definition. The stacking is pedagogical, not promotional. **Chosen seed:** `aesthetic: memphis, layout: stacked-sections, typography: rounded-sans, palette: duotone, patterns: typewriter-effect, imagery: mixed-media, motifs: vintage, tone: tech-tutorial` **Avoided from frequency analysis (overused in corpus):** - `centered` (84%) — all headlines left-aligned - `gradient` (76%) — zero gradients anywhere - `parallax` (75%) — no parallax - `photography` (86%) — no photographs - `mono` (74%) — not mono palette; strict duotone pairs only - `full-bleed` (63%) — panels have internal `max-width` containers - `stagger` (50%) — no staggered animation grids - `minimal` (43%) — anti-minimal; Memphis maximalist - `vintage` (34%) — vintage motifs present but functional, not decorative wallpaper