# Design Language for simidiot.net ## Aesthetics and Tone simidiot.net is a **brutalist anti-design experiment** dressed as a confession. The premise: this is the public-facing dashboard of *Sim Idiot* — a fictional, perpetually-running software simulation whose only job is to be confidently, cheerfully wrong about everything. The site does not sell a product. It *is* the product: a deadpan instrument panel for a machine that has been thinking very hard, for years, about a problem it fundamentally misunderstood. The `.net` TLD is taken at its most literal and most boring — this is plumbing, infrastructure, a node in a network — and that mundanity is the joke. We render a piece of critical-looking infrastructure that turns out to be running a clown. The mood is **edgy-rebellious** in the way a glitched ATM screen is rebellious: it refuses to be polished, refuses to reassure, and yet it is weirdly sincere about its own incompetence. Think: a 1996 university mainframe status page; a parking-garage payment terminal that has achieved sentience and regret; the readme of a project that was abandoned and then somehow kept compiling. Nothing here apologizes for being ugly, because the ugliness is *load-bearing* — it is the visual proof that no marketing department touched it. The humor is dry, never zany. The simulation believes it is helping. Tonal rules: hairline borders everywhere, default-browser focus rings left visible *on purpose*, system fonts used like a shrug, and exactly one absurd flourish per screen so the deadpan never tips into pure tedium. The visitor should feel like they have stumbled into the maintenance interface of something they were not supposed to see — and that the thing on the other side is, endearingly, an idiot. ## Layout Motifs and Structure The spine is a **broken-grid** "control panel" — and this is deliberate against the corpus, where broken-grid sits at 12% and card-grid dominates at 92%. There is no card grid here. There are *panels*: bordered rectangles of mismatched proportion, butted up against one another with 1px gutters, like windows tiled by someone who has never used a tiling window manager correctly. Structural skeleton, top to bottom: - **STATUS BAR** — a 28px-tall full-bleed strip pinned to the top. Monospace. Left side: `SIMIDIOT.NET // SIMULATION RUNNING`. Center: a live-incrementing tick counter (`TICK 0042913387`) that never stops, even when the tab is backgrounded — it counts the milliseconds the idiot has been thinking. Right side: a "CONFIDENCE" gauge that is always pinned at 100%. The strip has a single 1px bottom border and a faint scanline. - **THE BIG WRONG ANSWER** — the hero is a single oversized panel containing one short, completely incorrect statement rendered as a giant headline (e.g. *"2 + 2 = 5. FINAL ANSWER. WE CHECKED."*). No image. No CTA. A blinking block cursor sits at the end of the line. Below it, in tiny mono: `(this is wrong. the simulation does not know this.)` - **THE LOG** — a vertically-scrolling, monospace event log that takes up the left ~60% of the viewport on desktop: timestamped lines of the simulation reasoning its way confidently into nonsense (`14:22:09 reconsidering... no. i was right.` / `14:22:11 the moon is a kind of cheese-adjacent administrative region.`). New lines append on scroll via IntersectionObserver. This is the heart of the site. - **THE PANEL STACK** — the right ~40% is a column of small bordered modules: a "MEMORY" panel listing things the idiot is currently misremembering; an "INPUTS" panel showing the questions it has been asked, with its answers struck through and replaced by worse ones; a "PLAN" panel that just says `PLAN: keep going`. - **DIAGNOSTICS** — near the bottom, a faux-technical "self-test" panel where every check passes (`✓ logic intact`, `✓ humility module: NOT FOUND (ok)`, `✓ vibes: nominal`). - **COLOPHON** — a bordered footer in 11px mono: `simidiot.net — a simulation of being wrong, running since the day it started. no, we will not fix it.` Spacing is the anti-design tell: gutters are exactly 1px, padding inside panels is a stingy 12–16px, and section breaks are marked not by whitespace but by a full-width 1px rule with a tiny label notched into it (`/// LOG`). On mobile the panels stack into a single column in source order; the log stays the tallest thing on the page. ## Typography and Palette **Typefaces (Google Fonts only):** - **JetBrains Mono** — the workhorse. Status bar, the tick counter, the log, every panel label, the colophon, the diagnostics. Weights 400 and 700. Tracking +20 on all-caps labels. This is `tech-mono` used without irony as the *body* font, which is itself the design statement: the whole site reads like a terminal that learned to have feelings. - **Archivo Black** — the one display face. Used *only* for THE BIG WRONG ANSWER and for the section notch-labels. Set absurdly large (clamp 2.6rem → 7rem), all caps, line-height 0.92, letter-spacing -0.02em. Its blunt, over-confident weight is the visual embodiment of being wrong loudly. - **Archivo** (regular) — a tiny supporting role: the parenthetical disclaimers under the hero and a few longer-form annotation lines that would look hostile in pure mono. Weight 400, 13px, slightly muted. **Palette — high-contrast, mostly monochrome, with one alarm color:** - `#0E0E0E` — **VOID BLACK.** The page background. Not pure #000 — a hair off, like an old CRT that never quite reached black. - `#F2F0E9` — **PAPER WHITE.** Primary text and panel borders. Slightly warm, like sun-bleached printer paper, so the screen feels *aged* rather than sleek. - `#8C8C84` — **DIM GREY.** Disclaimers, struck-through text, timestamps, the "humble" small print. The color of things the simulation has stopped caring about. - `#FFE600` — **IDIOT YELLOW.** The single accent. Used for: the blinking cursor, the CONFIDENCE 100% gauge fill, the `✓` marks in diagnostics, and exactly one word per screen that the idiot is *most* sure about (which is, naturally, the most wrong word). It is a hazard color used to celebrate, not warn. - `#E63916` — **CORRECTION RED.** Used almost never — only when the user does something the simulation interprets as "correcting" it, at which point a tiny red `IGNORED` stamp animates in next to the input. Reserved, rare, funny. The contrast is intentionally a little too high — Paper White on Void Black, hairline yellow — so the whole thing buzzes slightly, like a monitor at the wrong refresh rate. ## Imagery and Motifs **There is no photography.** (The corpus is 98% photography; we are the 2%.) Every visual element is drawn from a terminal/instrument-panel vocabulary, all 1px line work in Paper White or Idiot Yellow: - **The blinking block cursor** — appears at the end of the Big Wrong Answer, in the log, and idly in empty panels. It is the site's only "mascot": a small confident rectangle, forever about to say something else dumb. - **The tick counter** — a monospace odometer that only goes up. It is the closest thing the site has to a logo, and it animates from the moment the page loads. - **ASCII / box-drawing furniture** — section dividers, panel corners (`┌─ MEMORY ─┐`), and a small ASCII "self-portrait" of the simulation in the diagnostics panel: a lopsided face made of `( o_o )` that occasionally blinks to `( o_- )`. - **Strike-through as a motif** — wrong answers are not hidden; they are crossed out and "improved" to something worse. The strike line is drawn in Dim Grey, the replacement in Paper White, the *most* confident replacement in Idiot Yellow. - **Faux "OK" checkmarks** — chunky yellow `✓` glyphs next to diagnostics that should worry you (`✓ humility module: NOT FOUND`). - **One scanline + faint CRT vignette** — a single repeating 2px scanline overlay at ~4% opacity and a soft darkening at the screen edges, so the panel feels like it's being *displayed* somewhere, on hardware, in a room. - **The "PLAN: keep going" panel** — a recurring gag-object: a panel whose contents never change no matter how much you scroll. No gradients (the corpus is 94% gradient). No rounded corners. No drop shadows except a single 1px hard offset on the Big Wrong Answer panel, like a misprint. ## Prompts for Implementation Build this as a **single self-contained HTML document** — one file, one `