# Design Language for muhan.studio ## Aesthetics and Tone muhan.studio is a creative studio whose name carries the Korean word 무한 — *infinite*, *boundless*, *without limit*. The site embodies that etymology as a design proposition: it is a single vertical canvas that appears to have no floor and no ceiling, a glass corridor receding into luminous depth. The aesthetic is **architectural glassmorphism** — not the surface-level frosted UI cards that dominate the web, but glass treated as a structural, load-bearing material in the tradition of Mies van der Rohe's Farnsworth House or James Carpenter's structural glass facades. Each panel is a precision-cut float-glass plane catching and refracting a gradient sky. The tone is **elegant-sophisticated**: cool, controlled, never showy. There are no bursts of animation, no confetti, no hero-section fireworks. Movement is the slow rotation of light across glass — a gradual bloom, a fade, a shiver of refraction along a border. The site feels like a gallery vestibule at 7 AM before the crowds arrive: the geometry is perfect, the light is still, everything waits. Mood references: early morning light through a floor-to-ceiling glass facade; a Hiroshi Sugimoto seascape in monochrome; the interior of the Louvre Pyramid by I. M. Pei; a Japanese architect's hand-drafted isometric. The site is not a portfolio grid, not a service menu, not a pricing page. It is a single **spatial narrative** — a walk through a glass structure where each section is a room defined by the changing color temperature of gradient light filtering through frosted panels. ## Layout Motifs and Structure The layout is **single-column immersive scroll** — one continuous vertical axis with no horizontal branching, no sidebar, no split-screen diversion. The viewport is the aperture; the content moves through it like a slow crane shot in a Tarkovsky film. **Grid geometry.** The underlying grid is a 12-column system collapsed into a single, centered content channel 680px wide on desktop (max-width: 720px), with generous lateral negative space that hosts the decorative motifs — specifically, the **grid-line lattice** drawn in `rgba(255,255,255,0.06)` that tiles the full viewport background. This lattice is not a UI element; it is the architecture, the invisible scaffolding of the infinite space that the glass panels float within. **Vertical rhythm.** Section separations are not achieved with horizontal rules or padding alone — they are achieved with **depth shifts**: each new section's glass panel appears to exist on a different z-plane, closer or farther from the viewer, rendered via `backdrop-filter: blur()` intensity differences and layered `box-shadow` values. Shallow panels (z-near) have blur-radius 8px; deep panels (z-far) have blur-radius 20px. This creates a three-dimensional corridor without any actual 3D transform. **Section anatomy (top to bottom):** 1. **Vestibule** — full-viewport opening, wordmark centered, grid lattice visible, gradient sky background, a single isometric icon of a glass prism refracting light 2. **The Studio** — one glass panel (z-near), studio philosophy in two short paragraphs, animated border running clockwise 3. **Craft** — three stacked glass panels (z-mid), each containing one discipline: spatial design, visual identity, digital experience — each headlined by an isometric icon 4. **Selected Work** — two tall glass panels (z-far, blurred deep), project names in large grotesque, year in small caption, no thumbnails — pure typographic 5. **Contact** — a final slender glass sliver, single-line email address, border-animate on hover **No sticky headers.** No navigation bar. No back-to-top button. Scroll is the only verb. ## Typography and Palette **Type system — grotesque-neo dual axis** The typographic system is built on two voices in dialogue: a cold, mechanical grotesque for display and a warmer, slightly humanist grotesque for body. This creates tension — the display feels like a machine; the body feels like a person inside the machine. - **Display / Wordmark:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk), weight 700, letter-spacing `-0.04em`, set between 4.5vw and 72px for section headings. The slightly quirky ink-trap details of Space Grotesk give it warmth without softness — it reads as precision with personality. - **Section labels / eyebrows:** Space Grotesk 400, all-caps, letter-spacing `0.22em`, size 11px — thin horizontal rails that arrive above headings like the title cards of a documentary. - **Body:** [DM Sans](https://fonts.google.com/specimen/DM+Sans), weight 300, size 16px, line-height 1.75, max-width 58ch. DM Sans's optical precision complements Space Grotesk without competing — it is the quiet interior voice. - **Numerals / counters:** Space Grotesk tabular numerals, weight 300, size 11px — used for year tags and sequence markers. **Palette — gradient (translucent-frost inflected)** The palette is built around a luminous gradient sky shifting from deep indigo to muted teal to pale violet — the color temperature of natural light through architectural glass at dawn. All glass panels layer on top of this gradient via `backdrop-filter`. - `--void`: `#0a0b1a` — the deepest shadow, the bottom of the sky - `--sky-deep`: `#111530` — primary background, dark indigo - `--sky-mid`: `#1a2744` — gradient midpoint, slate-blue - `--sky-light`: `#203050` — horizon color, cool steel blue - `--glass-surface`: `rgba(255, 255, 255, 0.07)` — the default glass panel fill - `--glass-edge`: `rgba(255, 255, 255, 0.18)` — border of glass panels, top and left edges (simulates the bright edge of a glass pane catching light) - `--glass-shadow`: `rgba(0, 0, 0, 0.35)` — inner shadow on glass panels, bottom and right edges - `--frost-white`: `#e8edf5` — primary text on dark glass - `--frost-dim`: `rgba(232, 237, 245, 0.55)` — secondary text, captions, labels - `--accent-prism`: `#7eb8c9` — the single chromatic accent, the pale blue-cyan of refracted light at the edge of a prism - `--accent-violet`: `#9b7ec8` — the rarer accent, used only for the animated border glow, the color of violet refraction - `--grid-line`: `rgba(255, 255, 255, 0.05)` — background lattice lines **Gradient definition:** ``` background: linear-gradient(160deg, #0a0b1a 0%, #111530 35%, #1a2744 65%, #203050 100%); ``` This gradient is fixed (`background-attachment: fixed`) so the sky does not scroll — the glass panels move through it, reinforcing the sense of floating architecture. ## Imagery and Motifs **Isometric icons — the primary visual vocabulary** The site's visual identity is built entirely around a system of **custom isometric icons drawn in SVG** — not photographs, not 3D renders, not abstract blobs. Each icon is a precision line-art isometric drawing at 30-degree projection, rendered in two tones: `--frost-white` for top faces and `--accent-prism` for side faces, with no fill — only strokes. The icon corpus for this site: 1. **Glass prism** — a triangular prism on the Vestibule, refraction rays drawn as dashed lines extending from each face at different angles 2. **Folded paper plane** — for the "digital experience" discipline section, rendered as a crisp geometric isometric 3. **Architectural module** — an isometric building unit (a cube with one face open, revealing an interior grid) for the spatial design section 4. **Identity mark** — a set of concentric isometric hexagons for the visual identity section, like a stamp die viewed at 30 degrees 5. **Signal grid** — a 3×3 isometric dot grid where each dot is a small cube, for the contact section All icons are sized at 80×80px, centered above their section heading, with a 6-second rotation animation at 0.5-degree amplitude (`transform: rotate(0.5deg)`) that gives them a gentle breathing quality — they appear to be very slowly rotating in space. **Grid-line lattice (background motif)** The viewport background carries a CSS-generated **isometric grid** — a SVG `` of fine lines forming the classic 30-degree isometric lattice. The grid is at `rgba(255,255,255,0.04)` — nearly invisible, felt more than seen, the architectural scaffolding of the space. It does not scroll (fixed attachment). It does not animate. It is permanent infrastructure. **Border-animate pattern** Every glass panel carries a **border-animate** effect: a luminous line (2px, gradient from `--accent-prism` to `--accent-violet`) that traces the perimeter of the panel over 3.2 seconds on page load, then pauses. On hover, it re-traces at 1.8 seconds. This is implemented via a `clip-path` animated stroke on a pseudo-element, not a border — so the glass panel's own edges remain sharp while the light trace runs over them. The running border is the primary kinetic element of the site; nothing else moves except the icon micro-rotation. ## Prompts for Implementation Implement muhan.studio as a **single vertical glass corridor** — one HTML file, one scroll axis, no routing, no page transitions, no external navigation. The page is the experience. **Core glass panel component:** Each section is a `
` with: ```css .glass-panel { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%); border-top: 1px solid rgba(255, 255, 255, 0.18); border-left: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(0, 0, 0, 0.25); border-right: 1px solid rgba(0, 0, 0, 0.20); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.18); } ``` Vary `backdrop-filter: blur()` by depth: Vestibule = 6px, Studio = 10px, Craft = 12px, Work = 18px, Contact = 8px. **Background:** The `` has the fixed gradient background and the isometric SVG `` as a `background-image` layered on top at low opacity. No JavaScript required for the background — it is pure CSS. The gradient does not scroll; it is the sky through which the user descends. **Border-animate implementation:** Use a `::after` pseudo-element on each `.glass-panel`, sized to 100% width and height, positioned absolute. Animate a `clip-path: inset(0 100% 0 0)` to `clip-path: inset(0 0% 0 0)` — this traces the top border. Then chain animations for right, bottom, left. Use CSS custom properties to store panel-specific delay offsets (`--trace-delay: 0.2s`). The trace color is a linear-gradient from `--accent-prism` to `--accent-violet`. **Isometric icons — SVG implementation:** Each icon is an inline `` with `viewBox="0 0 80 80"`. Use `stroke` only (no fill on faces). Top faces: `stroke: #e8edf5; stroke-width: 1.2`. Side faces: `stroke: #7eb8c9; stroke-width: 1`. Apply `transform-origin: center` and a CSS keyframe `@keyframes iso-breathe { 0%, 100% { transform: rotate(-0.5deg); } 50% { transform: rotate(0.5deg); } }` with `animation-duration: 6s; animation-timing-function: ease-in-out; animation-iteration-count: infinite`. **Typography loading:** ```html ``` **Section-specific notes:** - Vestibule: wordmark "muhan.studio" in Space Grotesk 700, 5.5vw. Below it, a single line in DM Sans 300: "Design without limit." Both centered. The isometric prism icon floats 40px above the wordmark. - Craft section: the three stacked panels should have a `margin-left` offset that staggers them: 0px, 24px, 48px — creating a subtle cascade that suggests depth. - Work section: project names in Space Grotesk 700, 3.2vw. Year in Space Grotesk 300, 11px, all-caps. No images, no hover-reveal thumbnails. The glass panel IS the work — the quality of the container communicates the quality of the work. - Contact section: the glass sliver is 80px tall, border-animate plays only on hover. Email in DM Sans 300, 14px, centered. No "send message" button. **Bias toward the corridor:** Every implementation choice should deepen the sense that the viewer is descending through a glass structure. Avoid: card grids, icon+text rows, bullet lists, testimonials, team photos, pricing tiers, newsletter inputs, social media icons, footer mega-menus, sticky CTAs. ## Uniqueness Notes 1. **Glassmorphism executed as architecture, not UI chrome.** At 21% corpus frequency, glassmorphism is overused — but almost always as a surface treatment applied to floating card UIs. muhan.studio treats glass as the primary structural material of the entire site, using differential `backdrop-filter` blur depths to create a Z-axis corridor. No other design in the corpus uses blur-depth as a spatial navigation tool. 2. **Isometric grid as permanent background infrastructure.** The `isometric-icons` imagery type sits at only 3% corpus frequency. This design uses isometric geometry at two scales simultaneously: macro (the full-viewport SVG lattice in the background) and micro (the 80px inline SVG icons). The lattice and the icons share the same 30-degree projection angle, creating visual coherence across scale. 3. **Border-animate as the only kinetic element.** At low corpus frequency, `border-animate` is deployed here not as decoration but as the site's primary narrative mechanism — the light tracing the edge of each panel is the metaphor made literal: light moving through glass. The icon micro-rotation (0.5 degrees) is the only other movement. The restraint is the sophistication. 4. **DM Sans + Space Grotesk as a grotesque-neo dual voice.** `grotesque-neo` sits at only 6% corpus frequency. Rather than a single grotesque family, the design uses two — one mechanical (Space Grotesk, with its quirky ink traps) and one humanist (DM Sans, with its optical warmth) — in deliberate tonal contrast, the type equivalent of the glass-panel's hard edge against soft blur. 5. **Palette as fixed-sky gradient.** The `gradient` palette is common at 91%, but almost always applied as decorative mesh or hero background. Here the gradient is `background-attachment: fixed` and functions as the literal sky — a geological constant that does not scroll. The panels move; the sky stays. This inverts the typical scroll relationship and is unused by any identified design in the corpus. **Chosen seed:** aesthetic: glassmorphism, layout: single-column, typography: grotesque-neo, palette: gradient, patterns: border-animate, imagery: isometric-icons, motifs: grid-lines, tone: elegant-sophisticated **Avoided patterns (from frequency analysis):** hand-drawn (60%), editorial (52%), terminal (31%), botanical (26%). No warm earth tones, no paper textures, no botanical illustration, no vintage photography. The corpus's dominant warmth aesthetic is explicitly refused in favor of the cold architectural precision of glass and indigo sky.