# Design Language for simidiot.net ## Aesthetics and Tone simidiot.net channels a goblincore aesthetic — the earthy, chaotic, found-object visual language of goblincore applied to an Idiot AI Simulation network platform. The site hoards — collecting glitchy AI outputs like treasured curiosities, cataloging delightful computational errors as precious specimens, and celebrating the charming imperfection of artificial stupidity with genuine affection. Inspiration draws from the cabinet-of-curiosities tradition, the forest-floor aesthetic of goblincore fashion, the assemblage art of Joseph Cornell, and the found-object beauty of outsider art. The tone is grounded-earthy — practical, unpretentious language that treats idiot simulation as an honest, hands-on craft. ## Layout Motifs and Structure The layout uses a **layered-depth** architecture — content stacked in overlapping layers creating the archaeological quality of idiot AI outputs buried beneath each other like geological strata. **Layered Depth Architecture:** - Content panels overlapping with z-index stacking - Panels offset: 20-40px overlap with visible edges - Feature content: largest panel at highest z-index - Background layers visible behind foreground content - Container: max-width: 960px with internal layering - The layered depth creates the cabinet quality of specimens stacked in a collector's display **Section Sequence:** 1. **Dig:** Hero with geometric-sans title on duotone goblincore gradient, botanical-illustration specimen drawings, tech computational artifact markers 2. **Hoard:** Idiot AI specimens in layered display — morph interactive specimen-examination transitions with botanical-illustration detailed drawings 3. **Prize:** Featured specimen in top-layer with tech deep analysis markers and botanical-illustration immersive illustration 4. **Shelf:** Collection archive in stacked layers with tech simplified markers 5. **Nest:** Footer as den — grounded-earthy farewell with tech settled markers and practical closing ## Typography and Palette **Typography:** - **Headlines:** "DM Sans" (Google Fonts) — geometric sans at 2.2rem-3rem, weight 700. Its clean geometric forms create the catalog-label quality of specimens identified and classified with systematic precision. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for AI error outputs and specimen data. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Earth Dark:** #0c0a08 — deep earth for backgrounds - **Mushroom Surface:** #f0e4d0 — warm mushroom for content - **Moss Accent:** #588850 — forest moss for primary accent - **Berry Red:** #a83848 — wild berry for secondary accent - **Amber Found:** #c8a048 — amber for tertiary accent - **Cream Light:** #f0e8d8 — warm cream for text on dark - **Earth Text:** #201810 — deep earth for text on light - **Border Moss:** rgba(88,136,80,0.12) — moss tint border ## Imagery and Motifs **Botanical-Illustration Specimen Drawings:** Idiot AI outputs illustrated as natural-history specimens — detailed line drawings (1.5px strokes) in Moss Accent showing abstracted error patterns as biological forms. Cross-hatching for depth. The botanical creates the naturalist quality of errors cataloged as fascinating species. **Morph Specimen Examination:** Layered panels transform on interaction — smooth z-index and position transitions (top panel slides partially to reveal specimen beneath) over 400ms ease-in-out. The morph creates the cabinet quality of examining specimens by moving aside overlapping objects. **Tech Computational Artifacts:** Small technical markers — small squares (5px) and circles (4px) in Moss Accent and Amber Found at 0.1 opacity as catalog reference indicators. Thin connection lines between related specimens. **Duotone Goblincore Atmosphere:** Two-tone design — Earth Dark backgrounds with Mushroom Surface content. radial-gradient(at 40% 40%, rgba(88,136,80,0.02), transparent 35%). **Specimen Frame Borders:** Layered panels with earthy borders and visible stacking — border: 2px solid rgba(88,136,80,0.1); box-shadow: 4px 4px 0 rgba(88,136,80,0.03), 8px 8px 0 rgba(88,136,80,0.02). The stacking shadows create the pile quality of specimens accumulated through enthusiastic collecting. ## Prompts for Implementation Build the page as a goblincore idiot AI collection. Layered: .specimen-stack { position: relative; max-width: 960px; margin: 0 auto; padding: 80px 24px; } .specimen-layer { position: relative; margin-top: -30px; z-index: var(--layer, 1); } Morph: .specimen-card { transition: all 400ms ease-in-out; } .specimen-card:hover { transform: translateX(20px) rotate(1deg); z-index: 10; } Specimen panel: .goblin-card { background: #f0e4d0; border: 2px solid rgba(88,136,80,0.1); border-radius: 4px; padding: 24px; box-shadow: 4px 4px 0 rgba(88,136,80,0.03), 8px 8px 0 rgba(88,136,80,0.02); } AVOID: Standard AI error platforms, corporate debugging dashboards, and minimal error logs. Let goblincore collecting enthusiasm and grounded-earthy practicality create an idiot AI network where computational errors are treasured specimens worthy of fascinated study. ## Uniqueness Notes 1. **Goblincore for idiot AI:** Collecting-obsession aesthetic makes computational errors feel like treasured natural specimens worth careful study. 2. **Layered-depth as specimen stacking:** Overlapping panels create the cabinet quality of curiosities piled by an enthusiastic collector. 3. **Botanical-illustration as error taxonomy:** Naturalist drawings create the quality of errors classified as fascinating biological species. 4. **Morph as specimen examination:** Layer transitions create the quality of moving aside objects to examine what lies beneath. 5. **Stacking shadows as accumulated collection:** Visible depth layers create the pile quality of specimens gathered through genuine enthusiasm. **Seed/Style:** aesthetic: goblincore, layout: layered-depth, typography: geometric-sans, palette: duotone, patterns: morph, imagery: botanical-illustration, motifs: tech, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (89%), parallax patterns (93%), asymmetric layout (91%), mono typography (94%), warm palette (95%), friendly tone (89%), minimal imagery (92%). This design uses goblincore aesthetic, layered-depth layout, duotone palette, botanical-illustration imagery, and grounded-earthy tone.