# Design Language for simulai.tech ## Aesthetics and Tone simulai.tech channels a playful aesthetic — the bright, bouncy, toy-like visual energy of creative technology applied to an AI for Simulation tech platform. The site invites play — with the rounded friendliness of children's building blocks, the cheerful geometry of playground equipment, and the infectious enthusiasm of inventors who never lost their sense of wonder. Inspiration draws from the colorful systematic playfulness of LEGO packaging, the geometric joy of Alexander Calder mobiles, the tactile delight of Fisher-Price design language, and the whimsical precision of Wes Anderson's visual worlds. The tone is nostalgic-retro — warmly reminiscent language that makes simulation technology feel like rediscovering a beloved childhood toy box. ## Layout Motifs and Structure The layout uses a **ma-negative-space** architecture — content organized with generous breathing room creating the thoughtful spacing of Japanese negative space where empty areas carry as much meaning as filled ones. **Ma Negative Space Architecture:** - Generous whitespace: minimum 120px between major sections - Content floats in space: max-width: 640px centered - Asymmetric margins creating dynamic balance - Single elements given entire viewport sections for emphasis - Container: full-width with deliberate emptiness framing 640px content - The ma creates the playful quality of toys arranged with care on a clean floor, each object given room to breathe **Section Sequence:** 1. **Unbox:** Hero with futura-geometric title on forest-green playful gradient, watercolor soft toy-like washes, grid-lines construction-paper structure 2. **Build:** Simulation tools in spaced sections — typewriter-effect interactive letter-by-letter reveal with watercolor gentle treatments 3. **Play:** Featured tool in generous negative space with grid-lines expanded construction patterns and watercolor immersive toy atmosphere 4. **Stack:** Supporting tools in compact spaced sections with grid-lines simplified structure 5. **Pack:** Footer as toy-box closing — nostalgic-retro farewell with grid-lines settled patterns and warm closing ## Typography and Palette **Typography:** - **Headlines:** "Jost" (Google Fonts) — futura-geometric at 2.2rem-3rem, weight 700. Its clean circular geometry creates the toy-block quality of letters that look like they could be picked up and rearranged by hand. - **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 playful technical readouts. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Forest Cream:** #f0efe8 — soft cream with green undertone for backgrounds - **Moss Surface:** #d8e0d0 — gentle moss for panels - **Forest Pine:** #2d6a4f — deep forest green for primary accent - **Fern Bright:** #52b788 — bright fern for secondary accent - **Honey Warm:** #dda15e — warm honey for tertiary accent - **Forest Dark:** #1b2e20 — deep forest for text - **Sage Gray:** #708070 — muted sage for secondary text - **Border Fern:** rgba(45,106,79,0.08) — forest tint border ## Imagery and Motifs **Watercolor Toy Washes:** Simulation sections feature soft watercolor-style backgrounds — radial-gradient(at 40% 35%, rgba(45,106,79,0.025), transparent 45%), radial-gradient(at 60% 65%, rgba(221,161,94,0.02), transparent 40%). The washes create the finger-paint quality of playful technology wearing its creativity openly. **Typewriter Letter Reveal:** Text content appears with typewriter-style letter-by-letter animation — each character fading in sequentially with 40ms delay, opacity 0 to 1 with subtle translateY(-2px) to translateY(0). The typewriter creates the storybook quality of simulation narratives being told one letter at a time. **Grid-Lines Construction Paper:** Decorative grid elements suggesting construction-paper cutouts — thin dashed lines (1px, dash: 4 2) in Forest Pine at 0.04 opacity forming loose grid patterns. Small square dots (3px) at grid intersections. The grid creates the craft-table quality of simulation tools laid out on construction paper. **Forest-Green Playful Atmosphere:** Background uses forest-cream base with green playful accents — subtle leaf-shaped SVG forms (20px) in Forest Pine at 0.015 opacity scattered sparsely. The forest creates the outdoor-play quality of technology that feels like building in a sunlit clearing. **Toy-Block Panels:** Content panels with rounded, tactile appearance — background: #d8e0d0; border: 2px solid rgba(45,106,79,0.1); border-radius: 16px; padding: 32px; box-shadow: 0 4px 0 rgba(27,46,32,0.06). The bottom shadow creates the block quality of toy pieces that sit with satisfying physical weight. ## Prompts for Implementation Build the page as a playful simulation toy workshop. Ma space: .play-section { padding: 120px 24px; } .play-content { max-width: 640px; margin: 0 auto; } Typewriter: .typewriter span { opacity: 0; animation: letter-appear 200ms ease forwards; animation-delay: calc(var(--char-index) * 40ms); } @keyframes letter-appear { to { opacity: 1; transform: translateY(0); } } Toy panel: .toy-card { background: #d8e0d0; border: 2px solid rgba(45,106,79,0.1); border-radius: 16px; padding: 32px; box-shadow: 0 4px 0 rgba(27,46,32,0.06); } AVOID: Standard tech platforms, corporate simulation dashboards, and minimal developer interfaces. Let playful toy-like warmth and nostalgic-retro charm create a simulation tech platform where AI tools feel like beloved toys in a workshop where invention never stops being fun. ## Uniqueness Notes 1. **Playful for simulation tech:** Toy-like energy makes simulation AI feel like creative play rather than intimidating technology. 2. **Ma-negative-space as breathing room:** Generous whitespace creates the contemplative quality of each tool given room to be appreciated individually. 3. **Typewriter as storybook reveal:** Letter-by-letter animation creates the narrative quality of simulation stories being told with theatrical pacing. 4. **Forest-green as outdoor play:** Natural green palette creates the quality of technology that feels connected to nature and growth. 5. **Toy-block panels as physical weight:** Bottom-shadow panels create the satisfying quality of objects with tactile, buildable presence. **Seed/Style:** aesthetic: playful, layout: ma-negative-space, typography: futura-geometric, palette: forest-green, patterns: typewriter-effect, imagery: watercolor, motifs: grid-lines, tone: nostalgic-retro **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 playful aesthetic, ma-negative-space layout, forest-green palette, watercolor imagery, and nostalgic-retro tone.