# Design Language for munju.org ## Aesthetics and Tone munju.org is **a wabi-sabi reading-room glazed in the colour of cooling tea** — picture a small nonprofit literary archive that lives inside a single hand-thrown bowl. The name *munju* (문주, "the gate of letters") is treated literally: the site is the threshold one steps through to enter a quiet library of fragments, marginalia, and unfinished sentences. The governing aesthetic is **wabi-sabi imperfect ceramic** — surfaces that look kiln-fired rather than printed, edges that wobble by a hair, glazes that pool darker in the low spots — fused with a **zen-contemplative** tone borrowed from a tea master who keeps notes in pencil. Nothing here shouts. There are no calls to action, no pricing, no statistics counting up. The mood is the half-second of stillness after a kettle is taken off the heat: warm, slightly hazy, faintly fragrant. Every screen should feel like it was *fired once and accepted as it came out* — the crackle in the glaze is the design, not a flaw to be sanded away. Colour is muted and earthen; motion is slow and slightly viscous, like glaze settling. The site is for people who treat reading as a ceremony, and it should make a visitor lower their voice. Crucially, this is **not** the corpus's usual hand-drawn-and-glassmorphism default (96% / 78%), and it is not warm-gradient pastoral-romantic (98% warm, 35% pastoral). It is *ceramic* warmth — opaque, matte, granular — closer to unglazed stoneware than to a sunset gradient. ## Layout Motifs and Structure The page is composed as **ma-negative-space stacked on a single asymmetric column** (ma-negative-space sits at only 14% in the layout frequency analysis; this site claims that quiet room). Imagine looking down into a tall cylindrical vessel: content sits in a narrow off-centre well — roughly 52ch wide, pushed about 8vw to the right of true centre — and the remaining space is left deliberately, almost provocatively, empty. The emptiness is load-bearing. - **The vessel column.** All running text lives in one column with a soft, irregular left edge: each paragraph block is nudged 0–14px horizontally by a seeded pseudo-random value, so the column "throws" like a wheel-formed pot rather than aligning to a ruler. The wobble is sub-perceptual per line but visible as a gentle drift over a long passage. - **Glaze-pool sections.** Section breaks are not horizontal rules — they are *pools*: a wide, very soft radial darkening of the background (a single `radial-gradient` ellipse, ~140vw wide, blurred) that sits behind the transition, as if glaze ran thick and dried darker there. Six pools across the whole document, each a slightly different earthen hue. - **The kiln-shelf footer.** The bottom of the page is a single horizontal band the colour of fired brick, holding nothing but the wordmark "문주 · munju" pressed in like a maker's stamp, and a one-line colophon. - **Marginalia rail.** On viewports wider than 1100px, a thin rail in the left negative space holds occasional pencil-grey annotations (dates, half-thoughts, a single kanji) that scroll at 0.85× the main speed — slower, like they're written on a deeper layer of the page. - **No grid, no cards.** Card-grid is at 90% in the corpus; this site has zero cards. Everything is either flowing text or a full-bleed glaze field. ## Typography and Palette **Fonts (Google Fonts only — three voices, kept distinct, never blended):** - **Body & long-form — *Spectral* (serif, weights 300 / 400, italic 300)** — a slightly mineral, low-contrast serif that holds up at small sizes and reads like ink that has soaked half a millimetre into soft paper. Set at 19px / 1.85 line-height, colour `#3A332B`, with `text-rendering: optimizeLegibility` and a faint `0.01em` letter-spacing so the column breathes. Italic Spectral 300 is reserved for quoted fragments. - **Display & wordmark — *Cormorant Garamond* (weight 500, and 600 italic)** — used only for the site title, the six section names, and pull-quotes. Large (clamp 2.4rem → 4.6rem), letter-spacing tightened to `-0.01em`, set in the deep glaze tone `#2B2620`. Cormorant's thin, almost calligraphic strokes read like a brush lifted at the end of a character — the "lettered gate" made visible. - **Annotations & colophon — *Noto Sans KR* (weight 300)** — a calm, even-weight sans for the marginalia rail, the Korean wordmark "문주", and the kiln-shelf colophon. Tiny (12–13px), `#857A6A`, generous letter-spacing `0.06em`. It is the pencil to Spectral's ink. **Palette — "cooling tea & unglazed stoneware" (muted, earthen, opaque — no neon, no bright gradients):** - `#EDE6D8` — *raw clay* — the dominant background; the colour of unfired porcelain slip. - `#E2D6BF` — *bisque* — a slightly warmer field used inside glaze pools' lighter zones. - `#C9B79A` — *wheat ash* — for soft dividers, the marginalia rail tint, and hover underlines. - `#A9794F` — *tea-stain* — mid accent; the colour steeped tea leaves on a white cup, used for links and small ornaments. - `#7B4A2E` — *kiln brick* — the footer band and the deepest glaze-pool centres. - `#3A332B` — *soot ink* — body text. - `#2B2620` — *fired iron* — display type and the darkest accents. - `#857A6A` — *pencil grey* — annotations, captions, the colophon. Use is overwhelmingly the three lightest tones; the dark earths appear only in type and pool centres, so the page stays the colour of tea with milk, never coffee. ## Imagery and Motifs **No photography, no stock illustration, no 3D renders. Every visual element is SVG or CSS, hand-built to look ceramic.** (Photography sits at 98% in the imagery frequency analysis — this site uses none of it.) - **The crackle glaze.** A site-wide, very faint overlay: a hand-authored SVG of fine *craquelure* lines (irregular polygonal cells, 1px hairlines in `#857A6A` at 6–9% opacity), tiled at large scale and given a subtle `feTurbulence` displacement so no two screen-fulls of crackle look the same. This is the single most important texture; it sits above the background, below the text. - **The maker's stamp.** A small square SVG seal — the character 文 ("letters/writing") cut into a stylised chop — appears stamped at the page top-left, again on the kiln-shelf footer, and faintly (4% opacity) behind one glaze pool. Its corners are deliberately uneven. - **Glaze drips.** At the foot of each section, two or three thin vertical "runs" of slightly darker tone bleed downward 30–80px and fade — a CSS `linear-gradient` mask, edges feathered, lengths randomised per drip. They suggest glaze that ran before it set. - **Pressed-leaf ornaments.** Between major fragments, a single tiny SVG of a pressed ginkgo or tea leaf — flat, two-tone (`#A9794F` over `#C9B79A`), rotated at an odd angle — sits in the negative space like something left between pages. Sparse: no more than four in the whole document. - **The throwing-rings background motif.** Very subtle concentric arcs (not full circles) emanating from the off-centre column axis, drawn at 3–4% opacity, evoking the spiral grooves a potter's fingers leave inside a bowl. They only become visible during the slow scroll, as a faint moiré. - **No icons in the UI sense.** No hamburger, no chevrons, no social glyphs. Navigation, where it exists, is a word. ## Prompts for Implementation Build munju.org as **one HTML file, one CSS file, one small JS module — a single vertically-scrolled "reading vessel" that takes about 90 seconds to descend.** It is an ambient literary experience, not a product page. Forbidden, explicitly: CTA buttons, pricing tiers, stat counters, testimonial rows, feature grids, signup forms, hero-with-button layouts. **Narrative structure (six fragments, descending the vessel, separated by glaze pools):** 1. **The Gate (문주).** Full-bleed raw-clay field. The wordmark "문주" in Noto Sans KR fades up first, then "munju" beneath it in Cormorant Garamond, then a single line of Spectral italic: *"a small archive of unfinished sentences."* The maker's stamp presses in at top-left. The crackle overlay is already there from the first frame. A faint, slow "settle" of the whole composition (a 1.2s ease that nudges everything down 6px and stops) — like the page just came off the wheel. 2. **What This Is.** Three short Spectral paragraphs in the vessel column, drifting left-right by their seeded offsets. First glaze pool darkens behind the transition into it. A pencil-grey annotation appears in the left rail: a date and the word "始" (begin). 3. **The Fragments.** The core: a sequence of 5–7 short literary fragments — a sentence, a half-paragraph, a single quoted line in Spectral italic — each preceded by a pressed-leaf ornament and a small Cormorant numeral. They reveal with a slow **fade-reveal + a 0.6s blur-focus** (text resolves from 4px blur to sharp, as if surfacing through glaze), staggered ~120ms within a fragment. The throwing-rings background motif is faintly visible here. 4. **On Keeping Things Unfinished.** A wide pull-quote in large Cormorant 600 italic, set in fired-iron, sitting almost alone in negative space, flanked by glaze drips. The biggest single use of the dark palette. 5. **How to Read Here.** A short, calm passage on how the archive works — plain Spectral, no UI. If any links exist (to other fragments), they are inline words with a `wheat-ash` underline that draws in on hover via a slow `underline-draw` (no magnetic cursor, no tilt — those sit at 80% / 26% in the corpus and are deliberately refused). 6. **Colophon — the Kiln Shelf.** The page bottoms out on the `#7B4A2E` kiln-brick band. The maker's stamp again, the line "문주 · munju — kept by hand," typeface credits, year, and a single Spectral italic sign-off. Nothing scrolls past it. **Motion & interaction rules:** - **Everything is slow and slightly viscous.** Default transition `cubic-bezier(0.22, 0.61, 0.36, 1)`, durations 0.6–1.2s. No springs, no elastic, no bounce. - **Scroll is the only real interaction.** Use IntersectionObserver for fade-reveal / blur-focus on each fragment. The marginalia rail and throwing-rings parallax at 0.85× and ~0.94× respectively — gentle, never showy. - **The crackle has a life.** Once, very subtly, a single new craquelure line "appears" (a path with `stroke-dashoffset` animating to 0 over 8s) somewhere off to the side, as if the glaze is still cooling. Easy to miss; that's the point. - **Cursor is plain.** No custom cursor, no follower dot, no magnetic targets. The site respects `prefers-reduced-motion` by dropping all parallax and blur-resolves to instant fades. - **Typography animates only by opacity and blur**, never by sliding in from offscreen — letters surface, they don't fly. **Build notes:** generate the column's per-block horizontal offsets and the glaze-drip lengths from a single fixed seed at load so the "imperfection" is stable across reloads (a thrown pot doesn't reshape itself). Keep the whole thing under three files. The success test: a stranger should scroll the page once and feel like they were handed a warm cup. ## Uniqueness Notes Deliberate departures from the patterns documented in the frequency analysis: 1. **Ceramic, not gradient, warmth.** The corpus is 98% warm + 96% gradient; munju.org is warm via *opaque, matte, granular* earthen tones with **zero bright gradients** — the only gradients used are blurred, near-monochrome radial "glaze pools." Wabi-sabi sits at just 8% in the aesthetic frequency, and the imperfect-ceramic reading of it (craquelure overlay, wheel-thrown column wobble, glaze drips) appears nowhere else in the corpus. 2. **ma-negative-space as the whole layout.** Against 90% card-grid and 89% full-bleed, this site has **no cards at all** and a single off-centre 52ch column where emptiness is the dominant element. ma-negative-space is only 14% in the corpus, and a "looking-down-into-a-vessel" composition with seeded per-paragraph drift is unique here. 3. **Refusing the motion clichés.** No cursor-follow (89%), no magnetic targets (80%), no spring (85%), no tilt-3d (26%). Motion is restricted to slow opacity + blur-focus "surfacing" and gentle 0.85× parallax — a contemplative motion vocabulary deliberately at odds with the corpus's reactive-everything default. 4. **No photography (corpus: 98%), no UI icons, no CTA/pricing/stat blocks at all** — a pure ambient literary-archive experience. 5. **Type as ink-and-pencil, not mono.** Mono sits at 94% in the typography frequency; munju.org uses none — a Spectral / Cormorant Garamond / Noto Sans KR trio chosen to read like ink soaked into soft paper with pencil in the margins. Chosen seed: **wabi-sabi imperfect ceramic** — *aesthetic: wabi-sabi, layout: ma-negative-space, typography: serif-revival, palette: warm-earthy, patterns: blur-focus, imagery: noise-texture, motifs: leaf-organic, tone: zen-contemplative*. Avoided patterns from the frequency analysis: hand-drawn (96%), glassmorphism (78%), photography (98%), card-grid (90%), full-bleed (89%), cursor-follow (89%), magnetic (80%), spring (85%), mono (94%), warm-gradient (96%/98%).