# Design Language for sim-ai.org ## Aesthetics and Tone sim-ai.org channels a cyberpunk aesthetic — the neon-drenched, tech-saturated visual language of near-future dystopia applied to a Simulation AI organizational platform. The site pulses — neon data streams, rain-slicked surfaces reflecting computational light, and the gritty beauty of AI systems operating at the boundary between digital and physical reality. Inspiration draws from the visual world of Blade Runner 2049, the neon-noir interfaces of Deus Ex, the glitch-art experiments of Rosa Menkman, and the rain-soaked photography of Masashi Wakui's Tokyo nights. The tone is futuristic-cutting-edge — forward-looking, technologically ambitious language that positions simulation AI at the frontier of computational possibility. ## Layout Motifs and Structure The layout uses an **asymmetric** architecture — content in deliberately unbalanced compositions creating the cyberpunk quality of chaotic urban data environments where information competes for attention. **Asymmetric Architecture:** - Content blocks at varied widths (40%-60% splits) - Feature elements offset 60-80px from center - Overlapping panels at 90% opacity for layered depth - Container: max-width: 1040px with irregular internal positioning - The asymmetry creates the urban quality of cyberpunk information landscapes **Section Sequence:** 1. **Jack In:** Hero with rounded-sans title on gradient cyberpunk neon, watercolor digital-rain washes, particle-effects data-stream fragments 2. **Grid:** Simulation capabilities in asymmetric panels — fade-reveal interactive data-materialization with watercolor atmospheric effects 3. **Nexus:** Featured simulation in full-width with particle-effects immersive data streams and watercolor deep atmosphere 4. **Shadow:** Background processes in compact asymmetric with particle-effects reduced particles 5. **Disconnect:** Footer as system exit — futuristic-cutting-edge farewell with particle-effects settled data and ambitious closing ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2.2rem-3rem, weight 700. Its soft forms create deliberate contrast with cyberpunk harshness, humanizing the technological landscape. - **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 system data, simulation parameters, and AI metrics. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Neon Dark:** #080c14 — deep neon dark for backgrounds - **Rain Surface:** #101820 — rain-slicked for panels - **Neon Magenta:** #d838a8 — vivid neon magenta for primary accent - **Neon Cyan:** #38c8d8 — bright neon cyan for secondary accent - **Gradient Amber:** #d8a838 — warm amber for tertiary accent - **Neon Light:** #d0d4e0 — cool neon for text - **Shadow Rain:** #283040 — rain shadow for secondary text - **Border Neon:** rgba(216,56,168,0.08) — magenta tint border ## Imagery and Motifs **Watercolor Digital-Rain Washes:** Simulation sections feature cyberpunk atmospheric effects — radial-gradient(at 30% 40%, rgba(216,56,168,0.025), transparent 40%), radial-gradient(at 70% 60%, rgba(56,200,216,0.02), transparent 35%). The washes create the rain-reflection quality of neon light diffused through wet cyberpunk surfaces. **Fade-Reveal Data Materialization:** Content fades into existence from digital void — opacity 0 to 1 with filter: blur(4px) to filter: blur(0) over 500ms ease-out on scroll intersection. The fade creates the holographic quality of data materializing from computational fog. **Particle-Effects Data Streams:** Small particles (2-4px) drifting downward in varying speeds — animation: rain-fall 4-8s linear infinite. Particles in Neon Cyan and Neon Magenta at 0.04-0.06 opacity. The particles create the digital-rain quality of data streaming through cyberpunk environments. **Gradient Cyberpunk Atmosphere:** Background uses multi-toned gradient — linear-gradient(180deg, rgba(216,56,168,0.01), transparent, rgba(56,200,216,0.008)). The gradient creates the neon-sky quality of cyberpunk environments lit from below by urban computational infrastructure. **Glitch-Edge Panels:** Content panels with subtle glitch effect on hover — transform: translateX(1px) with brief color-channel offset (box-shadow: -1px 0 rgba(216,56,168,0.1), 1px 0 rgba(56,200,216,0.1)) for 100ms. The glitch creates the signal-interference quality of data displayed on compromised cyberpunk terminals. ## Prompts for Implementation Build the page as a cyberpunk simulation AI platform. Asymmetric: .cyber-section { max-width: 1040px; margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: 45% 55%; gap: 32px; } .cyber-offset { margin-left: 60px; } Fade reveal: .data-materialize { opacity: 0; filter: blur(4px); transition: all 500ms ease-out; } .data-materialize.visible { opacity: 1; filter: blur(0); } Rain particles: .data-rain { width: 2px; height: var(--len, 12px); background: linear-gradient(180deg, transparent, var(--rain-color, rgba(56,200,216,0.06))); animation: rain-fall var(--speed, 6s) linear infinite; } @keyframes rain-fall { from { transform: translateY(-20px); } to { transform: translateY(100vh); } } Cyber panel: .cyber-card { background: #101820; border: 1px solid rgba(216,56,168,0.08); border-radius: 4px; padding: 24px; } AVOID: Standard AI organizational pages, corporate simulation platforms, and minimal technology showcases. Let cyberpunk neon-noir and futuristic-cutting-edge ambition create a simulation AI platform where computational power pulses through rain-slicked digital environments. ## Uniqueness Notes 1. **Cyberpunk for simulation AI:** Neon-drenched visual language makes AI simulation feel like frontier technology operating at the edge of digital reality. 2. **Asymmetric as urban chaos:** Unbalanced layouts create the cyberpunk quality of information competing for attention in dense digital cityscapes. 3. **Fade-reveal as holographic materialization:** Blur-to-clear transitions create the quality of data assembling from computational fog. 4. **Digital rain particles as data streams:** Falling particles create the iconic cyberpunk quality of visible data flowing through the environment. 5. **Rounded-sans as human contrast:** Soft typography humanizes the harsh cyberpunk landscape, creating deliberate tension between warmth and technology. **Seed/Style:** aesthetic: cyberpunk, layout: asymmetric, typography: rounded-sans, palette: gradient, patterns: fade-reveal, imagery: watercolor, motifs: particle-effects, tone: futuristic-cutting-edge **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 cyberpunk aesthetic, asymmetric layout, gradient palette, watercolor imagery, and futuristic-cutting-edge tone.