# Design Language for mujun.quest ## Aesthetics and Tone mujun.quest is **a courtroom for an unwinnable lawsuit**: the ancient Chinese parable of 矛盾 — the merchant who sold a spear that pierces *any* shield and, from the same cart, a shield that stops *any* spear — staged as a present-day adversarial proceeding that can never reach verdict. The aesthetic is **brutalist anti-design experiment**: not the soft "neubrutalism" of chunky drop-shadows and candy borders, but the genuine raw-concrete kind — exposed structure, monospace officialese, hairline rules, form-field chrome left visible, the seams of the layout deliberately *unsanded*. The site is literally split down the middle into two case files — **MATTER OF THE SPEAR** (left, the unstoppable) and **MATTER OF THE SHIELD** (right, the immovable) — and the two halves are typeset in the same cold ink but argue past each other forever. The mood is **edgy-rebellious** crossed with **scholarly-intellectual**: a legal brief written by someone who has decided the law is a joke and is committing to the bit with a straight face. Humor is bone-dry, never winking. Nothing here is "fun"; it is *correct*, exhaustively, about a thing that cannot be resolved. The visitor is not a customer — they are **the empaneled juror**, and the verdict form at the bottom has two checkboxes that, by construction, cannot both be unchecked and cannot both be checked. The contradiction is the product. There is no resolution, no CTA, no "get started." You read the brief, you fail to render judgment, you leave. The site knows you will leave unsatisfied; that is the only honest outcome. ## Layout Motifs and Structure **Broken-grid, split-screen, single continuous scroll — roughly 480vh.** The page is divided by a **2px solid vertical rule running the full document height**, fixed at exactly 50vw, dead center, no exceptions, no responsive collapse on desktop. Left column = SPEAR. Right column = SHIELD. Every section is a **paired exhibit**: the same argument structure mirrored, the left arguing penetration is absolute, the right arguing obstruction is absolute, and the **center rule is where they collide** — a 1px-tall horizontal "impact mark" (a short serif-bracket glyph `⊢⊣`) is stamped on the rule at the vertical midpoint of each exhibit pair. The grid is **deliberately misaligned across the rule**: the left column uses a 7-unit baseline grid, the right column uses an 8-unit baseline grid, so paragraphs that "should" line up never do — the eye keeps trying to reconcile two halves that refuse. This mis-registration is the load-bearing structural conceit and must survive any refactor. Section inventory, top to bottom: 1. **DOCKET HEADER** — full-width band above the split: case caption (`MUJUN v. MUJUN — Case No. 矛盾/∞`), filing date, "JURISDICTION: UNDECIDABLE", a hairline-ruled table of parties. The only section that spans the rule. 2. **EXHIBIT A — THE MERCHANT'S CLAIM** — paired: left quotes the spear-sale pitch verbatim, right quotes the shield-sale pitch verbatim, set in identical formatting so the symmetry is unmistakable. 3. **EXHIBIT B — THE PHYSICS** — left: a force diagram of an arrow vs. infinite armor; right: the same diagram rotated 180°, armor vs. infinite arrow. The diagrams are SVG, drawn in 1px strokes like patent figures, numbered with leader-lines. 4. **EXHIBIT C — THE LOGIC** — a formal proof laid out as numbered premises; the left column proves "the spear wins," the right column proves "the shield wins," and **line 7 of each is identical text** — the shared contradiction, highlighted by a thin box drawn *across* the center rule, the only element permitted to bridge it. 5. **DEPOSITIONS** — alternating transcript blocks (`Q.` / `A.`), the spear's lawyer on the left, the shield's on the right, scrolling at the *same* rate but the questions never match the answers across the gutter. 6. **THE RULE OF EXPLOSION** — a single centered block (briefly spanning the rule, then the rule resumes): "From a contradiction, anything follows." A list of absurd corollaries scrolls — the page momentarily glitches into nonsense (see Patterns) — then snaps back to order. 7. **VERDICT FORM** — two checkboxes, `[ ] FOR THE SPEAR` / `[ ] FOR THE SHIELD`, in a bordered form-fieldset. Clicking either checks it *and* checks the other; unchecking either unchecks both; there is no stable state. A monospace counter logs every attempt: `JUDGMENT ATTEMPTS: 14 — STILL UNDECIDABLE`. 8. **COLOPHON** — the case is "remanded to itself in perpetuity." Filing stamp. End. No hero image. No nav bar — instead a **1px-tall progress rule** along the very top edge, divided into 8 ticks (one per section), filling from both ends toward the middle as you scroll, the two fills meeting exactly at section 8. ## Typography and Palette **Three Google Fonts, used with court-clerk rigor.** - **JetBrains Mono** — the body face of the entire brief. Every paragraph, every premise, every deposition line. 16px / 1.65, tracked `0.01em`. Monospace is the *anti-design* statement: it refuses the warmth and "designed" feel of a proportional face; it looks like a docket entry typed on a terminal. Numbered leaders, exhibit labels, the verdict counter — all JetBrains Mono. Used at 13px / `0.06em` uppercase for micro-labels (`EXHIBIT A`, `FILED`, `CASE NO.`). - **Archivo Black** — display only. Section banners (`EXHIBIT B — THE PHYSICS`), the docket caption, the words `SPEAR` and `SHIELD` at 88px when they head each column. Squared, brutal, no curves spared; set `letter-spacing: -0.02em`, `text-transform: uppercase`, always **left-aligned to the column edge, never centered**. This is the concrete-stencil voice — heavy, blunt, unbeautiful on purpose. - **Noto Serif TC** — used *only* for the Han characters: 矛 (spear), 盾 (shield), 矛盾 (contradiction), and the parable quotation when shown in its original. Rendered large — 矛 at 240px ghosted at 6% ink behind the left column, 盾 likewise behind the right, 矛盾 at 400px straddling the center rule in the colophon at 8% ink. The serif Han forms are the one place the page allows real typographic beauty, and only because the source text demands it. **Palette — cool-grays, high-contrast, monochrome. Absolutely no warm tones, no gradients.** - `#0B0B0C` — **ink**. Near-black, faintly blue-cold. All body text, all rules, all strokes. - `#F2F2F0` — **paper**. The page ground. A flat cool off-white, no cream, no texture warmth — like recycled legal bond under fluorescent light. - `#5C6066` — **slate**. Mid-gray for secondary text, leader-lines, the inactive half of the progress rule, deposition `Q.`/`A.` prefixes. - `#C7C9C5` — **fog**. Hairline borders, table rules, the ghost-grid lines, fieldset edges. - `#1E40FF` — **stamp blue**. The *only* chroma in the entire site, used at exactly two sizes: the impact-mark glyphs on the center rule, and the "JUDGMENT ATTEMPTS" counter when it increments. It is the bailiff's ink stamp. It must feel like a violation when it appears. - `#9A0F0F` — **errata red**. Used once, in section 6 (Rule of Explosion), for the strike-through annotations during the glitch — then it vanishes and never returns. Left column may run 1–2% darker paper than the right (`#F0F0EE` vs `#F2F2F0`) — a near-imperceptible asymmetry reinforcing that the two halves were filed by different clerks. ## Imagery and Motifs **No photography. No illustration in the warm sense. Everything is drawn like a patent filing or a court exhibit.** - **Patent-figure diagrams (SVG, 1px `#0B0B0C` strokes, no fill).** The force diagrams in Exhibit B: an arrow, a slab of armor, vectors with arrowheads, dimension lines with end-ticks, callout numbers `(1)`,`(2)`,`(3)` on leader lines. Drawn flat, orthographic, no perspective, no shading — only line. The two diagrams are exact 180° rotations of each other. - **The center rule** — 2px solid ink, full document height, the spine of the whole site. On it, at each exhibit's midpoint: `⊢⊣` in stamp blue, 18px, JetBrains Mono. Nothing else ever touches the rule except the three explicitly-permitted bridging boxes (Exhibit C line 7, Rule of Explosion, colophon 矛盾). - **Ghost Han characters** — 矛 / 盾 / 矛盾 in Noto Serif TC at 6–8% ink, enormous, behind their respective columns. Static. Never animated. They are watermarks on the brief. - **Hairline tables** — the docket header's party table, the deposition headers — drawn with 1px `#C7C9C5` rules, generous cell padding, monospace contents, like a real court filing's caption block. - **Filing stamps** — a 1px-stroke rectangle, slightly rotated (−3°), reading `FILED — DATE — CLERK OF THE PARADOX` in JetBrains Mono uppercase. Appears in the docket header and the colophon. The only rotated element on the page. - **The mis-registration itself** is a motif: the 7-unit-vs-8-unit baseline grids mean the fog-colored ghost-grid lines (faintly visible at the page edges) do not align across the rule — leave this visible, do not "fix" it. - **Checkbox glyphs** — drawn as real form `[ ]` brackets in monospace, not styled inputs, so the verdict form looks like a printed ballot, not a web widget. ## Prompts for Implementation Build mujun.quest as **one HTML document, one CSS file, one small vanilla ES module — no framework, no router, no build step beyond a single esbuild/minify pass.** It is one continuous vertical scroll of ~480vh, eight sections, read top to bottom, then the visitor leaves. There is **no second page, no outbound link, no nav menu, no CTA, no pricing, no stats grid, no testimonials, no email capture, no logo wall, no FAQ, no newsletter, no cookie banner.** The page links to nothing. It *is* the brief. **Storytelling is the organizing principle.** The eight sections are a single legal argument that, by design, fails to conclude. Write them as a real brief would read — caption, exhibits, depositions, the rule of explosion, a verdict form, a colophon — committing fully to the conceit. The split-screen is not decoration: every section must be *genuinely paired*, left arguing the spear is unstoppable, right arguing the shield is immovable, and the reader's eye should keep trying (and failing) to reconcile the two halves across the center rule. **CSS direction:** - CSS Grid for the master split: `grid-template-columns: 1fr 2px 1fr` (the 2px is the literal center rule, `background: #0B0B0C`). On viewports under 760px, the rule rotates to horizontal and the two halves stack — but keep the mis-registration: top half on a 7-unit baseline, bottom on 8. - Two separate baseline grids — left content `line-height` and vertical rhythm tuned to a 7px unit, right to 8px — so paragraphs never align across the gutter. This is intentional; do not normalize it. - Flat fills only. **No `linear-gradient`, no `radial-gradient`, no `box-shadow` blur** (a single hard 0-blur offset shadow `2px 2px 0 #0B0B0C` is permitted only on the verdict fieldset, as a "stapled-page" cue). No border-radius anywhere — every corner is square. - Ghost Han characters: `position: absolute`, huge `font-size`, `color: #0B0B0C`, `opacity: 0.06`, `pointer-events: none`, `user-select: none`, behind the column content. - The top progress rule: a 1px-tall element, 8 segments, filling from both outer ends toward 50% as `scrollY` advances, the two fills meeting at section 8. Pure CSS `width` driven by a `--scroll` custom property updated on scroll. **JS / animation direction (restrained, no spring/parallax/cursor-follow — those are banned here as too "designed"):** - **Scroll-triggered fade-reveal only**, and even that minimal: each exhibit pair fades from `opacity: 0` to `1` and rises 8px when it enters the viewport — a 220ms ease, no bounce, no overshoot. Court documents do not bounce. - **The verdict form is the centerpiece interaction.** Two checkboxes. Checking one programmatically checks the other (`checked = true` on both). Unchecking one unchecks both. Therefore the form has no stable resolved state — it oscillates forever. Every change increments a counter `JUDGMENT ATTEMPTS: N` rendered in stamp blue `#1E40FF` for 400ms on each increment, then fading to ink. After 13 attempts the label changes from `STILL UNDECIDABLE` to `STILL UNDECIDABLE — AS PREDICTED`. - **The Rule of Explosion glitch (section 6 only):** when this section is ~60% in view, the surrounding text briefly "explodes" — a 900ms sequence where 6–8 absurd corollaries type out in JetBrains Mono (`typewriter-effect` is acceptable here, scoped to this one moment), some struck through in errata red `#9A0F0F`, the center rule flickers, then everything snaps back to clean ink and the red is gone for good. This is the only moment of disorder; the rest of the page is rigidly composed. - **Impact marks** `⊢⊣` on the center rule do nothing on hover — they are stamps, not buttons. The cursor over the whole page stays the default arrow; nothing here is "clickable" except the verdict checkboxes and they refuse to behave. - Respect `prefers-reduced-motion`: kill the glitch sequence, kill the fade-rises; the brief is fully legible static. **The closing beat:** the colophon states the case is "REMANDED TO ITSELF IN PERPETUITY," stamps `FILED`, shows 矛盾 at 400px / 8% ink straddling the rule, and ends. No footer links. The scroll simply stops. The juror leaves without a verdict — which is the point. ## Uniqueness Notes Differentiators this design commits to. None should be duplicated by any other CMassC site. 1. **The page is a self-defeating legal brief, split into two halves that argue past each other forever.** The 50vw center rule + paired-exhibit structure + two-clerks mis-registration is the load-bearing conceit and is unique to mujun.quest. No other site stages itself as adversarial litigation that cannot reach verdict. 2. **Deliberate dual-baseline mis-registration (7-unit left / 8-unit right).** Most sites obsess over alignment; this one engineers *mis*alignment as content. The reader's frustrated eye is the intended UX. That is genuine anti-design, not the cosmetic "neubrutalism" the corpus is full of. 3. **A verdict form with no stable state.** Two checkboxes that force each other on and off, with a public attempt-counter. The contradiction is interactive and unwinnable — not illustrated, *enforced*. 4. **Monochrome cool-gray with exactly one chroma (`#1E40FF`) used twice.** In a corpus that is 98% warm and 96% gradient, this is a flat, cold, gradient-free, near-monochrome page. The single blue is the bailiff's stamp; the single red appears once and is destroyed. Discipline as aesthetic. 5. **Patent-figure SVG diagrams that are 180° rotations of each other** — the spear-vs-armor force diagram and its inverse — drawn in 1px strokes like a real patent filing. No photography, no illustration, no gradient-mesh, no glassmorphic cards. **Chosen seed / style:** `brutalist anti-design experiment` (with: aesthetic *brutalist* + *anti-design*, layout *broken-grid* + *split-screen*, typography *mono* + *display-bold*, palette *cool-grays* + *monochrome* + *high-contrast*, patterns *fade-reveal* + *typewriter-effect* only, imagery *line-illustration* / *vector-art*, motifs *grid-lines* + *sharp-angles*, tone *edgy-rebellious* + *scholarly-intellectual*). **Avoided patterns from frequency analysis:** no hand-drawn (96%), no glassmorphism (77%), no photography (98%), no card-grid (89%), no full-bleed-warm hero (89%), no centered everything (85%) — this page is left-aligned-to-column-edge throughout. No warm palette (98%), no gradient (96%) — flat cool monochrome instead. No parallax (92%), no cursor-follow (89%), no spring (85%), no magnetic (80%), no stagger (73%) — restrained fade-reveal + one scoped typewriter glitch only. No tilt-3d, no card-flip, no path-draw-svg flourish. Underused territory claimed: anti-design (3%), brutalist (6%), broken-grid (6%), split-screen (2%), cool-grays palette (4%), scholarly-intellectual tone (5%), edgy-rebellious tone (3%), line-illustration imagery (9%).