# Design Language for muhan.dev ## Aesthetics and Tone **muhan.dev** is a **Korean-infinity luxury atelier of the digital cosmos** — the word 무한 (muhan) means "limitless" or "infinite" in Korean, and every pixel of this site bends toward that concept with quiet, devastating confidence. This is not the loud luxury of logos and flash. It is the luxury of a Joseon scholar who has stood at the edge of the Milky Way and decided to build a website about it. The aesthetic is **luxury-premium** fused with **star-celestial mythology**: imagine a Korean traditional ink painting (수묵화, sumukhwa) where the brushwork has been executed with the precision of a Swiss watchmaker on a surface of black lacquered obsidian. Constellations emerge from the negative space. The site breathes like the pause between heartbeats — deep, charged, inevitable. Tone is **optimistic-bright**: this is not a dark-melancholy cosmos. It is dawn breaking over an infinite horizon. The gold is warm, not cold. The stars are close, not distant. Visiting muhan.dev should feel like being invited into a place where something extraordinary is quietly being built, and you have arrived at exactly the right moment. The site speaks in the first-person singular: no "we", no team, no pricing. It is the voice of one person whose ambitions exceed the edge of the observable universe — stated without apology, without bluster, in a whisper that carries farther than a shout. ## Layout Motifs and Structure The layout is **centered** — a deliberate column, but one that behaves unlike the 86% of other centered layouts in the registry. Where most centered layouts create a reading column that sits inert against a background, muhan.dev's column is **the foreground object in a three-dimensional field**. The background is a live 3D star-field rendered in WebGL — a slow, breathing celestial sphere — and the content column floats above it on a `z-index` plane that feels physically closer to the viewer. **Structural composition:** The entire viewport is divided into three experiential zones: 1. **The Infinite Void** (fixed WebGL background layer): a particle system of 2,400 stars distributed across a spherical shell, rotating imperceptibly at 0.003 rad/s on the y-axis and 0.0015 rad/s on the x-axis. Stars near the equatorial belt of the sphere are drawn at 1.4–2.2px, pole-stars at 0.6–0.9px, creating natural depth cues. No star is perfectly white — each has a hue offset: warm gold (#FFF4C2), cool ice-blue (#D8EEFF), neutral ivory (#FFFDF5). 2. **The Column Sanctum** (centered content layer): a single `min(680px, 88vw)` column. Horizontal margins are pure darkness — no decorative fills. The column has no visible border or card container. It simply *is*, floating in space. Sections are separated by a single golden celestial divider: a 40px-tall SVG containing a five-pointed star (8px, #C9A84C) flanked by two hairlines that taper from 0.5px to 0px at their outer ends over 120px. 3. **The Gravity Layer** (interaction overlay): cursor-proximity causes the nearest 40 stars in the particle system to drift slightly toward the cursor position — a barely-perceptible gravitational pull. This is the *only* cursor-reactive element. Nothing else follows the cursor. **Scroll behavior**: sections reveal with a `scroll-triggered` stagger — each content block rises 24px and fades from opacity 0 to 1 over 480ms with a `cubic-bezier(0.25, 0.46, 0.45, 0.94)` ease. The star field parallaxes at 0.12× scroll speed (moves 12px for every 100px of page scroll), deepening the sense of floating through space as you descend. **No navigation bar.** No sticky header. No footer with links. The page is a single vertical journey from void to resolution. ## Typography and Palette **Type system (Google Fonts only, verified):** - **Display & Hero — `Cormorant Garamond`** — variable, wght 300–700. Used for the hero wordmark at `clamp(72px, 13vw, 148px)`, `wght 300`, `letter-spacing: 0.18em`. Cormorant carries the weight of centuries of scholarly luxury: it was designed explicitly for display at large sizes, its contrast between hairline and stroke creating a shimmer at headline scale that echoes the star field behind it. The wordmark "muhan" is set entirely in lowercase Cormorant at wght 300 — fragile, infinite, certain. The Korean 무한 appears directly beneath in the same weight at 38% of the Latin size, nudged 4px lower to baseline-align optically. - **Body & Captions — `Jost`** — a geometric sans in the Futura tradition (futura-geometric seed), wght 200–500. Used for all body text at 18px/1.72, wght 300. Used for section labels (e.g. "WORK", "CONTACT") as tracked all-caps at `letter-spacing: 0.34em`, wght 400, 11px. Jost's pure geometric circles and proportions make it feel like it was drawn with a compass and a straightedge — the instrument of a navigator charting a course through unmapped sky. - **Accent & Annotation — `Nanum Myeongjo`** — a Korean serif typeface for inline Korean phrases, quotations, or dates written in Hangul. Appears only 3–5 times across the page, always at opacity 0.55, always in the gold accent color. It exists to remind the viewer that the word *muhan* is not decoration — it is identity. **Color Palette (high-contrast, warm celestial):** | Name | Hex | Role | |------|-----|------| | Void Black | `#080810` | Page background, star field base | | Deep Space | `#0D0D1A` | Column background (at 92% opacity, allowing stars to ghost through) | | Star Gold | `#C9A84C` | Primary accent: dividers, hover states, active elements | | Bright Gold | `#F0D080` | Hover target for gold elements, shimmer highlight | | Celestial White | `#F5F0E8` | Body text, primary reading color | | Ivory Dim | `#A09880` | Secondary text, labels, captions, Korean annotations | | Nebula Rose | `#8B4A6B` | Single-use accent: used exactly once, on the hero section's background gradient node — a barely-visible warm mauve at 8% opacity that gives the void a living quality | | Ice Star | `#C2D8F5` | Used only in the star particle system for cool-hue stars | **Contrast posture**: Celestial White on Void Black = 18.1:1. Star Gold on Void Black = 8.4:1. Both far exceed the seed's high-contrast mandate. ## Imagery and Motifs **Primary imagery: 3D render (WebGL particle system)** — the star field is the hero image, the ambient environment, the signature visual of the site. It is not a static image. It is a live `` built with Three.js: a `BufferGeometry` of 2,400 points, each with position on a sphere of radius 800 (projected to fill viewport), size variation by latitude, and per-vertex color drawn from the three-hue star palette (gold, ice, ivory). **Constellation Motifs**: Six constellations are drawn into the star field using slightly larger, brighter stars (2.8px, full Celestial White) connected by hairlines at 0.15px opacity. The constellations are **invented** — not Orion or Cassiopeia, but new configurations with Korean names: 무한좌 (Muhan's Seat), 빛의 길 (Path of Light), etc. They are visible only if you let your eyes adjust — they are not labeled, not clickable, not announced. They are the site's hidden gift. **Celestial Divider SVG**: The section separator described in the layout — a 5-pointed star flanked by two gold hairlines that taper to nothing. This appears between every major section break, centered, 40px tall × 320px wide. **Hover-lift on work cards**: Each work item in the portfolio section is a minimal card — black background, gold left-border (2px), title in Cormorant at 24px, descriptor in Jost at 14px. On hover: the card lifts 6px (`transform: translateY(-6px)`), the gold border transitions from `#C9A84C` to `#F0D080`, and the title weight shifts from wght 400 to wght 600 over 240ms. This is the site's only explicit `hover-lift` interaction — executed once, cleanly, not repeated in multiple contexts. **No photography.** The registry shows photography at 90% — muhan.dev opts out entirely. The visual world is geometry, light, and type. **Korean ink motif (수묵화 ghost)**: On the hero section only, at absolute position behind the wordmark, a single SVG brushstroke — a single sweeping arc 400px wide, 2px thick, drawn in `#C9A84C` at 6% opacity — suggests a calligraphic gesture. It is the ghost of a brush that moved before the site loaded. ## Prompts for Implementation Build muhan.dev as **a vertical journey through an infinite night sky toward a single point of golden light** — the person behind the domain. The scroll is not navigation; it is travel. **Implementation architecture: four acts, one scroll.** **Act I — Void (hero, full viewport height)** The WebGL canvas fills 100% of the viewport. Stars breathe. The wordmark "muhan" in Cormorant wght 300 appears centered at 45% viewport height. Korean "무한" appears beneath it. Below both, a single Jost-300 tagline at 18px in Ivory Dim: one sentence, no longer than 72 characters, that completes the thought begun by the name. A single downward-pointing chevron (2px gold, 16px wide, 8px tall) pulses once every 3.2s at the very bottom of the viewport — not an animation loop, a single beat, like a heartbeat. The wordmark performs an `opacity` reveal: it begins at 0, transitions to 1 over 1.2s with a 300ms delay after page load. No transforms. No scale. Pure presence arriving. **Act II — Constellation (about section, full viewport height)** As the user scrolls into this section, a `scroll-triggered` path-draw animation traces one of the six invented constellations — 무한좌 — star by star, with each connecting hairline drawing from left to right over 800ms total. The constellation lives in the right 40% of the viewport at desktop, behind the text column. The section text describes in 3–4 short paragraphs the builder's philosophy: what "limitless" means to them, not as marketing copy but as personal testimony. Section label: `ORIGIN` in Jost all-caps tracked at 0.34em, 11px, Ivory Dim. Appears 240ms before body text. **Act III — Work (portfolio, 2–4 items)** Minimal work cards stacked in the column. Each card is `hover-lift` as described in imagery section. Work titles in Cormorant 24px. Descriptors in Jost 14px. Year in Jost wght 200 at Ivory Dim. A Korean annotation (`#C9A84C`, opacity 0.55) in Nanum Myeongjo appears next to one card — the creator's own name for the project in Korean, a private label made visible. Cards stagger-enter on scroll: each rises 24px and fades in with a 120ms offset between cards. **Act IV — Horizon (contact, full viewport height)** The final section returns to void. The star field is visible again — the column background drops to `background: transparent` here, revealing the full star field behind the text. Centered, a single line of Cormorant wght 300 at 42px: an invitation, not a form. Beneath it: an email address in Jost wght 300, underlined with a 1px gold line that grows from width 0 to full on page-load (using the `underline-draw` pattern via SVG `stroke-dashoffset`). No social links. No form. No CTA button. Just the address, and the stars. **Implementation notes:** - Three.js via CDN for WebGL star field (`type="module"` in script tag) - `IntersectionObserver` for all scroll-triggered animations — no scroll event listeners - CSS custom properties for all palette values, enabling a future `prefers-color-scheme` hook - All Korean text wrapped in `lang="ko"` spans with `font-family: 'Nanum Myeongjo', serif` - The column background `rgba(13, 13, 26, 0.92)` allows star ghosting — this is intentional and critical; do not make it fully opaque - Constellation path-draw implemented as SVG `` with `stroke-dasharray` / `stroke-dashoffset` transition, not canvas - Avoid any animated elements that loop continuously except the star field rotation — all other animations play once on trigger ## Uniqueness Notes **Chosen seed:** aesthetic: luxury-premium, layout: centered, typography: futura-geometric, palette: high-contrast, patterns: hover-lift, imagery: 3d-render, motifs: star-celestial, tone: optimistic-bright **Differentiators from the existing corpus:** 1. **The star field is the canvas.** No other design in the registry uses a live WebGL particle system as its primary background/imagery. Photography dominates at 90% — muhan.dev opts out entirely, replacing it with a procedurally generated celestial environment that changes imperceptibly on every visit as the rotation angle is initialized from `Date.now() % 360`. 2. **Invented Korean constellations as hidden content.** The six unnamed star patterns drawn into the field are the site's secret layer — they exist, they have names, and only the most attentive visitor will find them. No other design in the registry builds a hidden narrative layer into its decorative background. This is a differentiator at the level of concept, not just execution. 3. **Korean identity as structural element, not decoration.** The use of `무한` (the Korean word for the domain) in the wordmark hierarchy, Nanum Myeongjo for annotations, and Korean-named constellations makes cultural identity load-bearing rather than cosmetic. This contrasts with every other design in the registry where language is either purely English or where non-Latin script appears only as translational caption. 4. **Centered layout that earns its centeredness through depth.** The registry's 86% centered rate shows how default this choice is. muhan.dev's centered column is defensible because it is the foreground object in a three-dimensional WebGL space — the centeredness creates the effect of a beacon, not a blog. The layout works only because the z-axis is deployed. 5. **hover-lift used exactly once.** The pattern appears at 11% frequency in the registry, often applied to every interactive element. muhan.dev restricts it to a single context (work cards) and specifies exact parameters: 6px lift, 240ms, gold border brightens from `#C9A84C` to `#F0D080`, weight shift. This specificity and restraint is the opposite of the pattern's typical careless overuse. **Patterns deliberately avoided based on frequency analysis:** - `photography` (90%): replaced entirely with 3D WebGL render - `gradient-mesh` (8%): gradient appears only as a single-node nebula rose ghost at 8% opacity in the hero, not as a design-defining element - `glassmorphic-cards` (3%): work cards have opaque black backgrounds, no blur, no frosted glass — the star field ghosting through the column background achieves translucency at the layer level, not the card level - `organic-blobs` (5%): zero blobs; all forms are either points, lines, or pure geometric type