# Design Language for sim-ai.net ## Aesthetics and Tone sim-ai.net channels a pop-art aesthetic — the bold, graphic visual language of mass-culture art applied to a Simulation AI network platform. The site pops — vivid triadic colors, bold outlines, and the ironic celebration of AI simulation treated as pop-culture phenomenon. Inspiration draws from the serial repetition of Warhol's silkscreens, the halftone energy of Lichtenstein's paintings, the graphic boldness of Keith Haring, and the text-image tension of Barbara Kruger. The tone is tech-tutorial — instructional, step-by-step language that guides users through simulation tools with patient clarity. ## Layout Motifs and Structure The layout uses an **organic-flow** architecture — content flowing naturally without strict grid constraints, creating the unpredictable quality of simulation outcomes that find their own emergent patterns. **Organic Flow Architecture:** - Content flows naturally: text at 660px, visuals at 900px - Generous irregular spacing (60-100px) between sections - Feature works: full viewport moments - Container: variable width (660-900px) centered - The organic flow creates the emergent quality of simulation results finding natural patterns **Section Sequence:** 1. **POW:** Hero with eclectic-hybrid title on triadic pop gradient, grain-overlay textured pop surfaces, tropical-fish vivid decorative accents 2. **ZAP:** Simulation tools in organic flow — bounce-enter interactive playful entry animations with grain-overlay textured backgrounds 3. **BANG:** Featured simulation in full-viewport with tropical-fish vivid decorative elements and grain-overlay immersive texture 4. **POP:** Quick tools in compact organic flow with tropical-fish simplified accents 5. **FIN:** Footer as comic ending — tech-tutorial farewell with tropical-fish settled accents and instructional closing ## Typography and Palette **Typography:** - **Headlines:** Mixed system — "Bebas Neue" (Google Fonts) at 2.4rem, weight 400 for impact headlines + "Nunito" (Google Fonts) at 1.2rem, weight 600 for subtitles. The eclectic hybrid creates the pop-art quality of mixing display and body type for graphic impact. - **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 simulation parameters and network data. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Pop White:** #f4f0e8 — warm pop white for backgrounds - **Pop Surface:** #e4dcd0 — warm surface for panels - **Triadic Red:** #e83838 — vivid pop red for primary accent - **Triadic Blue:** #2858d8 — bright pop blue for secondary accent - **Triadic Yellow:** #e8c828 — vivid pop yellow for tertiary accent - **Pop Dark:** #181014 — deep dark for text - **Pop Gray:** #807068 — warm gray for secondary text - **Border Triadic:** rgba(232,56,56,0.1) — red tint border ## Imagery and Motifs **Grain-Overlay Pop Surfaces:** Simulation panels feature visible grain texture — background with subtle noise at 0.015 opacity creating the screen-printed quality of pop-art reproduced through mechanical processes. **Bounce-Enter Playful Animation:** Simulation tools bounce into view — transform: scale(0) to scale(1.05) to scale(1.0) over 400ms with cubic-bezier(0.34, 1.56, 0.64, 1) timing. Staggered 80ms delays. The bounce creates the comic-panel quality of elements appearing with pop-art energy. **Tropical-Fish Vivid Accents:** Small colorful accent shapes (circles 6px, rounded rectangles 8x4px) in Triadic Red, Blue, and Yellow at 0.1-0.15 opacity as decorative elements. The vivid accents create the tropical-aquarium quality of colorful objects in constant gentle motion. **Triadic Pop Atmosphere:** Three-color harmony — radial-gradient(at 30% 40%, rgba(232,56,56,0.02), transparent 30%), radial-gradient(at 70% 30%, rgba(40,88,216,0.015), transparent 25%), radial-gradient(at 50% 70%, rgba(232,200,40,0.01), transparent 30%). **Bold Pop Borders:** Content panels with thick, decisive outlines — border: 3px solid rgba(232,56,56,0.12); border-radius: 0 for graphic impact. Ben-Day dot overlay at 0.01 opacity for halftone quality. ## Prompts for Implementation Build the page as a pop-art simulation network. Organic flow: .sim-section { margin: 0 auto; padding: var(--pad, 80px) 24px; } .sim-text { max-width: 660px; margin: 0 auto; } .sim-visual { max-width: 900px; margin: 0 auto; } Bounce: .pop-enter { opacity: 0; transform: scale(0); } .pop-enter.visible { opacity: 1; transform: scale(1.0); animation: bounce-in 400ms cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes bounce-in { 0% { transform: scale(0); } 70% { transform: scale(1.05); } 100% { transform: scale(1.0); } } Pop card: .pop-panel { background: #e4dcd0; border: 3px solid rgba(232,56,56,0.12); border-radius: 0; padding: 24px; } AVOID: Standard AI network interfaces, corporate simulation dashboards, and minimal tool listings. Let pop-art graphic energy and tech-tutorial clarity create a simulation AI network where computational tools pop with vivid graphic boldness. ## Uniqueness Notes 1. **Pop-art for simulation AI:** Bold graphic language makes AI tools feel like celebrated cultural artifacts rather than technical utilities. 2. **Organic-flow as emergent pattern:** Natural content flow creates the quality of simulation results finding their own patterns. 3. **Bounce-enter as comic energy:** Playful entry animations create the pop-art quality of elements appearing with graphic impact. 4. **Triadic palette as graphic harmony:** Three primary colors create the pop-art quality of maximum graphic energy in chromatic balance. 5. **Eclectic-hybrid type as graphic mix:** Display and body type combinations create the pop poster quality of maximum typographic impact. **Seed/Style:** aesthetic: pop-art, layout: organic-flow, typography: eclectic-hybrid, palette: triadic, patterns: bounce-enter, imagery: grain-overlay, motifs: tropical-fish, tone: tech-tutorial **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 pop-art aesthetic, organic-flow layout, triadic palette, grain-overlay imagery, and tech-tutorial tone.