# Design Language for mujun.cafe ## Aesthetics and Tone mujun.cafe is **a cafe built around a 2,300-year-old contradiction, served on cracked ceramic**. "矛盾" (*mujun*, 모순) is the Han Feizi parable: a street merchant hawks a spear that pierces any shield, and a shield no spear can pierce — until a bystander asks what happens when the spear meets the shield, and the merchant has no answer. This cafe took the merchant's stall, kept the spear and the shield, and turned the unanswerable question into a coffee menu. The whole site is the inside of that stall the morning after: a low, dim room where two impossible objects lean against the wall, and every surface — the counter, the saucers, the handwritten card propped against the till — bears a sentence that argues with itself and a price underneath it. The visual register is **wabi-sabi imperfect ceramic** — but not the calm, Pinterest-spa version. This is wabi-sabi as *held tension*: the beauty of the chip in the rim, the glaze that pooled wrong and was kept anyway, the kintsugi seam that makes the break louder instead of hiding it. Nothing on this page is symmetrical, nothing is perfectly aligned, and the imperfections are not decorative noise — they are the *argument*. A bowl that is both whole and broken. A page that is both finished and unfinished. The tone is **zen-contemplative laid over a faint, dry unease** — the serenity of a tea room where someone has just asked a question nobody can answer, and everyone is sitting with it instead of leaving. This is **not** a hand-drawn site (96% of the corpus is — we refuse), **not** glassmorphic (77% — we refuse), uses **no photography** (98% — we refuse), and uses **no monospace** (94% — we refuse). The cafe does not want to look like every other cafe. It wants to look like a contradiction you could drink. ## Layout Motifs and Structure The page is **two columns that disagree about where the center is** — a "spear column" and a "shield column" that share a seam down the page, and the seam is never straight: it wanders left and right like a kintsugi crack, sometimes the spear side is 58% wide, sometimes 41%, depending on which paradox is being told. On viewports below 860px the two columns *collapse into one*, but the collapse is the point — the spear text and the shield text interleave line by line, so the contradiction is read as a single stuttering voice. **The grille — broken-grid, deliberately.** Underneath everything is a 9-column grid with a 1.618 vertical rhythm, but it is treated as a *suggestion the ceramic ignored*. Cards (menu items, paradox statements, the merchant's notes) snap to the grid on two edges and overshoot it on the other two by 4–22px, the way a thrown bowl never sits true. No two cards share an exact width. The outer margin is asymmetric: 7vw on the left, 11vw on the right, because the stall was wedged against a wall. **Vertical structure (single-page, slow scroll):** 1. **The Stall** — full-viewport opening. Near-black room. Two large objects lean from opposite corners toward a point that never quite meets: a thin vertical form (the spear, a 2px hairline that thickens and thins like a brushstroke) and a wide curved form (the shield, an off-round arc with a chipped edge). Between them, hung in the air, the word **矛盾** in heavy serif, with **mujun.cafe** set small beneath it on a card that is visibly not level. 2. **The Question** — the bystander's line, large, set across the wandering seam: *"What happens when your spear meets your shield?"* The seam-crack visibly *deepens* here. 3. **The Menu of Contradictions** — 6–8 ceramic "saucers" arranged in a loose, off-kilter scatter (not a grid, not a list — a counter someone walked away from). Each saucer holds one drink whose name is a paradox: *The Quiet Riot* (cold brew + chili), *Burnt Snow* (charcoal latte, no sugar that tastes sweet), *The Honest Lie* (decaf that wakes you up — placebo, the card admits it). Each saucer has a real chip, a real glaze-pool, a real hairline crack rendered in SVG. 4. **The Merchant's Notes** — a stack of leaning index cards, each with a self-defeating sentence in the merchant's hand: *"We open when we're closed."* *"Everything here is the same; nothing is."* 5. **The Seam (footer)** — the kintsugi crack reaches the bottom of the page and is *filled with gold*. Hours, address, the parable's source (Han Feizi, c. 280 BCE) set in the gold seam itself. **Forbidden here:** card-grid uniformity, full-bleed hero photos, stat-grids, pricing tables, CTA bands. The menu prices exist but are whispered — small, italic, almost ashamed to be there. ## Typography and Palette **Type stack — Google Fonts only, all verified available:** - **Spectral** (weights 200, 300, 400, 500, 600; italics) — the workhorse serif. Spectral is a Google screen-serif with low contrast and a quiet, ceramic-matte texture; it does the long contemplative passages and the menu cards. Body at 18–19px, 1.7 line-height, color #2A2622 on the pale clay. Set the self-contradicting sentences in Spectral *Light Italic* so they read like something murmured. - **Noto Serif KR** (weights 300, 500, 700) — for all Hangul (모순) and the standalone glyph **矛盾** at display size. Noto Serif KR has the brush-derived stroke modulation we want; at 200px+ it reads like ink on unglazed clay. This is the only face allowed to be *heavy*. - **Cormorant** (weights 300, 500; italic) — used once, very large, for the bystander's question in §2. Cormorant's extreme thin-to-thick contrast and long extenders make the question feel like it's about to snap — appropriate for the line that breaks the merchant. - **Sometype Mono is explicitly NOT used.** The prices and the timestamp use **Spectral** small-caps tracked +0.14em instead — refusing the corpus default. Pairing rhythm: display = Noto Serif KR heavy, sub-display = Cormorant thin, body = Spectral regular, accents = Spectral light italic. Three serifs, no sans, no mono — a contradiction the page is comfortable holding. **Palette — "unglazed clay & kintsugi gold", 6 colors:** - `#1C1A17` — **Kiln Dark.** The opening room, the deepest shadow. Almost black, warm-biased. - `#E7DECE` — **Raw Clay.** The dominant page surface — the color of greenware before firing, slightly uneven (we'll fake the unevenness with a faint multiply-noise mask, not a photo). - `#C9BBA0` — **Ash Glaze.** Mid-tone for card bodies, saucer fills, the shield form. - `#7C6F5C` — **Slip.** Text on dark, borders, the spear's brushstroke at its thickest. - `#2A2622` — **Iron Oxide.** Primary body text on clay — never pure black, the color of iron-rich slip after reduction firing. - `#B68A3E` — **Kintsugi Gold.** Used *only* in the cracks: the wandering seam, the saucer hairlines on hover, the footer fill. It is the contradiction made visible — the break that became the most valuable part. Never used for buttons or links. A single forbidden accent: `#8A2B22` — **Sealing-wax Red** — appears exactly once, on the merchant's stamp in §4, and nowhere else. ## Imagery and Motifs **No photographs. No icon fonts. No stock vector packs. No 3D renders.** Every visual element is built from SVG paths and CSS, the way every object in the stall is hand-thrown — and the "imperfection" is generated, not faked with a texture JPEG. - **The spear and the shield** — two hero SVG forms. The spear is a single open path, 2px stroke, whose width is modulated along its length via a tapered stroke (variable-width path or a filled sliver shape) so it reads as a loaded brush dragged once. The shield is a closed path that is *almost* an ellipse but deliberately wrong on the lower-left — and it has a `` notch cut out of the rim (the chip). They lean toward each other across the whole opening and stop ~40px short of touching. Forever. - **The kintsugi seam** — a single hand-drawn-feeling SVG path running the full height of the page between the two columns, ~1.5px, color Slip, that *splits open* into a gold-filled lenticular shape (2–9px wide) at the §2 question and again in the footer. Implemented with `stroke-dasharray` for the hairline portions and a separate gold `` for the filled portions; animated open with `path-draw-svg` (the seam *draws itself* downward as you scroll — the only scroll-driven effect, see below). - **The saucers** — each is a stack of 3 SVG ellipses (rim shadow, glaze, well) that are intentionally non-concentric (offsets of 2–6px), plus one `clipPath`-defined chip on the rim and one bezier "glaze pool" blob filled a half-shade darker than the saucer. On hover, a thin gold crack (a short SVG path) *appears* across the saucer — the wabi-sabi reveal: the flaw makes it lovable. - **The merchant's cards** — leaning rectangles with a 1px Slip border whose corners are rounded *unequally* (border-radius: 2px 9px 1px 6px), drop-shadow soft and offset toward the right (the wall is on the left). - **The clay texture** — a fixed full-page `::before` with a subtle SVG `feTurbulence` fractal-noise mask at ~3% opacity in multiply mode, giving the Raw Clay surface a faint unfired grain. This is the *only* texture. No paper, no marble, no grunge brushes. - **Recurring motif:** every contradiction sentence on the page is bracketed by **two tiny marks** — a `丨` (the spear) before it and a `⌒` (the shield) after it — set in Slip at 0.6em. They never touch the words; there's always a gap. ## Prompts for Implementation Build mujun.cafe as **one `index.html`, one `style.css`, one ES module `mujun.js`** — no framework, no build step, no fetch, no service worker. Target under 70KB uncompressed. Everything is hand-thrown; the code should feel hand-thrown too. **Storytelling timeline — first paint to rest:** - **0.00s** — Kiln Dark fills the screen. Nothing else. Hold it; a cafe at 6am is dark. - **0.4s** — the spear path *draws itself* from the bottom-left corner upward (`path-draw-svg`, ~1.1s, ease-out) — a single brushstroke loading. Simultaneously the shield path draws from the bottom-right, slower (~1.4s), its chip-notch appearing last. - **1.5s** — they've stopped, 40px apart. The word **矛盾** fades up in the gap (Noto Serif KR, ~220px desktop), opacity 0→1 over 600ms, no movement — it just *resolves*, like steam clearing. - **2.3s** — the `mujun.cafe` card fades in below, tilted −2.4deg, never corrected. - **2.6s** — a faint instruction in Slip, lower edge: *"scroll — but it won't resolve."* - **On scroll** — the page transitions from Kiln Dark to Raw Clay over the first 90vh (background-color interpolated via scroll progress, not a gradient image). The kintsugi seam *draws itself downward* tracking scroll position — `stroke-dashoffset` mapped to scroll, the *only* scroll-coupled animation. At §2 the seam visibly widens into gold; at the footer it pools. - **Reveals** — menu saucers and merchant cards use a quiet `fade-reveal` with a tiny `stagger` (60ms) and *no* slide, *no* spring, *no* bounce — they appear the way a bowl appears when you turn on the kiln-room light. `prefers-reduced-motion`: everything is already in place, the seam is fully drawn, nothing animates. **Interactions — restrained, ceramic:** - **Saucer hover:** the gold hairline crack draws across in ~400ms, the price (Spectral small-caps) un-italicizes and darkens slightly. On leave, the crack stays *half-drawn* — the flaw doesn't fully heal. (It re-fades after 3s.) - **NO cursor-follow halo, NO magnetic buttons, NO 3D tilt** — these are 89/80/26% of the corpus and we refuse all three. The mouse is just a mouse here. - **The contradiction sentences** are clickable: clicking one swaps it for its *inverse* with a 300ms cross-fade (e.g. *"We open when we're closed"* ⇄ *"We close when we're open"*) — the page never settles on which is true. - **Footer:** hours, address, and `Han Fe// Han Feizi · c. 280 BCE` set *inside* the gold kintsugi pool in Iron Oxide; the gold has a barely-perceptible CSS `filter: brightness()` shimmer on a 6s loop — the one luxurious gesture. **Hard avoids:** no CTA band, no "Order now" hero button, no pricing table, no stat counters, no testimonial carousel, no newsletter modal, no hamburger-revealed mega-nav (nav is four words along the top edge, set in Spectral small-caps, no box around them). The page sells nothing aggressively. It poses a question and lets you sit with it — and there happens to be coffee. ## Uniqueness Notes Differentiators from the other designs in the registry and from the seed's defaults: 1. **Wabi-sabi as conceptual argument, not spa mood.** Wabi-sabi appears in only ~8% of the corpus, and where it does it reads as "calm beige ceramic vibes." mujun.cafe weaponizes the *imperfection* — the chip, the kintsugi seam, the half-healed crack — to *be* the brand's contradiction (whole/broken, finished/unfinished). The flaws carry meaning; they're not texture. 2. **Three serifs, zero sans, zero mono — against a 94%-mono corpus.** Spectral + Noto Serif KR + Cormorant, with prices set in tracked Spectral small-caps specifically to refuse the monospace default. Almost nothing in the corpus runs a serif-only stack. 3. **The two-column "spear vs shield" seam that never aligns.** A wandering kintsugi crack as the page's structural spine, with column widths that *change per paradox* — broken-grid (only ~5% of corpus) used literally, as the geometry of an unresolvable argument. 4. **No photography, no hand-drawn illustration, no glassmorphism — three corpus near-universals (98% / 96% / 77%) all refused at once.** Every visual is generated SVG + CSS noise; the "handmade" quality comes from deliberately wrong geometry, not from a brush-pen aesthetic. 5. **One scroll-coupled animation, on principle.** Where 92% of the corpus leans on parallax and 89% on cursor-follow, this page allows exactly one motion tied to scroll — the seam drawing itself — and bans magnetic, spring, 3D-tilt, and cursor halos entirely. Stillness is the aesthetic. 6. **A cafe site that refuses to sell.** No CTA, no order button, no pricing block, no stat grid — the menu items are paradoxes with whispered, italic, half-ashamed prices. The conversion goal is replaced with a question from Han Feizi. Chosen seed / style (no Planned Seed was supplied in the assignment; selected from `seeds.json` as an underused option): **"wabi-sabi imperfect ceramic"** — *aesthetic: wabi-sabi, layout: broken-grid, typography: elegant-serif (serif-revival), palette: warm-earthy / honeyed-neutral, patterns: path-draw-svg + fade-reveal, imagery: generative-art (SVG) + noise-texture, motifs: crystalline → ceramic / marble-classical reframed, tone: zen-contemplative.* Avoided patterns flagged by frequency analysis: hand-drawn (96%), glassmorphism (77%), photography (98%), mono typography (94%), card-grid (89%), full-bleed (89%), parallax (92%), cursor-follow (89%), spring (85%), magnetic (80%), tilt-3d (26%) — none used. Underused patterns leaned into: wabi-sabi (8%), broken-grid (5%), serif-only stacks (rare), noise-texture (4%), path-draw-svg (37%, used minimally).