# Design Language for simulai.net ## Aesthetics and Tone simulai.net channels a skeuomorphic aesthetic — the tactile, material-faithful visual language of physical objects applied to an AI for Simulation network platform. The site recreates — leather-bound dashboards, brushed-metal control panels, and the satisfying physical weight of simulation instruments rendered with loving material detail. Inspiration draws from the textured interfaces of early iOS, the instrument-panel precision of flight simulators, the material richness of Dieter Rams' Braun products, and the tactile satisfaction of analog scientific equipment. The tone is approachable-casual — relaxed, friendly language that makes simulation AI feel like a comfortable, hands-on workshop. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — content in layered sections with parallax depth creating the instrument-panel quality of physical simulation controls at different depths. **Parallax Sections Architecture:** - Full-width sections with parallax background movement - Foreground content: max-width: 860px centered - Background textures at 0.3x scroll speed - Mid-ground elements at 0.6x scroll speed - Container: full-width with parallax layers and 860px inner content - The parallax creates the dimensional quality of physical instruments viewed through layered glass panels **Section Sequence:** 1. **Workshop:** Hero with kinetic-animated title on muted-vintage skeuomorphic gradient, watercolor soft material washes, floral-botanical organic growth-pattern motifs 2. **Bench:** Simulation tools in parallax sections — spring interactive bounce-response with watercolor gentle material treatments 3. **Lathe:** Featured tool in full-width parallax with floral-botanical detailed organic patterns and watercolor immersive material depth 4. **Shelf:** Tool catalog in focused parallax with floral-botanical simplified motifs 5. **Close:** Footer as workshop closing — approachable-casual farewell with floral-botanical settled patterns and relaxed closing ## Typography and Palette **Typography:** - **Headlines:** "Syne" (Google Fonts) — kinetic-animated geometric sans at 2.2rem-3rem, weight 700. Subtle breathing animation (letter-spacing 0em to 0.005em over 2.5s infinite). Its dynamic forms create the instrument-readout quality of simulation parameters displayed on responsive equipment. - **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 instrument readings. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Vintage Cream:** #f0e8d8 — muted vintage cream for backgrounds - **Leather Surface:** #d8ccc0 — leather-tinted for panels - **Muted Teal:** #588888 — muted teal for primary accent - **Vintage Rose:** #b87878 — muted rose for secondary accent - **Aged Gold:** #b89858 — aged gold for tertiary accent - **Vintage Dark:** #201810 — warm dark for text - **Leather Shadow:** #887868 — leather shadow for secondary text - **Border Vintage:** rgba(88,136,136,0.1) — teal tint border ## Imagery and Motifs **Watercolor Material Washes:** Simulation sections feature watercolor-style material depth — radial-gradient(at 40% 40%, rgba(88,136,136,0.03), transparent 50%), radial-gradient(at 60% 60%, rgba(184,120,120,0.02), transparent 40%). The washes create the patina quality of well-used physical instruments. **Spring Bounce Response:** Interactive elements respond with spring physics — overshoot animation: scale(1.0) to scale(1.04) to scale(0.99) to scale(1.0) over 400ms with cubic-bezier(0.34, 1.56, 0.64, 1). The spring creates the tactile quality of physical buttons with satisfying mechanical feedback. **Floral-Botanical Growth Patterns:** Decorative organic curves (SVG paths, 1.5px stroke) in Muted Teal at 0.04 opacity creating gentle vine-like patterns at section transitions. Small leaf-inspired shapes (8px) at path terminals. The floral creates the workshop quality of simulation instruments in a space where nature is welcome. **Muted-Vintage Skeuomorphic Atmosphere:** Background uses desaturated warm tones — linear-gradient(180deg, #f0e8d8, #e4d8c8). Panel surfaces with embossed effect: box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(32,24,16,0.05). The muted vintage creates the aged-instrument quality of well-loved equipment. **Leather Panel Borders:** Content panels with leather-texture suggestion — border: 1px solid rgba(88,136,136,0.08); with subtle inner glow: box-shadow: inset 0 0 16px rgba(32,24,16,0.03). Border-radius: 8px for rounded instrument-panel edges. ## Prompts for Implementation Build the page as a skeuomorphic simulation workshop. Parallax: .workshop-section { position: relative; padding: 80px 0; overflow: hidden; } .parallax-texture { position: absolute; inset: 0; transform: translateY(var(--offset, 0)); } .workshop-content { position: relative; max-width: 860px; margin: 0 auto; padding: 0 24px; z-index: 1; } Spring: .spring-btn { transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1); } .spring-btn:active { transform: scale(0.96); } .spring-btn:hover { transform: scale(1.04); } Leather panel: .leather-card { background: #d8ccc0; border: 1px solid rgba(88,136,136,0.08); border-radius: 8px; padding: 28px; box-shadow: inset 0 1px 2px rgba(255,255,255,0.3), inset 0 -1px 2px rgba(32,24,16,0.05), inset 0 0 16px rgba(32,24,16,0.03); } AVOID: Standard simulation platforms, corporate AI dashboards, and minimal tool interfaces. Let skeuomorphic material warmth and approachable-casual friendliness create a simulation AI workshop where tools have the satisfying weight of physical instruments. ## Uniqueness Notes 1. **Skeuomorphic for simulation network:** Tactile material language makes AI tools feel like satisfying physical instruments in a well-equipped workshop. 2. **Parallax as instrument depth:** Layered scrolling creates the dimensional quality of physical control panels viewed through glass. 3. **Spring as mechanical feedback:** Bounce physics create the tactile quality of satisfying button presses on precision equipment. 4. **Floral-botanical as workshop nature:** Organic patterns soften the technical environment with living, growing decoration. 5. **Kinetic-animated as breathing instruments:** Subtle type animation creates the quality of responsive equipment that adjusts to its operator. **Seed/Style:** aesthetic: skeuomorphic, layout: parallax-sections, typography: kinetic-animated, palette: muted-vintage, patterns: spring, imagery: watercolor, motifs: floral-botanical, tone: approachable-casual **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 skeuomorphic aesthetic, parallax-sections layout, muted-vintage palette, watercolor imagery, and approachable-casual tone.