# Design Language for simidiots.com ## Aesthetics and Tone simidiots.com is the home page of a fictional two-person "research lab" — the Society for the Methodical Investigation of Dumb Ideas, Obvious Truths & Suspicious behaviorS — whose entire premise is that the best way to learn anything is to do the dumbest possible version of it first, on purpose, and watch what breaks. The site presents itself as that lab's **field notebook rendered as a 1996 desktop operating system that someone has lovingly, obsessively rebuilt pixel-by-pixel in 2026**. It is **pixel-art** to the bone: every interface chrome element — window frames, title bars, scrollbar thumbs, checkboxes, the little resize-grip in the corner — is drawn on a visible 4px grid with hand-placed highlight and shadow pixels, no anti-aliasing, no border-radius anywhere, ever. The tone is **whimsical-creative** but with a deadpan, lab-report cadence: captions are written like a scientist who refuses to admit the experiment was silly, e.g. "FIG. 3 — the toaster did, in fact, achieve flight; orientation was not preserved." It is gleeful, low-stakes, faintly absurd, and never winks too hard. Inspiration: Susan Kare's original Macintosh bitmap icons; Windows 3.1 Solitaire's card backs; the README files that shipped on shareware floppy disks; the deadpan diagram style of a 1970s home-appliance repair manual; Teenage Engineering's product photography (clinical lighting on a toy). The screen is not "retro nostalgia" wallpaper — it is a *working desktop* the visitor pokes at, and it pokes back. ## Layout Motifs and Structure The page is **not scrolled in the normal sense** — it is a single full-bleed "desktop" that fills the viewport, dark teal void at the edges, and the visitor's progress through the lab's story is staged as **windows opening on top of windows** in a deliberate cascade (each new window offset 28px right and 28px down from the last, classic OS stacking). The layout is a **layered-depth / windowed canvas**, not a column. There is a fixed **menu bar pinned to the very top** (8px tall pixel rule beneath it) with the items `Lab` · `Experiments` · `Failures` · `About` · a live pixel-clock on the far right that actually ticks. Down the left edge: four **desktop icons** (a folder, a floppy, a tiny exploding test-tube, a trash can labeled "good ideas") — clicking each opens its window. The narrative beats: 1. **Boot.** A 1.2-second pixel "BIOS" check ("SIMIDIOTS LAB OS v1.0 … detecting bad decisions … 24 found … OK") then the desktop fades in row-by-row of pixels. 2. **README.txt window** auto-opens center-screen: the lab's manifesto, monospace, in a window you can drag. 3. **Experiments folder** — opens a window of file-icons; each is one experiment; double-clicking expands a sub-window with the "FIG." diagrams. 4. **Failures bin** — a window that lists every experiment that went wrong, as a wobbly hand-drawn-pixel ledger; the entries jitter 1px when hovered like they're embarrassed. 5. **Screensaver** — if the visitor is idle 40 seconds, a pixel toaster (wings flapping, sprite-animated) flies across the void, bouncing off window edges. Windows are draggable, can be brought to front, and can be "closed" (they crumple into 8 pixels and vanish) — closing them all reveals a single line on the bare desktop: "you have learned everything. it wasn't much." No CTA, no pricing, no stat-grid, no testimonials, no email capture, no logo wall — just a desktop and its windows. ## Typography and Palette **Type system (Google Fonts only):** - **`Press Start 2P`** — the system bitmap face. Used ONLY for menu-bar items, window title bars, icon labels, and button labels. Always at exact pixel-multiple sizes: 8px chrome / 16px window titles. Letter-spacing 0; line-height locked to 16px so it sits on the grid. - **`VT323`** — the "terminal / README" face, a tall pixel mono. Used for all body copy inside windows, the BIOS boot text, file listings, and the FIG. captions. Sizes 18px and 24px only. This is the voice of the lab notebook. - **`DotGothic16`** — used sparingly for the "stamped" headings on diagram windows ("FAILURE LOG", "SPECIMEN 04") — a chunkier dot-matrix face that reads like a label-maker. Rendered in all-caps with 2px letter-spacing. `image-rendering: pixelated` is set globally; the whole page is conceptually a 2x-scaled 480-wide bitmap, so text and borders all snap to even pixels. **Palette — a 1996 256-color desktop, but curated to 8 hues:** - `#0B6E6E` — **desktop void teal** (the classic "system" background, the edges of the world) - `#E8E4D8` — **window beige** (the warm off-white face of every window and dialog) - `#9B9B8C` — **chrome grey** (3D bevel mid-tone for raised buttons and title bars) - `#1B1B1B` — **ink** (1px hard outlines, body text, the grid) - `#FFFFFF` — **highlight pixel** (the top-left bevel edge on every raised element) - `#E8443B` — **error red** (the close-box, the "24 bad decisions found" counter, FAILURE stamps) - `#F2C84B` — **caution yellow** (highlighted file selection, the flying-toaster sprite, hover states) - `#3A7BD5` — **link blue** (the one accent that says "this is clickable"; underlined, of course) This is a **candy-bright / high-contrast** scheme deliberately held to flat fills only — zero gradients, zero blur, zero shadow-blur (shadows are 2px solid offsets of `#1B1B1B`). ## Imagery and Motifs Everything is **hand-drawn pixel-art at 1:1 then displayed 2x** — no photography, no SVG curves, no gradient meshes. Recurring motifs: - **The lab seal:** a 32x32 pixel test-tube with a tiny puff of smoke and a band-aid on it — appears in the menu bar, the favicon, and stamped on the README. - **FIG. diagrams:** each experiment window contains a black-and-beige pixel schematic with dashed arrows, a dotted "trajectory" line, and a measurement bracket — drawn in the style of a patent illustration, but the subject is, e.g., a sandwich being launched, a houseplant wearing a tiny crash helmet, a Roomba taped to a skateboard. - **The flying toaster:** an 8-frame sprite (wings up / wings down) reused from the screensaver, also seen on the 404-style "window not found" dialog. - **Pixel cursor:** the system arrow becomes a pixel hourglass for ~600ms whenever a window opens ("thinking…"). - **Dither textures:** any "shaded" area uses a true 50% checkerboard dither (`#1B1B1B` / transparent) — drop-shadows, the disabled-button look, the void's subtle vignette. - **Crumple animation:** closing a window scatters its outline into ~12 black pixels that fall with a 2-step pixel-physics tween, then poof (a 3-frame dither cloud). - **The "good ideas" trash can:** permanently empty; opening it shows one window: "(empty — by design)". ## Prompts for Implementation Build simidiots.com as **one HTML file, one CSS file, one ES module** — no framework, no build step. The mental model: this is a tiny operating system, ~480px logical canvas scaled 2x to fill the viewport (use CSS `transform: scale()` on a wrapper, or model units as `0.4vmin` — pick one and never break the grid). `image-rendering: pixelated; -webkit-font-smoothing: none;` globally. **No border-radius. No box-shadow blur. No CSS gradients. Anywhere. Ever.** Bevels are built from 1px solid borders: `border-top` + `border-left` = `#FFFFFF`, `border-bottom` + `border-right` = `#1B1B1B` for "raised", invert for "pressed". **Storytelling / interaction script:** 1. **Boot sequence (~1.4s):** black screen, `VT323` text typing line-by-line via a `typewriter-effect` (one char per frame, ~40ms): "SIMIDIOTS LAB OS v1.0", "RAM: 640K OK (should be enough)", "detecting bad decisions ........ 24 found", "loading desktop...". Then the teal desktop wipes in **top-to-bottom in 8px bands** over 400ms. Honor `prefers-reduced-motion`: skip the boot, show desktop immediately. 2. **Desktop:** menu bar (sticky top), 4 desktop icons down the left, live pixel-clock ticking real seconds in the menu bar's right corner. README.txt window auto-opens centered with a 200ms "zoom from icon" pixel-step scale (4 discrete frames, not smooth). 3. **Windows:** draggable by title bar (pointer events, snap position to even pixels on drop — `Math.round(x/2)*2`). Bring-to-front on mousedown (z-index bump). Close-box (red square, top-left) triggers the **crumple**: 12 absolutely-positioned 4px black divs scatter on randomized parabolic paths over 350ms then a 3-frame dither-puff. Opening any window briefly swaps the cursor to a pixel hourglass for 600ms. 4. **Experiments folder:** grid of file-icons (use `stagger` so they pop in 60ms apart, each a 2-frame scale). Double-click → sub-window with one FIG. diagram + a `VT323` caption written in deadpan lab voice. The "24 found" counter in the menu bar `counter-animate`s upward during boot. 5. **Failures bin window:** a scrollable pixel-ledger; rows `jitter` ±1px on hover (a 2-keyframe nudge). The pixel scrollbar has a real draggable thumb. 6. **Idle screensaver:** after 40s of no pointer movement, the flying-toaster sprite (8-frame wing flap, ~120ms/frame) drifts across the void at a shallow angle, bounces off window bounding-boxes. Any mouse move dismisses it instantly. 7. **Endgame:** when every window is closed, fade in centered `VT323`: "you have learned everything. it wasn't much." plus one re-open hint icon. Tasteful, low-key sound is **out of scope** — keep it silent. Performance/accessibility tuning beyond `prefers-reduced-motion` is out of scope. **AVOID:** hero-with-CTA layouts, pricing tables, stat grids, testimonial carousels, newsletter modals, cookie banners, logo walls, smooth easing curves (everything steps), drop-shadow blur, any gradient. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A literal windowed OS as the entire site, not a metaphor sprinkled on top.** The corpus is 92% card-grid and 86% full-bleed scroll pages; this site has *no scroll* and *no cards* — it's a draggable-window desktop where narrative is staged by stacking dialogs. Nothing else here does that. 2. **Hard pixel-art discipline in a corpus that's 94% hand-drawn-sketch + 84% glassmorphism.** Both of those rely on softness, blur, and curves. This design forbids border-radius, box-shadow blur, anti-aliasing, and CSS gradients outright — bevels are 1px solid borders, shadows are 2px solid offsets, "shading" is checkerboard dither. It sits in the underused 3% pixel-art bucket and the rare flat-fill / high-contrast / candy-bright lane. 3. **Deadpan lab-report copy voice instead of pastoral-romantic or friendly-warm.** Where 33% of the corpus is pastoral-romantic and another 21% warm-inviting, this is whimsical-creative delivered with a straight face — patent-illustration captions for absurd experiments. 4. **Three bitmap Google Fonts (`Press Start 2P`, `VT323`, `DotGothic16`) in a corpus that is 94% generic mono + 45% humanist.** No humanist sans anywhere, no serif, no handwriting font. 5. **Stepped, frame-based animation (typewriter boot, 8px-band desktop wipe, discrete-frame window zoom, sprite flapping, pixel-crumple) instead of the corpus-standard spring (83%) / magnetic (78%) / parallax (89%) / cursor-follow (89%) easing toolkit.** Motion here is intentionally choppy because real bitmap UIs were. **Avoided overused patterns (from frequency analysis):** glassmorphism (84%), hand-drawn (94%), card-grid (92%), full-bleed scroll (86%), centered hero (80%), parallax (89%), cursor-follow (89%), spring (83%), magnetic (78%), warm gradient palettes (98% warm / 94% gradient), photography imagery (98%), mono-everything typography (94%), pastoral-romantic tone (33%). **Chosen seed / style:** `90s pixel art playful` — vocabulary mix: *aesthetic: pixel-art, layout: layered-depth, typography: retro-display, palette: candy-bright, patterns: typewriter-effect, imagery: vector-art (hand-placed pixel sprites), motifs: retro-patterns, tone: whimsical-creative.*