# Design Language for mujun.studio ## Aesthetics and Tone mujun.studio is the digital atelier of a ceramicist who discovered code — a place where **goblincore's reverence for imperfect, foraged beauty** collides with the cold silence of monochrome stone. The studio aesthetic is uncompromisingly minimal in structure but wildly specific in texture: raw marble veining, the lichen-dusted underside of a river rock, the sheen of polished obsidian beside matte limestone. Nothing is symmetrical. Nothing is clean in the sanitized sense. The cleanliness here is geological — the stripped-back severity of a cliff face. The site occupies a philosophical position between **Japanese wabi-sabi stillness** and **goblincore's accumulation instinct** — but rendered entirely in grayscale, so the hoarding impulse becomes curation, and the moss and mud become texture maps rather than color signals. The result feels like stepping into a gallery carved from a cave: minimal navigation, maximal atmosphere. **Mood keywords:** monastic severity, subterranean stillness, found-object reverence, stone garden after rain, the weight of collected things. **Tone:** whispering. The copy never shouts. Sentences arrive like objects placed carefully on a shelf — one at a time, with deliberate spacing. The site is **not minimalist in the Swiss sense** (it does not celebrate emptiness); it is minimal in the **goblincore sense** — every element earns its presence by being irreplaceable. Aurora lights appear as the sole departure from strict monochrome: they live in the background as near-invisible luminance shifts — barely-there gradients of cold white washing through slate and charcoal, as if bioluminescent organisms are moving beneath the surface of the marble. They do not distract; they breathe. ## Layout Motifs and Structure The layout is a **hard split-screen** — the viewport is permanently divided into left and right halves by a single 1px vertical rule in `#2a2a2a`. This divider is not a decoration; it is the spine of the entire site. **Left panel — the texture field:** Full-height, non-scrolling, fixed. Occupies 42% of the viewport. Contains a single large marble-texture canvas element that generates a procedural veining pattern in real time using a Perlin noise flow field. The veins drift imperceptibly slowly — 0.008 units per second — so slow they are only noticed after twenty seconds of stillness. At the bottom-left corner, a small foraged-object glyph (a stylized stone or mushroom cap, drawn in SVG, ~48×48px) sits flush to the floor. **Right panel — the content column:** Occupies 58% of the viewport. Scrolls independently of the left panel. Content is revealed progressively as the user scrolls: each section fades and translates upward in sequence, never all visible at once. The right panel has two internal columns on desktop — a 64px wide index gutter on the far right edge, and the main text body in the remaining space. **Progressive disclosure mechanism:** Content sections are staggered. Section N+1 is invisible (opacity 0, transform translateY 24px) until section N has been scrolled 80% into the viewport. This is not a lazy-load trick — it is a narrative pacing device. The site reveals itself at the speed of reading, not the speed of scrolling. **No hero section.** The page opens mid-sentence: the first visible text is a fragment that only completes when the second content block scrolls into view. The full opening statement spans two separate reveal moments, forcing the reader to wait. **Mobile:** The split collapses. The marble texture field becomes a fixed background layer at 30% opacity. The single-column content scrolls over it. **Grid anchors:** - Vertical rule: `calc(42vw)` - Right panel internal gutter: `32px` right margin - Content measure: `min(520px, 80%)` - Section vertical gap: `6rem` ## Typography and Palette **Palette — strictly monochrome with luminance variance:** - `#0d0d0d` — near-black, base background - `#1a1a1a` — marble panel shadow tone - `#2a2a2a` — vertical divider rule, secondary borders - `#4a4a4a` — body text (intentionally not black — reads as ink on stone) - `#787878` — secondary text, index numbers, captions - `#a8a8a8` — decorative text, hover states on secondary links - `#d4d4d4` — primary headings (light on dark, high contrast) - `#e8e8e8` — display text for the largest typographic moments - `#f4f4f2` — near-white with a whisper of warm grey, used sparingly for maximum emphasis **Aurora accent (luminance-only, no hue):** - Aurora effect is a `radial-gradient` wash from `rgba(255,255,255,0.03)` to `rgba(255,255,255,0)`, animated via CSS keyframes with a 14-second period and `easing: ease-in-out alternate infinite`. Applied to the marble canvas background. Never uses color — only white light at near-zero opacity. **Typography system (all verified Google Fonts):** - **Display/hero — `Cormorant Garamond`**, weight 300, italic. Used for the opening fragment and section titles. Size: `clamp(2.8rem, 5.5vw, 7.2rem)`. Letter-spacing: `-0.02em`. This is the single serif intrusion into an otherwise sans-serif system — its organic ink-trap geometry against the stone texture creates a deliberate friction. - **Body — `DM Sans`**, weight 400 and 300. Size: `clamp(0.95rem, 1.1vw, 1.1rem)`. Line-height: `1.75`. The optical neutrality of DM Sans disappears against the textured background — it reads as pure information, no personality. This is the point. - **Index / Labels — `DM Mono`**, weight 400. Size: `0.72rem`. Used only in the right-panel index gutter and for section ordinals (`01 /`, `02 /`). All uppercase, letter-spacing `0.18em`. The mono spacing creates the impression of a catalogue raisonné. - **Kinetic headline behavior:** Display headings use a character-by-character entrance animation. Each letter has `opacity: 0` and `transform: translateY(0.4em)` at load. On trigger, letters cascade in with a `stagger: 28ms` delay per character, easing `cubic-bezier(0.16, 1, 0.3, 1)`. The effect is not bouncy — it is like watching stone chips fall from a quarry face and settle. Once settled, the text never moves again. - **Variable axis usage:** `Cormorant Garamond` supports optical size and weight axes. At viewport widths above 1200px, the display heading runs at `font-variation-settings: 'wght' 275, 'opsz' 72` — the extreme optical-size setting produces ink traps visible at large sizes on retina displays. ## Imagery and Motifs **Marble texture (primary imagery):** The left panel's marble surface is not a photograph. It is a **procedural SVG + Canvas hybrid**: a 1200×900 base SVG defines the primary vein topology (3–5 major veins, hand-authored as `` elements with `stroke-linecap: round`, stroke width ranging 0.4–2.2px), and a Canvas overlay applies a Perlin-noise displacement map that makes the veins appear to shift infinitesimally with time. The base palette is `#1a1a1a` with veins at `#3a3a3a` and `#0a0a0a` (light veins and shadow veins respectively). The surface has a subtle `noise()` grain overlay at 4% opacity to simulate calcite crystalline structure. **Foraged objects (goblincore motif):** Six SVG glyphs are distributed across the site — appearing in margins, at section breaks, and in the index gutter. They represent: a mushroom cap (side profile), a river stone (rounded irregular oval with one crack), a dried leaf skeleton (botanical, skeletal venation only), a spiral shell fragment, a pinecone scale, and a small beetle seen from above. All are drawn in a single `stroke` style, no fill, 1px line weight, color `#2a2a2a`. They never animate. They accumulate quietly as the user scrolls. **Aurora lights motif:** Three overlapping radial-gradient layers in the marble canvas, each with a different center point and a 14s / 19s / 23s animation period (prime numbers to prevent synchronization). The gradients are white-to-transparent, max opacity 4%. On OLED screens this reads as a faint luminous pulse — like phosphorescence in deep water. On non-OLED screens it is nearly invisible, which is also acceptable. **No photographs, no icons from icon libraries.** Everything visual is either procedural or hand-authored SVG. **Typographic ornament:** Between major sections, a single horizontal rule — not `
` but a `
` with `border-top: 1px solid #2a2a2a; width: 48px; margin: 3rem auto 3rem 0`. No center-align. Always left-flush. Never decorative beyond this. ## Prompts for Implementation Build mujun.studio as a **single-page vertical scroll in the right panel**, with the left panel permanently fixed. The page has five content sections, revealed progressively. **Section structure (right panel, top to bottom):** 1. **Opening fragment** — `Cormorant Garamond` display, `#e8e8e8`, ~72px. The text reads: *"Things made slowly"*. It appears character-by-character. Below it, in `DM Sans` 300 weight `#787878`, a second line appears 800ms later: *"persist."* The two fragments are typographically mismatched in scale (7:1 ratio) — the tension is intentional. 2. **Studio statement** — Two short paragraphs, `DM Sans` body. Triggered to appear when the opening text is 80% in-view. The paragraphs describe the studio's philosophy without mentioning services. No bullet points. No bold words within the body text. 3. **Work index** — A list of 6–8 project entries. Each entry is a single line: `01 / [project name]` in `DM Mono` + `DM Sans` at the same baseline. On hover, the project name shifts from `#4a4a4a` to `#d4d4d4` with a 180ms ease transition. No thumbnails. No descriptions visible by default — a second line of description in `#787878 DM Mono` expands below on hover (max-height animation, 240ms ease). 4. **Object shelf** — The six foraged SVG glyphs appear in a horizontal row with `gap: 4rem`, each at 48×48px, entering one at a time on a 150ms stagger. Below each glyph, a one-word label in `DM Mono`, uppercase, `0.64rem`, `#4a4a4a`. Labels: MYCELIUM / STONE / LEAF / SHELL / CONE / BEETLE. 5. **Contact fragment** — A single line in `Cormorant Garamond` italic 300: *"Leave a note in the stone."* Below it, an email address in `DM Mono` that only becomes visible (transitions from `opacity: 0` to `opacity: 1`) when the cursor rests in the right panel for more than 2 seconds after arriving at this section. This is the most goblincore moment — the studio's contact information is hidden until the visitor demonstrates patience. **Implementation constraints:** - No frameworks. Vanilla HTML, CSS, JS only. - The vertical rule `calc(42vw)` must be maintained at all viewport widths down to 768px. - Below 768px: left panel collapses to 0 width, marble texture becomes CSS `background-image` on `body`. - `prefers-reduced-motion`: all kinetic animations stop; text appears instantly; aurora gradients are static. - No `cursor: pointer` on anything except the project name links. The site resists click-affordance signals. - JavaScript: one file, under 200 lines, no external dependencies. Uses `IntersectionObserver` for progressive disclosure triggers. **Aurora implementation note:** Use CSS `@keyframes` with `transform: scale()` and `opacity` toggling on the three gradient layers. Do NOT use JavaScript for aurora animation — CSS is sufficient and keeps the JS budget clean. ## Uniqueness Notes **Chosen seed:** aesthetic: goblincore, layout: split-screen, typography: kinetic-animated, palette: monochrome, patterns: progressive-disclosure, imagery: marble-texture, motifs: aurora-lights, tone: minimal **Differentiators from the existing design corpus:** 1. **Goblincore rendered in strict monochrome.** Every other goblincore or nature-influenced design in the corpus uses earth tones, greens, or warm ambers. mujun.studio strips all hue entirely — the goblincore reverence for foraged objects and imperfect textures survives intact, but expressed only through luminance, texture, and accumulated SVG relics. The frequency report shows `monochrome` at 13% and `goblincore` at 1% — this combination has zero precedent in the corpus. 2. **Progressive disclosure as narrative pacing, not lazy loading.** The corpus uses progressive disclosure at 3% frequency, and where it appears, it is a performance pattern (load-on-scroll). mujun.studio inverts this: section N+1 is withheld until section N is read, not as a performance optimization but as a storytelling constraint. The contact email is hidden behind a two-second patience gate — the most extreme instance of this philosophy. 3. **The procedural marble is not decorative — it is the site's primary visual identity.** In the frequency analysis, `marble-texture` appears at 4% as an imagery choice, but always as background photography. Here the marble is a live SVG + Canvas composition with time-varying vein displacement — it is closer to a screensaver than a texture. The left panel never changes content; its only activity is geological drift. 4. **No photographs, no external icon libraries, no framework dependencies.** The entire site is hand-authored SVG and vanilla JS under 200 lines. At a time when the corpus skews heavily toward photography (85%+ in the frequency report), mujun.studio uses zero photographic imagery. 5. **The split-screen divider is semantic, not decorative.** The 1px vertical rule at `42vw` is not a visual flourish — it is the site's structural argument: left is texture (what the studio is made of), right is text (what the studio says). The division is never bridged. No element crosses the rule. Split-screen appears at 1% frequency in the corpus; this interpretation is architecturally distinct from existing split-screen uses.