# Design Language for simulai.xyz ## Aesthetics and Tone simulai.xyz channels a cyberpunk aesthetic — the neon-soaked, rain-slicked, information-dense visual language of near-future dystopia applied to an AI for Simulation experimental platform. The site pulses — with the flickering urgency of holographic advertisements, the dense layering of data streams cascading through dark terminals, and the gritty beauty of technology that has been repurposed, hacked, and made dangerous. Inspiration draws from the visual density of Blade Runner's cityscape, the terminal aesthetics of Ghost in the Shell interfaces, the neon typography of Akira's Neo-Tokyo, and the information overload of William Gibson's cyberspace descriptions. The tone is mysterious-moody — dark, atmospheric language that makes simulation AI feel like accessing forbidden knowledge through back-channel data feeds. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — content organized in a dense grid of simulation modules creating the surveillance-wall quality of multiple data feeds monitored simultaneously. **Portfolio Grid Architecture:** - CSS Grid: 3-column layout with variable row heights - Grid cells: mixed sizes (1x1, 2x1, 1x2) for visual density - Feature modules: spanning two columns for emphasis - Tight gaps (8px) creating dense information array - Container: max-width: 1100px centered - The grid creates the cyberpunk quality of hacked surveillance monitors displaying stolen simulation data **Section Sequence:** 1. **Jack In:** Hero with retro-display title on monochrome cyberpunk gradient, duotone-photo high-contrast neon imagery, futuristic holographic interface markers 2. **DataStream:** Simulation tools in dense grid — counter-animate interactive numerical cascade with duotone-photo processed surveillance imagery 3. **Mainframe:** Featured simulation in double-width grid cell with futuristic deep holographic patterns and duotone-photo immersive treatment 4. **Cache:** Supporting tools in standard grid cells with futuristic simplified markers 5. **Jack Out:** Footer as disconnection — mysterious-moody farewell with futuristic fading markers and atmospheric closing ## Typography and Palette **Typography:** - **Headlines:** "Orbitron" (Google Fonts) — retro-display geometric at 2rem-2.8rem, weight 700. Its mechanical letterforms create the cyberpunk quality of text rendered on flickering holographic displays in rain-soaked alleyways. - **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, data streams, and system outputs. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Void Black:** #08080c — near-black for backgrounds - **Carbon Surface:** #141418 — dark carbon for panels - **Neon Cyan:** #00d4ff — electric cyan for primary accent - **Terminal Green:** #00ff88 — bright terminal green for secondary accent - **Warning Amber:** #ff8800 — urgent amber for tertiary accent - **Ghost White:** #c8c8d0 — cool white for text - **Smoke Gray:** #505060 — smoke for secondary text - **Border Neon:** rgba(0,212,255,0.08) — cyan tint border ## Imagery and Motifs **Duotone-Photo Surveillance:** Simulation imagery in high-contrast monochrome — CSS filter: grayscale(1) contrast(1.4) brightness(0.8) with cyan overlay via mix-blend-mode: color at 0.15 opacity. The duotone creates the security-camera quality of stolen surveillance feeds processed through cyberpunk filters. **Counter-Animate Numerical Cascade:** Data displays animate with rapidly cycling numbers — digits scrolling through 0-9 before settling on final value over 800ms with ease-out timing. The counter creates the hacking quality of data being decrypted in real-time before the observer's eyes. **Futuristic Holographic Markers:** Small interface elements suggesting holographic UI — thin bracket pairs ([ ], 6px) in Neon Cyan at 0.12 opacity, small diamond shapes (4px) at data points, and horizontal scan-lines (1px) at 0.03 opacity. The markers create the HUD quality of cyberpunk interfaces overlaying reality with data. **Monochrome Cyberpunk Atmosphere:** Background uses deep black with neon accents — radial-gradient(at 30% 40%, rgba(0,212,255,0.015), transparent 35%), radial-gradient(at 70% 60%, rgba(0,255,136,0.01), transparent 30%). Subtle scan-line overlay at 0.02 opacity. The monochrome creates the noir quality of cyberpunk's rain-soaked digital darkness. **Carbon Grid Panels:** Content panels with dark, dense appearance — background: #141418; border: 1px solid rgba(0,212,255,0.06); border-radius: 2px; padding: 20px. Sharp corners for technical precision. Subtle top-border glow: border-top: 1px solid rgba(0,212,255,0.15). ## Prompts for Implementation Build the page as a cyberpunk simulation data feed. Portfolio grid: .cyber-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 1100px; margin: 0 auto; padding: 40px 16px; } .cyber-wide { grid-column: span 2; } .cyber-tall { grid-row: span 2; } Counter animate: .data-counter { font-variant-numeric: tabular-nums; } .counting { animation: count-scroll 800ms ease-out; } Carbon panel: .carbon-card { background: #141418; border: 1px solid rgba(0,212,255,0.06); border-top: 1px solid rgba(0,212,255,0.15); border-radius: 2px; padding: 20px; } AVOID: Standard simulation platforms, corporate AI dashboards, and clean developer interfaces. Let cyberpunk neon-noir density and mysterious-moody atmosphere create a simulation experimental platform where AI feels like forbidden technology accessed through back-channel data feeds in rain-soaked digital alleyways. ## Uniqueness Notes 1. **Cyberpunk for simulation experiments:** Neon-noir dystopia makes AI simulation feel like accessing forbidden technology through hacked terminals. 2. **Portfolio-grid as surveillance wall:** Dense grid creates the quality of multiple data feeds monitored simultaneously on a hacker's display array. 3. **Counter-animate as live decryption:** Scrolling numbers create the quality of data being cracked in real-time. 4. **Monochrome as digital noir:** Near-black with neon accents creates the rain-soaked quality of cyberpunk's dark digital landscapes. 5. **Retro-display type as terminal text:** Mechanical letterforms create the quality of text on aging holographic displays. **Seed/Style:** aesthetic: cyberpunk, layout: portfolio-grid, typography: retro-display, palette: monochrome, patterns: counter-animate, imagery: duotone-photo, motifs: futuristic, tone: mysterious-moody **Avoided Overused Patterns:** corporate aesthetic (90%), parallax patterns (94%), asymmetric layout (92%), mono typography (94%), warm palette (95%), friendly tone (90%), minimal imagery (93%). This design uses cyberpunk aesthetic, portfolio-grid layout, monochrome palette, duotone-photo imagery, and mysterious-moody tone.