# Design Language for munju.club ## Aesthetics and Tone munju.club is **the inside of a fermenting onggi jar, photographed by candlelight, three weeks into the rest** — a wabi-sabi imperfect-ceramic web experience devoted to *munju* (문주), the milky, restless category of Korean grain liquor that includes makgeolli, dongdongju, and the cloudy first pour before anyone filters it. The mood is **patient, cellar-cool, slightly turbid**: not the glossy gold of a soju ad, but the chalk-soft greys and rice-water whites of a clay vessel that has been used for forty years and washed ten thousand times. Think of a brewing collective's logbook left open on a stone shelf — finger-smudged, ring-stained from wet jars, annotated in pencil. The aesthetic refuses gloss entirely: every surface should feel **bisque-fired and unglazed**, every edge should look like it was thrown on a wheel by a tired hand and left a little uneven on purpose. The tone is **grounded-earthy and quietly contemplative** — the voice of someone who has been minding a fermentation for decades and has stopped needing to impress anyone. No exclamation marks. No "join now." The site speaks the way *nuruk* (fermentation starter) works: slowly, in the dark, transforming things without announcing it. Where most drink sites shout abundance, munju.club whispers *time*. The whole page should feel like it is **breathing at the pace of a yeast colony** — a slow, almost imperceptible expansion and settle, the way the surface of fermenting rice mash rises and sinks. The single governing metaphor: **the page IS the jar.** You scroll *down into* the ferment — through the foam crown at the top, through the cloudy suspension in the middle, down to the still lees at the bottom. Nothing is "above the fold"; there is only depth into the mash. ## Layout Motifs and Structure The composition is **single-column and vertically immersive — one tall ceramic vessel, viewed from above its mouth, descending into murk.** No card-grid (90% of the corpus uses one — this site has zero cards). No dashboard, no bento-box, no sidebar. Just **one narrow column, roughly 540px wide at most, centered on a vast field of bisque-grey negative space (ma)** — the column is the jar; the surrounding emptiness is the cool dark cellar it sits in. **The five strata (top to bottom, each a distinct turbidity and temperature):** 1. **The Crown (부유, buoyancy).** The masthead. A loose, drifting cluster of rice-grain glyphs and bubble forms floating at the very top of the jar's mouth. The wordmark "munju.club" set small, lowercase, slightly off-center — as if it floated there rather than being placed. A thin ceramic-rim ellipse frames the whole viewport like looking down a jar's neck. 2. **The Pour (탁, turbidity rising).** An introductory passage — what *munju* is, why "cloudy" is not a flaw. Text set in a single hanging column, ragged-right, with generous line-leading so the words seem suspended in liquid. A vertical hairline (a "thermometer of the ferment") runs down the left margin of the entire page from here, gaining tick-marks as you descend — Day 3, Day 9, Day 21, Day 40. 3. **The Suspension (현탁, full cloud).** The densest stratum — a meandering, river-like flow of short entries: a brewer's note, a vessel description, a tasting impression of dongdongju, a paragraph on *singokju* (the new-grain brew). These do NOT sit in a grid; they **drift down the column at slightly varying horizontal offsets**, like sediment settling unevenly, never two in a row aligned the same way. Asymmetric, organic-flow, broken-grid — but gently, never violently. 4. **The Lees (앙금, the settled bottom).** A quiet, denser-toned band near the page bottom — a short colophon written as if scratched into the clay base of the jar: who keeps this log, when the jar was last opened, a single line of thanks to the *nuruk*. 5. **The Stillness (정, rest).** A final near-empty viewport — almost the full bisque-grey of the cellar, a single rice grain settling, the page's heartbeat slowing to nothing. The scroll ends not with a footer but with *sediment*. **Spatial rules:** - The jar-column never touches the viewport edges; there is always at least 18vw of cellar-grey on each side on desktop. - Vertical rhythm follows a **non-uniform "settling" scale** — gaps between blocks get *larger* toward the top (foam, room to drift) and *smaller* toward the bottom (compaction, lees). The page literally feels denser as you descend. - A faint **meniscus line** — a single soft horizontal arc — marks the current scroll position, like the liquid level visible inside the jar, and it sinks as you read. ## Typography and Palette **Fonts (Google Fonts only — two voices: a Korean-capable humanist serif for body, a soft mono for the brewer's tick-marks and timestamps):** - **Body & Display — *Gowun Batang*** (Google Fonts; Korean + Latin). A gentle, slightly old-fashioned Korean serif (batang = "the ground/base") with soft, hand-cut terminals — it reads like text brushed onto rice paper, never machine-set. Used for everything narrative: the intro passage, the drifting entries, the colophon. Sizes stay modest — 17–20px for body, never larger than ~40px for the wordmark and stratum titles. Letter-spacing slightly loose (0.01em) so the words feel like they're floating apart in liquid. Line-height generous: 1.85. - **Marginalia & Ferment-clock — *Spline Sans Mono*** (Google Fonts). A soft, rounded-corner monospace — not a hard terminal mono (94% of the corpus already uses sharp tech-mono). Spline Sans Mono is humane and slightly bubbly; perfect for the day-count tick-marks ("DAY 09 · 14.2°C · still cloudy"), the meniscus depth readout, and tiny annotations clipped to the column's edge. Always uppercase, always tiny (11–12px), always in the cool-grey ink so it reads as pencil, not print. - **Accent — *Nanum Pen Script*** (Google Fonts, Korean handwriting). Used *extremely* sparingly — only for a single hand-scrawled correction or marginal note per stratum, e.g. a crossed-out word with a penciled replacement above it, the way a real brewer amends a logbook. Never for headings, never for body. One or two appearances total. **Palette — "unglazed onggi at rest" (cool, chalky, never warm-gradient; the corpus is 98% warm — this site is deliberately cool-grey-and-rice):** - `#EDE9E0` — **Bisque** — the cellar / page background. An off-white the color of unfired clay; not cream (no yellow), faintly cool. - `#F6F4EE` — **Rice Water** — the jar-column surface; a hair lighter than Bisque, the milky liquid itself. - `#C9C2B4` — **Wheel Dust** — hairlines, the ceramic-rim ellipse, the ferment-clock spine, settled-sediment shading. - `#9A9382` — **Lees Grey** — secondary text, the marginalia mono, faded annotations; reads as soft pencil. - `#3B3A33` — **Slate Ink** — primary body text; a near-black with a green-grey undertone, like wet stoneware, never pure #000. - `#7D8A6E` — **Nuruk Mould** — the *only* color accent: the dusty sage-green of a healthy *nuruk* cake's surface mould. Used for the active tick-mark on the ferment-clock, the meniscus line, hover states, and the single live link. Used in homeopathic doses — a few square pixels at a time. - `#B5462E` — **Jujube** — an even rarer second accent (used once or twice on the whole page): the deep red-brown of a dried jujube dropped into the brew, for a single emphasized word or the page's one closing mark. No gradients except one: a barely-there vertical wash from `#F6F4EE` at the jar's mouth to `#E4E0D6` at its base — the cloud thickening with depth. Otherwise flat, matte, ceramic. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Everything is SVG, hand-built, off-axis, and slightly imperfect — every shape should look thrown, not drawn.** - **The Onggi Vessel.** A single large SVG silhouette of a traditional Korean fermentation jar — wide-shouldered, narrow-mouthed — rendered only as a soft Wheel-Dust outline, sitting *behind* the entire content column at very low opacity (~8%). As you scroll, you are scrolling down inside it: the shoulders pass at the top, the belly fills the middle, the foot appears at the lees. Its outline is intentionally **not perfectly symmetric** — left and right profiles differ by a few pixels, the way a real thrown pot does. - **Rice grains & bubbles.** Small SVG ellipses and elongated grain-shapes — *dongdongju* literally means "floating-floating," for the rice grains that bob on the surface. A scattering of these drift slowly across the Crown stratum and reappear, fewer and slower, settling, in the Lees. Each is a single matte shape, no gloss highlight, no drop shadow. - **The meniscus arc.** One soft SVG arc — the visible liquid surface inside the jar — that lowers as the reader scrolls, in Nuruk Mould at low opacity. It is the page's only "progress indicator," and it never looks like a progress bar. - **Cloud field.** A faint, animated SVG turbulence/noise filter applied at very low strength to the jar-column background — the slow, organic churn of suspended sediment. It moves at the speed of actual fermentation: almost not at all. (Use `feTurbulence` with a tiny `baseFrequency` animated over ~40s.) - **Ferment-clock ticks.** Tiny horizontal SVG dashes along the left spine, one per "day," the current day's tick filled Nuruk Mould, past days Wheel-Dust, future days barely visible — a calendar measured in fermentation, not in dates. - **The smudge.** One or two soft, irregular Wheel-Dust blobs at low opacity placed near entries — wet-jar ring-stains on the logbook page. Never decorative for its own sake; always reads as *use*. - **Hangul as texture.** The words 문주, 탁주, 동동주, 누룩 may appear oversized, very faint, half-cropped at the column edges — not as headings but as **watermarks pressed into the clay**, the way a potter stamps a jar. ## Prompts for Implementation Build munju.club as **one HTML file, one CSS file, one small JS module — a single vertical scroll that descends into a fermentation jar.** No router, no CTA, no pricing, no stat-grid, no testimonial row, no email signup, no contact form. There is only the descent through five strata of cloudy liquid. **Storytelling spine (one continuous scroll, ~70–90 seconds of unhurried reading):** 1. **The Crown.** Page opens nearly silent on Bisque-grey. The ceramic-rim ellipse fades in around the viewport — you are looking down a jar's mouth. The wordmark "munju.club" drifts up from below into a slightly off-center resting spot, in Gowun Batang, small and lowercase. Three or four rice-grain SVGs already floating, drifting at the pace of a slow exhale. A single line of marginalia mono appears, clipped to the column's left edge: `DAY 00 · the jar is sealed`. 2. **The Pour.** As the reader scrolls, the ferment-clock spine draws itself down the left margin (an SVG line stroke-dashoffset reveal, slow). A passage on what *munju* is — that "cloudy" (탁, *tak*) is the whole point, that filtering it clear would be missing it. The meniscus arc appears near the top and begins, gently, to lower. 3. **The Suspension.** Short entries drift in one at a time as they enter the viewport — each fades up from Rice Water to Slate Ink while easing in from a slightly different horizontal offset (left/right alternating but never exactly mirrored). The cloud-field turbulence is densest here. One entry carries a Nanum Pen Script correction: a crossed-out word, a penciled fix above it. The ferment-clock ticks light up Nuruk Mould as the reader passes each "day." 4. **The Lees.** The column background washes a shade darker; gaps tighten; the rice-grains stop drifting and sit still. A short colophon scratched into the clay base — who keeps this log, when the jar was last opened. The single Jujube-colored word lands here. 5. **The Stillness.** Scroll ends on a near-empty viewport: the foot of the SVG onggi, one last rice grain easing the final pixel down, the meniscus arc at its lowest, everything matte and quiet. No footer. The page just... settles. **Motion principles:** - **Everything moves at fermentation speed.** Default transition durations 900ms–2400ms, easing custom cubic-beziers that *settle* rather than spring (no bounce, no overshoot — sediment does not bounce). Avoid the corpus-default spring/magnetic/cursor-follow entirely. - **Scroll-driven, not scroll-jacked.** Use `IntersectionObserver` for fade-ups and the ferment-clock ticks; use a throttled scroll listener only to lower the meniscus arc and shift the onggi silhouette's vertical position. Native scrolling, always. - **The breathing page.** A single ~6s ease-in-out loop very subtly scales the jar-column by ~0.4% and shifts the cloud-turbulence seed — the ferment "breathing." Almost subliminal. - **Respect stillness.** If the user stops scrolling for 8+ seconds, the drifting rice grains slow further and nearly halt — the ferment rests when watched, stirs when left alone. (`prefers-reduced-motion`: kill turbulence animation and drift entirely; keep only the static composition.) - **No hover-lift, no tilt-3d, no card-flip.** The one interaction: hovering the single live link draws a thin Nuruk-Mould underline that grows from left like liquid wicking into paper (an `underline-draw` done slowly, organically). **Texture craft:** - Apply a faint SVG `feTurbulence` grain over the whole page at ~3–4% opacity for the unglazed-bisque feel — but keep it static (animated grain reads as noise/glitch; this is *clay*, it doesn't shimmer). - Every "edge" — the rim ellipse, the ferment-clock spine, entry dividers — should be a hand-jittered SVG path, not a perfect CSS border. Bake in a 1–2px wobble. - No box-shadows anywhere. Depth comes from the background wash and overlap, the way it does inside an actual jar. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the corpus frequency analysis: 1. **Cool-grey-and-rice in a 98%-warm corpus.** Almost every DESIGN.md in the set leans warm + gradient. munju.club is built on chalky cool bisque-grey (`#EDE9E0`), with a single dusty sage accent — the page is, climatically, a *cellar*, not a sunset. The only gradient is a near-invisible cloud-thickening wash. 2. **The page literally is the artifact.** Rather than depicting a jar with photography (98% of the corpus uses photography — this site uses zero), the entire scroll *is* a descent into a fermenting onggi: foam at top, cloud in the middle, lees at the bottom. The vertical rhythm itself compacts as you go down, mimicking sediment settling. 3. **Fermentation-speed motion.** Where the corpus default is spring/magnetic/cursor-follow (80–89%), this site bans bounce and overshoot outright — everything *settles* over 0.9–2.4s, and the rice grains slow when watched. A "ferment-clock" measures progress in days, not a progress bar. 4. **Soft-mono instead of tech-mono, Korean serif for body.** 94% of the corpus uses mono type; this one uses *Spline Sans Mono* (rounded, humane) for marginalia only, with *Gowun Batang* — a soft Korean serif — carrying all narrative text. No terminal aesthetic anywhere. 5. **Single 540px column on a sea of ma; no cards, no grid.** 90% of the corpus uses a card-grid. munju.club has exactly one narrow drifting column and a vast empty cellar around it — broken-grid only in the gentle horizontal drift of settling entries. **Chosen seed/style:** `wabi-sabi imperfect ceramic` — *aesthetic: wabi-sabi (8% in corpus), layout: single-column + ma-negative-space + organic-flow, typography: serif-revival + soft mono, palette: cool-grays + muted (cool, anti-warm), patterns: fade-reveal + underline-draw + path-draw-svg, imagery: generative-art (SVG turbulence) + line-illustration, motifs: nature + cultural (Korean onggi/nuruk), tone: grounded-earthy + zen-contemplative.* **Avoided patterns from frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (78%), photography (98%), card-grid (90%), full-bleed hero (89%/12%), warm palette (98%), gradient palette (96%), parallax (92%), cursor-follow (89%), spring (85%), magnetic (80%), mono/tech-mono dominance (94%), tilt-3d (26%), card-flip (11%), hover-lift (12%), pastoral-romantic tone (35%). Box-shadows, CTAs, pricing blocks, and stat-grids are entirely absent.