# Design Language for mujun.art ## Aesthetics and Tone **mujun.art** is a one-page exhibition built around a single Japanese word — 矛盾 (mujun, "contradiction") — and the ancient parable that gives it its shape: a merchant who sells a spear that pierces *anything* and, in the same breath, a shield that stops *anything*. The site is that impossible market stall, rebuilt as a stark museum of optical and logical paradoxes. The aesthetic is **forensic brutalism crossed with anti-design Op-art** — a hard, black-and-bone gallery where the architecture is left visibly unfinished (exposed grid rulers, baseline lines, crop marks, registration crosses) and the *only* ornament is the visual contradiction hung inside it: Penrose stairs, impossible trident shafts, Necker-cube vitrines, figure–ground reversals where the spear *is* the negative space of the shield. Nothing is soft. Nothing is warm. Nothing reassures. The page behaves like a curator who refuses to tell you which reading is correct, then locks the door behind you. Tone: **mysterious-moody, scholarly-intellectual, edgy-rebellious** — wall-text written like a riddle that has been deliberately mistranslated. Short declarative sentences. No exclamation. The visitor is addressed as a co-conspirator, never a customer. The whole experience runs cold-blooded and a little hostile, the way the best conceptual galleries are. ## Layout Motifs and Structure A **broken-grid magazine-spread** stacked vertically as eleven full-bleed "plates," numbered 矛 01 through 盾 11, each plate a single contradiction given a whole screen. The governing structure is a visible **12-column engineer's grid** that is never respected: text columns straddle three-and-a-half columns, images bleed one column past the trim, and a 1px hairline ruler with tick-marks runs down the left edge of every plate like a draughtsman's scale that the artwork keeps ignoring. - **Diagonal fault-lines:** plates are separated not by horizontal rules but by a single hard diagonal slash (~7° off horizontal) that the next plate's content visibly crosses, so the boundary itself is a contradiction — you are in two plates at once. - **The split spine:** a permanent vertical seam runs down dead-center of the viewport. Left half = 矛 (spear / assertion). Right half = 盾 (shield / negation). Many plates mirror their content across this seam with one detail wrong, so the symmetry is a lie. - **Mis-registered layers:** every plate is composed of 2–3 stacked layers (a "true" layer in bone, a "ghost" layer in cyan offset 6px left, a "shadow" layer in magenta offset 6px down) — the CMYK mis-print look, but used as the literal motif of "two truths failing to align." - **No nav bar, no footer, no logo cluster.** Navigation is a fixed micro-rail bottom-left: `矛 01 ▮ ▯ ▯ ▯ ▯ ▯ ▯ ▯ ▯ ▯ ▯ 盾 11` — eleven bars that fill as you descend. A second fixed element, top-right, is a tiny live readout: `paradox unresolved` that never changes. - Crop marks (└ ┐ ┌ ┘) sit in all four corners of the viewport, fixed, framing every plate as a print proof. ## Typography and Palette **Type system (Google Fonts only):** - **Display / plate numerals & headlines:** `Archivo Black` — a brutal, near-square grotesque set ENORMOUS (clamp 4rem → 14vw), tracked tight to `-0.03em`, frequently set in outline-only (`-webkit-text-stroke: 1.5px`) so the headline is a hole, not a mark. - **Wall text / body:** `Spectral` (serif, weights 300/400/600, with its true italic) — a sharp, high-contrast Dutch-style serif that lends the riddles a printed-catalogue gravity; body at 18px / 1.65, italic reserved for the parable's voice. - **Captions, the engineer's grid labels, the readouts, the nav-rail:** `Space Mono` — fixed-width, set 10–12px, uppercase, tracked `0.18em`. Used for column numbers, plate coordinates, "ASSERTION / NEGATION" tags, and crop-mark labels. - **A single CJK accent:** the glyphs 矛 and 盾 themselves, rendered as large SVG-traced strokes (not webfont) so they can be animated stroke-by-stroke. **Palette — bone, ink, and a CMYK quarrel:** - `#0B0B0C` — **ink black**, the dominant ground. - `#F4F1E8` — **bone**, the paper / primary text — slightly yellowed so it reads as aged proof stock, not white. - `#E8412E` — **vermilion seal red** — used *only* for the active plate number, the diagonal fault-line, and one word per plate. Scarce and loud. - `#19C2D6` — **registration cyan** — the "ghost" mis-print layer. - `#D6197B` — **registration magenta** — the "shadow" mis-print layer. - `#5A5A52` — **graphite** — hairline rulers, tick-marks, grid labels, dimmed nav bars. Default state is ink-black ground + bone marks. Two plates near the middle **invert** to bone ground + ink marks (the figure–ground reversal made literal), then snap back — the inversion is itself a contradiction the page commits and won't acknowledge. ## Imagery and Motifs Every "image" is a constructed paradox object, drawn in pure SVG/CSS — no photography, no stock, no gradients-as-decoration. 1. **The Impossible Trident (盾 against 矛):** Schuster's three-pronged blivet, but the prongs are spear-points and the base is a shield's curve — drawn as a single continuous bone stroke on ink, the eye unable to count its legs. 2. **Penrose stairwell, ascending forever along the split spine** — bone risers on the 矛 side becoming bone treads on the 盾 side; a tiny mono caption reads `up = down · 1 of 1`. 3. **Necker-cube vitrine** holding the parable's spear — the wireframe cube flips orientation on a slow loop; the spear inside it flips with it, so it is simultaneously in front of and behind the glass. 4. **Figure–ground reversal:** a tall bone shape that is unambiguously a shield; the ink void beside it is unambiguously a spear. They share one edge. Hover the edge and they swap which is solid. 5. **The merchant's stall** as an isometric impossible structure — counter, awning, and back wall that cannot all be flat at once; the price tag dangles a Möbius strip of paper. 6. **Concentric ink/bone rings (a target / a shield boss)** that, scrolled past, resolve into a spiraling spear-shaft seen end-on — depending on scroll velocity. 7. **A scale-and-balance** where one pan holds 矛, the other holds 盾, and the beam is perfectly level *and* tilted hard left, drawn as a double-exposure mis-registration. 8. Recurring connective tissue: **draughting marks** — crop marks, registration crosses ⊕, dimension arrows `|←—→|` labeled `∞`, baseline grids, and a stamped vermilion 矛盾 chop-mark that appears once, on the final plate, as the only "signature." ## Prompts for Implementation Build mujun.art as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker. It is a roughly two-minute scroll through eleven plates of a paradox exhibition. There is **no CTA, no pricing block, no stats grid, no testimonials, no email capture, no FAQ, no logo wall, no contact form, no newsletter, no chatbot, no cookie banner.** The visitor scrolls, reads riddles, and leaves with the contradiction unresolved — that is the entire payload. **Storytelling spine (eleven plates, vertical scroll, scroll-triggered reveals):** 1. **矛 01 — The Stall.** Black void. The word `矛盾` strokes itself on in bone via `path-draw-svg`, stroke by stroke, then the impossible merchant's-stall isometric assembles from its dimension lines. Mono caption: `a market that cannot exist · est. 韓非子`. 2. **矛 02 — The Spear.** Headline `PIERCES ANYTHING` in outline Archivo Black; below it, Spectral italic gives the merchant's boast. The impossible trident draws itself; one prong is vermilion. 3. **盾 03 — The Shield.** Mirror of plate 02 across the split spine, but the headline reads `STOPS ANYTHING` and is set *solid* where 02's was hollow — the asymmetry is the point. 4. **矛盾 04 — The Question.** The famous heckler's line ("then what happens when your spear strikes your shield?") set huge, breaking across four columns it shouldn't, the diagonal fault-line slicing through the word `your`. 5. **盾 05 — Necker Vitrine.** The wireframe cube + spear flips on a slow autonomous loop; scrolling does not control it — the page decides, you don't. 6. **矛 06 — Figure / Ground.** First full inversion to bone ground. The shield-shape / spear-void pair; hovering the shared edge swaps solid and void with a hard `step()` transition, no easing. 7. **盾 07 — Penrose Spine.** The infinite stair climbs the center seam; the layout's own grid rulers feed into the staircase and become its steps. 8. **矛盾 08 — The Scale.** The level-and-tilted balance, rendered as three mis-registered layers (bone true, cyan ghost, magenta shadow) that the user can nudge apart with cursor proximity but never align. 9. **盾 09 — Second inversion**, brief and abrupt: the whole page snaps to bone for one plate holding a single Spectral line — "Both are true. Neither is sold." — then snaps back to ink. 10. **矛 10 — The Spiral.** Concentric shield-boss rings that resolve to an end-on spear-shaft as a function of scroll velocity (fast = spear, slow = target); a mono readout shows the live `v = …`. 11. **矛盾 11 — The Chop.** Everything goes still. The vermilion 矛盾 seal stamps down once (scale-from-110%, hard). One Spectral line: "矛盾 — the spear and the shield, sold together, forever." The bottom nav-rail is now full. The `paradox unresolved` readout, top-right, still says exactly that. **Motion language:** mechanical, never bouncy. Use `path-draw-svg` for every glyph and paradox-object reveal (`stroke-dashoffset` over 800–1400ms, `ease-out`). Use `glitch` micro-bursts (≤120ms RGB-split jitter via the cyan/magenta layers) at plate boundaries and on the figure–ground swap. Use `scroll-triggered` `IntersectionObserver` reveals with hard `cubic-bezier(.2,.7,.1,1)` — content arrives decisively, no fade-drift. **No parallax, no cursor-follow blobs, no magnetic buttons, no spring physics, no tilt-3d cards.** The CMYK layers shift on `scroll velocity` and `pointer proximity` only, and only ever *toward* misalignment. `prefers-reduced-motion`: glyphs appear instantly, the Necker cube and balance freeze in their ambiguous mid-state, glitch bursts disabled — the contradictions are static but still unresolved. **Build notes:** the engineer's grid (12 cols, hairline rulers, tick-marks, column numbers in Space Mono) is a real CSS Grid overlay rendered with `::before` on each plate — visible always, at 24% graphite. Crop marks are four fixed corner SVGs. The split spine is a single 1px graphite line, `position: fixed`, full height. Type scales fluidly with `clamp()`. Total page weight target under ~180KB; all imagery is inline SVG. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Anti-design used as argument, not attitude.** Most "broken" layouts in this corpus break the grid for energy or fashion. mujun.art keeps the grid *fully visible and fully ignored* on purpose — the unresolved tension between the ruled structure and the artwork that defies it *is* the thesis (矛盾). The brokenness is load-bearing. 2. **CMYK mis-registration as a content motif, not a texture.** Where other sites use grain/noise/duotone as surface flavour, here the offset cyan and magenta layers literally stand for "two truths that won't align," and they only ever move further apart — a decorative technique conscripted into meaning. 3. **No warmth, no gradient, no photography, no hand-drawn whimsy** — directly against the 98%-warm, 96%-gradient, 98%-photography, 96%-hand-drawn conventions flagged in frequency analysis. The palette is bone + ink + a scarce vermilion seal + two registration inks. The mood is a cold conceptual gallery, not a cozy story. 4. **Motion is mechanical and occasionally hostile** — `step()` transitions, glitch micro-bursts, an autonomous Necker-cube loop the user can't control, two abrupt page inversions — deliberately avoiding the corpus-saturated parallax / cursor-follow / spring / magnetic stack (each >80% prevalence). 5. **A single CJK word as the entire structural and narrative engine** — 矛 plates vs 盾 plates, a literal split spine, the Han Feizi parable as wall text, an SVG-stroked chop-mark as the only signature. The whole site is one ideogram, exploded. **Chosen seed/style:** `brutalist anti-design experiment` — *aesthetic: brutalist + anti-design + surreal (optical paradox), layout: broken-grid + magazine-spread + diagonal-sections, typography: display-bold (Archivo Black) + serif-revival (Spectral) + mono (Space Mono), palette: monochrome / high-contrast (bone + ink) with vermilion + CMYK registration accents, patterns: glitch + path-draw-svg + scroll-triggered, imagery: geometric-abstract / line-illustration (impossible objects, all SVG), motifs: sharp-angles + grid-lines + cultural (矛盾 / Han Feizi), tone: mysterious-moody + scholarly-intellectual + edgy-rebellious.* **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (77%), photography (98%), warm palette (98%), gradient palette (96%), mono-as-default-everything bias, parallax (92%), cursor-follow (89%), spring (85%), magnetic (80%), pastoral-romantic / warm-inviting tone — none used.