# Design Language for simidiot.com
## Aesthetics and Tone
`simidiot.com` is a **high-concept paradox site**: the formal vocabulary of a 2041 aerospace defense interface applied to something that calls itself an idiot. The visual language is a surgical monochrome field — near-total blackness interrupted by razor-thin light — as if the site were a classified instrument panel seen through the slit of a blast door. Everything is precise, calibrated, slightly inhuman. The dominant feeling is **controlled alienation**: the machine is smarter than you, knows it, and is being polite about it.
The "simi" in the name suggests simulation — so the site reads as a simulation of credibility. The aesthetic is not trying to be cool; it is cool because it refuses to try. No gradients, no warmth, no invitation. Only depth, compression, and the occasional blur that suggests something important just slipped past the focal plane.
Tone: glacial, declarative, dry-witty. Like a brief from a future institution that doesn't need to explain itself.
The primary chromatic field is **void-black** (#050509) with **surgical white** (#f0f0f5) for text. The single accent is a **near-UV indigo bloom** (#1f0a3c) — visible only on hover states and blur halos — like bioluminescence glimpsed through deep water. No warmth. No organic curves unless they are rendered in wireframe.
## Layout Motifs and Structure
The page is structured as **five depth-stacked parallax sections**, each treated as a separate focal plane in an optical instrument — like switching between lenses on a microscope, not scrolling through a webpage. The user descends through layers of compressed information, each revealing itself as the previous blurs into the background.
**Plane 1 — Aperture:** Full-bleed, 100vh. The wordmark `simidiot` occupies the horizontal center in three stacked lines: `simi` (large, tracking +0.08em) / thin hairline rule / `idiot` (same scale). Both words sit in surgical white on void-black. As the user scrolls into Plane 2, the wordmark remains in fixed position but begins a `blur(0px → 12px)` transition over 200ms — the focal point is shifting away.
**Plane 2 — Signal:** A collage of technical fragments — deconstructed circuit traces, OCR-misread text, half-decoded binary strings rendered as SVG paths — floats across three asymmetric columns at different parallax rates (0.3x, 0.6x, 0.9x). The columns do not align to a grid; they are offset by 17° from vertical, creating a subtle tilt that implies velocity. Foreground elements are white (#f0f0f5) at 100% opacity; midground at 38%; background at 12%.
**Plane 3 — Noise:** A single centered text block in two tight columns (each 340px wide, 20px gap). The text is the actual content — what the site does, what the tool/service/concept is — written in compressed paragraphs with no headers, no bullets. Just prose. The background behind this block begins to show the indigo bloom (#1f0a3c) as a radial gradient that fades at the edges, as if a UV light is being held behind the text.
**Plane 4 — Resolution:** The collage fragments from Plane 2 re-appear here, but now in focus — sharp, legible, contextual. Each fragment is a functional link or label. The tilt from Plane 2 is corrected to 0°, giving the impression that the plane has "snapped" into alignment. Hover reveals the indigo bloom under each fragment.
**Plane 5 — Terminal:** A 100vh terminal-black section. Three lines of monospace text, centered, white. Then silence. No footer navigation. No social links. Just the closing statement.
Scrolljacking is forbidden. Parallax is achieved via CSS `translate3d` on scroll position, not JS scroll-locking. The transition between planes uses `backdrop-filter: blur()` applied to a fixed-position overlay whose opacity is driven by scroll percentage.
## Typography and Palette
**Type system (Google Fonts only):**
- **Primary wordmark & display — [`Jost`](https://fonts.google.com/specimen/Jost)** at 96px, `wght 200` (Extra Light), `letter-spacing: 0.12em`. Jost's geometric neutrality is the closest available Google Fonts approximation to Futura — identical circular bowls on `o`, `c`, `e`, identical monoline strokes. Set uppercase only for the wordmark. `font-feature-settings: "ss01"` if available to activate alternate `a`.
- **Body and prose — [`DM Mono`](https://fonts.google.com/specimen/DM+Mono)** at 14px, `wght 300` (Light), `line-height: 1.9`. Monospace signals machine-origin, keeps the terminal register. Prose paragraphs only, no decorative use.
- **Labels and fragment text — [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk)** at 11px, `wght 400`, `letter-spacing: 0.22em`, uppercase. All interface labels, section markers, and fragment overlays use this. It reads as HUD text.
- **Accent/error state — [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono)** at 12px, `wght 100` (Thin). Used only for the three closing terminal lines in Plane 5 and for any OCR-noise fragments in Plane 2 that simulate corrupted readouts.
**Palette — void monochrome + UV bloom (minimum 5 colors):**
- `#050509` — Void Black (background field, body)
- `#f0f0f5` — Surgical White (primary text, active elements)
- `#1a1a22` — Deep Charcoal (secondary background for Plane 3 block)
- `#3d3d52` — Muted Slate (midground collage layer, 38% opacity text)
- `#0d0d14` — Near-Black (background of Plane 5 terminal section, subtly warmer than void)
- `#1f0a3c` — UV Indigo Bloom (hover halos, Plane 3 radial background, not visible on load)
- `#7b5ea7` — Indigo Highlight (indigo in its most visible form — thin 1px rule, hairline hover underlines only)
No pure `#000000`. No pure `#ffffff`. The white is slightly blue-shifted (cool, clinical). The black is slightly blue-tinged (deep space, not printer black).
## Imagery and Motifs
**No photography.** The corpus shows photography at 86% — simidiot.com refuses entirely.
All imagery is **technical collage built from SVG primitives**, constructed to look like deconstructed engineering documentation:
1. **Circuit trace fragments**: 0.5px stroke white lines that follow 45°/90° routing rules, with via circles (2px filled, 1px ring gap, 4px total diameter). These are NOT decorative — they connect to actual content nodes (labels, links, section markers) via invisible path geometry. On hover over a connected node, the trace from that node to the wordmark briefly illuminates in indigo (`#7b5ea7`, 800ms fade).
2. **OCR noise blocks**: Rectangles of densely packed 8×8 pixel monospace characters, the content being actual Base64-encoded strings of site metadata, rendered at 8% opacity in muted slate (#3d3d52). On scroll into frame, opacity increments from 8% → 20% over 600ms. At 20% opacity they become legible as intentional, not incidental.
3. **Binary drift columns**: Four columns of `0` and `1` characters, 10px monospace, drifting upward at 0.3px/frame on a `requestAnimationFrame` loop. Columns are 40px wide, full-height, placed at x positions 7%, 31%, 68%, 93% of viewport. Opacity: 6%. They never stop moving — they are the visual heartbeat of the page, present across all five planes.
4. **Blur halos**: When an interactive element is hovered, a 120px × 120px radial gradient bloom in `#1f0a3c` at 40% opacity appears centered on the element, with `filter: blur(40px)`. It fades in over 160ms and persists 400ms after hover-out. This is the site's primary interaction signature.
5. **Hairline rules**: Single 1px horizontal rules in `#3d3d52` at 60% opacity, used to separate the wordmark from the tilt, and to section the prose block in Plane 3. No decorative borders anywhere else.
**Motifs: tech + simulation + precision error**
The recurring visual motif is the **near-miss**: elements that almost align, almost focus, almost resolve. Circuit traces that end just before reaching a node. Binary strings with one corrupted character. The wordmark in Plane 1 that blurs as you approach it. This motif literalizes the domain name — simidiot — the thing that almost makes sense.
## Prompts for Implementation
Build `simidiot.com` as a **five-plane depth instrument**, not a scrolling page. The implementation reads like a piece of scientific equipment that happens to contain text.
**Structural contract:**
- Single HTML file. No external JS frameworks. Vanilla JS only, under 200 lines.
- Fonts loaded from Google Fonts as `` + `@import` pairs.
- All SVG imagery inline. No image files.
- CSS custom properties for every color token (`--void-black`, `--surgical-white`, etc.)
- `scroll-behavior: auto` — no smooth scroll. Parallax handled entirely via `window.scrollY` in a single RAF loop.
**The opening sequence (Plane 1 — Aperture):**
On load, the page is pure void. After 200ms, the wordmark fades in over 1200ms using `opacity: 0 → 1` — no translate, no scale, no slide. Just materialization. The binary drift columns begin their loop immediately on load, already at their 6% opacity so they seem always-present. The hairline rule between `simi` and `idiot` draws itself left-to-right over 800ms using `stroke-dashoffset` animation on an SVG `` element, starting at 2000ms after page load.
**The parallax mechanism:**
Each of the five planes is a `position: relative` section with `z-index` layering. A fixed-position overlay `div` with `backdrop-filter: blur(Xpx)` transitions its blur value as a function of scroll position — blur increases as the user leaves a plane, decreases as they enter one. The blur value at any scroll position `s` is calculated as: `blur = Math.max(0, Math.min(16, Math.abs((s % planeHeight) - halfPlane) / halfPlane * 16))`. This creates a gaussian focus-point at the center of each plane.
The collage fragments in Plane 2 use three separate `translateY` values driven by scroll:
```
layer1Y = scrollY * 0.3
layer2Y = scrollY * 0.6
layer3Y = scrollY * 0.9
```
Fragments at the 0.3x rate appear to float; 0.9x rate appears nearly anchored to scroll. Combined with the tilt (CSS `rotate(-17deg)` on the fragment containers), this creates directional velocity.
**Plane 3 — prose block:**
The two-column prose layout uses `column-count: 2; column-gap: 20px; max-width: 700px` centered in the viewport. The UV indigo radial bloom behind it is a `position: absolute` div with `background: radial-gradient(ellipse 400px 300px at center, #1f0a3c 0%, transparent 100%)`, `filter: blur(60px)`, `opacity: 0` on load, transitioning to `opacity: 1` as the block enters viewport via IntersectionObserver.
**Plane 4 — resolution:**
Each fragment from Plane 2 re-appears here as a labeled, legible, interactive element. On hover:
1. Blur halo appears (120px × 120px, `#1f0a3c`, `filter: blur(40px)`)
2. Circuit trace from this element to the wordmark briefly illuminates in `#7b5ea7` for 800ms
3. The `Space Grotesk` label for the element shifts from `wght 400` to `wght 700` over 120ms
**Plane 5 — terminal:**
Three lines in `JetBrains Mono`, `wght 100`, 12px, centered, white. They appear sequentially via `setTimeout`:
- Line 1 at 0ms after plane enters viewport: `> system nominal`
- Line 2 at 1200ms: `> identity: confirmed`
- Line 3 at 2800ms: `> simidiot.com`
After Line 3, a blinking cursor (`_`) appears. Nothing else. No CTA. No links. The cursor blinks at 1.1s interval using a CSS `animation: blink 1.1s step-end infinite`.
**AVOID:** sticky navigation, hamburger menus, hero sections with CTAs, stat counters, pricing tables, testimonial carousels, gradient hero backgrounds, drop shadows, card components, any element that looks like a SaaS landing page.
**BIAS TOWARD:** depth perception, blur/focus as primary interaction language, the sensation of descending through layers of compressed information, restraint as the primary form of expression.
## Uniqueness Notes
**Chosen seed (per assignment):** aesthetic = **minimalist**, layout = **parallax-sections**, typography = **futura-geometric**, palette = **monochrome**, patterns = **blur-focus**, imagery = **collage**, motifs = **tech**, tone = **futuristic-cutting-edge**.
**Differentiators from the corpus (473 analyzed designs):**
1. **Monochrome with a single UV bloom, not neutral grayscale.** The corpus's 12% monochrome designs almost all use neutral #000/#fff or charcoal/white. simidiot.com's monochrome is blue-tinged void-black with a near-UV indigo accent that only appears on hover — making the palette feel classified, instrument-grade, alien. Not a design choice that announces itself.
2. **Blur as structural architecture, not decoration.** The corpus uses blur-focus at only 4%. Here it is the primary navigation metaphor: the `backdrop-filter: blur()` overlay that intensifies between focal planes makes the user feel they are adjusting optics, not scrolling. The blur is not applied to background images (the 86% photography pattern) but to the document itself.
3. **Technical SVG collage built from site metadata.** Imagery is not illustrative — the OCR noise blocks encode actual Base64 of site metadata; the circuit traces map the information architecture. At 5% corpus frequency for collage, and 0% for metadata-encoded collage, this is formally unique.
4. **The near-miss motif as brand identity.** The domain name "simidiot" (simulation + idiot, or semi + idiot) is literalized in every visual detail: things that almost resolve, almost align, almost focus. The wordmark blurs as you approach it. Circuit traces stop before nodes. Binary strings have one corrupted character. The design IS the pun.
5. **No navigation, no hierarchy signals.** At 0% for this configuration in the corpus — no sticky nav, no section headers, no visual hierarchy beyond focal plane depth. Users navigate by descending through focal planes, not by clicking. The page has no scrollbar (hidden via CSS) and the only wayfinding is the blur itself.
**Reference avoided patterns:**
- Photography (86% corpus) — excluded entirely
- Hand-drawn aesthetic (56%) — excluded
- Editorial layout (52%) — excluded
- Parallax at 75% as a pattern (this uses it as architecture, not storytelling)
- Gradient mesh imagery (8%) — excluded; the indigo bloom is a CSS radial gradient, not a mesh