# Design Language for sim-ai.com ## Aesthetics and Tone sim-ai.com channels a maximalist aesthetic — the abundant, richly-layered visual language of more-is-more applied to a Simulation AI platform. The site overwhelms — densely packed data, overlapping information layers, and the computational abundance of AI systems processing massive simulation datasets simultaneously. Inspiration draws from the information density of Bloomberg Terminal interfaces, the visual complexity of Ryoji Ikeda's data installations, the layered dashboards of flight simulation cockpits, and the information-rich compositions of David Carson's experimental typography. The tone is scholarly-intellectual — erudite, deeply knowledgeable language that treats simulation AI with the academic rigor of peer-reviewed computational research. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture — content arranged along a horizontal axis that creates the timeline quality of simulation states progressing through computational time. **Horizontal Scroll Architecture:** - Full-height sections arranged horizontally (scroll-snap-type: x mandatory) - Each section: 100vw width, 100vh height - Content within sections: max-width: 640px centered vertically - Horizontal progress bar showing simulation advancement - Container: overflow-x: scroll with snap points - The horizontal creates the timeline quality of simulation states unfolding through computational progression **Section Sequence:** 1. **Initialize:** Hero with tech-mono title on aurora-gradient maximalist gradient, photography simulation-environment documentation, futuristic computational-future markers 2. **Compute:** Simulation features in horizontal scroll — counter-animate interactive running-computation displays with photography environment documentation 3. **Peak:** Featured simulation in full-viewport horizontal with futuristic advanced markers and photography immersive environment imagery 4. **Converge:** Results in compact horizontal panels with futuristic simplified markers 5. **Halt:** Footer as simulation end — scholarly-intellectual farewell with futuristic resolved indicators and academic closing ## Typography and Palette **Typography:** - **Headlines:** "Space Mono" (Google Fonts) — tech-mono at 2rem-2.8rem, weight 700. Its monospaced precision creates the terminal quality of simulation parameters displayed on computational equipment. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Data:** "Space Mono" (Google Fonts) — monospace at 0.8rem for simulation metrics, parameters, and computational data. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Void Dark:** #080810 — deep computational void for backgrounds - **Aurora Surface:** #101020 — aurora-tinted for panels - **Aurora Cyan:** #38d8d8 — bright aurora cyan for primary accent - **Aurora Violet:** #8848d8 — vivid aurora violet for secondary accent - **Aurora Green:** #38d878 — bright aurora green for tertiary accent - **Compute Light:** #d0d8e8 — cool computational light for text - **Shadow Void:** #202038 — void shadow for secondary text - **Border Aurora:** rgba(56,216,216,0.08) — cyan tint border ## Imagery and Motifs **Photography Simulation Environments:** Simulation contexts documented with high-contrast photography — CSS filter: contrast(1.3) brightness(0.85) with subtle cyan tint overlay (mix-blend-mode: color with Aurora Cyan at 0.02 opacity). The photography creates the research-documentation quality of simulation environments captured for computational reference. **Counter-Animate Running Computation:** Simulation metrics animate between values — numbers interpolating from start to target over 1200ms using CSS counter or JS requestAnimationFrame with ease-out timing. Multiple counters running simultaneously. The animation creates the live-computation quality of simulation data being calculated in real-time. **Futuristic Computational Markers:** Small geometric indicators — thin triangles (8px), circles with center dots (6px), and chevron pairs (10px) in Aurora Cyan and Aurora Violet at 0.1-0.15 opacity. The markers create the simulation-interface quality of computational states indicated through precise geometric notation. **Aurora-Gradient Maximalist Atmosphere:** Background uses multi-point aurora gradient — radial-gradient(at 20% 30%, rgba(56,216,216,0.02), transparent 30%), radial-gradient(at 80% 40%, rgba(136,72,216,0.015), transparent 25%), radial-gradient(at 50% 80%, rgba(56,216,120,0.01), transparent 30%). The aurora creates the data-rich quality of simulation environments illuminated by computational energy. **Dense Data Overlay:** Thin horizontal data lines at varying positions — 1px lines in Aurora Cyan at 0.02 opacity with small numeric labels. Multiple overlapping data layers creating maximalist information density. ## Prompts for Implementation Build the page as a maximalist simulation AI platform. Horizontal scroll: .sim-scroll { display: flex; overflow-x: scroll; scroll-snap-type: x mandatory; height: 100vh; } .sim-panel { min-width: 100vw; height: 100vh; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; } .sim-content { max-width: 640px; padding: 40px; } Counter animate: .sim-counter { font-family: 'Space Mono', monospace; } /* JS: animate from 0 to data-target value using requestAnimationFrame, 1200ms ease-out */ Sim panel: .compute-card { background: #101020; border: 1px solid rgba(56,216,216,0.08); border-radius: 4px; padding: 24px; } Progress: .sim-progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, #38d8d8, #8848d8, #38d878); z-index: 100; } AVOID: Standard AI dashboards, corporate simulation tools, and minimal computation interfaces. Let maximalist information density and scholarly-intellectual rigor create a simulation AI platform where computational abundance is celebrated, each simulation a data-rich horizontal journey through computational time. ## Uniqueness Notes 1. **Maximalist for simulation AI:** Information density makes computational simulation feel appropriately abundant and richly layered rather than minimally reduced. 2. **Horizontal-scroll as simulation timeline:** Left-to-right progression creates the temporal quality of simulation states advancing through computational time. 3. **Counter-animate as live computation:** Running numbers create the visceral quality of simulation data being calculated in real-time. 4. **Aurora-gradient as computational energy:** Multi-point color gradients create the data-rich quality of environments illuminated by computational processes. 5. **Tech-mono as terminal output:** Monospaced precision creates the authentic quality of simulation data displayed on computational equipment. **Seed/Style:** aesthetic: maximalist, layout: horizontal-scroll, typography: tech-mono, palette: aurora-gradient, patterns: counter-animate, imagery: photography, motifs: futuristic, tone: scholarly-intellectual **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 maximalist aesthetic, horizontal-scroll layout, aurora-gradient palette, photography imagery, and scholarly-intellectual tone.