# Design Language for mujun.cafe ## Aesthetics and Tone Mujun.cafe (무준 카페) is a stillness-first photography journal — the visual equivalent of standing alone on a mountain ridge at first light, watching mist fill the valleys below. The aesthetic is **evolved-minimal**: not stripped-down by laziness, but by relentless editorial discipline that keeps only what earns its place. Mood references: the silence before snow falls; Hiroshi Sugimoto's seascapes; a hand-drawn topographic map found in a secondhand bookshop. There are no decorative flourishes. Every element either carries meaning or disappears. The tone is austere but never cold. Monochrome photographs breathe through generous white space. Text is precise and restrained — no marketing language, no superlatives, no calls to action. The site feels like a carefully maintained notebook someone has left open for you to read. Elevation data appears as a faint motif — thin contour lines, not ornamental but structural, as if the page itself was once topographic paper. This is the single decorative system; everything else defers to it. ## Layout Motifs and Structure **Vertical timeline, single column, centered axis.** The page is a scroll — a continuous vertical descent through time, like reading a mountain expedition log. Each photograph occupies a full viewport moment before yielding to the next. Between photographs, text entries float in the white gap: date, location, altitude, brief observation. No sidebars. No floated elements. No columns competing for attention. **Structural logic:** - Outer margin: `min(8vw, 72px)` on each side — breathing room that scales with viewport - Content column: max `640px`, centered - Photographs: `100vw` full-bleed at each timeline node, with a `4px` left border in `#1a1a1a` marking the timeline spine - Text nodes: indented `2.4rem` from the timeline spine, typeset on a `1.6rem` baseline grid - Section breaks: a single horizontal rule `1px solid #d4d4d4`, `40%` width, centered - Contour line motif: positioned absolutely, `opacity: 0.04`, behind the content column, SVG-rendered concentric elevation curves **Navigation:** a fixed minimal header — just the word `mujun` in monospace at `13px`, top-left, and a thin `×` menu trigger top-right. The menu opens as a full-screen overlay with five destination labels in large mono type. Header disappears on scroll; reappears on scroll-up. ## Typography and Palette **Typography — mono throughout, no exceptions:** - **Primary typeface:** `IBM Plex Mono` — used for all body text, labels, dates, and navigation. Weight 400 for body, 500 for labels, 300 for ghost text. - **Display typeface:** `Space Mono` — used only for the wordmark `mujun` and section timestamps. Weight 400 only. Letter-spacing `0.12em`. - **No serif faces. No sans-serif faces.** The monospace constraint is absolute — it reinforces the notebook/log aesthetic and is underused in this category. - Body size: `15px` / `24px` line-height - Labels: `11px` uppercase, `0.18em` letter-spacing, `#8a8a8a` - Date stamps: `13px`, `#5a5a5a`, aligned to timeline spine **Palette — strict monochrome:** | Role | Value | Usage | |------|-------|-------| | Background | `#f7f7f5` | Page base — warm near-white, not pure white | | Ink | `#1a1a1a` | Primary text, timeline spine | | Mid | `#5a5a5a` | Secondary text, dates, captions | | Ghost | `#8a8a8a` | Labels, metadata, tertiary info | | Rule | `#d4d4d4` | Horizontal dividers | | Tint | `#efefed` | Hover states, blockquote backgrounds | | Deep | `#0d0d0d` | Wordmark, strong emphasis only | No color. No accent hues. The photographs provide all chroma — they sit in their monochrome frame like windows onto another world. ## Imagery and Motifs **Photography — the only imagery:** Full-bleed, full-viewport photographs of mountain landscapes: ridge lines, fog banks, snow fields, scree slopes, dawn gradients in grey. All photographs displayed in their natural color — the monochrome palette of the surrounding page creates the impression they are near-black-and-white even when they are not. No filters. No overlays. No cropping beyond aspect ratio. Each photograph has a `data-altitude` attribute used to animate a subtle parallax — the image scrolls at `0.85×` the page scroll rate, creating a slow cinematic reveal as the landscape drifts into view. **Contour line SVG system:** A single SVG of concentric irregular ovals — hand-traced from a topographic map — appears watermarked behind each text node. SVG uses `stroke: #1a1a1a`, `stroke-width: 0.5`, `fill: none`, `opacity: 0.035`. The contours never align between sections; each text node has a unique contour excerpt, rotated subtly (`rotate(−4deg)` to `rotate(8deg)`), as if different pages of the same map. **Micro-interaction details:** - **Photograph entry:** on scroll-into-view, photographs fade from `opacity: 0.4` to `opacity: 1.0` over `800ms` cubic-bezier(0.25, 0.46, 0.45, 0.94) — a slow exposure developing - **Timeline spine pulse:** when a new section enters viewport, the `4px` left-border briefly brightens to `#000` then settles back to `#1a1a1a` over `400ms` - **Text node reveal:** text fades in upward `translateY(12px → 0)` over `600ms`, staggered `80ms` per line - **Menu overlay:** opens with a vertical wipe — `clip-path: inset(0 0 100% 0)` animating to `inset(0 0 0% 0)` over `320ms` - **Cursor:** custom cursor dot `6px`, `#1a1a1a`, `opacity: 0.6` — no ring, just the dot **No icons. No emoji. No illustration. No UI chrome beyond the absolute minimum.** ## Prompts for Implementation **The story to tell:** A photographer keeps a field journal of mountain ascents. The site is that journal, digitized and preserved exactly as written — dates, altitudes, short observations typed in monospace as if on a portable typewriter. Each photograph is not a hero image but a memory: you scroll into it, it holds for a moment, then the text resumes below. The site does not ask you to do anything. It only invites you to keep reading. **HTML/CSS implementation guidance:** - Use `scroll-snap-type: y proximity` on the main scroll container, with `scroll-snap-align: start` on each photograph section — photographs snap gently into full viewport, but text sections scroll freely - The timeline spine is a `::before` pseudo-element on the main `
`: `position: absolute; left: 0; top: 0; width: 4px; height: 100%; background: #1a1a1a; opacity: 0.15` - Each photograph uses `
` with `position: relative; width: 100vw; margin-left: calc(-50vw + 50%); height: 100svh; overflow: hidden` — classic full-bleed technique within a centered column - `` inside figure uses `object-fit: cover; width: 100%; height: 100%; transform: scale(1.06); transition: transform 12s linear` — on entry, scale slowly from `1.06` to `1.0`, simulating a very slow zoom-out as if stepping back - Intersection Observer triggers photograph state transitions; use `threshold: [0.1, 0.5, 0.9]` for granular control - The contour SVG background: embed inline, one per text node, each clipped to `240px × 180px` viewport, never repeating the same rotation - `font-feature-settings: "tnum" 1, "ss01" 1` on all date/number elements — tabular numbers, alternate glyphs for cleaner columnar alignment - No JavaScript framework needed — vanilla JS, ~150 lines. No build step. - The header wordmark `mujun` animates letter-spacing on hover: `0.12em → 0.22em` over `200ms ease-out` **AVOID: any call-to-action buttons, subscription forms, social proof blocks, stat grids, testimonial carousels, pricing tables, or anything that would feel commercial. This site earns trust through restraint.** ## Uniqueness Notes **Differentiators:** 1. **Dual-monospace typographic system.** Using two mono faces (`IBM Plex Mono` for body, `Space Mono` for display) in a strict zero-serif, zero-sans environment is unusual. Most sites use mono as an accent; here it is the entire type system — emphasizing the expedition log metaphor. 2. **Altitude-driven parallax** (`data-altitude` attribute as a semantic layer). The parallax rate is not arbitrary — it is tied to the altitude value encoded in the markup, so photographs from higher elevations scroll at a slightly slower rate (thinner atmosphere, slower movement). This is invisible to casual visitors but coherent as a design system. 3. **Photography-as-window, not photography-as-decoration.** At `90%` frequency in the corpus, photography is typically used decoratively with text overlaid or hero-style. Here, each photograph occupies its own scroll moment with no text overlay — it is a pause in the journal, not a backdrop. 4. **Contour line as the sole decorative system.** Mountain-landscape motifs appear at only `2%` frequency in the corpus. Using topographic contour lines as a watermark — rendered as SVG, opacity `0.035`, never colored — is a highly specific and underused approach that directly references the subject matter without illustrating it. 5. **Scroll-snap on photographs only.** Applying `scroll-snap` selectively to full-viewport photograph moments while allowing free scrolling through text nodes creates a rhythm unique to this site: drift through text, then click into a photograph, then drift again. Most scroll-snap implementations apply it uniformly. **Chosen seed/style:** aesthetic: evolved-minimal, layout: timeline-vertical, typography: mono, palette: monochrome, patterns: micro-interactions, imagery: photography, motifs: mountain-landscape, tone: minimal **Avoided patterns (high frequency in corpus):** - `photography` as decorative backdrop with text overlay (90% corpus usage — here photography stands alone, unadorned) - `mono` as accent face only (78% corpus usage — here it is the exclusive typographic system) - `minimal` imagery meaning sparse/none (40% corpus usage — here minimal means disciplined selection, not absence) - `monochrome` palette treated as dark-mode or noir aesthetic (13% corpus usage — here it is warm near-white with ink, referencing archival paper)