# Design Language for muhan.studio ## Aesthetics and Tone muhan.studio (Muhan — Korean for infinite, limitless) channels an editorial aesthetic — the refined pacing and narrative structure of premium publications applied to a creative studio portfolio exploring infinite creative possibilities. The site reads like a beautifully art-directed magazine, each project presented as a feature spread with cinematic scale and considered typography. Inspiration draws from Kinfolk magazine's minimal editorial design, Bloomberg Businessweek's bold visual storytelling, Cereal magazine's atmospheric photography pacing, and Apple's product storytelling. The tone is dreamy-ethereal — gentle wonder-filled language that makes creative work feel like encounters with the infinite. ## Layout Motifs and Structure The layout uses a **hero-dominant** architecture — oversized hero moments that command attention, creating cinematic impact for each project showcase. **Hero-Dominant Architecture:** - Hero sections: 80-100vh with full-bleed imagery or gradient backgrounds - Content interludes: max-width: 720px centered between heroes - Scroll-triggered transitions between hero and content zones - Feature projects get dedicated full-viewport hero treatments - Supporting content flows in standard editorial rhythm below each hero **Section Sequence:** 1. **Infinite:** Hero at 100vh with display-bold title on cool-grays gradient, isometric-icons floating tool illustrations, particle-effects cosmic dust animation 2. **Visions:** Featured projects as sequential hero-dominant showcases with scroll-triggered parallax reveals and isometric-icon project type indicators 3. **Process:** Creative methodology in editorial interludes between heroes with particle-effects ambient animation and dreamy atmospheric backgrounds 4. **Cosmos:** Team profiles with cool-gray portrait treatments and isometric-icon skill badges 5. **Beyond:** Footer as ethereal fade — dreamy closing dissolving into particle-effects star field ## Typography and Palette **Typography:** - **Headlines:** "Syne" (Google Fonts) — bold display sans at 3rem-5rem, weight 700. Its geometric boldness creates the commanding presence hero-dominant layouts demand. - **Body Text:** "Inter" (Google Fonts) — clean sans at 0.95rem, weight 400, line height 1.75. - **Accent:** "Syne" at 1.5rem, weight 400 for pull-quotes and featured text. - **Labels:** "Inter" at 0.7rem, weight 500, uppercase, letter-spacing 0.08em. **Color Palette:** - **Cool Deep:** #101418 — deep cool blue-black for dark backgrounds - **Cool Mid:** #1c2028 — medium cool gray for secondary backgrounds - **Silver Bright:** #c0c8d8 — bright silver for primary accents - **Ice Blue:** #80a0c8 — cool ice blue for secondary accents - **Warm Spark:** #d0a070 — warm amber spark for tertiary accents - **Text Cool:** #d0d4dc — cool off-white for body text - **Text Dim:** #606878 — muted cool gray for secondary text - **Border Cool:** #282c38 — cool dark border ## Imagery and Motifs **Isometric-Icons Creative Tools:** Studio tools and capabilities illustrated as isometric icon drawings — 3D-perspective SVG renderings (40-60px) of cameras, pens, screens, and design tools in Silver Bright and Ice Blue at 0.7 opacity. Each icon precisely crafted with consistent isometric angle (30-degree), floating in hero sections with subtle vertical bobbing animation (translateY +/- 4px over 4s). **Scroll-Triggered Cinematic Reveals:** Hero sections reveal with cinematic scroll-triggered animations — images scale from 1.1 to 1.0, opacity from 0 to 1, with a subtle clip-path reveal (inset shrinking from 5% to 0%) over scroll distance. Content sections fade in with translateY(30px) to translateY(0). All triggered via IntersectionObserver at 0.2 threshold. **Particle-Effects Cosmic Ambient:** Dark sections feature floating particle animations — small circles (2-4px) in Silver Bright and Ice Blue at 0.15-0.3 opacity drifting slowly upward (translateY over 8-12s, varied per particle). Creates the cosmic atmosphere of infinite creative space. Canvas-based or CSS-animated SVG particles. **Cool-Grays Atmospheric Depth:** Backgrounds use layered cool-gray gradients — linear-gradient(180deg, #101418, #1c2028) with subtle radial highlights in Ice Blue (rgba(128,160,200,0.03)) and Warm Spark (rgba(208,160,112,0.02)). The cool palette with warm accents creates sophisticated depth. **Hero-Scale Typography Treatment:** Project titles in hero sections use extreme scale — 4-5rem on desktop, filling the viewport width. Letter-spacing: -0.02em for tight, confident setting. Subtle text-shadow in Ice Blue at 0.1 opacity for dimensional quality. The scale communicates infinite ambition. ## Prompts for Implementation Build the page as an editorial hero-dominant studio portfolio. Heroes: height: 80vh to 100vh, display: flex, align-items: center. Content: max-width: 720px, margin: 0 auto, padding: 60px 24px. Scroll reveal: .hero-image { transform: scale(1.1); opacity: 0; clip-path: inset(5%); transition: all 800ms ease; } .hero-image.visible { transform: scale(1); opacity: 1; clip-path: inset(0); } Particles: Canvas or SVG with small circles. @keyframes float { 0% { transform: translateY(0); opacity: 0.15; } 50% { opacity: 0.3; } 100% { transform: translateY(-100vh); opacity: 0; } } .particle { animation: float var(--duration, 10s) linear infinite; } Isometric float: .iso-icon { animation: bob 4s ease-in-out infinite; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } Hero typography: .hero-title { font-size: clamp(3rem, 8vw, 5rem); letter-spacing: -0.02em; text-shadow: 0 2px 20px rgba(128,160,200,0.1); } AVOID: Standard portfolio grids, thumbnail galleries, and corporate studio layouts. Let the hero-dominant cinematics and dreamy-ethereal atmosphere create a studio portfolio that feels like exploring infinite creative space. ## Uniqueness Notes 1. **Editorial hero-dominant for creative studio:** Cinematic full-viewport presentations elevate each project to feature-film scale. 2. **Cool-grays as infinite depth:** Temperature-neutral palette creates the vast, boundless quality of creative possibility. 3. **Particle-effects as cosmic ambient:** Floating particles transform the portfolio into a journey through creative cosmos. 4. **Isometric-icons as dimensional tools:** 3D-perspective tool illustrations bridge the digital and physical worlds of creative practice. 5. **Dreamy-ethereal tone for studio work:** Wonder-filled language transforms portfolio viewing into an encounter with the infinite. **Seed/Style:** aesthetic: editorial, layout: hero-dominant, typography: display-bold, palette: cool-grays, patterns: scroll-triggered, imagery: isometric-icons, motifs: particle-effects, 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 editorial aesthetic, hero-dominant layout, cool-grays palette, isometric-icons imagery, and dreamy-ethereal tone.