# Design Language for mujun.work ## Aesthetics and Tone **mujun.work** is named for 矛盾 — *mujun*, the "spear-shield," the 2,200-year-old Chinese parable of the merchant who hawked a spear that could pierce any shield and, in the same breath, a shield no spear could pierce. The site is a **surreal dreamscape that lives inside that impossible sales pitch** — a slow, hypnotic, slightly uneasy walk through a marketplace stall where the two objects float, refuse each other, and quietly break the laws of the page they're drawn on. The tone is **dreamy-ethereal with a thread of unease** — not nightmare, not whimsy, but the specific hush of a lucid dream where you *notice* that the perspective is wrong and choose not to wake up. Think René Magritte's daylight rooms with one object too large; Giorgio de Chirico's empty arcaded plazas at 4 p.m.; the cool, evenly-lit "impossible object" engravings of M.C. Escher; the floating stones of a Remedios Varo interior. The mood is patient and a little ceremonial — a paradox presented as a museum demonstration rather than a joke. Nothing flashes. Nothing sells. The contradiction simply *persists*, and you are invited to watch it not resolve. The whole experience is built around a single editorial conceit: **this is the merchant's stall, and you are the bystander who asked "what happens if I throw your spear at your shield?"** The site never answers. It only shows you, again and again, the two objects in the same frame, each one canceling the other's claim, suspended in a sky that is neither morning nor evening. ## Layout Motifs and Structure The site is a **single vertical fall through nine "plates"** — the word is deliberate, as in the plates of an old illustrated treatise on optics or rhetoric. There is **no card-grid, no bento-box, no dashboard, no hero-with-CTA**. Each plate is a full-bleed surreal tableau that occupies 100vh, and the scroll between them is the *only* interaction the visitor needs. - **The Horizon Rail.** A single hairline runs horizontally across every plate at exactly 58% viewport height — the painted horizon of a de Chirico plaza. Objects sit on it, hover above it, or sink below it, but the line itself never moves between plates. It is the one constant in a site where everything else contradicts itself. The current plate number (一 / 二 / 三 …, kanji numerals) rides this rail at the far right, very small, in thin ink. - **Impossible-perspective composition.** Plates use a *deliberately broken* axonometric grid: floor tiles that recede toward two different vanishing points at once, an arcade whose far columns are taller than its near ones, a doorway you can see both the front and back of. This is the **broken-grid** layout taken literally — the grid is the subject, and the grid is wrong. - **The Spear and the Shield as recurring anchors.** A long iron spear (rendered as a single 4px SVG stroke with a leaf-blade head) and a round lacquered shield (a flat disc with a bronze boss) appear on nearly every plate, but never in a stable relationship: in one plate the spear passes *through* the shield and emerges unbent; in the next the shield is whole and the spear lies snapped on the tiles; in another both are true at once, the spear simultaneously embedded and the shield simultaneously unbroken, drawn as two overlapping ghost-layers at 60% opacity. - **Negative space as the merchant's silence.** Roughly 65% of every plate is empty plaza — pale, evenly lit, casting long flat shadows. Text is set in narrow measure (max 38ch) and placed off-center, the way a single figure stands in a Magritte field. **ma-negative-space** is doing the emotional work; the void is the merchant declining to explain. - No top navigation bar, no hamburger, no logo lockup, no footer with links, no sidebar. A scroll-progress sliver on the left edge is drawn as a *falling* spear — its blade-tip is the progress indicator, descending the page as you read. ## Typography and Palette **Type system — Google Fonts only:** - **Display / plate titles:** `Cormorant Garamond` (weights 300 and 500, plus italic). A high-contrast Renaissance-revival serif whose thin strokes nearly vanish — chosen because it reads like the engraved caption under an old anatomical or rhetorical plate, and because its fragile hairlines *look like they might be pierced*. Titles set large (clamp 2.6rem → 5.5rem), letter-spacing `0.01em`, often broken across two lines with the contradiction split between them ("a spear that pierces / every shield"). - **Body / running text:** `Spectral` (weights 300 and 400, with italic for asides). A screen-built serif with a calm, slightly literary texture — used for the merchant's patter and the bystander's questions. Line-height a generous `1.85`, measure capped at 38ch. - **Micro-labels, plate numerals, captions:** `IBM Plex Mono` (weight 400, sometimes 300). A humanist monospace used *sparingly* — for the kanji-numbered plate markers, the tiny "PLATE 矛 / PLATE 盾" tags, and the one-line footnotes that contradict the caption above them. Uppercase, letter-spacing `0.18em`, size 0.7rem. **Palette — a Magritte daylight that has gone slightly metallic:** - `#E7E2D6` — *plaza limestone*, the dominant background; a warm pale stone, the color of an empty de Chirico square at noon. - `#1C1B19` — *iron ink*, near-black with a brown undertone, used for the spear, all body text, and the hairline horizon. - `#9C1F12` — *lacquer crimson*, the shield's lacquered face and the single accent that marks the word "矛盾" wherever it appears; deep, oxblood, theatrical. - `#C3853A` — *bronze boss*, a muted antique-gold for the shield's central stud, the spear's binding rings, and hover underlines. - `#7E8B86` — *sage shadow*, a desaturated grey-green used only for the long cast shadows and the impossible second vanishing-point lines; it makes the light feel artificial. - `#F4F1E8` — *paper highlight*, the lightest tint, for the off-white "page" that the surreal scene is painted on, and for text reversed out of dark plates. - `#3A4A52` — *dusk slate*, reserved for the two or three plates that tip toward evening — the same plaza, later, the contradiction unchanged. Contrast pairings are always iron-ink on plaza-limestone, or paper-highlight on dusk-slate; crimson and bronze are *spot* colors only, never large fields. ## Imagery and Motifs Everything is **flat vector illustration in the manner of an antique engraved plate** — no photography, no 3D render, no gradient-mesh blobs. Line weights are deliberate and few (0.75px, 2px, 4px). Fills are flat or finely cross-hatched (CSS-generated repeating-linear-gradient hatching at 6px intervals). - **Plate 一 — The Stall.** A wooden market stall under a striped awning, drawn in clean axonometric, but the awning's stripes recede toward a vanishing point *behind the viewer*. The spear and shield rest crossed on the counter. The merchant is present only as a long flat shadow stretching across the tiles toward you — he is never drawn. - **Plate 二 — "矛" (The Spear's Claim).** The spear floats vertically, dead center, enormous, its leaf-blade catching a single highlight. Below it, a row of seven small shields, each already pierced clean through, hangs like trophies on a wire. - **Plate 三 — "盾" (The Shield's Claim).** The lacquered shield floats, equally enormous; around it a fan of broken spear-shafts arranged like rays of a sun. The shield is mirror-smooth — we render a faint reflected sliver of the plaza on its lacquer. - **Plate 四 — The Question.** Empty plaza. A single small figure-shadow (the bystander's) on the limestone. One line of text. The spear and shield are tiny, far away, almost touching at the horizon line. This is the plate that does the breathing. - **Plate 五 — The Collision (both-true).** The spear and shield occupy the same space, drawn as two overlapping translucent ghost-layers: in one ghost the spear has driven through; in the other the shield is unmarred. Where the layers cross, a moiré of fine hatching shimmers. A faint vibration animation (sub-pixel, 0.4Hz) makes the eye unable to settle on which one is "real." - **Plate 六 — The Escher Doorway.** An arcade of columns that grows *taller* as it recedes; through the farthest, smallest-yet-tallest arch, you glimpse the stall from Plate 一 again. Recursion. The treatise eats its own tail. - **Plate 七 — Inventory of Impossible Objects.** A quiet "specimen shelf": a Penrose triangle forged in iron, a Möbius spear-shaft, a shield whose front and back are the same surface — each a small SVG figure with a hand-lettered Cormorant caption that contradicts the one beside it. - **Plate 八 — Dusk.** The same plaza in dusk-slate. The spear and shield are gone from the counter. Their two shadows remain, still crossed. Caption, in Plex Mono: "the demonstration continues without them." - **Plate 九 — Colophon-as-Paradox.** A closing plate that functions as the "about/contact" without being one: the site describes itself in two sentences that cannot both be true, set in italic Spectral, with the 矛盾 glyph rendered large in lacquer-crimson and a single bronze hairline beneath it. A mailto link is hidden inside the brushstroke of the 矛 radical — discoverable, never advertised. **Recurring decorative motifs:** the hairline horizon (every plate); long, hard-edged sage shadows; kanji numerals 一–九 as the only counters; fine CSS cross-hatching for "engraved" fills; the ghost-layer double-exposure wherever a contradiction is shown literally; and small ✕-shaped marks (the spear-shield cross) used in place of bullets, dividers, and the scroll-progress tip. ## Prompts for Implementation Build mujun.work as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker. It is a roughly 90-second fall through nine engraved plates of a surreal marketplace where a paradox refuses to resolve. There is **no CTA, no pricing block, no stats grid, no testimonials, no logo wall, no newsletter signup, no FAQ accordion, no contact form, no cookie banner, no chatbot**. The hidden mailto in Plate 九 is the entire conversion surface and it is meant to be *found*, not clicked-through. **Storytelling structure (nine plates, vertical scroll-snap, slow):** 1. Use `scroll-snap-type: y proximity` on the container so each plate softly catches the viewport but the reader can still drift. Each plate is `min-height: 100vh`, `display: grid`, with the content placed on a deliberately uneven 12-column grid (e.g. text in columns 7–10 on one plate, 2–5 on the next — never centered, never symmetric). 2. **The Horizon Rail** is a single `1px` `#1C1B19` line, `position: sticky`-feeling but actually re-drawn identically inside every plate at `top: 58%`, so it appears continuous as you scroll. The kanji plate-numeral rides its right end. 3. **The falling-spear progress bar:** fixed to the left edge, a 2px vertical `#1C1B19` line whose height tracks `scrollProgress`; its bottom cap is a tiny SVG leaf-blade rotated point-down. As you scroll, the spear "falls." 4. **Entrances:** plate contents fade and drift in on a slow, almost-too-slow cubic-bezier (`cubic-bezier(.16,1,.3,1)`, ~1100ms) triggered by IntersectionObserver. Stagger sibling elements by ~120ms. No bounce, no elastic — the dream is calm. 5. **The both-true plates (五, and a smaller echo in 七):** render the contradicting illustrations as two stacked SVGs, each ~0.6 opacity, with `mix-blend-mode: multiply`. Apply a barely-perceptible perpetual transform: `transform: translate(0.4px, -0.3px)` toggling on a 2.4s `steps(2)` loop — sub-pixel jitter so the eye can't decide which layer is foreground. Respect `prefers-reduced-motion`: freeze it, keep both layers visible. 6. **Parallax, used once and meaningfully:** on the Escher Doorway plate (六), the arcade columns translate at slightly different scroll rates so the "wrong" perspective deepens as you descend — the recession becomes more impossible the further you go. Keep displacement small (≤40px) so it reads as unease, not as a carousel. 7. **Impossible-perspective CSS:** build the plaza tiles with a CSS grid skewed by `transform: skewY(-8deg) scaleX(1.4)` and overlay a *second* set of perspective lines (in `#7E8B86`) converging on a different point — let the two systems openly disagree. This is the visual thesis; make it obvious on close inspection, subtle at a glance. 8. **Cross-hatched fills:** generate "engraving" texture with `repeating-linear-gradient(45deg, #1C1B19 0 0.5px, transparent 0.5px 6px)` masked to the SVG shapes. Use it on the spear-shaft and the shield's rim; keep the lacquer face flat crimson with one specular `radial-gradient` highlight. 9. **Typography in motion:** plate titles in Cormorant Garamond may have the *second* line of the contradiction draw in slightly after the first (clip-path reveal, left-to-right, 700ms) so the reader feels the claim being completed — and undone. Body text simply fades. 10. **Cursor:** a quiet custom cursor — a small `#9C1F12` ✕ (the spear-shield cross), 10px, no trail, no magnetic pull. It is a witness mark, not a toy. 11. **Sound:** none. The merchant's stall is silent. (Optionally a single, optional, default-off ambient drone toggle hidden in Plate 九 — leave it off.) 12. **Performance is not a concern here, but restraint is:** everything is SVG and CSS; no canvas, no WebGL, no large raster assets. The reader should leave with the unsettled, pleasant feeling of having watched a magic trick that was never finished — the spear still mid-air, the shield still whole, the merchant still only a shadow. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A paradox as the literal layout engine.** Most sites in the corpus pick an aesthetic and decorate; mujun.work makes the broken-perspective grid *the content* — the impossible axonometric, the two-disagreeing-vanishing-points plaza, the recursive Escher doorway are not flourishes, they are the argument. The 6%-rare **broken-grid** layout is used non-metaphorically. 2. **Surreal aesthetic in a "museum demonstration" register, not a trippy-promo register.** The handful of surreal/dreamscape sites elsewhere lean psychedelic, glowing, maximal. This one is evenly daylit, near-monochrome stone, hairline-quiet — Magritte and de Chirico, not vaporwave. It collapses the **surreal** aesthetic (4%) into a hushed, scholarly, **dreamy-ethereal** tone rather than the corpus-dominant pastoral-romantic / warm-inviting tones. 3. **Engraved-plate vector illustration with CSS cross-hatching** — no photography (defying the 98% photography convention), no gradient-mesh, no glassmorphic cards, no hand-drawn-cute. The visual texture is antique optical-treatise engraving, generated entirely in SVG + CSS. 4. **Contradiction rendered as literal double-exposure ghost layers** with perpetual sub-pixel jitter — a motif I have not seen elsewhere; the page itself can't decide what is true. 5. **Zero conversion furniture.** No CTA, no pricing, no stats, no logo wall, no signup — explicitly avoiding the **card-grid (89%)**, **hero-dominant**, **dashboard (34%)**, and CTA-heavy conventions. The only link is a mailto hidden inside a brushstroke. 6. **Avoided overused patterns:** no glassmorphism (77%), no hand-drawn aesthetic (96%), no warm-gradient palette as a glow, no cursor-follow trails / magnetic hover (80–89%), no parallax-as-decoration (used exactly once, to deepen an illusion), no typewriter effect. Animation budget spent on one thing: a paradox that won't sit still. **Chosen seed / style:** *surreal dreamscape promo* — expressed as: aesthetic **surreal**, layout **broken-grid** (with **ma-negative-space**), typography **serif-revival** (Cormorant Garamond) + **tech-mono** accents, palette **muted** stone + **deep-burgundy**/**bronze** spot color, patterns **fade-reveal** + a single deliberate **parallax**, imagery **line-illustration** / **vector-art** (engraved), motifs **sharp-angles** + **layered-depth** + **city-urban** (the empty plaza), tone **dreamy-ethereal**.