# Design Language for simidiots.net ## Aesthetics and Tone simidiots.net is **The Museum of Artificial Stupidity** — a permanent exhibition hall for the glorious moments when simulated agents make catastrophically dumb decisions. The conceit: somewhere there is a 1997 life-simulation game whose NPCs were never finished. They walk into walls. They set their kitchen on fire trying to make toast. They queue for a door that opens the other way. simidiots.net is the *institutional archive* of these creatures — a deadpan, lovingly-curated wing of a museum that takes the study of digital idiocy completely seriously. The aesthetic is **90s pixel-art**, but not the nostalgic-warm kind plastered across the corpus' watercolor and cottagecore sites. This is **cold CRT pixel-art** — the look of an educational CD-ROM, a hospital kiosk, a SimCity 2000 dialog box — rendered with museum-curator gravity. Chunky 2x-scaled sprites. Dithered gradients. A 16-color VGA palette pretending to be a serious institution's brand guidelines. The tone is **deadpan-academic-comedy**: every label is written like a wall plaque at a natural history museum, describing the migratory patterns and feeding behaviors of these artificial fools. "Specimen 0x4F: observed walking into a fountain 1,402 consecutive times. Cause of death: optimism." Mood references: the loading screen of an abandoned PlayStation 1 dev kit; the help-file of Encarta '95; a taxidermy diorama lit by a single fluorescent tube; the exact shade of grey of a Windows 95 button; the soundless dignity of a museum guard watching a sprite repeatedly fall down stairs. ## Layout Motifs and Structure The site is a **horizontal-scroll museum corridor** — you do not scroll *down* a page, you walk *along* an exhibition hall. Each "room" is a full-viewport panel; the page advances left-to-right as you scroll, like a side-scrolling platformer's level. This is deliberate: horizontal-scroll sits at 8% in the corpus, and almost no pixel-art site uses it as the primary navigation metaphor. **The corridor:** - A persistent **brass-plaque header rail** runs along the top — 56px, a beveled pixel-bar in institutional teal, holding the museum wordmark on the left ("SIMIDIOTS · INSTITUTE FOR THE STUDY OF ARTIFICIAL STUPIDITY") and a tiny pixel **mini-map** on the right showing which room you're in (lit dot among unlit dots). - A persistent **footer "floor"** — a 2px-pixel checkerboard tile strip, like museum-hall linoleum, with a single 16px sprite "DOCENT" character that walks along it tracking your scroll position. He occasionally trips. - Each **room panel** is composed as a *diorama display case*: a heavy double-beveled pixel frame (light top-left, dark bottom-right — the universal 90s "raised panel" trick), inside which sits the exhibit. Wall-plaque captions are pinned to the lower-left of each case in monospace, with a fake accession number. - **Room 1 — "The Atrium":** the hero. A vast pixel-art rotunda; the wordmark mounted like carved stone; a slow-blinking "NOW OPEN" pixel sign; the docent sprite asleep on a bench. - **Room 2 — "Hall of Pathfinding Failures":** a diorama of sprites stuck in corners, orbiting pillars, queued for the wrong door. Each sprite is hoverable for its plaque. - **Room 3 — "The Decision-Tree Archive":** a wall of framed "specimen cards" laid in a strict pixel **card-grid** (card-grid is 92% in the corpus — used here *ironically*, as literal museum specimen drawers, not as a content dump). - **Room 4 — "Diorama of Self-Inflicted Catastrophe":** the toast-fire, the bathtub-overflow, the infinite-staircase. Looping micro-animations behind glass. - **Room 5 — "The Reading Room / Colophon":** a quiet pixel library; the institute's "mission statement"; a guestbook rendered as a pixel ledger. Vertical rhythm *inside* each room uses a strict **8px baseline grid** — everything snaps to multiples of 8, the way real tile-based engines did. Nothing is anti-aliased. Nothing is off-grid. ## Typography and Palette **Typefaces (Google Fonts only):** - **Press Start 2P** — the bitmap display face. Used ONLY for: the museum wordmark, room titles, the "NOW OPEN" sign, and big numerals (accession numbers, the specimen count). It is genuinely hard to read in bulk — so it is rationed to ≤10 words per appearance, set with generous letter-spacing and line-height 1.8. Always pixel-snapped, never scaled to non-integer sizes (16px, 24px, 32px only). - **VT323** — the monospace body face: the "terminal readout" register. All wall-plaque captions, specimen descriptions, the mini-map labels, the guestbook. VT323 is a CRT terminal font — phosphor-soft, monospaced, evokes the kiosk-screen feel. Body size 20px (it's a large-x-height pixel font, needs the size), line-height 1.35, color the warm phosphor amber on dark plaques and ink-black on light ones. - **Special Elite** — used in exactly ONE place: the "official museum documents" in the Reading Room (the mission statement, the loan agreement, the curator's signature line). A typewriter face — it signals "bureaucratic paperwork" inside an otherwise screen-native world. Weight 400 only. No third sans. The contrast is bitmap-display vs. terminal-mono vs. typewriter — three flavors of "machine wrote this," which is the whole joke. **Palette — "Institutional VGA" (a fake 16-color brand system):** - `#0B1A26` — **Hall Shadow.** The deepest background; the unlit corners of the museum. Near-black with a teal bias. - `#16323F` — **Display Case Teal.** The primary surface — exhibit backgrounds, the header rail. The color of a 1996 government website's banner. - `#2D7D8A` — **Docent Uniform.** Mid teal; the structural accent — bevels' "true" color, the docent sprite, active mini-map dots. - `#E8E2D0` — **Plaque Cream.** Light wall-plaque background; the "paper" tone for captions. Slightly yellowed, like aging laminate. - `#C7C3B2` — **Linoleum Grey.** The footer floor checkerboard's lighter tile; secondary borders; the SimCity-dialog grey. - `#F0A431` — **Phosphor Amber.** The warm CRT-readout text color on dark surfaces; the "NOW OPEN" sign; warning labels on the catastrophe diorama. - `#D94F2A` — **Toast-Fire Vermilion.** The single hot accent — used for the literal fire sprites, the "DO NOT TOUCH" tape, error-state pixel icons, and the hover-state of any interactive specimen. Used sparingly; it's the only thing that ever feels *urgent* in this very calm museum. - `#7FB04A` — **Sickly Lawn Green.** A washed VGA green for the diorama "grass," the EXIT sign, and the docent's occasional speech-bubble. Dithering bridges these: every "gradient" is a Bayer-matrix dither between two of these eight colors, never a smooth CSS gradient. Skies in dioramas are dithered Hall Shadow → Display Case Teal. ## Imagery and Motifs **Primary imagery: hand-drawn pixel-art**, all on a strict grid, all 2x-scaled (so a "pixel" is 2 screen px), all rendered with `image-rendering: pixelated`. No photography anywhere — photography is at 98% in the corpus; its total absence here is a statement. **The custom sprite cast (drawn as inline SVG `` mosaics or tiny base64 PNGs, scaled up):** - **THE IDIOTS** — a roster of ~12 distinct 16×16 specimen sprites, each in a slightly different dumb pose: Wall-Walker (face pressed to a wall, arms still pumping), Fountain Diver (mid-belly-flop into 4px of water), Toaster (holding a fork toward a glowing slot), Door Queue-r (third in a line for a door labeled PULL, pushing), Staircase Tumbler (a 6-frame fall loop), Ghost in the Geometry (half-clipped through a pillar), the Eternal Optimist (walking confidently off a cliff), the Pathfinder (a dotted A* line that loops back on itself). - **THE DOCENT** — a 16×16 museum-guard sprite in Docent Uniform teal, peaked cap, hands clasped behind back. Walks the footer floor. Has a 3-frame trip animation and a 2-frame "sigh." - **DISPLAY-CASE FURNITURE** — beveled pixel frames, brass plaques (tiny `#F0A431` rectangles with VT323 text), velvet ropes (a dithered vermilion-and-shadow twist), spotlight cones (a semi-transparent dithered triangle of Plaque Cream), a museum bench, a potted plastic fern (the only "nature" motif — and it is plastic, deliberately). - **WALL TEXTURE** — the museum walls are a 4px subtle dither of Display Case Teal and Hall Shadow, like worn institutional paint. - **THE FLOOR** — 16×16 linoleum checkerboard, Linoleum Grey + Display Case Teal, tiled across the footer. - **ICONOGRAPHY** — chunky 16×16 pixel icons throughout: a museum-map "you are here" pin, a tiny camera with a red "no flash" cross, an info "i" in a circle, a clipboard for the docent, an EXIT runner. Decorative recurring motif: a faint **"INSUFFICIENT INTELLIGENCE"** stamp — a pixel-art rubber-stamp graphic in vermilion, rotated ~7°, applied like a watermark to specimen cards that failed evaluation. ## Prompts for Implementation Build as a **single static HTML document** + one CSS file + one small JS file + a Google Fonts link (Press Start 2P, VT323, Special Elite). No framework, no build step. Target ≤ 90KB before fonts; pixel art is cheap when drawn as CSS box-shadow mosaics or compact inline SVG. **The narrative spine — "A Tour of the Institute":** The site is a walk through five museum rooms, left to right. The story is: you arrive at the Atrium → you witness the pathfinding failures → you browse the specimen archive → you stand before the catastrophe dioramas → you sign the guestbook in the Reading Room and exit. There is no product, no signup, no pricing, no stat-grid — this is an *exhibition*, and the only "conversion" is the guestbook ledger. **Scroll mechanics:** - Hijack vertical-wheel to horizontal-scroll the `.corridor` (a `display:flex` row of full-viewport `
` rooms). Provide real horizontal scroll for trackpads. On narrow/touch screens, fall back to vertical stacked rooms — but keep the diorama frames and plaques intact. - A scroll-position-driven **docent walk**: the docent sprite's `translateX` maps to scroll progress along the footer. When the user *stops* scrolling for 2s, the docent does its "sigh" animation. When the user scrolls *fast*, the docent does its "trip" animation (a tiny chaotic delight — micro-interactions sit at only 4% in the corpus). - The **mini-map** in the header lights the dot for the current room (IntersectionObserver). Clicking a dot smooth-scrolls to that room. **Animation — everything loops, nothing eases-out smoothly:** - All sprite animation is **stepped**, not tweened: `animation-timing-function: steps(N)`. Frames swap; nothing slides. The Wall-Walker's arms pump on a 2-frame steps loop. The Staircase Tumbler runs a 6-frame fall, then resets — forever. - **The toast-fire** in Room 4: a 3-frame pixel flame loop in Toast-Fire Vermilion + Phosphor Amber, plus a slow dithered "smoke" rectangle drifting up and fading. - **Specimen hover (Room 2 & 3):** the sprite frame freezes mid-pose, a vermilion 2px highlight frame snaps around it (no fade — `steps(1)`), and its wall-plaque caption types out in VT323 with a `typewriter-effect` (15% in corpus — common, but here it's diegetic: it's a CRT readout). The plaque text is pure deadpan museum copy: "*Felis pixelis. Specimen recovered from sector G-7. Last action log: 'walk → wall → walk → wall' (×∞). Status: still trying.*" - **Page load:** a 90s-style "MUSEUM NOW OPENING" pixel splash — a beveled grey dialog box with a chunky pixel progress bar that fills in ~12 steps, then the dialog "closes" (shrinks to a line, vanishes) revealing the Atrium. The progress bar labels cycle through dumb tasks: "Aligning sprites...", "Confusing pathfinders...", "Lighting fires...", "Hiring docent...". - **Cursor:** a custom 16×16 pixel cursor — a tiny museum-map magnifying glass. Over interactive specimens it swaps to a pixel "INSPECT" hand. (cursor-follow is 89% in corpus — so we do NOT do a trailing dot; the *custom pixel cursor sprite* is the more interesting move.) - The **"INSUFFICIENT INTELLIGENCE" stamp** thumps onto failed specimen cards on scroll-into-view: a `steps(2)` scale-down (big → final size), no bounce, plus a 1px screen-shake of just that card. **Copy voice everywhere:** wall-plaque deadpan. Room titles in Press Start 2P. Captions in VT323 as clinical field notes. The Reading Room's mission statement in Special Elite, signed "— The Curator (also a sim, also an idiot)". **AVOID:** smooth CSS gradients (use Bayer dither), anti-aliasing (everything pixelated), CTA buttons, pricing blocks, stat-grids, hero-with-signup, parallax depth-of-field, glassmorphism, any photograph, any rounded corner, any drop-shadow blur (pixel art uses hard offset "shadows" only). ## Uniqueness Notes Differentiators this design commits to — other CMassC sites should not duplicate these: 1. **Pixel-art as cold institutional brand, not warm nostalgia.** Pixel-art is only ~3% of the corpus, and the few that use it lean playful/retro-warm. simidiots.net renders pixel-art with *museum-curator deadpan gravity* — a fake 16-color "institutional VGA brand system," typewriter bureaucracy fonts, and clinical field-note copy. Cold CRT-kiosk, not cozy 8-bit. 2. **Horizontal-scroll as a literal museum corridor.** Horizontal-scroll is 8% in the corpus; using it as a *walk-the-exhibition-hall* metaphor — with a docent sprite that physically walks the footer tracking your scroll position, and trips when you scroll fast — is a navigation conceit no other site here uses. 3. **Stepped animation only — nothing tweens.** While 83% of the corpus uses spring/elastic easing, this site bans smooth easing entirely: every motion is `steps(N)`, every "gradient" is a Bayer dither, every "shadow" is a hard pixel offset. The aesthetic discipline *is* the brand. 4. **Zero photography, zero rounded corners, zero blur** — in a corpus that is 98% photography, 84% glassmorphism, 94% gradient. Total absence as a statement. 5. **The deadpan-museum-comedy register.** No CTA, no pricing, no stat-grid, no signup. The only interactive "conversion" is signing a pixel guestbook ledger. The content is a *curated exhibition of artificial stupidity* with wall plaques — a tone (deadpan-academic-comedy) and content-genre (museum of failures) absent from the corpus. Chosen seed/style: **`90s pixel art playful`** — interpreted against the grain as "cold institutional pixel-art museum" rather than warm retro-game nostalgia. Avoided overused patterns from frequency analysis: photography (98%), glassmorphism (84%), warm gradient palette (94–98%), spring/elastic easing (83%/21%), cursor-follow trailing dot (89%), generic full-bleed centered card-grid content dumps (card-grid 92% — used here only ironically as literal specimen drawers).