# Design Language for mujun.works ## Aesthetics and Tone mujun.works (矛盾 — *the spear and the shield*) is the public workshop of an imaginary guild of **paradox-smiths**: artisans who forge objects that cannot logically coexist. The original tale — a merchant who sells a spear that pierces any shield and a shield no spear can pierce — is the guild's founding contradiction, and the entire site is built as if that workshop kept an honest, unflinching catalogue of its own impossible inventory. The mood is *anti-design as integrity*: a deliberately raw, unstyled-looking interface that quietly contradicts itself everywhere — a "draft" stamp on a finished page, a footer at the top, a "page 1 of 1 of ∞," a heading that argues with its own subheading. The aesthetic is **brutalist anti-design** filtered through the discipline of a printer's proof sheet: hairline rules, registration crosses, marginalia in red pencil, exposed grid coordinates, and visible "errata" — but the errata are *intentional truths*, not mistakes. Nothing glows. Nothing is glassy. Nothing is rounded. The page looks like it was set in metal type, proofed, corrected by a tired copy-editor at 3 a.m., and then deliberately *left* with the corrections showing because the corrections *are* the content. The tone is dry, faintly absurd, scholarly-deadpan — the voice of a craftsman who has made peace with the fact that his life's work is impossible and has decided to document it meticulously anyway. Emotionally: equal parts museum vitrine and self-aware joke. The visitor should feel they have wandered into a serious institution dedicated to an unserious premise, presented with such typographic rigor that the premise becomes oddly moving — every object in the catalogue is a small monument to wanting two incompatible things at once. ## Layout Motifs and Structure The site is **a single proof sheet** — one long vertical page, presented as Folio 7 of *The Mujun Works: A Standing Catalogue of Mutually Exclusive Objects, Revised Continuously*. The governing structure is a **visible 12-column letterpress grid** with the column guides actually drawn on the page as 0.5px cool-grey hairlines that never disappear, plus printed coordinate ticks (`A · B · C …` across the top, `01 · 02 · 03 …` down the left margin) so the reader can "cite" any region — and several captions *do* cite regions that are nowhere near where the caption sits, because contradiction is the point. Reading order, top to bottom: 1. **The Colophon Band (which behaves like a footer at the top).** A 240px band carrying the full press imprint: `THE MUJUN WORKS · FOLIO VII · SET IN METAL · PROOFED & UNCORRECTED · REVISED CONTINUOUSLY` — printer's-mark logotype, a registration cross in each corner, and a single line of "errata" that lists corrections to text that appears *later*, before the reader has seen it. 2. **The Standing Contradiction.** A full-bleed spread of the founding object: `OBJECT 00 — THE SPEAR THAT PIERCES ALL SHIELDS / THE SHIELD NO SPEAR PIERCES`, rendered as a single technical plate where a spear and a shield are drawn overlapping in a way that is geometrically impossible (the spear is *both* in front of and behind the shield, M.C.-Escher-style, achieved with carefully clipped line art). A specimen tag hangs off it on a hairline "string." 3. **The Catalogue Wall — exactly fifteen entries** in an asymmetric, deliberately *broken* grid: cards are not uniform; some span 3 columns, some 7, some 5, and they do **not** align to a baseline — entry 04 sits 11px below where the grid wants it, and a tiny red pencil arrow points at the gap with the note `(intentional — see folio I).` Each entry is a paradox-object with: an accession code, a technical line-plate, a deadpan description, a "Specifications" block whose two lines contradict each other (`MASS: 4.2 kg / MASS: weightless`), and a `STATUS` stamp that is always simultaneously `IN STOCK` and `SOLD OUT`. 4. **The Errata Ledger.** A long single-column run set like a printer's correction list — `p.2, l.7: for "impossible" read "trivial" / p.2, l.7: for "trivial" read "impossible"` — each correction immediately reversed by the next. It scrolls past long enough to become hypnotic. 5. **The Closing Mark (which behaves like a masthead).** The wordmark at full size, a final registration cross, and one printed line: `END OF FOLIO VII · CONTINUES ON FOLIO VII`. No hero in the marketing sense, no nav bar, no cards-with-CTAs, no pricing table, no testimonial row, no stat grid, no cookie banner, no dark-mode toggle. The grid guides and coordinate ticks are the only persistent chrome, and they are decoration disguised as utility. ## Typography and Palette **Type system — three families, all chosen to read as "set in metal," with one deliberate anachronism:** - **Display / wordmark / accession codes — `Spectral SC` (Google Fonts), small-caps, weight 600.** Used at 88–104px for the wordmark and folio number, 13px (tracked `0.22em`) for the accession codes and `STATUS` stamps. Spectral SC's old-style small caps give the "press imprint" authority without slipping into ornamental serif territory. - **Body / catalogue descriptions / errata ledger — `Spectral` (Google Fonts), weight 400, with `400 italic` for all the self-contradicting clauses.** Generous leading (1.7), measure capped at 62 characters, set ragged-right like a galley proof. The italic is reserved exclusively for statements that contradict the roman text beside them — so contradiction has its own *style*, not just its own words. - **The anachronism — `Spline Sans Mono` (Google Fonts), weight 400.** The grid coordinates, the column labels, the `MASS / TENSILE / STATE` spec keys, and the tiny "(intentional — see folio I)" marginalia. A clean modern mono against the old-style serif: a typographic contradiction embedded in the type stack itself. **Palette — `paper-aged` neutrals with two pencils. Six values:** - `#F4F0E6` — *galley stock*: the warm off-white paper of the entire page, with a faint printed-grain texture. - `#1B1916` — *type black*: the ink. Not pure black — a warm near-black, the colour of metal type that has been inked a thousand times. - `#6E6A5E` — *grid grey*: the 0.5px column guides, coordinate ticks, and hairline rules. Quiet enough to ignore, present enough to be unmistakably *drawn*. - `#9A2A2A` — *editor's red*: the correction pencil — errata strikes, the little arrows, the "intentional" marginalia, the reversed-correction marks. The only saturated colour on the page. - `#2C4A52` — *proof blue*: the registration crosses, the specimen-tag strings, and the second pencil — used for the *meta*-corrections (corrections that correct the red corrections). A muted teal-slate. - `#E4DDCA` — *tint block*: a slightly darker paper tone used to fill the "Specifications" blocks and the colophon band, like a pale highlighter rectangle on the proof. Type-black on galley-stock everywhere; red and blue used surgically; grid grey omnipresent and ignorable. No gradients, no glow, no shadow beyond a single 1px "letterpress bite" inset on the tint blocks. ## Imagery and Motifs **Technical line-plates of impossible objects.** Every catalogue entry's image is a **single-weight ink line drawing** (`#1B1916` on `#F4F0E6`, ~1px strokes, no fill, no shading) of an object that cannot exist as drawn — rendered in the flat, confident style of a patent diagram or an old encyclopedia plate, complete with leader lines and lettered call-outs (`a`, `b`, `c`) pointing to features the caption never explains. The objects: the spear-and-shield; a ladder whose top rung is also its bottom rung (a clean Penrose loop); a key that is its own lock; an hourglass with sand running both ways; a map drawn at 1:1 scale, folded; a door that is open and shut, hinged on both jambs; a perfectly round square (drawn as a square whose corners are labelled "radius"); a chair you can only sit in by standing; a sealed envelope addressed to itself; a candle that burns colder the longer it stays lit; a coin that is heads on both faces and tails on both faces; a thread with one end; a clock with thirteen evenly-spaced hours; a glass that is full when empty; and a single straight line that returns to its start. Each is drawn so the impossibility is *quiet* — you have to look twice. **Motifs threaded through the page:** - **Registration crosses** (the ⊕ printer's alignment mark) in every corner of every band — sometimes slightly *mis*-registered on purpose, with a faint red ghost-cross 2px off. - **Specimen tags on hairline strings** — small `#E4DDCA` rectangles with a punched hole, hanging off the line-plates, carrying the accession code and a date that is always `undated`. - **The reversed-correction mark** — a red strike-through immediately followed by a blue strike-through of the correction, a visual rhythm that recurs whenever the text contradicts itself. - **Drawn grid coordinates** — the `A·B·C` / `01·02·03` ticks, treated as both functional citation system and ambient ornament. - **Errata as decoration** — small bracketed marginalia `[for X read Y]` floating in the outer margins like dust. No photography. No 3D renders. No icon set. No stock anything. Every visual element is line, rule, mark, or tag. ## Prompts for Implementation Build mujun.works as **one static proof sheet** — a single `index.html`, one `style.css`, one ES module — that opens as Folio VII of a printer's catalogue of impossible objects. Treat it as a slow, deadpan two-to-three-minute browse, *not* a landing page. There is no CTA, no sign-up, no pricing, no testimonial, no contact form, no chat bubble, no cookie banner, no dark-mode toggle, no language toggle, no stat counter, no feature grid, no hero-with-button. The page is a document. **Structure & scaffolding.** Use CSS Grid for the visible 12-column letterpress grid, and *actually render the column guides* — `repeating-linear-gradient` of 0.5px `#6E6A5E` lines, kept on at all viewport widths, collapsing to fewer columns (8, then 4) at narrow breakpoints with the coordinate ticks reflowing accordingly. Print the `A·B·C…` ticks along a sticky top margin strip and `01·02·03…` down the left margin in `Spline Sans Mono`, 10px. Order the page as: colophon band (top, behaves like a footer) → the Standing Contradiction full-bleed → fifteen catalogue entries in a *broken* asymmetric grid (varying column spans, one deliberately misaligned by 11px with a red arrow note) → the Errata Ledger single column → the Closing Mark (bottom, behaves like a masthead). Cap text measure at ~62ch, ragged-right. **Texture & print feel.** Lay a subtle paper grain over `#F4F0E6` via a tiled SVG-noise data-URI at very low opacity. Give the `#E4DDCA` tint blocks a single 1px inset "letterpress bite" (an inset box-shadow in a slightly darker tint) — no drop shadows anywhere else. All rules are hairlines. The wordmark and folio number in `Spectral SC` at 88–104px; everything contradicting in `Spectral` italic; spec keys and coordinates in `Spline Sans Mono`. **Animation — restrained, mechanical, in service of the joke.** Reserved-motion respected; on no-preference: - **The press settling.** On load, the registration crosses do a 280ms snap into alignment from a 3px offset (a `spring`-ish ease, then dead stop) — as if the plate just locked. The red ghost-cross stays 2px off forever. - **Errata that won't stay corrected.** In the Errata Ledger, as each line scrolls into view it shows the red strike-through drawn left-to-right (`path-draw-svg` on an SVG line over the word, ~360ms), then 700ms later the *blue* strike-through draws over the correction — and the original word fades back in at 0.85 opacity. The correction undoes itself. Loop the pair once on first reveal, then leave it. - **The misaligned entry.** When entry 04 enters the viewport, the little red arrow does a 2px nudge (a tiny, twice-repeated `elastic` jiggle) pointing at the 11px gap, then stills. Hovering the entry shows the note `(intentional — see folio I)` fade in over 200ms. - **Specimen tags swing.** The hairline-string tags on each line-plate respond to scroll velocity with a damped pendulum sway (1.5–4° max), settling to vertical — a `parallax`-driven micro-motion, never decorative jitter. - **Status stamp flicker.** The `IN STOCK / SOLD OUT` stamp cross-fades between its two contradictory states on a slow 4s cycle (1.2s fade, 0.8s hold each) — so it is genuinely, permanently both. No interaction needed; it just contradicts itself in the corner of your eye. - **The impossible plates.** Each line-plate's call-out letters (`a b c`) do a staggered 60ms fade-in when the plate scrolls into view. The plates themselves never animate — the impossibility is static and certain. **Voice in copy.** Deadpan, exact, printerly. Every "Specifications" block has two lines that flatly contradict (`STATE: solid / STATE: gas`). Every caption is sober. The errata corrections always reverse themselves. The colophon's "errata" list references page/line numbers that don't exist yet when the reader hits them. Cite grid coordinates that are wrong. Never wink — let the reader find the joke. **Bias toward the document, away from the brochure.** If a section is starting to look like a marketing block, replace it with a longer run of catalogue entries or errata. The richest screen is the broken catalogue wall; the most hypnotic is the self-undoing errata ledger. There is nothing to buy, nothing to sign up for, nothing to click — only fifteen impossible objects, honestly catalogued, on a sheet of warm paper ruled with grey lines. ## Uniqueness Notes **Differentiators against the 394-design corpus:** 1. **Anti-design + printer's-proof framing is a near-empty intersection.** `anti-design` aesthetic sits at 3% and `paper-aged` imagery at 6%; no prior design treats the *proof sheet / galley correction* as the entire interface metaphor, with visible registration crosses, coordinate ticks, and self-reversing errata as the core content. The contradiction is not a theme layered on a normal site — it is structurally enacted (footer at the top, masthead at the bottom, captions citing the wrong coordinates, a status stamp that is permanently both states). 2. **No glass, no glow, no gradient, no card-with-CTA, no stat grid.** This sidesteps the corpus's most overused patterns simultaneously: `glassmorphism` (77%), `gradient` palette (96%), `card-grid` as uniform CTA grid (89%), `cursor-follow` (89%), `parallax` (92% — used here only as a 1.5–4° damped tag-sway, not a depth gimmick). The animation budget is spent on a *single mechanical idea* — corrections that won't hold — rather than the standard spring/magnetic/stagger trio. 3. **The line-plate system of impossible objects is bespoke and conceptually load-bearing.** Fifteen single-weight patent-style diagrams of geometrically impossible artefacts (Penrose ladder, self-locking key, 1:1 folded map, round square), each drawn so the impossibility is quiet — there is no equivalent illustration program in the corpus, and it is the opposite of the dominant `photography` imagery (98%). 4. **Typography enacts contradiction.** Italic `Spectral` is reserved *exclusively* for clauses that contradict the roman text beside them, and a clean modern mono (`Spline Sans Mono`) is deliberately set against an old-style serif — contradiction lives in the type stack, not just the copy. 5. **Zero conversion surface.** No CTA, pricing, testimonial, signup, contact form, cookie banner, or toggles — a deadpan museum document, which is rare against the corpus's marketing-page defaults. **Chosen seed / style:** `brutalist anti-design experiment` (from seeds.json) — interpreted as a printer's-proof anti-design where the interface honestly contradicts itself everywhere. **Avoided patterns from frequency analysis:** glassmorphism (77%), hand-drawn aesthetic (96%), gradient palette (96%), warm-gradient combo, uniform card-grid CTA layout (89%), cursor-follow (89%), heavy parallax-depth (92%), photography imagery (98%), stat grids, pricing blocks, dark-mode toggles.