# Design Language for mujun.study ## Aesthetics and Tone mujun.study is a single-page reading-room for the study of **contradiction itself** — named for 矛盾 / 무순 / *mujun*, the ancient parable of the merchant who sold an unstoppable spear and an impenetrable shield in the same breath. The site does not teach a curriculum; it *stages* a problem. The whole page is built as a confrontation between two halves that cannot both be true, and the visitor scrolls down the seam between them. The aesthetic is **anti-design brutalism in a scholar's voice** — not the loud, clashing "ugly on purpose" brutalism of agency landing pages, but a cold, archival, almost juridical brutalism: undecorated HTML-grey concrete, hairline rules, set-in-stone monospace, the air of a logic department's mimeographed handout from 1971 that someone scanned and never let go of. The tone is **scholarly-intellectual** crossed with **mysterious-moody**: dry, exact, faintly menacing, like reading a proof that ends "therefore, anything." Nothing is friendly. Nothing reassures. The contradiction is the host. The page has a single conceit it never breaks: **everything appears twice and disagrees with itself.** The headline says one thing on the left edge and its negation on the right edge. A claim in black is undercut by the same claim in outline. The scroll progress bar fills from both ends toward a point that is never reached. This is the spear and the shield rendered as a layout. ## Layout Motifs and Structure **The Seam.** The viewport is permanently bisected by a 1px vertical rule down the exact centre — the *seam* — and the entire composition is a **split-screen** that refuses to resolve. The left column is the **MATA / SPEAR side**: black ink on paper-white, ranged left, aggressive, forward-leaning. The right column is the **MORI / SHIELD side**: paper-white text knocked out of near-black, ranged right, defensive, walled. Content blocks straddle the seam: a sentence begins in the left register, crosses the rule, and finishes in the inverted right register, so the reader's eye must physically cross the contradiction to complete the thought. **Broken-grid stratigraphy.** Beneath the split runs a hard 12-column grid that is *deliberately violated*: figures hang into the gutter, footnotes sit in the margin at the wrong baseline, a paragraph is set 4px lower than its neighbour for no stated reason. The misalignments are intentional and consistent — the grid is the rule, the breaks are the *exceptions that prove there is no rule*, which is the point. No `border-radius` exists anywhere on the page. No drop shadows. No gradients except one (see palette). Corners are corners. **Eight strata, top to bottom** (full-bleed, no hero image, minimal-navigation): 1. **THE CLAIM** — the parable stated plainly across the seam, oversized. 2. **THE SPEAR** — the case for "this argument is unanswerable," left side dominant, right side reduced to a thin defensive strip. 3. **THE SHIELD** — the case for "this argument cannot land," right side dominant, left side reduced. The two strata are visual mirrors. 4. **THE COLLISION** — both sides at equal weight, text interleaving line-by-line across the seam, hardest to read on purpose. 5. **THE LIAR** — a self-referential interlude: a single sentence that refutes itself, set alone on the seam. 6. **THE REGISTRY** — a plain table of historical contradictions (Epimenides, Russell, Gödel's whisper, Zeno, the sorites heap) typeset like a legal docket: case number, year, principal, status = UNRESOLVED. 7. **THE EXERCISE** — one open question left for the reader, no answer field, no submit button — just the question and a lot of empty paper. 8. **THE COLOPHON** — who set this, in what faces, and a final line that contradicts the first line of the page. **Navigation** is a vertical numeral rail pinned to the seam itself — `01`–`08` in tiny monospace, the active one boxed. No logo, no menu, no header bar, no footer nav, no buttons. ## Typography and Palette **Type system — Google Fonts only:** - **Monospace spine — `Space Mono`** (400, 400 italic, 700). Carries nearly everything: headlines, body, table, navigation, footnotes. Space Mono's slightly typewriter-ish, faintly retro fixed-width gives the "mimeographed logic handout" voice. Body set at 16–17px, `line-height: 1.62`, `letter-spacing: 0` — monospace needs no tracking help. - **Condensed display counterweight — `Archivo Narrow`** (700, 700 italic) — used ONLY for the oversized stratum titles (THE CLAIM, THE SPEAR, etc.), set in all-caps at clamp(2.8rem, 9vw, 7rem), `letter-spacing: 0.02em`, tightly leaded. Its tall, compressed forms read like a stamped case heading and contrast hard against the wide monospace — two type widths that disagree, echoing the theme. - **Hairline serif aside — `Spectral`** (300 italic) — reserved for the single self-refuting sentence in stratum 5 and for marginal glosses, so the page's one "soft" voice is quarantined to its most uncanny moment. **Palette — high-contrast monochrome, two registers:** - `#F4F2EC` — **Paper.** Warm bone white, the SPEAR side ground and all "positive" text fields. Not pure white — slightly aged, like a photocopied document. - `#16140F` — **Ink.** Near-black with a trace of warm brown, the SHIELD side ground and all body text on Paper. - `#9A9388` — **Graphite.** Muted warm grey for hairline rules, footnotes, the unviolated grid lines, and disabled/secondary text. - `#B5302A` — **Seal Red.** The only chromatic colour, used with extreme restraint: the word "UNRESOLVED" in the registry, the boxed active nav numeral, the 1px seam line on hover, and the single underline that draws itself under THE CLAIM. It is the lacquer-stamp red of an official seal pressed onto an answer that does not exist. - `#2A2723` — **Slate.** A second near-black, one notch lighter than Ink, used for the SHIELD-side panels so the inversion has subtle depth without a true shadow. - The page's *only* gradient: a 2px-tall band along the seam at the COLLISION stratum, fading Paper→Ink left-to-right across just those 2px — the spear-point and shield-face meeting, infinitely thin. ## Imagery and Motifs No photography. No illustration in the decorative sense. The "imagery" is **diagrammatic and typographic**, drawn in inline SVG with `stroke-width: 1`, `stroke: currentColor`, no fill: - **The spear-and-shield glyph** — a minimal geometric mark: a single straight line (the spear) intersecting a square with one corner clipped (the shield), drawn so the line *passes through* the square in the SPEAR strata and *stops at its edge* in the SHIELD strata. Same glyph, two contradictory states, animated on scroll between them. - **The seam** — a literal motif: every section's content is anchored to it; figures are pinned to it; the nav rides it. - **Bracket marks** — large `⌜ ⌝ ⌞ ⌟` corner brackets framing the self-refuting sentence, the only "ornament," and even those are logic notation (quasi-quotes). - **Strikethroughs and over-prints** — claims that get negated are not deleted; they are struck with a 1px Graphite line and the negation set *on top* in Seal Red outline text, so both readings persist (the contradiction is never resolved by erasure). - **Marginalia** — small parenthetical glosses in Spectral italic hanging in the outer margins at irregular baselines, like a previous reader's pencil notes arguing with the text. - **The docket table** — ruled top-and-bottom only, no vertical rules, monospace columns, the visual language of a court calendar. - **Grain** — a faint 3% monochrome noise overlay (CSS, tiny tiled SVG) to read as a photocopy, never as texture-for-prettiness. ## Prompts for Implementation Build mujun.study as **one HTML file, one CSS file, one ES module** — no framework, no build step. It is a ~90-second descent down the seam between two arguments that cannot both stand. There is **no CTA, no pricing block, no stats grid, no testimonials, no email capture, no signup, no contact form, no FAQ accordion, no logo wall, no newsletter, no chatbot, no cookie banner, no pop-ups.** The reader arrives, is confronted, and leaves with an unanswered question. **Structure & storytelling:** - The page opens at THE CLAIM: the parable typeset across the centre seam, Archivo Narrow caps, the left half ranged-left in Ink-on-Paper, the right half ranged-right in Paper-on-Ink, the sentence physically broken at the rule. A Seal Red 1px underline `path-draw-svg` strokes itself under the word "矛盾 / mujun" over ~900ms on load, then never animates again. - As the reader scrolls into THE SPEAR, the left column expands to ~72% and the right contracts to a thin defensive strip; in THE SHIELD it mirrors exactly — right expands, left contracts. Use a `scroll-triggered` width transition with a slow `cubic-bezier(0.16, 1, 0.3, 1)` ease, no bounce — this is not playful, it is tectonic. The spear-and-shield SVG glyph morphs between "line-passes-through" and "line-stops-at-edge" states across these two strata via `path` interpolation tied to scroll progress. - THE COLLISION sets both arguments at equal width with alternating lines: line 1 from the SPEAR text (Ink-on-Paper, ranged left), line 2 from the SHIELD text (Paper-on-Ink, ranged right), down the whole stratum — readable, but only with effort, the friction is the content. The 2px Paper→Ink gradient band runs along the seam here only. - THE LIAR: clear the screen to plain Paper. One Spectral 300-italic sentence, centred on the seam, framed by big Graphite quasi-quote brackets: *"The sentence inside these brackets is false."* On hover anywhere in this stratum, the seam line flickers Seal Red for 120ms then returns — the only `glitch`-adjacent moment, and it must be subtle, almost deniable. - THE REGISTRY: a `` styled as a legal docket — columns CASE / YEAR / PRINCIPAL / STATUS. Rows for Epimenides (c. 600 BC), Zeno of Elea (c. 450 BC), the Sorites heap, Russell's set (1901), Gödel's incompleteness whisper (1931). Every STATUS cell reads **UNRESOLVED** in Seal Red. Rows `fade-reveal` with a 60ms `stagger` as they enter; no hover decoration beyond a 1px Graphite underline that `underline-draw`s left-to-right. - THE EXERCISE: a single question — *"Name a thing that is true because it is false."* — set large in Space Mono, alone, with the bottom 60vh of the stratum left as empty Paper. No input. No button. The emptiness is the assignment. - THE COLOPHON: small monospace — set in Space Mono, Archivo Narrow, Spectral; built without a framework; the contradiction is the host — and a closing line that directly negates the page's opening line (if the top said the spear wins, the bottom says it never could). **Motion & interaction discipline:** - Allowed: scroll-triggered width shifts, the one load-time underline draw, the SVG glyph morph, staggered table fade-ins, the deniable seam flicker, a `cursor-follow` 1px crosshair (a thin Graphite plus-sign that trails the pointer with slight `spring` lag — the only cursor effect, and it reads as a measuring tool, not a toy). - Forbidden: parallax depth, drop-shadow lifts, card flips, tilt-3D, glassmorphism, gradient meshes, neon glow, confetti, anything bouncy or elastic, any rounded corner, any animation that exists to delight rather than to argue. - Respect `prefers-reduced-motion`: glyph morph and width shifts snap to their end-states; the underline appears already drawn. **Layout rules:** - The 1px centre seam is `position: fixed`, full-height, `background: #9A9388`, always visible. - 12-column grid with intentional, *documented-in-comments* violations — never random; each break has a one-line code comment explaining which rule it breaks. - Generous vertical rhythm; lots of bare Paper; the page should feel like a sparse legal document, not a dense one. - Everything left-or-right ranged relative to the seam; nothing centred except THE CLAIM headline and THE LIAR sentence. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The layout *is* the thesis.** The corpus is saturated with hand-drawn (96%), glassmorphism (77%), warm-gradient (96%) sites where the visual style is a costume over generic content. Here the split-screen seam, the doubled-and-disagreeing text, the spear-passes-through vs. spear-stops glyph, and the both-fill-toward-an-unreachable-point progress bar are *literal renderings of the parable named in the domain*. Remove the contradiction and there is no design left. 2. **Anti-design brutalism in a juridical, not an agency, voice.** Anti-design sits at ~3% and brutalist at ~6% in the corpus, and what little exists reads loud and rebellious. mujun.study is cold, archival, court-docket dry — undecorated HTML-grey, hairline rules, "STATUS: UNRESOLVED" — a brutalism of the logic seminar, not the design portfolio. Pairs the rare `scholarly-intellectual` (5%) and `mysterious-moody` (8%) tones. 3. **Monospace as the entire spine, with a condensed counter-face used only to disagree with it.** While `mono` typography is common as an accent, here `Space Mono` carries 90% of the page and `Archivo Narrow` exists *solely* to clash widths with it — two type widths staged as a contradiction. No font is decorative; the type pairing is itself a thesis statement. 4. **Subtraction as the dominant move.** No hero image, no photography, no illustration, no CTA, no form fields, no buttons anywhere — the EXERCISE stratum is 60vh of deliberate emptiness; the page ends by negating its own opening line. Nearly every convention the frequency table tracks (card-grid 89%, full-bleed-hero, stat-grids, CTA stacks) is actively refused. 5. **A single restrained chromatic note — Seal Red — used only on the word "UNRESOLVED" and three other micro-moments,** against a two-register warm-monochrome (#F4F2EC / #16140F) split. The corpus's warm-gradient default (96%) is replaced by exactly one 2px gradient, two pixels tall, hidden in the seam. **Chosen seed/style:** `experimental type layout` — *aesthetic: anti-design + brutalist · layout: split-screen / broken-grid · typography: mono (Space Mono) + condensed (Archivo Narrow) + hairline-serif aside (Spectral) · palette: high-contrast monochrome (warm bone / warm near-black) + lone Seal Red · patterns: scroll-triggered, path-draw-svg, stagger, fade-reveal, cursor-follow, underline-draw · imagery: minimal / line-illustration (diagrammatic SVG) + grain-overlay · motifs: sharp-angles + grid-lines + the seam · tone: scholarly-intellectual + mysterious-moody* **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (77%), warm + gradient palettes (98% / 96%), photography (98%), card-grid (89%), full-bleed-hero, parallax (92%), cursor-follow's typical playful use, spring/magnetic/elastic bounce (85% / 80%), tilt-3d (26%), pastoral-romantic & warm-inviting tones (34% / 25%), any `border-radius`, any drop shadow.