# Design Language for munju.im ## Aesthetics and Tone **munju.im** carries the weight of a word that resists easy translation — *munju* (문주) suggests a threshold keeper, the figure who stands between worlds, guardian of a gate that may or may not open. The **.im** ccTLD (Isle of Man) adds an unintentional English pun: *I am*. The full URL whispers *I am the threshold*. This is a site about **presence at the edge of a boundary that the visitor cannot quite name**. The aesthetic is **swiss-systematic but deliberately haunted** — the grid is immaculate, the rules are obeyed, but something inside the grid refuses to stay still. Think of a Josef Müller-Brockmann poster that has been left in a damp room for forty years: the geometry survives intact but the ink has shifted, the paper has yellowed at the edges in a pattern that looks almost intentional. The Swiss International Style here is not a celebration of rational order — it is the *container* into which an older, stranger logic has been poured. The tone is **mysterious-moody** without relying on darkness for its own sake. The background is bone-white — `#F5F0E8` — not black. The mystery comes from *what is withheld*, from the weight of silence in a Garamond italic, from the micro-pause before a card reveals its next face. The viewer never feels menaced; they feel *watched by something that has been waiting a long time*. **Inspiration sources:** Swiss grid systems of the 1960s (Armin Hofmann, Karl Gerstner); Japanese *ma* (間) — the pregnant pause between objects; medieval marginalia, where the scribe's private obsessions leaked into the borders of sacred texts; the visual grammar of early 20th-century naturalist field guides with their clean ruled plates and unsettling specimen illustrations. --- ## Layout Motifs and Structure The page is built on a **strict 12-column Swiss grid**, 1200px max-width, 24px gutters, 48px outer margins. The grid is visible — not as a decorative element but as a **ruled substrate**, a faint `#C8C0B0` line network at 1px opacity 0.08 that the reader can almost but not quite see. The grid says: *this is organized, this is knowable*. What sits on the grid refuses to confirm that. **Card-grid composition.** The primary content layer is a **masonry-adjacent card system** — three columns on desktop, two on tablet, one on mobile — but the cards do not all share the same height. Every third card is *tall* (ratio 1:1.618, the golden section), making the grid breathe unevenly, like a chest that pauses before exhaling. Cards have no drop shadows. They have borders: `1px solid #1A1A1A` on the outside, a `2px solid #E8360A` inset rule visible only on hover — the only moment of heat in a cold composition. **Spatial logic:** - The viewport-height header is a single typographic statement: the domain name in Cormorant Garamond Display, set enormous (12 vw), positioned at the mathematical golden-ratio point from the top (38.2% from top), left-aligned with the grid's first column. No hero image. No tagline. The letterforms themselves carry the entire weight of the first impression. - Below the header, a single 1px `#1A1A1A` horizontal rule — full bleed to the viewport edges, not contained by the grid — acts as the *threshold* the visitor crosses to enter the content proper. - Card content is arranged in **reading-gravity sequence**: each card title at top-left, a line-illustration figure centered and large (60% of card face), caption text below at 11px Cormorant Garamond italic, and a date stamp in the bottom-right corner in monospaced numerals — like a field-guide specimen plate. - Footer is minimal: the domain name repeated in 8px tracking-widest uppercase `#6B6359`, a single sentence in italic, nothing else. **Motion grammar:** Cards enter the viewport via `opacity 0 → 1` over 0.6s with a `transform: translateY(12px) → translateY(0)` — slow, deliberate, like a page being turned rather than content being loaded. No bounces, no spring physics. Everything arrives with *weight*. --- ## Typography and Palette ### Typefaces **Display (headings, card titles, large numerals):** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weights 300 (light), 400 (regular), 600 (semibold), and italic variants of all three. This is not Garamond as a polite serif choice. Cormorant Garamond is Garamond pushed to extremes: hairline strokes at display sizes that feel almost dangerous, swash capitals that look like they were drawn by someone who had strong opinions about beauty. Set at `font-optical-sizing: auto`. Display instances run 8–14vw. Body headings run 28–48px. **Body and UI:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond) — the workhorse. Body text at 16px/1.65 line-height on desktop. Card captions at 11px italic. The combination of Cormorant Garamond (display) and EB Garamond (body) creates a family coherence — the same historical DNA — while allowing the display type to perform at extremes the body type never reaches. **Monospaced accent (dates, codes, metadata):** [Martian Mono](https://fonts.google.com/specimen/Martian+Mono) — weight 400 only, used exclusively for date stamps, catalog numbers, and any coordinate-like notation. At 10–12px, it reads as a registration mark, an archival label. ### Palette — High-Contrast with Specimen Warmth | Role | Name | Hex | |------|------|-----| | Page ground | Bone | `#F5F0E8` | | Primary ink | Near-black | `#1A1A1A` | | Secondary text | Warm graphite | `#4A4540` | | Tertiary text | Faded rule | `#6B6359` | | Grid line | Pale rule | `#C8C0B0` | | Accent (activation) | Signal red | `#E8360A` | | Accent (secondary) | Burnished gold | `#B08030` | | Card surface | Cream | `#FAF7F2` | | Card border | Ink rule | `#1A1A1A` | The palette is **high-contrast** in a specific way: the contrast ratio of `#1A1A1A` on `#F5F0E8` is approximately 17.5:1 — far beyond accessibility requirements but chosen for the quality of that contrast, the way 19th-century type looked on cream wove paper. The signal red `#E8360A` appears *nowhere* in a resting state — it exists only as hover activation and as the single stroke rule that gates the header from the content. This restraint makes every appearance of red feel like an alarm that has been very carefully placed. --- ## Imagery and Motifs **Line illustration is the exclusive image vocabulary.** No photography. No raster art. Every image on the site is a monochrome line drawing — ink on white — in the manner of Victorian naturalist field guides (think Ernst Haeckel's *Kunstformen der Natur* but stripped of its decorative overlay, leaving only the observation). Stroke weight is 1.2px at rendered size; lines do not vary in weight the way calligraphic drawings do. They are *specimen illustrations*, not expressive drawings. **The illustration corpus (examples for the site's cards):** 1. A human hand, drawn from the dorsal side, fingers slightly spread, lines indicating the metacarpal bones visible through the skin — a medical illustration manner. 2. A geometric form that is almost a sphere but not quite — a dodecahedron whose faces have been subtly warped as if the object is breathing. 3. A moth, pinned but viewed at slight angle, wings at 42° — one wing catches more of the notional light, the other recedes. 4. A labyrinth in plan view — not the classical Cretan seven-ring labyrinth, but a grid-labyrinth that follows the Swiss grid logic of the page itself, made of 1px lines on the same grid as the content. 5. A standing figure, minimal — more anatomy diagram than portrait. No face, only proportion marks at key measurement points, like a Vitruvian schema without the circle and square. 6. A single botanical specimen: one branch, three leaves, labeled at blade and petiole with letters (*a*, *b*, *c*) that correspond to no visible key on the card itself — the key exists elsewhere, or perhaps nowhere. **Motifs — Retro Patterns:** The grid background carries a near-invisible **hatching pattern** — 45° diagonal lines at 0.5px, spacing 12px, color `#C8C0B0` at 6% opacity. This is the classic engraving hatching of 19th-century print, used here as a texture that the eye reads as *surface* rather than *pattern*. On hover, individual cards briefly reveal a full-face version of this hatching at 12% opacity — the pattern becomes momentarily legible, then fades as the eye adjusts. The retro-patterns motif also appears in **corner marks**: each card has `+` registration marks at all four corners, `6px × 6px`, `1px` stroke, `#C8C0B0`. These are typographic printer's registration marks, signaling that the card is a *plate* rather than a *component*. --- ## Prompts for Implementation Implement munju.im as a **single continuous specimen catalog** — a field guide page that the reader scrolls through, encountering card-plates as they would encounter pages in a printed folio. There is no navigation bar. There is no sidebar. There is no sticky header. There is no footer CTA. The reader arrives, reads, and departs, having seen what there is to see. **Header section:** The domain name `munju.im` rendered in Cormorant Garamond Display 300 at 11vw, positioned at 38.2% from the top of the 100vh header section, left-aligned to column 1 of the 12-column grid. Letter-spacing `-0.02em`. Below the name, on the same left edge, a single sentence in EB Garamond italic 16px, `#6B6359`: *"Standing at the threshold between what is named and what is not."* Nothing else in the header. The signal-red `#E8360A` rule separating header from content animates in from left to right over 1.2s after initial load — once, not on scroll. **Card grid:** CSS Grid with `grid-template-columns: repeat(3, 1fr)` on desktop, gap `24px`. Every third card (`nth-child(3n)`) has `grid-row: span 2` creating the tall-card rhythm. Cards are `background: #FAF7F2`, `border: 1px solid #1A1A1A`. Corner registration marks implemented as CSS `::before` and `::after` pseudo-elements on an inner wrapper. Card hover: `border-color` transitions from `#1A1A1A` to `#E8360A` over 0.3s, and a `2px inset box-shadow` in `#E8360A` at 20% opacity appears. **Illustrations:** SVG elements, inline. Stroke `#1A1A1A`, fill `none`, `stroke-width: 1.2`. Each SVG is `100%` wide within its card. Long cards have SVGs at 80% of card height; standard cards have SVGs at 55% of card height. On hover, illustration SVG paths animate via `stroke-dasharray` / `stroke-dashoffset`: the drawing retraces itself over 0.8s, as if being drawn in real time. This is the **pulse-attention pattern** — the drawing redraws when the viewer's attention arrives. **Hatching background:** A full-page SVG `` element (id `hatch`) defined in a `` block: `` in a 10×10 tile, rendered at 45°. Applied as the page's `background-image` via `fill: url(#hatch)` on a full-viewport SVG behind all content at `opacity: 0.06`. Card hover lifts `opacity` to `0.12` on an inner `div` that carries the pattern as a `background-image` using CSS `repeating-linear-gradient(45deg, #C8C0B0 0, #C8C0B0 0.5px, transparent 0, transparent 50%)` at `background-size: 12px 12px`. **Typography settings:** ```css :root { --bone: #F5F0E8; --ink: #1A1A1A; --graphite: #4A4540; --faded: #6B6359; --rule: #C8C0B0; --signal: #E8360A; --gold: #B08030; --cream: #FAF7F2; } body { font-family: 'EB Garamond', serif; background: var(--bone); color: var(--ink); font-size: 16px; line-height: 1.65; } .display { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-style: normal; font-optical-sizing: auto; } .meta { font-family: 'Martian Mono', monospace; font-size: 10px; letter-spacing: 0.08em; color: var(--faded); } ``` **Scroll behavior:** `scroll-behavior: smooth` globally. IntersectionObserver triggers card entry animations when cards cross 15% of the viewport. Cards outside the viewport are `opacity: 0; transform: translateY(12px)`. The transition is `opacity 0.6s ease, transform 0.6s ease`. No stagger delay longer than 80ms per card — the grid populates in a wave, not a cascade. **Avoid:** sticky headers, hamburger menus, hero CTAs, testimonials, pricing tables, stat grids, social proof rails, newsletter modals, floating chat widgets, progress bars, loading spinners, particle animations, gradient meshes, glassmorphism panels, neumorphic buttons. --- ## Uniqueness Notes 1. **High-contrast palette deployed on bone white, not black.** The frequency report shows `high-contrast` used by 18% of designs — the most-used palette category in the corpus. Every other high-contrast design defaults to dark backgrounds (`#0a0a0a`, `#111`, `#1a1a2e`). munju.im inverts this assumption: the ground is warm cream `#F5F0E8`, the contrast comes from near-black ink on pale paper, like an engraving. Signal red `#E8360A` appears only in hover and activation states, making it a *threshold signal* rather than a brand color. 2. **Line-illustration SVG with stroke-redraw animation as the pulse-attention pattern.** `line-illustration` appears in only 1% of designs — the rarest imagery type in the corpus. The pulse-attention pattern (2% frequency) is implemented not as a flash or glow but as a complete SVG path redraw: the illustration retraces itself when hover attention arrives, re-enacting the act of observation. This combination — rare imagery type, rare attention pattern, executed together — exists in no other design in the registry. 3. **Swiss grid made mysterious through what it *contains*, not through breaking it.** `swiss` aesthetic appears in 8% of designs, always treated as rational-clean-clinical. munju.im keeps the grid perfect and puts *specimen illustrations*, *engraver's hatching*, *registration marks*, and *field-guide caption typography* inside it. The grid's orderliness becomes uncanny rather than reassuring — the container is correct, the contents are strange. 4. **Cormorant Garamond at extreme display sizes as the primary typographic event.** `garamond-classic` is used by 7% of designs. Cormorant Garamond at 11vw has hairline strokes at approximately 0.3px at typical screen densities — strokes that are geometrically present but perceptually fragile, trembling at the threshold of visibility. This fragility is the *mysterious-moody* tone delivered through typography alone, before any content is read. 5. **Retro-patterns as engraver's hatching, not as decorative surface.** `retro-patterns` appears in 2% of designs and is typically deployed as bold geometric repeat patterns. munju.im uses the oldest retro pattern vocabulary available — intaglio engraving hatching — at 6% opacity as page ground texture, making the entire surface feel *printed* rather than *rendered*. This is a historical reference invisible to most visitors but present as a felt quality of the page. **Chosen seed:** aesthetic: swiss, layout: card-grid, typography: garamond-classic, palette: high-contrast, patterns: pulse-attention, imagery: line-illustration, motifs: retro-patterns, tone: mysterious-moody **Avoided patterns (frequency analysis):** - `warm` palette (97% — corpus-dominant, deliberately avoided) - `gradient` motif (91% — corpus-dominant, zero gradients anywhere on the page) - `tech` motif (23% — avoided; this is a naturalist/humanist site, not technical) - `circuit` motif (12% — avoided in favor of engraving hatching) - `hero-dominant` layout (overused in high-contrast designs; replaced by typographic header)