# Design Language for mujun.day ## Aesthetics and Tone mujun.day takes its name from the Japanese word **矛盾 (mujun)** — "contradiction," literally "spear-shield," from the parable of the merchant who sold an unstoppable spear and an unbreakable shield in the same breath. The site is a **wabi-sabi ceramics studio devoted entirely to objects that disagree with themselves**: a teabowl glazed on the inside with a finish that repels the very tea it is meant to hold, a vase fired so thin it casts a shadow heavier than itself, a lidded jar whose lid is a perfect fit and therefore cannot be lifted. It is a quiet, scholarly, slightly mournful place — a kiln-yard at the blue hour, where the master walks between cooling racks and points at each piece's private impossibility. The aesthetic is **wabi-sabi imperfect ceramic, rendered with curatorial restraint and a faint undertow of paradox-melancholy.** Not the cheerful "rustic pottery" of a craft-fair stall — this is the disciplined emptiness of a tokonoma alcove holding one cracked bowl under raking light. Surfaces are matte, kiln-dusted, faintly granular. Edges are deliberately uneven the way a hand-thrown rim is uneven. Nothing is glossy, nothing glows, nothing is symmetrical on purpose. The contradiction is never loud; it is whispered, the way a hairline crack is a kind of quiet sentence the clay finishes for the potter. Tone: **zen-contemplative, but with a hairline of grief running through it** — the grief of the maker who knows the flaw is the most honest thing in the room. ## Layout Motifs and Structure The page is a **single descending column of seven kiln-shelves** — `single-column`, narrow (max 760px content well), centred in a vast dust-colored field, the way one scroll hangs in an empty alcove. There is no top navigation bar, no logo lockup, no hamburger, no footer columns, no sidebar. Navigation is **a single vertical seam of seven unfired-clay tally marks** pinned to the right margin — each a short hand-drawn vertical stroke, the kind a potter scratches into a damp shelf-edge to count the day's throws. The active shelf's tally mark is *struck through* with a single diagonal — because a tally that counts itself is its own small contradiction. On hover a thin numeral (一 二 三 …, kanji numerals) ghosts in 14px to the left and fades. - **The off-axis rule.** Every shelf's content block is nudged off the column's true centre by a small, *irrational* amount — 11px left, then 7px right, then 13px left — never zero, never repeating. The grid is real but it refuses to sit still in it. This is `ma-negative-space` used as a structural confession: the empty room is the subject, the objects are the punctuation. - **The shelf-seam.** Section boundaries are not horizontal lines. Each is a **hand-traced clay-edge** — a single SVG path with a slight sag in the middle, as if a wet shelf-board bowed under its own load. The seam is drawn (path-draw-svg) as you arrive, left to right, in 1.4s. - **One object per shelf.** Each of the seven shelves holds exactly one ceramic specimen (a centred SVG line-rendering, ~340px), one short title in kanji + romaji, and one ≤40-word "kiln-card" describing the object's specific impossibility. Never two objects. Never a grid of thumbnails. The eye is allowed to rest on one disagreement at a time. - **The kiln-cooling cadence.** Shelves do not "animate in." They **settle** — a slow 0.9s ease as if the rack just stopped vibrating from the kiln door closing. Dust motes (tiny ochre specks) drift upward across the whole field at 0.2px/frame, independent of scroll. ## Typography and Palette **Fonts (Google Fonts only — two voices, both quiet):** - **Display & object titles — `Shippori Mincho` (weights 400, 600, 800).** A modern Japanese Mincho serif with crisp brush-terminal triangles and elegant thin horizontals — it carries both the kanji (矛盾, 茶碗, 影, etc.) and the romaji titles in the same family, so Japanese and Latin sit on one breath. Set large for shelf titles (clamp 2.4rem → 3.6rem), letter-spacing 0.04em on romaji, kanji left at natural metrics. Used *only* for titles and the single 矛盾 wordmark. - **Body, kiln-cards, tally numerals — `Zen Kaku Gothic New` (weights 300, 400, 500).** A humanist Japanese sans with soft, even strokes and generous counters — calm, unhurried, never corporate. All kiln-card prose, the dust-of-the-day caption, and the kanji navigation numerals. Body at 1.05rem / line-height 1.85, weight 300, color the ink-grey below — text should read like soft pencil on rag paper, not print. **Palette — kiln-yard at blue hour, matte throughout. No gradients used as decoration; only one faint vertical wash on the field for depth.** - `#E6E0D4` — **shelf-dust** (primary background; warm pale clay-ash) - `#D8CFBE` — **bisque** (shelf blocks, slightly darker raised surface) - `#BBAE97` — **unfired-clay** (tally marks, hairlines, seam strokes) - `#3C3A33` — **kiln-ink** (body text, line-drawings' main stroke) - `#6B6456` — **ash-grey** (secondary text, captions, romaji subtitles) - `#7C5A4A` — **iron-slip** (the single accent: glaze-pooling, the struck-through tally diagonal, crack-lines) - `#9FA68F` — **celadon-ghost** (rare 6%-opacity fill inside two object drawings — the only "color" event) - `#2A2925` — **night-kiln** (used once: the final shelf's near-black field as the yard goes fully dark) ## Imagery and Motifs **No photography, no 3D renders, no stock pottery shots. Every object is a hand-built SVG line-drawing in kiln-ink stroke, 0.7–1.1px, with an *intentionally* wavering path (each curve is a hand-set bezier, never a perfect ellipse). The only fills are sub-10%-opacity celadon-ghost or iron-slip washes, used twice each, never more.** **The Seven Contradictory Vessels (one per shelf):** 1. **矛盾椀 — Mujun-wan / "The Self-Refusing Teabowl."** A `chawan` in three-quarter view, its interior glaze drawn as a faint iron-slip wash that beads — tiny repelled droplets rendered as 30+ minuscule circles huddled away from the walls. Kiln-card: the inside is hydrophobic; it is a teabowl that has taken a vow against tea. 2. **影壺 — Kage-tsubo / "The Heavy Shadow."** A tall, almost-translucent vase, its body stroke barely there (0.6px, 40% opacity) — but beneath it a dense, solid-black cast shadow at full weight, three times the visual mass of the vessel. The shadow is the real object. 3. **閉蓋 — Heigai / "The Perfect Lid."** A lidded jar where the lid-line and jar-line meet with *zero* gap — drawn as one continuous unbroken contour. A faint dashed prising-line hovers and finds no purchase. The lid fits so well it has become a wall. 4. **二口 — Futakuchi / "The Two-Mouthed Pitcher."** A water pitcher with a spout on *both* sides, mirrored — pour from one and it fills from the other. Drawn so the two halves are exact reflections; the eye cannot decide which is front. A thin celadon-ghost wash marks the water that will never leave. 5. **無底 — Mutei / "The Bottomless Cup."** A small guinomi sake cup, but where the base should be there is only the continuation of the side-walls curling inward forever — a tiny spiral drawn in 5 diminishing loops. It holds nothing and is therefore never empty. 6. **割完 — Kappan / "The Finished Crack."** A plate, whole, save for a single iron-slip hairline running rim to rim — and the kiln-card argues the crack is the *only* part the potter actually decided; the rest is just clay agreeing to surround it. The crack-line is drawn last, path-draw, 1.6s, in iron-slip. 7. **空棚 — Karadana / "The Empty Shelf."** No vessel at all. Just the shelf-edge SVG and, faint, the *ring-stains* of six bowls that were here — six pale celadon-ghost rings. The seventh stain is missing: the object that proves the shelf is a shelf is the one that isn't on it. Field goes to night-kiln here. **Recurring marks:** unfired-clay tally strokes (right margin), the bowed shelf-seam path, drifting ochre dust motes, faint ring-stains, and a single repeated 矛 (spear) / 盾 (shield) kanji pair watermarked at 4% opacity in the deep margin of shelves 1 and 7 — bracketing the whole descent with the parable itself. ## Prompts for Implementation Build mujun.day as **a single HTML page, one CSS file, one ES module — no framework, no build step, no service worker.** Treat the page as a slow 80–90 second walk down a rack of cooling pots at dusk, the master pausing at each to name its private impossibility. **There is no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no email capture, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner, no "shop now."** Nothing is for sale; these objects could not be used even if they were. **Storytelling structure (seven shelves, single descending column, kiln-cooling settle transitions):** 1. **Arrival — 矛盾 wordmark** in Shippori Mincho, large, off-centre 11px left, on the bare shelf-dust field. One line of Zen Kaku Gothic beneath: *"a studio for vessels that disagree with themselves."* The first shelf-seam draws itself below. Dust motes begin their drift. The 矛 / 盾 watermark sits faint in the right margin. 2. **Shelves 1–6 — the six contradictory vessels** in the order above. Each: shelf-seam draws on arrival → vessel SVG settles (0.9s ease, a 4px overshoot-and-relax, like a rack steadying) → kanji+romaji title fades up → kiln-card prose fades up word-grouped (stagger, 60ms between 3-word clusters). The right-margin tally gains one stroke per shelf; the current stroke is struck through in iron-slip. The off-axis nudge alternates (−11, +7, −13, +9, −7, +11 px). 3. **Shelf 7 — 空棚 / The Empty Shelf.** As the user scrolls in, the field transitions over 1.2s from shelf-dust to night-kiln (#2A2925), the ink text inverts to shelf-dust, the six ring-stains fade in one by one (200ms stagger), and the seventh stain's *absence* is annotated by a single thin iron-slip arrow pointing at empty space with the caption *"this one."* The 矛 / 盾 watermark reappears, closing the bracket. No "back to top," no footer — the page simply ends in the dark yard, the way the tour ends when the master walks back inside. **Motion vocabulary:** the *only* signature interactions are (a) **path-draw-svg** for every shelf-seam and the Kappan crack-line, and (b) the **kiln-cooling settle** — a soft spring with one small overshoot, never bouncy, never elastic. Dust motes drift continuously (requestAnimationFrame, ~0.2px/frame upward, wrapping). Hover on a tally stroke ghosts its kanji numeral. **No parallax-on-everything, no cursor-follow blob, no magnetic buttons, no tilt-3d cards, no typewriter, no counters.** Respect `prefers-reduced-motion`: keep the seam paths drawn instantly, freeze the dust, keep the night-kiln transition as a 0ms cut. Bias the whole build toward stillness — the contradictions should feel *found*, not performed. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Wabi-sabi as a vehicle for paradox, not for "cozy rustic."** The 8% of sites that touch wabi-sabi read as warm, handmade, reassuring ceramic-shop vibes. mujun.day uses the same matte clay surfaces and uneven rims to stage *logical impossibilities* — every object is a tiny self-defeating proposition. The flaw isn't charm; it's the argument. This pairs wabi-sabi's quiet with a zen-contemplative-with-grief tone rather than the dominant 34% pastoral-romantic register. 2. **Single-column + ma-negative-space as the entire layout, with an irrational off-axis nudge.** Against the 89% card-grid / 89% full-bleed / 85% centred conventions, this is a narrow 760px well in an enormous empty field, and the content *won't sit centred* — it drifts by non-repeating pixel amounts shelf to shelf. The emptiness is the composition; the objects are punctuation in it. 3. **Bilingual single-family typography (Shippori Mincho carries both kanji and romaji), and a near-zero motion budget.** No mono font (against the 94% mono convention), no handwritten display — just one Mincho serif and one Zen humanist sans, both quiet. Motion is restricted to path-draw seams + a single non-bouncy "kiln-cooling settle" + drifting dust. No parallax-everything, no cursor-follow, no magnetic, no tilt-3d, no typewriter — deliberately abstaining from the 92% parallax / 89% cursor-follow / 85% spring / 80% magnetic cluster. 4. **The seventh shelf is empty on purpose** — the page ends in darkness with the object-that-proves-the-shelf-is-a-shelf being the one that isn't there. A closing absence instead of a CTA or footer. **Chosen seed/style:** `wabi-sabi imperfect ceramic` *(aesthetic: wabi-sabi, layout: single-column + ma-negative-space, typography: serif-revival + humanist, palette: muted / honeyed-neutral, patterns: path-draw-svg + spring (restrained), imagery: line-illustration, motifs: cultural / leaf-organic→clay-organic, tone: zen-contemplative)* **Avoided patterns from frequency analysis:** hand-drawn-as-cute (96%), glassmorphism (77%), card-grid (89%), full-bleed (89%), centred-rigid (85%), photography (98%), warm-saturated gradients-as-decor (96%/98%), mono typography (94%), parallax (92%), cursor-follow (89%), spring-bouncy (85%), magnetic (80%), stagger-everything (73%), pastoral-romantic tone (34%). Leaned into: wabi-sabi (8%), zen-contemplative (10%), ma-negative-space (13%), single-column (17%), line-illustration (9%), cultural motifs (4%), serif-revival (10%).