# Design Language for mujun.wiki ## Aesthetics and Tone mujun.wiki is **a reference work that argues with itself in public** — an encyclopedia of contradictions (矛盾, *mujun*: the ancient parable of the merchant hawking an unstoppable spear and an unbreakable shield in the same breath) built as an *anti-design* artifact: a document whose layout refuses to be one thing, whose grid keeps breaking the promise it just made, whose typography never settles on a single voice. The mood is **dry, combative, faintly absurd** — the deadpan of a logician who has noticed the floor is missing. Think of it as the love-child of a 1970s civil-defense pamphlet, a samizdat philosophy zine photocopied one too many times, and a wall of competing protest flyers stapled over each other. Nothing here glows, nothing here is friendly, nothing here is "delightful" in the product sense. The surface is **stark high-contrast paper-black-and-bone-white**, broken by exactly two warring accent inks — one hot, one cold — that never appear in the same paragraph and never agree on which is the foreground. The tone is **edgy-rebellious crossed with raw-authentic scholarship**: it cites sources, it footnotes, it cross-references — and then it undermines its own footnotes. Every entry is a small staged collision: a claim, then its mirror, then the seam between them rendered visible and left un-resolved. The site does not want to be liked. It wants to be *correct and impossible at once*, like the spear and the shield. ## Layout Motifs and Structure The skeleton is a **deliberately broken grid**: a 12-column baseline that the content **routinely violates** — entries that hang one column into the gutter, headings that start mid-column, a body block that is *flush-left for its first half and flush-right for its second half*, so the eye is forced to jump the seam. This is the central layout move: **the Contradiction Seam** — a single vertical hairline (1px, ink-black) running down a column edge somewhere between 38% and 62% of viewport width, jittering position from section to section, against which two columns are set in *opposition* — one column's text aligned toward the seam, the other's aligned away from it, so the seam reads as a fault line between two tectonic claims. - **No hero.** The page opens cold, mid-argument: a thesis sentence already in progress, no logo lockup, no nav bar, no "welcome." The wordmark `矛盾 / mujun.wiki` sits in the *bottom-left* corner like a stamp, not the top. - **Stacked dossier-sections, seven of them**, each one a *Contradiction Entry*: (1) *The Spear & The Shield* — the founding parable; (2) *The Liar* — "this sentence is false"; (3) *The Heap* — sorites, where does the pile begin; (4) *The Ship* — Theseus, identity over replacement; (5) *Buridan's Donkey* — choice paralyzed by symmetry; (6) *The Set Of All Sets* — Russell, the catalogue that cannot list itself; (7) *The Empty Entry* — a contradiction entry about contradiction entries, half-blank by design. - **The "errata strip":** a narrow horizontal band between sections, set in the smallest type, that *corrects the section above and contradicts itself doing so* — visually a strip of mono text on inverted ground (white-on-black for odd sections, black-on-white for even), the only place the two color worlds touch. - **Marginalia gutters** carry running cross-references (`see also: §3`, `cf. §7 — but §7 disputes this`) set vertically, rotated 90°, in the cold accent ink. - **Asymmetry is mandatory:** never center anything that could be off-center; every section's center of mass leans either hard-left or hard-right, alternating, so scrolling feels like a slow seesaw. ## Typography and Palette **Fonts (Google Fonts only — eclectic-hybrid: three irreconcilable voices, never blended, each owning a job):** - **Headlines & Entry Titles — `Archivo Black`** — a heavy, square, almost ungiving grotesque. Used at 64–140px, tightly tracked (`-0.02em`), often *broken across a line in the wrong place* (a word hyphenated where no hyphen belongs) to make the headline itself fail. Set in pure ink-black on bone, or knocked out to bone on ink in the errata strips. This is the "spear" voice — blunt, declarative, unstoppable. - **Body, definitions, the argument itself — `Spectral`** (serif, weights 300/400/600, including italics)** — a sturdy, slightly austere screen serif with real typographic texture. Body at 19–21px, generous measure (66–72ch) on the flush-left half, then *cramped* (40ch) on the flush-right half so the same passage physically changes pressure across the seam. Italics carry every counter-claim. This is the "shield" voice — patient, defensive, unbreakable. - **Mono — `Space Mono`** — for footnotes, errata strips, marginalia, cross-references, the wordmark stamp, and all numerals/section markers (`§01`, `§02`…). 12–14px, wide tracking (`0.05em`). The mono is the *referee's voice* — the one trying (and failing) to reconcile the other two. **Palette (high-contrast, near-monochrome, two warring accents that never coexist on a line):** - `#0B0B0B` — **Ink Black.** Near-pure black, the base text and the seam line. Not #000 — a hair warmer, like real printing ink. - `#F4F1E8` — **Bone / Newsprint White.** Warm, faintly yellowed paper. The default ground. Never #fff. - `#E4002B` — **Adversary Red.** The hot accent — used *only* for "the claim": affirmations, the spear, recto pages, attack. Appears as solid fills, underlines, rule lines — never as text smaller than 24px. - `#0047AB` — **Counter Blue (Cobalt).** The cold accent — used *only* for "the counter-claim": rebuttals, the shield, verso pages, defense. Rotated marginalia, the §-markers when active. - `#7A766B` — **Errata Grey.** A muted warm grey for retracted text, struck-through passages, ghosted footnotes — the color of something already half-erased. - Rule: **Red and Blue are never adjacent in the same text block.** They only meet at the errata strip and at the central seam, and even there they are separated by a 2px black keyline. The contradiction is *that they cannot share space.* ## Imagery and Motifs **No photography. No 3D. No stock anything.** Every visual is hand-built SVG line work, halftone, or pure typographic gesture — the vocabulary of a print artifact, not a screen product. - **The Spear & The Shield glyph** — a single line-art SVG: a spear-tip and a round shield, drawn so that *the spear's outline is also the shield's outline* — one continuous stroke, impossible to say which it bounds. This is the site's mark; it recurs at every section divider, redrawn at a different scale/rotation, sometimes mid-`path-draw` (incomplete, the line stopping in the air). - **Möbius / paradox loops** rendered as flat one-stroke SVGs at section corners — never decorative filigree, always a single hairline that returns to where it started having flipped. - **Halftone dot-fields** (CSS-generated or SVG ``) used as the only "texture": a passage that is *being negated* dissolves into a halftone gradient toward Errata Grey as you scroll past it. - **Strike-throughs, carets, and proof-marks** — real proofreader's marks (the `¶`, the `stet`, the deletion-loop, the transpose-arc) used as functional decoration: a struck word with a `stet` beside it that has *also* been struck. - **The seam line** itself is the recurring motif — sometimes solid black, sometimes a dashed "cut here" line, sometimes torn (a jagged SVG edge as if the page were ripped down the middle and the two halves don't quite match up). - **Quotation brackets at architectural scale** — giant `「 」` (Japanese corner brackets) and `“ ”` set 200–400px, half-off-screen, framing a claim that the bracket's *other half* contradicts. - **§-markers** drawn as small letterpress-style blocks: a black square, the number reversed out, with a faint mis-registration shadow in Red or Blue depending on parity. ## Prompts for Implementation Build mujun.wiki as **a single HTML document, one CSS file, one ES module** — no framework, no build step. It should *feel like a printed reference work that is alive and disagreeing with you* — a 90-second scroll through seven staged contradictions. **There is no CTA, no pricing block, no stat grid, no testimonial row, no contact form, no newsletter signup, no feature cards, no logo wall, no chatbot, no cookie banner.** It is an encyclopedia. Encyclopedias do not have a "Get Started" button. **Structure (seven Contradiction Entries, vertical scroll, the seam as the spine):** 1. **§01 — The Spear & The Shield.** Opens *cold, mid-sentence*: "…and so the merchant cried that his spear would pierce any shield, that his shield would stop any spear, and a child asked—" then the rest of the sentence is *missing* (a halftone fade). The Spear-Shield glyph `path-draw`s itself in over ~2s on load and *stops one stroke short*. The seam line drops down the right-third of the screen as you scroll. 2. **§02 — The Liar.** A single sentence — "THIS ENTRY IS FALSE" — set in Archivo Black at 140px, in Adversary Red. As it enters the viewport it **glitch-shudders** (RGB-split offset of red/blue channels for ~120ms, then snaps clean — the *only* place red and blue overlap, and only for a glitch-frame). Below it, in Spectral italic on the verso half: "If true, then false; if false, then— (see errata)." 3. **§03 — The Heap.** A literal pile: ~400 tiny black squares rendered in SVG, scattered. As you scroll, they're removed *one per scroll-pixel* via a scroll-triggered counter. A Space Mono readout: `GRAINS REMAINING: 387 … is this still a heap? [unanswered]`. The body text reflows tighter as the pile shrinks. 4. **§04 — The Ship.** A line-art ship drawn in ~30 SVG plank-strokes; on scroll, each plank **fades to Errata Grey and is replaced by an identical Cobalt-Blue plank** drawn fresh. By section end the ship is entirely blue. Marginalia: "Same ship? §05 says it depends on the donkey." 5. **§05 — Buridan's Donkey.** Perfect bilateral symmetry: two identical hay-bale blocks, equal distance from the seam, one Red one Blue. The donkey-glyph sits dead-center on the seam and **does not move** — cursor-follow is implemented but *clamped to zero*, so the mouse pulls and the donkey refuses, trembling (a 1px spring jitter). Caption: "It cannot choose. Neither, therefore, will the layout." 6. **§06 — The Set Of All Sets.** A catalogue page that lists its own entries — `§01, §02, §03, §04, §05, §06…` — and the line `§06` is **highlighted as the entry that lists every entry that does not list itself**, which causes the highlight to flicker on/off forever (`pulse-attention`, infinite). The marginalia gutter fills with `cf. cf. cf. cf.` recursively shrinking. 7. **§07 — The Empty Entry.** Half the screen is **blank Bone-white** with a single Errata-Grey line: "Reserved for the contradiction this page has not yet noticed." The other half: the Spear-Shield glyph again, this time *completing* its final stroke — and the moment it closes, it `path-draw`s itself back *open*. The wordmark stamp `矛盾 / mujun.wiki` finally appears, bottom-left, mis-registered in both Red and Blue. **Motion principles:** - **`path-draw-svg`** is the signature animation — line art that draws itself, and at least twice *un-draws* itself. Lines that stop mid-air. Strokes that close and then open. - **`glitch`** is used *exactly once* (§02) and never again — its rarity is the point: the one frame where the two colors are forced to touch. - **Scroll-triggered reveals** (`fade-reveal`, `slide-reveal`) but *biased toward removal* — things mostly fade *out*, dissolve into halftone, get struck through, as much as they appear. - **`counter-animate`** for the sorites readout and the recursion counters — numbers that climb or fall toward a value labeled `[undefined]`. - **The seam line is parallax-locked at a different rate than content** (~0.8×) so it visibly slips against the text — the fault line is never quite where the text expects it. - Honor `prefers-reduced-motion`: freeze glitch, freeze jitter, hold the glyph in its half-drawn state, but keep the broken grid and the seam — those are structure, not motion. **Layout enforcement:** - The 12-col grid exists *only to be broken*: at least one element per section hangs into a gutter; at least one body block flips alignment at the seam. - Never center a section's content; alternate hard-left / hard-right lean per section. - The errata strip between every section: full-bleed, inverted ground per parity, Space Mono 12px, one self-contradicting correction. - Marginalia gutters: rotated 90° cross-references in Counter Blue, always pointing to a section that disputes the reference. ## Uniqueness Notes Differentiators from other designs in this codebase, each a deliberate move against the frequency analysis: 1. **Anti-design as rigorous structure, not chaos.** Anti-design sits at 3% in the aesthetic frequency table; the little that exists tends to read as "random = edgy." mujun.wiki makes anti-design *argumentative* — every broken-grid violation, every alignment flip, every torn seam *means* "claim vs. counter-claim." The disorder is load-bearing, not decorative. 2. **The Contradiction Seam as primary layout device.** No other site here is organized around a single jittering vertical fault line that two opposed text columns push against. It is neither split-screen (2%) nor diagonal-sections — it's a *fault*, slipping at its own parallax rate, and it is the spine of the whole document. 3. **Two accent colors forbidden from sharing space.** Against the 96%-gradient / 98%-warm corpus, this is near-monochrome newsprint with exactly two flat inks — Adversary Red and Counter Blue — that are *contractually never adjacent*, meeting only at the errata strip and the seam, separated by a black keyline. The palette enacts the contradiction instead of illustrating it. 4. **Glitch used exactly once.** Glitch appears in ~11% of corpus designs, almost always as ambient flavor. Here it fires a single time, for ~120ms, in §02 — the lone frame where red and blue overlap. Scarcity is the statement. 5. **Animation biased toward erasure.** While the corpus leans on entrance animations (spring 85%, fade-reveal as appearance), here things mostly *leave* — fade to halftone, get struck, un-draw. The signature is `path-draw-svg` that also runs *backwards*. 6. **No photography, no glassmorphism, no hand-drawn warmth.** Photography is 98% of the corpus; hand-drawn 96%; glassmorphism 77%. mujun.wiki uses none — only SVG line work, halftone, proofreader's marks, and architectural-scale punctuation. It is a *printed document*, not a product surface. Chosen seed: **"brutalist anti-design experiment"** — realized as *aesthetic: anti-design, layout: broken-grid, typography: eclectic-hybrid, palette: high-contrast, patterns: path-draw-svg (with glitch as a single rare beat), imagery: line-illustration / geometric-abstract, motifs: sharp-angles, tone: edgy-rebellious × raw-authentic*. Avoided patterns from the frequency analysis: photography, hand-drawn, glassmorphism, gradient palettes, warm gradient washes, card-grid + centered + full-bleed default composition, cursor-follow as a "delight" (here it's clamped to zero on purpose), spring/magnetic micro-bounce, hero-dominant openings, and CTA/pricing/stat-grid/testimonial chrome.