# Design Language for simidiot.net ## Aesthetics and Tone **simidiot.net** is a **Bauhaus fever dream trapped in a candy shop** — the rigid geometry of early-twentieth-century functionalism dissolved in a sugar-acid bath of synthetic pinks, electric mango, and hyper-saturated mint. Think Oskar Schlemmer's Triadic Ballet costumes reworked as neon gummies by a confectioner who also happens to own a print-risograph and a turbocharged vintage press. The dominant mood is **dreamy-ethereal** — not soft-pastel dreamy, but the specific dreaminess of standing inside a Bauhaus-geometry stage set at 2am when all the lights have been gelled candy-bright and the air smells like sugar and acetone. Forms are exact and hard-edged (Bauhaus functional precision), but they float, blush-blur into one another, and occasionally dissolve into generative particle fields as if they are made of spun sugar about to melt. The site is an artifact of a fictional organism: a museum of beautiful mistakes. Every design error ever committed — misregistered prints, off-color swatches, glitched weavings, miscalculated proportions — is celebrated here as a primary document of creative intelligence. The domain name (`simidiot`) is the confession and the manifesto at once: the person who made all these gorgeous mistakes owns every one of them. Visual inspirations: - Herbert Bayer's "Universal" typeface overlaid on a neon-lit confectionery display - László Moholy-Nagy's light-space modulator reimagined in spun-sugar and pink resin - Vintage risograph offset-printing mishaps where magenta bled three millimeters past the cyan - Candy-coated geometry: gummy-bear translucency over matte black Bauhaus rectangles - Generative particle fields that resolve slowly into recognizable Bauhaus compositions before dissolving again The site is **not a portfolio, not a shop, not a blog**. It is a cabinet of beautifully ruined things. --- ## Layout Motifs and Structure The page is a **bento-box grid** — but a Bauhaus bento, not a contemporary Notion-dashboard bento. Cells are strict rectangles with no border-radius. Gutters are exactly 6px wide and candy-mint (#00FFB3) colored, so the grid itself is visible as a glowing lattice. No rounded corners. No cards with drop shadows. The grid is the architecture. **Grid system:** - Top-level 12-column, 8-row macro grid at 100vw × 100vh (the initial viewport frame) - Cells vary in span: 1×1, 2×1, 3×2, 4×2, 6×3 — classic Mondrian-esque asymmetric distribution - Each cell is a self-contained world with its own internal composition and depth - Some cells are static; others animate independently on scroll or cursor proximity - The entire grid scrolls vertically as a rigid unit — no sticky elements within cells **Cell typology (the seven cell types):** 1. **Artifact cell** — displays a single historical design error (misprint, color swatch), full-bleed, with a hairline caption in the gutter below 2. **Geometry cell** — an animated Bauhaus form (circle, square, triangle) in candy-bright fill, slowly rotating or oscillating; on hover, it blur-focuses in 3D 3. **Text cell** — pure typographic composition, zero imagery; the text IS the image 4. **Particle field cell** — a generative canvas where particles organize into and dissolve out of Bauhaus compositions 5. **Blur-portal cell** — background is razor-sharp vintage texture; foreground has a deep Gaussian blur that reveals sharp detail only on hover (blur-to-focus transition, 800ms ease) 6. **Void cell** — pure matte black (#0A0A0A), no content; structural breathing room 7. **Kinetic cell** — full-motion generative loop; always playing, never paused **Spatial logic:** - Zero margin at viewport edge — grid bleeds to all four sides - The mint-glow gutter (#00FFB3) is the only recurring motif across all cells - Scrolling adds new rows of cells below; the initial 8-row frame gives way to an ever-deepening cabinet - No navigation bar. No header. No footer. Entry is directly into the grid. --- ## Typography and Palette ### Type System (Google Fonts only) **Display / Headline — `Bebel Neue`** — No. Correct choice: **`Archivo Black`** - The muscular geometric display face. Set in candy-bright accent colors against dark cell backgrounds. - Use: Cell titles, artifact labels. Size: 64px–120px. Weight: 900. Letter-spacing: -0.02em. - Transforms: on hover, letter-spacing animates from -0.02em to 0.12em over 600ms — the letters breathe apart like Bauhaus modular bricks separating. **Body / Caption — `Space Grotesk`** (Google Fonts) - Geometric but humanist. Legible at 13px in hairline captions below artifact cells. - Use: captions, metadata, the cabinet's curatorial text. Size: 13px–16px. Weight: 300–400. - Set in off-white (#F5F0E8) on dark backgrounds only. Never dark-on-light anywhere. **Accent / Mono — `JetBrains Mono`** (Google Fonts) - Used for error codes, print registration numbers, swatch codes, generative system output. - Set in candy-yellow (#FFE033) at 11px. Appears sparingly — one line per cell maximum. **Display alternate — `Playfair Display`** (Google Fonts) - Deployed ONLY in the void cells for single-word manifestos (e.g., "MISTAKE", "WRONG", "YES"). - Set in muted parchment (#E8E0CF) at 180px, italic, fading in with zero opacity to 0.08 opacity — almost invisible, like a ghost imprint in the black. ### Color Palette | Role | Name | Hex | |---|---|---| | Background base | Void black | `#0A0A0A` | | Gutter glow | Candy mint | `#00FFB3` | | Primary accent | Bubblegum pink | `#FF4ECD` | | Secondary accent | Mango electric | `#FF8C00` | | Tertiary accent | Hyper yellow | `#FFE033` | | Quaternary accent | Sky candy | `#33CFFF` | | Warm neutral | Parchment | `#E8E0CF` | | Off-white | Cream signal | `#F5F0E8` | | Deep surface | Bauhaus dark | `#1A1A2A` | | Mid surface | Ink gray | `#2E2E3A` | **Palette logic:** The four candy accents (#FF4ECD, #FF8C00, #FFE033, #33CFFF) rotate across cell backgrounds. No two adjacent cells share an accent. The gutter mint (#00FFB3) never appears as a cell background — only as the structural glow between cells. --- ## Imagery and Motifs **No photography.** Photography appears in 86% of analyzed designs. simidiot.net uses zero photographs. **Generative art is the primary image language.** Every visual is either: 1. A mathematical construct (Bauhaus geometry: circle, square, triangle, rule) 2. A generative particle system 3. A degraded/offset print artifact (rasterized into pure vector shapes, no photos) ### Specific visual elements: **The Triadic Figures (hero layer):** SVG-based humanoid silhouettes adapted from Schlemmer's Triadic Ballet — abstracted to pure Bauhaus primitives: sphere-head, rectangular torso, cylindrical limbs. Rendered in candy accent fills. On page load, three figures assemble themselves from scattered primitive shapes over 1200ms, each piece traveling from outside the viewport. On idle (8 seconds of no interaction), they disassemble again in slow candy-melt dissolution. **Generative Particle Fields (particle cells):** A canvas-based system where 2,000–4,000 particles move under a combination of: - Perlin noise drift (slow, dreamy, 0.0008 time increment) - Nearest-neighbor attraction/repulsion at d < 60px - A hidden "attractor skeleton" that is a Bauhaus composition (circle/square/triangle) The particles orbit the skeleton loosely — from a distance the composition is recognizable, up close it's chaotic. Color: each particle inherits the cell's candy accent with opacity 0.4–0.85 based on velocity. **Blur-Focus Motif (blur-portal cells):** The background is a razor-sharp scan of a vintage risograph misprint — registration marks, cyan/magenta/yellow halftone dots visible, press sheet crop marks intact. A Gaussian blur at `blur(18px)` covers the entire cell. On hover, `blur` transitions to `blur(0px)` over 800ms with `ease-out`. The revealed sharpness is the reward. This is the primary interactive surprise of the site. **Vintage Motifs (structural):** - Hairline rules (0.5px, candy mint) separating every caption from its artifact - Registration cross-marks (+) in candy yellow at all four corners of the viewport - Print sheet "marks" — small L-shaped corner marks at grid intersections, sized 8px - A "plate number" in the bottom-right void cell: e.g., `PLATE 0014 · SERIES Ω` - Mis-registration ghost: a 2px offset candy-pink ghost of any displayed text, appearing at the top-right, with 40% opacity — simulating a misaligned second print pass --- ## Prompts for Implementation Build this as **a living cabinet of beautifully ruined things** — a bento-grid that scrolls forever downward into an archive of Bauhaus-inspired generative art and vintage print artifacts. The cabinet never ends; new rows load as the user descends. **Vow 1 — The grid is the art.** The 6px candy-mint gutter (#00FFB3) is always rendered as a glowing element with `box-shadow: 0 0 8px 1px #00FFB3`. The grid lines are not whitespace — they are neon joints in a matte-black structure. The background behind all cells is `#0A0A0A` exactly. **Vow 2 — The blur-focus interaction is the primary surprise.** Every "blur-portal" cell starts at `filter: blur(18px)`. On hover, transition to `filter: blur(0)` over exactly 800ms using `cubic-bezier(0.25, 0.46, 0.45, 0.94)`. The revealed content must be worth revealing — a beautiful print artifact, a rich halftone, a precision Bauhaus composition. Do not trivialize this moment. **Vow 3 — Generative art must be actually generative.** Use a canvas element in particle cells. 2,000 minimum particles. Apply Perlin/simplex noise for drift. Maintain a hidden Bauhaus attractor skeleton per cell. Particles should be colored from the cell's candy-accent palette at 0.4–0.85 opacity based on current velocity magnitude. Never bake particle output as a static image. **Vow 4 — The Triadic Figures assemble and dissolve.** Three SVG figures, each composed of ~12 named primitive shapes. On load: each primitive translates from a random offscreen point to its correct assembled position over 1200ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` (spring overshoot). After 8 seconds of no interaction: each primitive drifts slowly outward to a random direction over 3000ms. On any interaction: re-assemble immediately with a 600ms spring. **Vow 5 — Vintage print marks are structural, not decorative.** Registration crosses live at exactly `top: 12px; left: 12px`, `top: 12px; right: 12px`, etc. They are drawn in `#FFE033` at 0.6 opacity. The mis-registration ghost text offset is always exactly `transform: translate(2px, -1px)` for the ghost layer, never adjusted by content. **Scroll architecture:** - Initial load: 8 rows × 12 columns = 96 cells rendered - Each 4-row scroll increment: 48 new cells generated and appended below - Cell types assigned pseudo-randomly but with enforced distribution: max 20% of any type per batch - Total available artifact inventory: at least 40 artifact descriptions seeded in JS - No pagination, no "load more" button — cells appear as the user scrolls **Animation inventory:** - Cell entrance: `opacity: 0 → 1`, `transform: translateY(16px) → translateY(0)` over 400ms, triggered when cell enters viewport - Geometry cell pulse: SVG shapes scale from 1.0 to 1.04 and back over 3s on an infinite ease-in-out loop - Letter-spacing breathe: triggered on cell hover, 600ms, Archivo Black headings only - Particle cells: continuous, 60fps canvas loop, never paused - Blur-focus: 800ms ease-out on hover enter; 1200ms ease-in on hover leave (snap back slower) - Triadic figure assembly: 1200ms spring on load, 3000ms drift on idle, 600ms re-assemble on re-engage **AVOID all of the following:** - Navigation bars, hamburger menus, sticky headers - CTA buttons of any kind - Pricing blocks, stat grids, testimonial rails - Modal dialogs or overlays - Footer with links - Any use of `border-radius` on grid cells - Photography or photographic imagery of any kind - Glassmorphism effects (blur-card with transparency) — the blur here is applied to content, not card UI - Any sans-serif font not from the specified list --- ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **bauhaus**, layout = **bento-box**, typography = **eclectic-hybrid**, palette = **candy-bright**, patterns = **blur-focus**, imagery = **generative-art**, motifs = **vintage**, tone = **dreamy-ethereal** **Differentiators from every other design in the registry:** 1. **Candy-bright palette over void-black on a Bauhaus framework is unrepeated.** The frequency report shows `candy-bright` at near-zero and `bauhaus` at 5%. Pairing high-saturation neon candy colors (#FF4ECD, #FF8C00, #FFE033, #33CFFF) with strict Bauhaus geometry — no gradients, no glow-cards, just hard-edged rectangles in the Mondrian tradition — inverts the typical candy-bright aesthetic (which usually reads as soft, rounded, playful) into something austere and precise. No other design in the registry achieves this specific inversion. 2. **The 6px glowing gutter as a structural design element.** Every other bento-grid implementation in the wild uses invisible or near-invisible gutters (whitespace or hairlines). Here the gutter is a candy-mint neon rail (`box-shadow: 0 0 8px 1px #00FFB3`) — the grid structure itself becomes a primary visible motif. The lattice glows. The cells are specimens mounted on a luminous scaffold. 3. **Blur-focus as the primary interactive surprise rather than hover-expand or parallax.** The frequency report shows `blur-focus` at extremely low usage. Most designs use blur only for UI glassmorphism (deprecated here). The risograph-misprint backgrounds revealed by blur-removal on hover — sharp halftone dots, registration marks, press crop marks — constitute a fundamentally different interaction grammar: the reward is the un-blurring, not the expansion or transformation. 4. **The concept of a "cabinet of beautifully ruined things" is unprecedented in the registry.** The site's fiction — a museum of intentional design errors — gives every element conceptual justification. The mis-registration ghost (2px offset candy-pink echo of all text), the plate numbers in void cells, the L-shaped corner marks at grid intersections: these are not decorative flourishes but consistent artifacts of the fiction. No other analyzed design grounds its visual language in a coherent inhabitable fiction at this level of specificity. 5. **Triadic Ballet figures assembled from generative primitives on load.** Photography is at 86% saturation in the registry. This site uses zero photographs. The closest thing to a "hero image" is three SVG humanoid silhouettes that build themselves from scattered geometric primitives on page load — a kinetic Bauhaus tableau that dissolves on idle. This is novel in both concept and implementation among analyzed designs. **Patterns deliberately avoided (from frequency analysis):** - Photography (86% — excluded entirely) - Minimal/white-space-heavy layouts (43% — opposite direction taken) - Hand-drawn aesthetics (56% — not one pixel of simulation) - Editorial layout (52% — no reading column, no article structure) - Terminal/code aesthetic (31% — generative but not monospace-dominant) - Botanical motifs (29% — zero plant imagery) - Glassmorphism (20% — blur is applied to content, not card UI chrome)