# Design Language for mujun.xyz ## Aesthetics and Tone mujun.xyz takes its name from 矛盾 — the ancient Chinese parable of the merchant who sold an unstoppable spear and an unbreakable shield in the same breath. The site *is* that merchant's stall: a place built entirely out of self-contradiction, where every claim cancels itself, every layout fights its own logic, and the visitor is invited to enjoy the friction rather than resolve it. The chosen aesthetic is **brutalist anti-design experiment** — raw HTML-default energy, exposed structure, deliberately "wrong" choices made with total confidence. But the contradiction runs deeper than style: this is brutalism that *apologizes*, anti-design that is *meticulously composed*, an experiment whose results are pre-determined. The tone is **edgy-rebellious** with a dry, deadpan wit — think a philosophy seminar held inside a fluorescent-lit photocopy room, where the lecturer keeps contradicting the slide behind them and nobody minds. The mood: stark, argumentative, a little hostile, secretly tender. Inspirations — Jan Tschichold renouncing his own *Die neue Typographie*; the "this statement is false" liar's paradox rendered as wall text; municipal forms designed by someone who has never been happy; Yves Klein's *Le Vide* (an empty gallery sold as art); the visual grammar of errata slips, retraction notices, and "VOID" stamps; concrete poetry where the poem argues with its own shape; the brutal honesty of `
` and `
` left unstyled on purpose. Nothing here is decorated. Everything here is *contested*. ## Layout Motifs and Structure The spine is a **broken-grid** that visibly disagrees with itself: a strict 12-column lab grid is drawn faintly over the whole page in 1px hairlines — and then every content block is placed *off* that grid, overhanging columns, straddling gutters, occasionally aligned perfectly just to unsettle. Two parallel column-streams run down the page: the **CLAIM column** (left, 7 cols wide, set ragged-right, large) and the **COUNTER-CLAIM column** (right, 4 cols, set ragged-left, small, often beginning mid-sentence as if interrupting). They never agree. Sometimes a single sentence starts in CLAIM and finishes in COUNTER-CLAIM with the contradiction landing on the line break. Sections are numbered like a refuted treatise: `THESIS 01`, `ANTITHESIS 01`, `THESIS 02`, … — and crucially **there is never a synthesis**; the numbering just stops. Horizontal `
` rules — thick, black, full-bleed, the genuine browser-default kind only heavier — act as the only section dividers, and each one is captioned beneath in 9px mono with a tiny self-cancelling footnote ("§ this line both separates and connects"). Structural motifs: - **Erratum bands** — narrow full-bleed strips, inverted (white text on black), that "correct" the paragraph immediately above them, often introducing a worse error. - **Marginal disagreement** — pull-quotes set in the left margin that contradict the body text they sit beside, struck through with a 2px line you can still read under. - **The Void** — one full viewport-height section that is entirely empty except for a single bottom-left mono caption: `(this section intentionally contradicts the others by containing nothing)`. Pure ma-negative-space, brutalist style: no centering, no softness, just a vast white field with one line stuck in the corner like a price tag on emptiness. - **Overlap collisions** — at two scroll points, the CLAIM and COUNTER-CLAIM columns slide *over each other* and the overlapping text uses `mix-blend-mode: difference` so the contradiction becomes literally illegible at the seam. - No hero. No nav bar. Navigation is a bare `