# Design Language for simidiot.com ## Aesthetics and Tone simidiot.com is **an anti-design experiment dressed as a half-finished classroom diorama of a "simulated idiot"** — a deliberately, joyfully clumsy website that behaves like a research lab notebook kept by someone who is *very* smart pretending to be *very* dumb. The premise: this is the homepage of a fictional unfinished AI named SIMIDIOT, a "simulated idiot" that confidently gets everything almost-right. The visual language is **brutalist anti-design** — raw, unstyled-looking, default-browser-blue links, system fonts mixed with one absurd display face, visible "still-broken" code comments rendered as actual page furniture, content that overlaps and collides on purpose, alignment that is *almost* right and then isn't. The tone is **edgy-rebellious but warm underneath** — it pokes fun at slick SaaS landing pages, at the entire genre of confident product marketing, at AI hype. Nothing here is trying to convert you. There is no pricing, no "Get Started," no testimonials, no stat grid. There is a malfunctioning thinking-machine telling you, earnestly and incorrectly, what it thinks the world is. Think: Jodi.org meets a middle-school science fair volcano meets the "raw HTML" aesthetic of early-90s university homepages — but executed with surgical intent so the chaos reads as a *choice*, never as incompetence. Mood words: **misaligned, over-confident, lo-fi, deadpan, gleeful, slightly broken, secretly meticulous.** ## Layout Motifs and Structure The page uses a **broken-grid** built on top of a visible, exposed 12-column wireframe — column guides are *actually drawn* as faint dashed magenta lines, like the artboard guides leaked into production. Sections do not respect the grid. They straddle it, hang off the edge, overlap each other by 40–80px, and occasionally rotate 1–3 degrees as if printed on paper and glued back crooked. - **Single long scroll, ~7 "exhibits."** Each exhibit is a labeled specimen of the SIMIDIOT's broken cognition: `EXHIBIT A — "What is a dog"`, `EXHIBIT B — "Counting"`, `EXHIBIT C — "Time"`, etc. Each one is a card-ish block, but the cards have no consistent width, no consistent padding, and borders drawn in 1px solid black `outline` (not `border`, so they overlap their neighbors). - **The wireframe is the decoration.** Red-on-white annotation arrows, callout boxes that say `[STUB]` and `[BLANK]`, ruler marks down the left margin, a fake `` comment rendered visibly in monospace as a horizontal rule between exhibits. - **Overlap-collisions are intentional.** Headlines sit half-behind images. A footer note overlaps the last exhibit. The nav (if you can call it that) is just five underlined blue text links jammed in the top-left corner, no logo, mis-kerned. - **No centering, ever.** Everything is flush-left or violently off-axis. Whitespace is uneven — huge gaps in some places, cramped pile-ups in others. - **A persistent "STATUS BAR"** runs along the bottom: a fixed strip in default-OS-grey with monospace text reading nonsense diagnostics that update as you scroll (`confidence: 99.7%`, `correctness: ~`, `vibes: nominal`). ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Exhibit headers — `Bricolage Grotesque` (variable, wght 800, opsz max)** — a clumsy-on-purpose grotesque with weird widths between glyphs; set ENORMOUS (clamp 3rem → 8rem), tracking too tight, occasionally with one letter bumped up 4px out of the baseline via inline span. It looks like a child rearranged a ransom note. - **Body / annotations — `Space Mono` (regular & bold)** — monospace for *everything* that isn't a headline: body copy, captions, the fake code comments, the status bar, the nav links. Monospace body text reinforces the "lab notebook / unstyled" feeling. - **The "wrong" font — `Comic Neue` (bold, italic)** — used exactly once per exhibit, for the SIMIDIOT's "answer" — its confidently incorrect conclusion (e.g. *"a dog is a small loud carpet"*). The joke writes itself: the worst-reputation font, deployed with total sincerity. **Palette — anti-design "default browser" set, high-contrast, garish on purpose:** - `#FFFFFF` — paper white, the only background. No gradients. Ever. - `#000000` — pure black, all body text, all `outline` borders. - `#0000EE` — the legendary unvisited-link blue. Used for all links and the nav. - `#551A8B` — visited-link purple. Used as a secondary accent (section numbers, the status bar text). - `#FF00FF` — magenta, for the exposed wireframe guides, annotation arrows, and `[STUB]` / `[BLANK]` boxes. - `#FF0000` — alarm red, for "still-broken" callouts and the one "ERROR" exhibit. - `#C0C0C0` — Windows-95 silver, the status bar background and fake "loading" bars. No anti-aliasing softness, no shadows, no rounded corners (border-radius: 0 everywhere), no blur, no opacity tricks except a single 8%-alpha magenta for the grid lines. ## Imagery and Motifs **No photography. No 3D. No stock illustration. No gradient mesh.** Imagery is built from `geometric-abstract` primitives and crude SVG, all in the flat palette above: - **The SIMIDIOT "face"** — a single fixed-position SVG: a square head, two circle eyes that follow the cursor with a deliberate ~250ms LAG (it's slow), and a mouth that is just a horizontal line. Drawn in 2px black stroke, no fill. It reappears tiny inside each exhibit, getting progressively more "confused" (eyes crossed, mouth a zigzag). - **Crude diagrams** — every exhibit has a hand-coded SVG "diagram" attempting to explain its concept and failing: a "dog" diagram that's a rectangle labeled `LEG` four times in the wrong places; a "clock" that's a circle with numbers 1–9 then `10? 11? 12??`. - **Annotation layer** — red arrows (SVG `marker`), dashed magenta callout rectangles, ruler tick marks, a recurring `▲ unfinished` glyph. - **Visible "broken" UI chrome** — a fake browser scrollbar drawn into the page that doesn't work, a `[ X ]` close button top-right that shakes when clicked but does nothing, alt-text-style empty boxes (`⌧ image missing`) where you'd expect a hero image. - **Marquee, unironically** — one horizontal auto-scrolling text strip (CSS-animated, not ``) repeating `SIMIDIOT v0.0.1 — DO NOT TRUST — SIMIDIOT v0.0.1 — DO NOT TRUST —`. ## Prompts for Implementation Build simidiot.com as **one HTML file, one CSS file, one JS module** — a single long scroll through ~7 "exhibits" documenting the malfunctioning cognition of a fictional simulated-idiot AI. The whole thing is a deadpan joke executed with precision: the chaos must be *authored*, never accidental. There is **no CTA, no pricing block, no stat grid, no testimonial row, no signup, no contact form.** There is only the specimen tour. **Storytelling structure (vertical scroll, ~75 seconds):** 1. **Boot screen / hero (anti-hero).** Flush top-left: five mis-kerned blue underlined nav links. Below, the SIMIDIOT face SVG, oversized. Headline in Bricolage Grotesque, gigantic, with one letter knocked off-baseline: `SIMIDIOT`. Subhead in Space Mono: `a simulated idiot. confidently wrong since 2026.` A magenta `[STUB]` box sits where a product screenshot would go, captioned `⌧ image missing`. The status bar appears, pinned to the bottom. 2. **README exhibit.** A block of Space Mono text styled like a literal `README.md` — `## what is this`, `## how it works (it doesn't)`, `## known issues (all of them)`. Half the lines are struck through. A visible `` comment rendered as a red horizontal rule. 3. **EXHIBIT A — "What is a dog".** Crude SVG dog-diagram (rectangle, `LEG` ×4 mislabeled). The SIMIDIOT's answer in **Comic Neue bold italic**: *"a dog is a small loud carpet that requires walking."* A red annotation arrow points at the answer labeled `← incorrect (confident)`. 4. **EXHIBIT B — "Counting".** Numbers 1–9 laid out, then `10?`, `11?`, `12??`, then it gives up: `... a lot`. The exhibit card rotates -2°. A `counter-animate` element tries to count to 100 but stalls at 7 and restarts. 5. **EXHIBIT C — "Time".** A circle "clock" with hands pointing nowhere sensible. Answer (Comic Neue): *"time is when the light changes. there are two times: bright and not-bright."* Status bar updates: `temporal_model: BROKEN`. 6. **EXHIBIT D — "ERROR".** The one all-red exhibit. The SIMIDIOT tried to answer "what is love" and the whole block is a stack trace in Space Mono: `TypeError: cannot quantify love at heart.js:0` ... `at SIMIDIOT. (everything)`. The `[ X ]` close button shakes if clicked. 7. **EXHIBIT E — "Conclusion(s)".** SIMIDIOT presents three mutually contradictory conclusions, each in Comic Neue, each numbered in visited-purple. Then a final line in tiny Space Mono: `confidence remains 99.7%. thank you for visiting. please do not trust simidiot.` 8. **Footer collision.** A footer note in monospace overlaps the bottom of Exhibit E by ~60px. It just says `made by no one. © 20XX. there is no company.` The marquee strip (`DO NOT TRUST`) scrolls above it. **Animation & interaction guidance — everything is *slightly broken on purpose*, all CSS/JS, no libraries:** - **Cursor-follow with deliberate lag.** SIMIDIOT's eyes track the mouse but with a ~250ms eased delay — it's slow on the uptake. Use `requestAnimationFrame` lerp at a low factor (~0.05). - **Glitch-on-scroll.** As each exhibit enters the viewport (IntersectionObserver), its header does a 200ms `glitch` jitter (transform translate ±3px, brief magenta/red text-shadow split) — once, then settles. No looping glitch (too much). - **Stagger reveal, but wrong.** Exhibit elements fade in staggered — except one element in each exhibit fades in *before* the others or arrives misaligned then snaps into (almost) place 400ms later. The "settle" is intentionally imperfect: it lands 1–4px off. - **Marquee** — pure CSS `@keyframes` translateX loop, no `` tag. - **Status bar** — JS updates monospace diagnostic strings as scroll position changes; values are nonsense (`vibes: nominal`, `correctness: ~`, `confidence: 99.7%`). - **The fake scrollbar** drawn in the right margin animates its thumb to roughly match real scroll, but is visibly off and non-interactive. - **Reduced motion:** if `prefers-reduced-motion`, kill marquee, glitch, lag, and counter loops — present everything static and (still) crooked. **Hard constraints:** `border-radius: 0` everywhere. No box-shadows. No gradients. No blur/backdrop-filter. White background only. Use `outline` not `border` for exhibit frames so they overlap neighbors. Real, viewable HTML comments rendered as page furniture via `::before` content. Default link colors — do not restyle `a` beyond the palette blues/purples. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Anti-design as authored joke, not laziness.** Anti-design sits at only 5% in the aesthetic frequency table, and most of that 5% is "a bit raw." simidiot.com goes fully committed: default-browser-blue links, visible wireframe guides, intentional collisions, Comic Neue deployed sincerely. The corpus has nothing executing the "smart site pretending to be dumb" conceit. 2. **Zero gradient, zero warm palette — against the grain of a 94%/98% corpus.** `gradient` appears in 94% of designs and `warm` in 98%. This site uses pure `#FFF`/`#000` plus four garish "system default" accent colors and *no gradients at all*. That alone makes it a statistical outlier. 3. **Monospace body + no centering + `outline` borders.** The corpus is 80% centered and 92% card-grid; this is flush-left broken-grid with overlapping `outline` frames and Space Mono for *body copy*, not just code snippets. 4. **The malfunctioning-mascot narrative replaces the product pitch.** No CTA, no pricing, no stats, no testimonials — the "exhibits" structure is a museum of a broken AI's wrong answers, a genre the corpus doesn't contain. 5. **Imperfect "settle" animations.** Where the corpus uses spring/magnetic/stagger for *polish*, this site uses stagger to land elements 1–4px *wrong* on purpose — anti-polish as a motion principle. Chosen seed/style: **brutalist anti-design experiment** (aesthetic: anti-design, layout: broken-grid, typography: eclectic-hybrid, palette: high-contrast, patterns: glitch, imagery: geometric-abstract, motifs: grid-lines, tone: edgy-rebellious). Avoided patterns from frequency analysis: glassmorphism (84%), hand-drawn (94%), card-grid (92%), centered (80%), warm palette (98%), gradient palette (94%), parallax (89%), cursor-follow-as-polish (89%), photography imagery (98%).