# Design Language for muhan.dev ## Aesthetics and Tone muhan.dev is a maximalist dreamscape rendered through the lens of a luxury perfume commercial shot entirely through frosted glass -- every surface refracts, every element multiplies, nothing is singular. The aesthetic draws from the overwhelming visual density of a Harajuku storefront at twilight, where neon signage, holographic stickers, and delicate cherry blossoms coexist in a state of beautiful excess. This is maximalism not as chaos but as orchestrated abundance: every layer is intentional, every overlap is composed, every color is chosen to harmonize within a pastel symphony that refuses the tyranny of whitespace. The tone is elegant-sophisticated -- think of a gallery opening where the champagne flutes catch light from an installation made of a thousand suspended glass spheres. There is refinement here, but it is the refinement of someone who understands that sophistication can be generous rather than austere. The domain name "muhan" (Korean for "infinite") becomes the conceptual anchor: infinite layers, infinite depth, infinite detail that rewards prolonged attention. Where minimalism asks you to appreciate absence, muhan.dev asks you to lose yourself in presence. The visual language takes cues from the intersection of haute couture runway photography and the data-dense overlays of military heads-up displays -- beauty and precision coexisting. Imagine the cockpit HUD of a fighter jet redesigned by a fashion house that only uses lavender, rose quartz, and mint. Information is everywhere, but it is beautiful information, arranged with the compositional rigor of a still life painting. ## Layout Motifs and Structure The layout follows a hud-overlay architecture -- a primary content layer exists beneath a persistent, semi-transparent heads-up display framework that provides spatial orientation, navigational context, and decorative density simultaneously. This is not a traditional navigation bar or sidebar; it is a full-viewport overlay grid of thin lines, corner brackets, measurement marks, and floating labels that frame and annotate the underlying content, the way a viewfinder frames a photograph. **Structural Principles:** - **The Viewfinder Frame:** The entire viewport is bordered by a 40px inset zone containing a continuous thin line (1px, #c8b6d4 at 40% opacity) that traces a rounded rectangle. At each corner, L-shaped bracket marks (20px arms, 2px stroke) provide the targeting-reticle aesthetic of HUD displays. These corner brackets carry subtle CSS animations -- a slow breathing scale (transform: scale(1) to scale(1.03), 4s ease-in-out infinite) -- that give the frame a living quality without distracting from content. - **The Measurement Rail:** Along the left edge of the viewport, a vertical rail displays thin horizontal tick marks every 100vh/10, with small floating labels in Jost at 9px showing percentage values ("10%", "20%", etc.) in #b8a9c8 at 50% opacity. This rail scrolls with the page but the tick marks remain fixed relative to the viewport, creating a parallax ruler effect. It is decorative information architecture -- it measures nothing real, but it establishes the precision aesthetic of the HUD. - **The Floating Grid:** Behind the primary content layer, a CSS grid of thin lines (0.5px, #d4c5e0 at 15% opacity) divides the viewport into a 16x9 grid, evoking television safe areas and compositional guides. This grid is fixed-position and does not scroll. Content blocks are positioned to align with intersections of these grid lines, creating an implicit order that the viewer feels rather than consciously notices. - **Content Panels:** Primary content occupies floating panels that appear to hover above the grid -- each panel has a subtle box-shadow (0 8px 32px rgba(180, 160, 200, 0.15)) and a backdrop-filter: blur(12px) treatment that makes the grid lines behind them go soft. Panels are not rectangles; they use clip-path polygons with one or two corners clipped at 45 degrees, creating the faceted, technical look of cockpit instrument panels. - **The Status Bar:** At the bottom of the viewport, a persistent 32px-tall bar displays decorative metadata: the current time (updated live via JS), the scroll position as a percentage, the domain name in small caps, and a simulated signal-strength indicator made of five small vertical bars. All text is in Jost Light at 10px, color #b8a9c8. The bar has a top border of 1px solid #d4c5e0 at 30% opacity. - **Depth Layering:** The z-index strategy creates five distinct depth planes: (1) the background bokeh layer, (2) the grid, (3) the content panels, (4) the HUD overlay frame, and (5) the floating decorative elements. This explicit depth separation gives the layout a volumetric quality, as though the viewer is looking through layers of glass at different focal distances. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with elegant, almost Art Deco proportions. Its high x-height and clean geometric forms (the perfectly circular 'o', the triangular 'A') embody the futura-geometric typographic philosophy while maintaining warmth that pairs with the pastel palette. Weight: 600 (SemiBold) for section titles at `clamp(2.5rem, 6vw + 0.5rem, 5.5rem)`. Letter-spacing: 0.12em (uppercase), creating the wide-set precision of instrument panel labels. Color: #5b4a6e on light backgrounds, #e8dff0 on dark surfaces. - **Secondary / Body Text:** "Jost" (Google Fonts) -- a true geometric sans inspired by the 1920s Futura lineage, but with optical corrections that make it comfortable for extended reading. Weight: 300 (Light) for body text at `clamp(0.95rem, 1.2vw + 0.3rem, 1.15rem)`, line-height 1.75. The Light weight creates an airy, elegant quality that prevents the maximalist layout from feeling heavy. Color: #6b5d7a for body text, #9b8cad for secondary labels. - **Tertiary / HUD Labels:** "Share Tech Mono" (Google Fonts) -- a monospace typeface with a distinctly technical character, used exclusively for the HUD overlay elements: the measurement rail, status bar, corner annotations, and any numerical data. Weight: 400 at 9-11px. This creates the instrument-panel contrast against the geometric elegance of the display fonts. Color: #b8a9c8 at varying opacity levels (30-60%). - **Accent / Pull Quotes:** "Cormorant Garamond" (Google Fonts) at Weight 300 (Light) Italic for occasional pull quotes and decorative text moments. Size: `clamp(1.5rem, 3vw, 2.8rem)`. This classical serif provides the "couture" counterpoint to the geometric sans-serif system, like finding a handwritten note inside a machine. Color: #c49bbd. **Palette:** The palette is pastel -- not the saccharine pastels of a baby shower, but the sophisticated pastels of a Japanese department store's cosmetics floor: powdered, diffused, luminous. | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary | Wisteria Haze | #c8b6d4 | HUD overlay lines, primary UI elements, borders | | Secondary | Rose Quartz Mist | #dbb8c9 | Accent highlights, hover states, secondary panels | | Tertiary | Sage Frost | #b8ccb6 | Success states, botanical accent elements, balance color | | Background Dark | Midnight Lilac | #1e1a2e | Primary dark sections, deep panels, status bar | | Background Light | Pearl Smoke | #f0eaf4 | Light section backgrounds, panel surfaces | | Text Primary | Aubergine Deep | #5b4a6e | Headlines, primary body text on light backgrounds | | Text Secondary | Mauve Dust | #9b8cad | Labels, captions, tertiary text | | Accent Warm | Blush Copper | #d4a0a0 | Interactive elements, floating motif tints | | Accent Cool | Ice Lavender | #a8b4d4 | Data elements, HUD numerical displays | | Highlight | Champagne Glow | #e8dcc4 | Hover glows, selection highlights, spark effects | The palette deliberately avoids pure warm tones (warm is at 100% frequency, to be avoided). Every color has a cool or neutral undertone, even the pinks and coppers lean toward mauve and dusty rose rather than orange-warm. ## Imagery and Motifs **Bokeh Background as Atmospheric Foundation:** The primary imagery mode is bokeh-background -- out-of-focus light circles that create depth and atmosphere without representational content. The bokeh is not photographic but generated via CSS and SVG: circles of varying size (40px to 200px diameter) with radial gradients that fade from a pastel tint at center (e.g., rgba(200, 182, 212, 0.25)) to transparent at edges. These circles are positioned on the deepest z-layer (z-index: 0) and drift slowly using CSS animations -- each circle has a unique translateX/translateY keyframe animation with durations between 20s and 45s, creating the gentle drift of light through a lens. Three distinct bokeh zones exist: 1. **Upper atmosphere** (top 30% of each section): Larger circles (120-200px), more diffuse, primarily wisteria and ice lavender tints. These drift upward and to the right. 2. **Mid-field** (middle 40%): Medium circles (60-120px), slightly more saturated, rose quartz and sage frost tints. These drift laterally. 3. **Near-field** (bottom 30%): Smaller circles (40-80px), highest saturation, blush copper and champagne glow tints. These drift downward and create the illusion of light falling. **Floating Elements as Spatial Particles:** The floating-elements motif populates the HUD overlay layer with small decorative objects that drift independently of scroll position. These are not random -- each element type has a defined behavior: - **Geometric Motes:** Small (8-16px) outlined shapes -- triangles, diamonds, hexagons, circles -- rendered as thin-stroke SVGs (1px stroke, #c8b6d4 at 40% opacity). They rotate slowly (one full rotation per 30-60s) and translate on sine-wave paths. Approximately 15-20 visible at any time. - **Plus Signs:** Tiny (6px) plus marks (+) in Share Tech Mono, scattered at random positions, fading in and out on 8-12s opacity cycles. They evoke crosshairs, calibration marks, and the systematic density of technical drawings. - **Dot Constellations:** Groups of 3-5 small circles (3px) connected by 0.5px lines, forming small constellation patterns that drift together as a unit. These recall star charts and network diagrams, reinforcing the HUD aesthetic. - **Gradient Ribbons:** Thin (2-4px wide) curved lines using SVG paths with gradient strokes that shift from wisteria to rose quartz. These ribbons are 100-300px long, gently curved, and rotate at different rates, creating the effect of aurora wisps or silk threads suspended in air. **Imagery Absence as Statement:** There are no photographs, no illustrations, no icons in the traditional sense. Every visual element is abstract, geometric, or atmospheric. This is intentional: muhan.dev's imagery language is built entirely from light, geometry, and color, creating a visual world that exists nowhere in physical reality. The bokeh suggests a camera; the HUD suggests a cockpit; the floating elements suggest particles under a microscope. But nothing is literally any of these things. The ambiguity is the imagery. ## Prompts for Implementation **Full-Screen Narrative Entry Sequence:** The site opens to a full-viewport Midnight Lilac (#1e1a2e) field. For 600ms, nothing is visible. Then the bokeh circles begin fading in from opacity 0 to their target opacities (0.15-0.30) over 2 seconds, largest circles first, smallest last, creating a rack-focus effect as though a lens is slowly finding depth. At t=1.2s, the HUD frame begins drawing: the four corner brackets appear simultaneously, their strokes animating from 0 to full length via stroke-dashoffset over 800ms with an ease-out curve. The thin border line connecting them follows, tracing the perimeter in a single clockwise motion over 1.5s. At t=2.5s, the measurement rail ticks appear in a rapid stagger (50ms between each, bottom to top), and the status bar slides up from below the viewport (translateY: 32px to 0, 400ms ease-out). The floating geometric motes begin their drift animations. At t=3s, the domain name "muhan.dev" appears center-viewport in Josefin Sans SemiBold at 6vw, letter-spacing 0.2em, uppercase, color #e8dff0. It does not fade in -- it is revealed by a horizontal clip-path wipe (clip-path: inset(0 100% 0 0) to inset(0 0% 0 0)) over 1s, as though a scanning line is exposing it. Below the domain name, a subtitle appears 200ms later: "infinite by design" in Cormorant Garamond Light Italic at 1.5vw, #c49bbd, with a simple opacity 0-to-1 fade over 600ms. At t=4.5s, a thin horizontal line extends from the right edge of "muhan.dev" to the right viewport boundary, drawn via stroke-dashoffset animation, connecting the title to the HUD frame and integrating it into the overlay system. **Section Transitions via Tilt-3D:** As the user scrolls past the opening section, content panels enter the viewport using tilt-3d animations: each panel begins at transform: perspective(800px) rotateX(8deg) rotateY(-4deg) translateZ(-40px) with opacity 0.3, then transitions to transform: perspective(800px) rotateX(0) rotateY(0) translateZ(0) with opacity 1 over 600ms as it crosses the viewport's 70% threshold. The perspective origin is set to the center of each panel, so panels tilt "toward" the viewer as they arrive, creating a sense of objects floating up from a surface below. Different panel positions use different tilt directions: - Panels entering from left: rotateY(-6deg) initial - Panels entering from right: rotateY(6deg) initial - Full-width panels: rotateX(5deg) initial, no Y rotation - Small accent panels: rotateX(4deg) rotateY(-3deg) rotateZ(1deg) initial, adding a subtle Z twist The tilt-3d effect is driven by IntersectionObserver with threshold arrays ([0.1, 0.3, 0.5, 0.7, 0.9]) so the tilt reduction is progressive rather than binary, creating a smooth unfurling sensation. **Scroll-Linked HUD Behavior:** The HUD overlay reacts to scroll position: - The measurement rail's current position indicator (a small triangle marker, 6px, #dbb8c9) moves along the rail to indicate scroll progress. - The status bar's scroll percentage updates in real-time via requestAnimationFrame. - Every 25% scroll interval, the corner brackets perform a brief pulse animation (scale to 1.05 and back, 300ms) to acknowledge the milestone. - The floating geometric motes increase their drift speed by 15% when the user is actively scrolling (detected via scroll event debouncing) and slow back to base speed when scrolling stops, creating a wind-like response. **Content Panel Interactions:** When the cursor enters a content panel, the panel's box-shadow intensifies (transition: box-shadow 300ms ease), the backdrop-filter blur increases from 12px to 18px, and a thin glow line (2px, gradient from #c8b6d4 to #dbb8c9) traces the panel's clipped edges over 400ms via an SVG path animation. This creates the HUD "target lock" feel when focusing on a specific information panel. Panels that contain text respond to cursor position with a very subtle tilt (max 2 degrees, CSS transform driven by mousemove event calculations using panel-relative coordinates) creating a parallax card effect that reinforces the floating-panel depth illusion. **Performance-Conscious Animation Strategy:** All animations use CSS transforms and opacity exclusively -- no layout-triggering properties. Bokeh circle positions are set via CSS custom properties and animated with CSS keyframes rather than JavaScript. The floating elements use will-change: transform, opacity. The tilt-3d scroll effects use IntersectionObserver rather than scroll event listeners. RequestAnimationFrame is used only for the status bar scroll counter. The total animated element count stays under 60 to maintain 60fps. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, newsletter signup forms, testimonial carousels. The site is a pure atmospheric experience -- a place to inhabit, not a funnel to convert. ## Uniqueness Notes **Differentiators from other designs:** 1. **HUD-Overlay as Primary Layout System (3% frequency):** While most designs in the portfolio use centered (99%) or asymmetric (50%) layouts, muhan.dev builds its entire spatial organization around a heads-up display overlay. The HUD is not decorative chrome bolted onto a standard layout -- it IS the layout. The measurement rail, corner brackets, status bar, and grid lines define where content can exist and how the viewer relates to space. No other design treats navigational and decorative UI as the same system. 2. **Pastel Palette Without Warmth (6% frequency, avoiding 100% warm):** The pastel palette is built entirely from cool and neutral undertones -- wisteria, mauve, sage, ice lavender. This contradicts the expected "pastel = baby pink + baby blue + cream" formula and instead creates a sophisticated, almost clinical coolness. The palette feels like dusk light filtered through amethyst crystal, not like a candy shop. The deliberate avoidance of warm-dominant schemes (at 100% saturation in the portfolio) makes this a genuine outlier. 3. **Bokeh-as-Only-Imagery (2% frequency):** While most designs rely on photography (71%) or minimal imagery (95%), muhan.dev uses NO representational images whatsoever. The entire visual atmosphere is constructed from abstract bokeh circles, geometric particles, and gradient ribbons. This is imagery as atmosphere rather than imagery as content, closer to a James Turrell light installation than a web page. The bokeh-background tag appears at only 2% frequency and is never the sole imagery mode in other designs. 4. **Futura-Geometric Typography with Serif Counterpoint (3% frequency):** The Josefin Sans + Jost pairing commits fully to the geometric sans tradition descending from Futura, but introduces Cormorant Garamond as a deliberate disruption -- the organic, high-contrast serif appearing only in pull quotes and accent moments, like a classical musician sitting in with an electronic ensemble. The futura-geometric typography category sits at only 3% frequency. 5. **Floating-Elements as Persistent Environmental System (1% frequency):** The geometric motes, plus signs, dot constellations, and gradient ribbons are not entrance animations that fire once -- they are persistent environmental phenomena that exist as long as the page is open, creating a living atmosphere. At 1% frequency, floating-elements is nearly unique in the portfolio. Combined with the tilt-3d interaction pattern (5% frequency), the result is a site that feels three-dimensional and inhabited. **Documented Seed/Style:** - aesthetic: maximalist - layout: hud-overlay - typography: futura-geometric - palette: pastel - patterns: tilt-3d - imagery: bokeh-background - motifs: floating-elements - tone: elegant-sophisticated **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with maximalist (9%) - centered layout (99%) -- replaced with hud-overlay (3%) - mono typography (99%) -- replaced with futura-geometric (3%) - warm palette (100%) -- replaced with pastel cool tones (6%) - minimal imagery (95%) -- replaced with bokeh-background (2%) - friendly tone (98%) -- replaced with elegant-sophisticated (6%) - vintage motifs (83%) -- replaced with floating-elements (1%) - scroll-triggered patterns (97%) -- primary interaction is tilt-3d (5%), scroll used only for HUD status updates