# Design Language for simulai.org ## Aesthetics and Tone simulai.org channels a mid-century aesthetic — the optimistic geometry, atomic-age confidence, and warm material palette of 1950s-60s modernism applied to an AI for Simulation organization platform. The site welcomes — with the frank charm of Eames lounge chairs, the confident simplicity of Saul Bass title sequences, and the domestic warmth of a well-appointed mid-century living room where simulation science feels like a friendly conversation over cocktails. Inspiration draws from the graphic design of Alvin Lustig, the furniture geometry of Arne Jacobsen, the color-field compositions of Mark Rothko, and the typographic clarity of Herb Lubalin's editorial layouts. The tone is warm-inviting — hospitable, encouraging language that makes AI simulation feel like joining a creative community rather than accessing a technical service. ## Layout Motifs and Structure The layout uses an **immersive-scroll** architecture — content revealed through continuous scrolling creating the unfolding quality of a mid-century exhibition walkthrough where each section reveals a new display. **Immersive Scroll Architecture:** - Full-viewport sections that scroll like gallery rooms - Content: max-width: 780px centered within viewport sections - Feature sections: 100vh with vertically centered content - Smooth scroll behavior with section snap for deliberate pacing - Container: full-width sections with centered inner content - The immersive scroll creates the exhibition quality of simulation concepts presented in sequence like rooms in a modernist museum **Section Sequence:** 1. **Foyer:** Hero with sans-grotesk title on warm duotone mid-century gradient, flowing-curves atomic-age decorative shapes, photography documentary-style simulation imagery 2. **Gallery:** Simulation tools in immersive scroll — glitch interactive atomic-flicker feedback with photography mid-century documentary style 3. **Salon:** Featured simulation in full-viewport with flowing-curves immersive organic geometry and photography atmospheric treatment 4. **Study:** Supporting tools in compact scroll sections with flowing-curves simplified motifs 5. **Farewell:** Footer as gallery exit — warm-inviting farewell with flowing-curves settled forms and hospitable closing ## Typography and Palette **Typography:** - **Headlines:** "Archivo" (Google Fonts) — sans-grotesk at 2.2rem-3rem, weight 700. Its sturdy geometric forms create the mid-century quality of confident modernist typography that bridges the gap between elegance and accessibility. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for simulation parameters and technical readings. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Cream Canvas:** #f5ede0 — warm cream for backgrounds - **Teak Surface:** #e8d8c4 — warm teak-tinted for panels - **Burnt Sienna:** #c85838 — warm sienna for primary accent - **Olive Moss:** #5a7848 — muted olive for secondary accent - **Mustard Gold:** #d4a030 — warm mustard for tertiary accent - **Espresso Dark:** #2c2018 — deep brown for text - **Warm Slate:** #8a7868 — warm gray for secondary text - **Border Teak:** rgba(200,88,56,0.08) — sienna tint border ## Imagery and Motifs **Photography Documentary Style:** Simulation imagery presented in warm, documentary-style photography treatments — CSS filter: sepia(0.15) saturate(0.9) with warm overlay via mix-blend-mode. The photography creates the editorial quality of mid-century science magazines documenting the future. **Glitch Atomic Flicker:** Interactive elements trigger brief atomic-age flicker — opacity oscillation (1.0 to 0.85 to 1.0) with subtle warm color shift (filter: hue-rotate(5deg)) for 250ms. The flicker creates the vintage-television quality of mid-century technology responding to interaction. **Flowing-Curves Atomic Geometry:** Decorative atomic-age curves — SVG boomerang shapes, kidney-bean forms, and starburst points (8-12px) in Burnt Sienna and Olive Moss at 0.04-0.08 opacity. The curves create the optimistic quality of mid-century atomic-age decorative language applied to simulation science. **Warm Duotone Mid-Century Atmosphere:** Background uses warm cream with two-tone color accents — radial-gradient(at 35% 40%, rgba(200,88,56,0.02), transparent 40%), radial-gradient(at 65% 60%, rgba(90,120,72,0.015), transparent 35%). The duotone creates the color-field quality of Rothko compositions applied to digital space. **Teak Panel Treatment:** Content panels with warm wood-surface suggestion — background: #e8d8c4; border: 1px solid rgba(200,88,56,0.06); border-radius: 6px; box-shadow: 0 2px 8px rgba(44,32,24,0.04). The teak creates the furniture quality of mid-century design's love for warm natural materials. ## Prompts for Implementation Build the page as a mid-century simulation exhibition. Immersive scroll: .gallery-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; } .gallery-content { max-width: 780px; padding: 60px 24px; } Atomic flicker: .atomic-flicker { animation: flicker 250ms ease-out; } @keyframes flicker { 50% { opacity: 0.85; filter: hue-rotate(5deg); } } Teak panel: .teak-card { background: #e8d8c4; border: 1px solid rgba(200,88,56,0.06); border-radius: 6px; padding: 28px; box-shadow: 0 2px 8px rgba(44,32,24,0.04); } AVOID: Standard AI platforms, corporate simulation dashboards, and minimal tool interfaces. Let mid-century optimistic geometry and warm-inviting hospitality create a simulation organization where AI tools feel like beautifully designed objects in a modernist exhibition, each interaction as satisfying as settling into an Eames chair. ## Uniqueness Notes 1. **Mid-century for simulation org:** Atomic-age optimism makes AI simulation feel like the confident, warm future that mid-century modernism promised. 2. **Immersive-scroll as exhibition walkthrough:** Continuous scrolling creates the gallery quality of moving through a curated modernist exhibition. 3. **Flowing-curves as atomic geometry:** Boomerang and starburst forms create the decorative quality of 1950s atomic-age design language. 4. **Duotone as color-field depth:** Two-tone warm accents create the Rothko quality of color relationships that generate emotional resonance. 5. **Teak panels as furniture quality:** Warm surface treatments make digital panels feel like mid-century furniture with tactile material presence. **Seed/Style:** aesthetic: mid-century, layout: immersive-scroll, typography: sans-grotesk, palette: duotone, patterns: glitch, imagery: photography, motifs: flowing-curves, tone: warm-inviting **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 mid-century aesthetic, immersive-scroll layout, duotone palette, photography imagery, and warm-inviting tone.