# Design Language for muhan.ai ## Aesthetics and Tone muhan.ai (Muhan — Korean for infinite, limitless) channels a playful aesthetic — joyful, energetic design that treats AI research as an adventure of infinite possibility, applied to an artificial intelligence portfolio and research showcase. The site celebrates the limitless nature of its namesake — every section bursting with creative energy, every interaction a moment of discovery, every color a reminder that AI's potential is unbounded. Inspiration draws from Nickelodeon's energetic branding, the playful interfaces of Duolingo, the colorful creativity of IDEO's studio culture, and the wonder-filled presentations of teamLab digital exhibitions. The tone is dreamy-ethereal — gentle, wonder-filled language that makes AI feel like a magical frontier of infinite dreams. ## Layout Motifs and Structure The layout uses a **z-pattern** architecture — content arranged to follow the natural z-shaped reading pattern (left to right, diagonal down, left to right), optimized for scanning and discovery. **Z-Pattern Architecture:** - Content blocks alternate left and right alignment within max-width: 960px - First row: left-aligned feature, right-aligned supporting content - Diagonal visual connector (gradient or SVG line) bridges to next row - Second row: right-aligned feature, left-aligned support - Pattern repeats, creating visual zigzag through the page - Mobile: stacks to single column **Section Sequence:** 1. **Infinite:** Hero with retro-display title on sunset-warm gradient, geometric-abstract AI constellation patterns, star-celestial twinkling accents with tilt-3d perspective on feature card 2. **Dreams:** AI projects in z-pattern layout — alternating left-right showcases with tilt-3d interactive cards and star-celestial decorative elements 3. **Wonder:** Research themes explored in playful z-pattern blocks with geometric-abstract neural network illustrations and dreamy gradient backgrounds 4. **Stars:** Team and collaborator profiles in z-pattern with star-celestial badges and tilt-3d hover effects 5. **Beyond:** Footer as infinite horizon — dreamy closing that trails into a gradient of stars, suggesting limitless continuation ## Typography and Palette **Typography:** - **Headlines:** "Abril Fatface" (Google Fonts) — bold retro display at 2.5rem-4rem, weight 400. Its dramatic thick-thin contrast creates the showmanship and energy that playful design demands. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.75. Soft letterforms maintain playful energy. - **Code/Data:** "Fira Code" (Google Fonts) — monospace at 0.85rem for AI model specifications. - **Labels:** "Nunito" at 0.7rem, weight 700, uppercase, letter-spacing 0.06em. **Color Palette:** - **Sunset Coral:** #e06848 — warm coral for primary accents - **Sunset Gold:** #d0a030 — warm gold for secondary accents - **Sunset Rose:** #c05878 — warm rose for tertiary accents - **Sky Lavender:** #7868b0 — soft lavender for quaternary accents - **Cream Warm:** #fef8ee — warm cream for light backgrounds - **Dusk Deep:** #181028 — deep dusk for dark sections - **Text Soft:** #2a2030 — soft dark for body text - **Border Play:** #e8d8c8 — warm playful border ## Imagery and Motifs **Geometric-Abstract AI Constellations:** AI concepts illustrated as constellation-like patterns — small circles (nodes, 6-12px) in Sunset Coral and Sky Lavender connected by thin lines (1px) forming neural-network-inspired geometric arrangements. On dark backgrounds at 0.6 opacity, on light at 0.3 opacity. Each section features a unique constellation pattern, creating the visual language of infinite connections. **Tilt-3D Interactive Project Cards:** Project showcases respond to mouse position with 3D tilt — JavaScript calculating cursor position relative to card center, applying transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) with values of -4 to 4 degrees. Creates a tangible, toy-like interaction quality that embodies the playful aesthetic. **Star-Celestial Twinkling Accents:** Small star shapes (SVG, 8-16px) in Sunset Gold at 0.2-0.4 opacity scattered across dark sections. Stars animate with a subtle twinkle — @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 0.5; } } with random animation-duration (2-4s) and animation-delay per star. Creates a dreamy night sky of infinite possibility. **Sunset-Warm Gradient Backgrounds:** Section backgrounds use layered sunset gradients — linear-gradient(135deg, rgba(224,104,72,0.05), rgba(208,160,48,0.04), rgba(120,104,176,0.03)) on light sections. Dark sections: linear-gradient(135deg, #181028, #201830) with radial highlights in Sunset Coral and Sky Lavender at 0.03 opacity. The warm sunset palette evokes the magical boundary between day and night. **Z-Pattern Diagonal Connectors:** Between z-pattern rows, thin diagonal SVG lines (1.5px, Sunset Gold at 0.15 opacity) connect the end of one row to the start of the next, making the z-reading pattern visible. Small circle nodes (6px) at line endpoints. The connectors create a visual path of discovery through the content. ## Prompts for Implementation Build the page as a playful AI research portfolio. Container: max-width: 960px, margin: 0 auto. Z-pattern: alternating flex-direction: row and row-reverse for content blocks. Tilt-3D: JavaScript mousemove on .project-card. const rect = card.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; card.style.transform = `perspective(1000px) rotateX(${y * -8}deg) rotateY(${x * 8}deg)`. Mouseleave: reset with transition: 400ms. Star twinkle: .star { opacity: 0.2; animation: twinkle var(--duration, 3s) ease-in-out infinite; animation-delay: var(--delay, 0s); } @keyframes twinkle { 0%, 100% { opacity: 0.2; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.2); } } Constellation: SVG with circles r="4" fill="currentColor" and lines stroke-width="1" stroke="currentColor" opacity="0.3". Different constellation per section. Z-connectors: SVG lines between sections: AVOID: Corporate AI platforms, sterile machine learning dashboards, and serious research portfolio layouts. Let the playful energy and dreamy-ethereal wonder create an AI showcase that celebrates the infinite magic of artificial intelligence. ## Uniqueness Notes 1. **Playful aesthetic for AI research:** Joyful, energetic design reframes artificial intelligence as an adventure of infinite possibility rather than cold computation. 2. **Z-pattern as discovery path:** Zigzag reading pattern creates a journey of exploration through AI projects and research themes. 3. **Star-celestial as infinite potential:** Twinkling star accents create the dreamy atmosphere of limitless possibility that "muhan" (infinite) embodies. 4. **Tilt-3D as toy-like engagement:** Physical card interaction makes AI research feel tangible and playfully interactive. 5. **Dreamy-ethereal tone for AI portfolio:** Wonder-filled language transforms technical AI work into magical, inspiring storytelling. **Seed/Style:** aesthetic: playful, layout: z-pattern, typography: retro-display, palette: sunset-warm, patterns: tilt-3d, imagery: geometric-abstract, motifs: star-celestial, tone: dreamy-ethereal **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses playful aesthetic, z-pattern layout, sunset-warm palette, geometric-abstract imagery, and dreamy-ethereal tone.