# Design Language for munju.wiki ## Aesthetics and Tone munju.wiki is a **public index of one mind** — a single-author knowledge atlas built like a Swiss railway timetable for ideas. "Munju" (문주, the load-bearing gate-pillar) is treated literally: this is the *post* on which a whole personal archive hangs. The aesthetic is **cold International Typographic Style**, deliberately stripped of every convention the rest of the web leans on. There is no warmth, no gradient, no glow, no rounded card, no drop shadow, no parallax hero photo, no hand-drawn squiggle. Instead: a hard 12-column rule grid printed in near-black on bone-white, set entirely in a single grotesque and a single monospace, with one — exactly one — accent: a cadmium signal-red used the way Müller-Brockmann used red, as punctuation, never decoration. The mood is **clinical, exact, quietly confident** — the tone of a well-kept card catalogue or a flight-information board: it does not try to charm you, it tries to *orient* you. Every page announces what it is in the top-left corner the way a Helvetica road sign announces a junction. The personality emerges not from ornament but from rigor: ruthless alignment, mathematically derived line-heights, baseline grids you can actually see, and a navigation model that behaves like an index rather than a story. Reading munju.wiki should feel like opening a flat-file drawer in a Zurich design archive — the slight squeak of the rail, the smell of the manila, the satisfaction of a thing filed exactly where it belongs. ## Layout Motifs and Structure **The Grid is the Building.** Every screen sits on a visible **12-column modular grid** (column width = 64px, gutter = 24px on desktop, collapsing to 6 then 2 columns) with a **24px baseline rhythm** rendered as a faint 1px hairline ruler down the extreme left edge — like an architect's drawing board. Hairlines (0.5px on retina, 1px otherwise, color #2A2A28) divide every region; there are **no boxes, only rules**. Content is hung *from* lines, never floated *inside* containers. **The Index Spine.** The left two columns are a permanent **vertical index rail**: a flush-left, baseline-aligned list of every top-level node in the wiki, set in monospace at 13px, numbered in a strict `[A.01] [A.02] [B.01]` Dewey-style scheme. It never collapses to a hamburger on desktop; on mobile it becomes a full-bleed index *page*, not a drawer. The current location is marked by a single cadmium-red square block (8×8px) sitting in the gutter — the only red on the index. **The Header Slug.** Every page's top-left module is a fixed-format **bibliographic header block**: NODE ID / TITLE / FIRST-FILED date / LAST-REVISED date / WORD COUNT / OUTBOUND LINKS count — six lines of monospace metadata, ragged-right, like a library accession stamp. This block is identical in position and structure on every page; only the values change. **Article Column = 7 columns.** Body text occupies columns 3–9, leaving columns 10–12 as a **margin apparatus**: footnotes, backlinks ("filed under"), and a live mini-map of where this node sits in the graph, all set small in mono and pinned to the same baseline grid as the body. **No hero. No fold theatre.** The homepage is literally **the full index, A→Z, rendered as a dense two-column directory** — hundreds of entries visible at once, like the back-of-book index of a reference work. Scrolling is reading a list, not riding a narrative; the "experience" is the *density and exactness* of the catalogue itself. Section dividers are full-width hairlines with a single mono label flush-left at the rule (`§ B — METHOD`). ## Typography and Palette **Type system (Google Fonts only) — two families, no exceptions:** - **Grotesque workhorse:** `Archivo` (variable, weights 400 / 500 / 600 / 700; also `Archivo Expanded` for headings). Archivo is a neo-grotesque with the cool, even-color, slightly-condensed-default texture that reads as a modern descendant of Akzidenz-Grotesk — the family the whole Swiss school was built on. Used for: all headings, the index rail labels at large size, pull-quotes. Headings are set in `Archivo Expanded` at 600, **uppercase**, with `letter-spacing: 0.02em`, and they sit *on* a hairline (the rule passes behind the cap-height). Display heading scale: 64 / 40 / 28 / 20px on a strict 1.5 modular step, all snapped to the 24px baseline. - **Monospace apparatus:** `Spline Sans Mono` (weights 400 / 500). This carries *everything structural*: the bibliographic header block, the Dewey node IDs, footnotes, backlinks, the baseline ruler numerals, timestamps, link hover targets, the graph mini-map labels. 13px / 20px line-height for apparatus, 12px for footnotes. The monospace is the "machine voice" of the archive; the grotesque is the "editor's voice." - **Body text:** `Archivo` 400 at 17px / 24px (exact baseline lock), measure capped at 66 characters. Links in body are **not** colored — they are underlined with a 1px solid rule offset 3px below baseline; on hover the underline thickens to 2px and a small mono superscript node-ID appears after the link (`tab-completion archive`⁠ᴮ·⁰⁴). The *only* place red ever touches type is the active index marker and the single "EDIT" / "HISTORY" affordance per page. **Palette — monochrome plus one signal:** - `#F4F2EC` — **Bone** — the paper. Warm-neutral off-white, the field everything is printed on. (This is the closest thing to "warmth" allowed: a paper tone, not a gradient.) - `#1C1C1A` — **Press Black** — primary ink. Near-black with a whisper of green so it reads as printed, not screen-black. All body text, headings, the index. - `#2A2A28` — **Rule Grey** — hairlines and the baseline ruler. Just barely darker than the paper's shadow. - `#7A7A74` — **Margin Grey** — the monospace apparatus, footnotes, metadata values, secondary index entries. Quiet but legible. - `#D72E1F` — **Cadmium Signal** — *the* accent. The active-node square, the §-section tick, the "EDIT/HISTORY" link, the "you are here" dot on the graph mini-map. Never a background, never more than ~0.5% of any screen's pixels. Used the way a single red line is used on a Swiss poster: as the eye's anchor. - `#E9E6DD` — **Ash Bone** — the only "fill" permitted: a 1-shade-darker paper tone for the index rail's hover state and the current row's background band. Flat, no transition curve other than a 90ms linear swap. No gradients. No shadows. No blur. No transparency layers except the baseline ruler at 14% opacity. If a designer reaches for a glow, they have misread this document. ## Imagery and Motifs **There is almost no imagery — and that is the imagery.** munju.wiki's visual richness is *typographic and gridded*, not pictorial. The recurring motifs: 1. **The Baseline Ruler.** Down the left edge of every page, a 14%-opacity hairline grid every 24px with mono numerals (`24 48 72 …`) every fifth line — literally drawing the metric the page is built on. It is decorative *because* it is honest. 2. **The Dewey Node-ID.** Every page, section, and index entry carries a monospace catalogue code in square brackets: `[A.01]`, `[C.11.iii]`. These IDs are *everywhere* — in the header block, in backlinks, as link superscripts, in the graph map. They are the site's ornament, repeated like a maker's mark. 3. **The Hairline.** Single-pixel rules in Rule Grey, used the way a Swiss layout uses them: to separate, to underline a heading, to box nothing. Rules are *always* full-bleed within their region or full-column-width — never a partial decorative flourish. 4. **The Cadmium Square.** An 8×8px solid red block. It marks "current," "you are here," "live." It is the only filled shape on the site that isn't text, and it never grows, never animates beyond a 90ms position snap when you change pages. 5. **The Graph Mini-Map.** Top-right of every article: a tiny (~180×180px) node-link diagram of *just this node's immediate neighbourhood* — 1px Rule Grey lines, Press Black dots, one Cadmium dot for the current node, mono labels at 10px. It is rendered as crisp SVG, axis-snapped, never organic, never force-directed-jiggly — laid out on the *same* 12-column logic, just shrunk. 6. **Diagrams, when content needs them,** are drawn in the house style: Press Black strokes only, Spline Sans Mono labels, hairline grid background, one Cadmium element max. Photographs, if ever embedded, are forced to 1-bit / high-contrast halftone via CSS filters so they read as *printed plates*, not as web hero images. No icons from icon-fonts. No emoji. No illustration. The favicon is a 16×16 Cadmium square on Bone. ## Prompts for Implementation Build munju.wiki as **static HTML, one stylesheet, one small ES module** — no framework, no build step needed, no service worker. The whole thing is "a reference book that happens to be a website." It is **a knowledge archive, not a product**: there is **no signup, no pricing table, no stats-grid ("10k articles!"), no testimonial carousel, no CTA banner, no newsletter capture, no chatbot, no cookie wall, no logo cloud, no feature comparison.** If you find yourself building any of those, stop — they violate the entire premise. **Structure to ship:** 1. **`/` — The Index.** Full-bleed two-column directory of every node, A→Z, set in 13px Spline Sans Mono, each line: `[NODE-ID] Title …………… last-revised · N links`. Section headers (`§ A — FOUNDATIONS`, `§ B — METHOD`, `§ C — FRAGMENTS`) are full-width hairlines with a flush-left uppercase Archivo Expanded label and a Cadmium tick. This page is the homepage. Density is the feature — show 200+ entries above any "fold." 2. **The left Index Spine** is a `position: sticky` two-column rail present on *every* article page; current node gets the Cadmium square in the gutter and an Ash-Bone row band. On `≤ 720px` it becomes a standalone full-page index reached by a single mono link `[ INDEX ]` top-left. 3. **`/n/[node-id]` — An Article.** Top-left: the six-line monospace **bibliographic header block** (NODE / TITLE / FIRST-FILED / LAST-REVISED / WORDS / OUT-LINKS). Body in columns 3–9. Columns 10–12: numbered footnotes, a "FILED UNDER" backlink list, and the SVG graph mini-map. Footer of every article: a hairline, then `[ EDIT ] [ HISTORY ] [ RANDOM NODE → ]` in mono — the only Cadmium-tinted links on the page. 4. **`/random`** — bounces to a random node. Because a good archive rewards wandering. **Motion — austere and mechanical:** - **Page transitions:** none, or a 120ms linear cross-dissolve at most. No slide, no zoom, no curtain. - **The Cadmium square** snaps to the new current-node position over 90ms `linear` when you navigate the index — like a mechanical flight-board flap clicking into place. - **Index rows** swap to Ash-Bone background on hover over 90ms `linear` (no easing curve, no lift, no shadow). The row's node-ID brightens from Margin Grey to Press Black simultaneously. - **Body links** thicken their underline 1px→2px on hover over 80ms `linear`, and the mono node-ID superscript fades in over the same 80ms. - **The baseline ruler** does *one* thing: while you scroll, the numeral nearest the viewport's vertical centre goes Cadmium for as long as it's centred — a quiet odometer of where you are in the document. Pure CSS scroll-driven animation if available; else a tiny scroll listener. - **First paint:** the grid hairlines draw themselves left-to-right and top-to-bottom over ~400ms `linear` on initial load only — the page "ruling itself up" like a draughtsman snapping chalk lines. After that, never again. No spring physics. No magnetic cursor. No tilt. No ripple. No typewriter effect. No parallax. The interaction language is *the click of a card-catalogue drawer*, not *the swoosh of an app*. **Storytelling stance:** the narrative *is* the structure — the reader composes their own path through a transparently-organized archive. The "immersive experience" is the uncanny calm of a system that is *completely legible*: you always know the node-ID, the date, the neighbours, the position on the grid. Munju = the load-bearing pillar; the site's job is to *hold the archive up straight* and let you walk its corridors. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Hard Swiss International Typographic Style in a corpus drowning in warmth.** The frequency analysis shows `warm` palettes at 98% and `gradient` at 96%; `hand-drawn` aesthetic at 96%, `glassmorphism` at 78%. munju.wiki has **zero gradients, zero hand-drawn marks, zero glass, zero shadows** — a monochrome-plus-one-signal-red system on a printed-paper field. It is the cold structural opposite of the house average. (Chosen aesthetic family: `swiss` — present in only ~5% of the corpus — executed strictly, with `mono`-led apparatus typography.) 2. **Navigation as an index, not a story.** Where `parallax` (92%), `cursor-follow` (89%), `spring` (85%), and `magnetic` (80%) dominate the pattern stats, munju.wiki uses **none of them** — its only motions are 80–120ms `linear` swaps and a mechanical flight-board snap. The homepage is a dense A→Z directory of hundreds of entries, not a `hero-dominant` (12%) scroll narrative; it leans on the rare `single-column`/`sidebar`/`ma-negative-space` end of the layout vocabulary by way of a visible 12-column rule grid. 3. **The visible metric.** A semi-transparent baseline ruler with mono numerals runs down every page, and a per-node SVG graph mini-map sits in the margin — the design *exposes its own measuring system and link topology* as ornament. No other design in the set treats the grid itself, and the wiki's link graph, as the decorative content. 4. **One accent, used like a Swiss poster.** Cadmium `#D72E1F` appears on under ~0.5% of any screen — an 8px square for "you are here," a §-tick, one EDIT/HISTORY link. Color is *punctuation*, deliberately rejecting the `dopamine-neon`, `aurora-gradient`, and multi-hue trends visible in the palette frequencies. 5. **Anti-product, pro-archive.** Explicitly no CTA banners, pricing blocks, stat-grids, testimonials, or signup capture — the brief's avoided patterns are structurally impossible here because the site is conceived as a public reference book, not a funnel. **Avoided patterns from frequency analysis:** `hand-drawn`, `glassmorphism`, `warm`/`gradient` palettes, `parallax`, `cursor-follow`, `magnetic`, `spring`, `tilt-3d`, `card-grid` aesthetics, hero photography, CTA/pricing/stat-grid layouts. **Chosen seed/style:** `swiss typography clean` — *aesthetic: swiss · layout: single-column (12-col rule grid) + sidebar index spine · typography: mono + sans-grotesk (Spline Sans Mono / Archivo) · palette: monochrome + high-contrast (Bone / Press Black / one Cadmium signal) · patterns: micro-interactions (linear swaps, mechanical snap) · imagery: minimal + line-illustration (baseline ruler, SVG graph map) · motifs: grid-lines + book-scholarly (Dewey node-IDs, accession header) · tone: scholarly-intellectual / minimal*.