# Design Language for mujun.io ## Aesthetics and Tone mujun.io is **a contradiction engine you can stand inside.** The name 矛盾 (*mujun* / *máodùn*) comes from the Han Feizi parable: a street merchant in the State of Chu hawks a spear so sharp it pierces *any* shield, then turns around and hawks a shield so strong it stops *any* spear — until a bystander asks the fatal question, "what happens when your spear meets your shield?" and the merchant has no answer. This site IS the merchant's stall, IS the spear, IS the shield, IS the silence that follows the question. It is built as a **brutalist anti-design experiment** where the layout itself is engineered to disagree with itself: two halves that push against a seam down the center of the screen, type that contradicts its own meaning, a navigation that argues with where it says it will take you. The tone is **edgy-rebellious, raw-authentic, deadpan** — the dry confidence of a logician delivering a proof that ends in absurdity. No softness. No reassurance. Concrete-gray surfaces, ink-black slabs, one screaming accent. The mood is the half-second of vertigo when you realize a sentence has eaten its own tail. Think Wim Crouwel grid discipline weaponized against itself; think Jenny Holzer's *Truisms* if two of them were arguing; think a Möbius strip printed on riso with the registration deliberately off by 2mm. This is NOT pastoral, NOT warm, NOT zen — it is the productive friction of a paradox held open with both hands. ## Layout Motifs and Structure The governing structure is **split-screen with a live seam** — explicitly NOT card-grid (89% of corpus), NOT dashboard (34%), NOT centered-hero (85%), NOT bento-box. The viewport is divided by a single vertical fault line — **the Seam** — running floor to ceiling, slightly off true center (52% / 48%). The left half (**矛 / SPEAR**) is everything that asserts, advances, pierces; the right half (**盾 / SHIELD**) is everything that denies, holds, resists. They are typographically and chromatically opposed, and the Seam is where they collide. - **The Seam.** A 1px hairline that is never quite straight — it jitters by ±2px on a slow noise curve, as if under pressure. On scroll it flexes; on cursor proximity it bulges toward the pointer like a membrane about to tear. Text that crosses the Seam gets sheared: the left fragment in one face, the right fragment in the other, with a 3px chromatic offset at the cut. - **Mirrored counter-scroll.** As the visitor scrolls down, the SPEAR column scrolls *down* and the SHIELD column scrolls *up* — the two sides slide past each other in opposite directions, so the page reads differently depending on which half your eye follows. They re-synchronize only at the four "Stand-off" moments. - **Four Stand-offs (full-bleed interruptions).** At four points the split collapses: the Seam snaps to dead-center, both halves freeze, and a single contradiction statement spans the whole width in oversized type — *"AN ALWAYS / A NEVER"*, *"THE PROOF / OF NOTHING"*. These are the only moments of stillness. Then the split resumes and the counter-scroll re-engages. - **Anti-design intrusions.** Deliberate "errors": a paragraph that overflows its column and is clipped mid-word by the Seam; a heading whose tracking is set so wide it wraps to a column that doesn't exist; a footnote that points to a footnote that points back. These are controlled, never sloppy — every "mistake" is load-bearing. - **The Question (footer).** The page ends not with a CTA but with the bystander's question, set very small, very plain, dead center, with no answer beneath it. Just whitespace, then the domain. No parallax-of-the-pretty-kind. No floating cards. No glassmorphism. Negative space is used as *pressure*, not as calm. ## Typography and Palette **Fonts — Google Fonts only. Two opposed faces plus one referee, never blended within a word except at the Seam:** - **矛 / SPEAR voice — *Archivo Black*** (single weight, set TIGHT, tracking -0.03em, often UPPERCASE) — blunt, forward-leaning mass. Used for everything on the left half: assertions, the word SPEAR, advancing headlines. Set large (clamp 2rem → 6rem). It looks like it's about to lunge. - **盾 / SHIELD voice — *Spectral*** (weight 200 and 800 only, the 200 set wide tracking +0.04em, the 800 set as immovable slabs) — a serif that braces. Used for everything on the right half: denials, the word SHIELD, the holding statements. The thin 200 is the shield seen edge-on; the heavy 800 is the shield face-on. Italic 200 only for the bystander's interjections. - **Referee / system voice — *Space Mono***, 0.7rem–0.85rem, used for the Seam labels, footnote machinery, the off-by-one numbering, and the closing Question. Plain, neutral, the only voice that isn't taking a side. It is the bystander. - **The Stand-off type** is *Archivo Black* and *Spectral 800* literally interleaved letter-by-letter on the same line — A(Archivo)N(Spectral)A(Archivo)L(Spectral)... — so the word vibrates between the two faces. **Palette — high-contrast duotone with one violent accent (rejecting the 98%-warm / 96%-gradient corpus defaults: this is cold, flat, ungraded):** - `#0B0B0C` — **Ink** — near-black, the SPEAR half's ground and the SHIELD half's text. Matte, no sheen. - `#E7E4DC` — **Plaster** — warm-cool bone white, the SHIELD half's ground and the SPEAR half's text. The color of a wall that's been argued in front of for years. - `#8E8E84` — **Concrete** — the in-between gray, used only at the Seam and in the anti-design intrusion blocks; the color of a thing that is neither one nor the other. - `#FF2E12` — **Cinnabar** — a single furious vermilion, used ONLY at: the point where text is sheared by the Seam (the chromatic-offset slivers), the four Stand-off keywords, and the period at the end of the Question. Never as a fill, never as a gradient stop — only as a wound. - `#1B2A4A` — **Indigo Iron** — a deep cold blue used at perhaps 5% coverage: the SHIELD half's heavy slabs in their resting state, and the underline of any link that, when followed, contradicts its own label. Hard-edged everything. No rounded corners. No shadows except a single 0-blur offset block-shadow (4px, 4px, Concrete) on the Stand-off statements — a "double-vision" shadow, not a soft one. No gradients anywhere. ## Imagery and Motifs **All imagery is built — inline SVG and CSS, no photography (rejecting the 98% photography default), no stock, no 3D render.** The visual library is a tight kit of *self-defeating diagrams* drawn in flat hairline strokes (1px Concrete on Plaster, 1px Plaster on Ink) — the look of a logic textbook that's been vandalized by the logician. 1. **The Spear (矛) and the Shield (盾)** — drawn as two simple icons that, when they enter the same Stand-off, are rendered overlapping at the exact center; the overlap region is filled neither black nor white but Concrete, and a Cinnabar question-mark sits in it. Used as the site mark / favicon. 2. **The Möbius seam** — the Seam, when you reach the footer, is revealed to have a half-twist: the SPEAR side and SHIELD side are the same strip. A thin SVG path animates this twist once, slowly, on first view of the footer. 3. **Penrose stair fragments** — small impossible-staircase corner pieces tucked into the anti-design intrusion blocks; they never resolve, they just occupy corners like marginalia. 4. **The off-by-one numbering** — sections are numbered 01, 02, 03... but one number is always missing or doubled (there are two "04"s), and the Space Mono numbers are the only place this is "admitted." 5. **Tension hatching** — where the two halves overlap during transitions, the overlap is filled with fine diagonal SVG hatching whose angle is driven by scroll velocity: faster scroll = steeper hatch, like strain lines in a stress diagram. 6. **The redaction bar** — when a SPEAR assertion and a SHIELD denial would both be true, the contradictory clause is covered by a solid Ink (or Plaster, on the opposite half) bar — a Holzer-style redaction that you can drag aside to read what's underneath, only to find it says "[see other side]". 7. **Quotation scaffolding** — the Han Feizi source text appears once, vertically, hugging the Seam, in tiny Space Mono, as if the parable is the spine the whole page is built on. ## Prompts for Implementation Build mujun.io as **a single-route, two-column counter-scrolling document with a live central Seam** — one HTML file, one CSS file, one JS module. The experience is roughly 60–80 seconds of reading a thing that won't agree with itself. There is **NO CTA, NO pricing block, NO stat grid, NO testimonial row, NO feature list, NO email signup, NO contact form.** There is only: a top Stand-off, the split body, three more Stand-offs interleaved, and the Question footer. **Storytelling structure (top to bottom):** 1. **Stand-off 0 — the stall.** Full-bleed, Concrete ground briefly, then it splits. Interleaved type: *"A SPEAR THAT PIERCES ALL"* / *"A SHIELD THAT STOPS ALL"*. Below, in Space Mono: "— a merchant of Chu, allegedly." The Seam draws itself down the screen from this point. 2. **The split body, movement I — "the selling."** SPEAR column (Ink ground, Plaster Archivo Black) makes escalating assertions; SHIELD column (Plaster ground, Ink Spectral) makes escalating denials. They counter-scroll. A few sentences are written to straddle the Seam and get sheared with Cinnabar slivers at the cut. One redaction bar appears here. 3. **Stand-off 1 — "the question."** Snap to center. Interleaved Cinnabar keyword inside the line: *"WHAT IF YOUR SPEAR MEETS YOUR SHIELD?"* Hold 1.5s of frozen stillness before scroll resumes. 4. **Movement II — "the silence."** The columns now contradict *themselves*: the SPEAR side starts making shield-claims, the SHIELD side starts making spear-claims, slowly swapping faces letter by letter as you scroll. The off-by-one numbering misbehaves here (the doubled "04"). 5. **Stand-off 2 — "an always, a never."** *"AN ALWAYS"* / (double-vision shadow) / *"A NEVER"*. 6. **Movement III — "the strip."** Short. The two columns visibly narrow toward the footer; the Seam's noise-jitter increases as if about to snap. The Han Feizi vertical quotation runs alongside. 7. **Stand-off 3 — "the proof of nothing."** Final interleaved statement, the double-vision shadow at its widest. 8. **The Question (footer).** Everything goes quiet — both grounds resolve to a neutral Plaster, the Seam performs its slow Möbius half-twist animation, and centered in tiny Space Mono: *"so — what happens when they meet?"* No answer. A wide blank. Then `mujun.io` and a single Cinnabar period. **Motion & interaction:** - **Counter-scroll** is the signature: `transform: translateY()` on the two columns, opposite signs, eased, capped so they never drift more than ~40vh apart; they hard-snap to aligned at each Stand-off. - **Seam membrane:** the Seam is an SVG path whose control points are driven by (a) a slow Perlin idle wobble and (b) cursor X-distance — it bulges toward the pointer, with a faint Cinnabar glow only at the bulge apex. - **Shear-on-cross:** any element with `data-straddle` is rendered twice (clip-path left | clip-path right), the halves offset by 3px with Cinnabar fringing — pure CSS, JS only updates the offset on scroll. - **Face-swap:** in Movement II, `IntersectionObserver` + a per-letter span swap (`font-family` toggle Archivo ↔ Spectral) staggered across the word as it enters view. - **Redaction drag:** the redaction bar is a draggable element; dragging it aside (pointer events) reveals the "[see other side]" text beneath; release and it springs back. - **Stand-off freeze:** scroll-snap or a scroll-lock for ~1.5s on each Stand-off so the contradiction lands; respect `prefers-reduced-motion` by replacing all counter-scroll with simple opacity reveals and dropping the Seam wobble (the *structure* — split, Seam, Stand-offs — remains). - **Möbius footer:** one-shot SVG `stroke-dashoffset` + a CSS 3D `rotateX` half-twist on the Seam path when the footer first intersects. Bias the whole thing toward **a full-screen narrative argument** — the visitor isn't browsing, they're being walked into a logical trap and then left standing in it. No section should feel like a "block of content"; every section is a *move in a debate that has no winner.* ## Uniqueness Notes Differentiators from the corpus frequency analysis: 1. **Contradiction as the layout's operating system, not a vibe.** This isn't "surreal texture on a normal page" — the page is *mechanically* paradoxical: counter-scrolling halves, a Seam that physically resists, type that swaps faces against its own meaning, an off-by-one numbering that admits the error. The Han Feizi 矛盾 parable is the literal architecture. 2. **Cold flat duotone + a single wound of Cinnabar — against the grain of the corpus.** 98% of designs are warm, 96% use gradients; this one is ungraded, hard-edged, near-monochrome with one furious red used only as injury. No glassmorphism (77%), no hand-drawn (96%), no photography (98%), no card-grid (89%), no centered hero (85%). 3. **Split-screen with a *living* seam + mirrored counter-scroll** — split-screen sits at ~2% in the corpus and where it appears it's static; here the seam is an interactive membrane and the two columns travel in opposite directions, so the document literally cannot be read "straight." 4. **Anti-design intrusions that are load-bearing** — clipped overflows, impossible footnotes, doubled section numbers, Penrose corners — all deliberate, all in service of the paradox, never decorative noise. 5. **An ending that withholds.** No CTA, no signup, no answer — the site closes on the bystander's unanswered question and a Möbius reveal that the two sides were always one strip. Chosen seed / style: **"brutalist anti-design experiment"** (anti-design ~3%, brutalist ~6% in corpus — both underused; surreal/dreamscape deliberately avoided since it is already used elsewhere in the corpus, e.g. lov.st). Avoided overused patterns per frequency analysis: hand-drawn (96%), glassmorphism (77%), photography imagery (98%), card-grid (89%), full-bleed-as-default + centered hero (89%/85%), warm palette (98%), gradient palette (96%), cursor-follow-as-cute (89%) — note the cursor interaction here is adversarial (the Seam *resists* the pointer), not playful. Parallax (92%) replaced by counter-scroll. Spring/magnetic/stagger used only where they serve tension, not delight.