# Design Language for munju.im ## Aesthetics and Tone munju.im is **the dream-ledger of a fictional night-cartographer named Munju** — a person who claims to map the rooms inside other people's sleep and then files those maps as legal-looking documents. The whole site behaves like a *surreal civic archive*: it has the deadpan formality of a land-registry office (stamped folios, embossed seals, marginal annotations, case numbers) but every artifact inside it is impossible — a staircase that exhales, a corridor measured in heartbeats, a window leased to the moon for ninety-nine summers. The aesthetic is **surreal filtered through bureaucracy**: not the lava-lamp dreaminess that "surreal" usually triggers, but a cold, lacquered, jewel-toned solemnity — Magritte working in a notary's chambers, René Daumal's *Mount Analogue* reissued as a property deed. Mood words: hushed, lacquered, ceremonial, faintly absurd, nocturnal. The tone is **mysterious-moody** and unsmiling — Munju never winks. The copy is written in the flat, over-precise register of an official form ("Item 4. The applicant declares the corridor to be of indeterminate length and accepts all consequences thereof") and the absurdity lands *because* it is delivered with a straight face. Nothing here sells anything. There is no product. The site is a thing you wander through, the way you'd wander a museum that is also a courthouse that is also someone's recurring dream. ## Layout Motifs and Structure The page is **one continuous vertical descent through seven "folios"** — each folio a tall, off-kilter document panel that does NOT sit on a tidy column. The governing system is a **broken grid**: a nominal 12-column lattice is drawn faintly in the background (1px lattice lines in a dim jewel-green, like the ruled paper of a ledger), but every element deliberately *breaks* it — a folio sits in columns 2–9, the next in 4–12, captions hang in the gutters, a wax-seal stamp straddles the page edge and bleeds 40px off-canvas. Alignment is intentionally "wrong" the way collage is wrong: things overlap, occlude, cast shadows on each other. Structure of a folio: - a **case header** in the top-left gutter — a monospace string like `MUNJU / FOLIO 03 / FILED UNDER: ROOMS THAT BREATHE` - a **central plate** — the surreal object itself, rendered as layered SVG/collage, never a photograph - **marginalia** — three or four annotations in the right gutter, each a thin bracket pointing at the plate with a one-line clause - an **embossed footer seal** — a circular stamp, half on-page half off, rotated a few degrees, that "presses" into the paper on scroll (a subtle inset shadow morphs in) No top navigation bar. Navigation is a **vertical "index tab" rail** pinned to the right edge — seven slim vellum tabs, like the divider tabs of a physical binder; the active one slides 14px outward and darkens. No hamburger, no logo lockup, no footer columns, no breadcrumbs. The very last folio (07) is a single full-bleed dark plate — "the colophon" — where the lattice lines finally converge to a vanishing point and the page signs itself. Generous **ma / negative space** between folios: each folio is separated by a band of empty lacquered paper at least 18vh tall, so the descent feels paced, like turning thick pages. ## Typography and Palette **Type system (Google Fonts only):** - **Display / folio titles — `Cormorant Garamond`** (weights 500 + 600, often italic). This is the art-deco-adjacent, high-contrast serif voice of the site: tall, narrow, with dramatic thick-to-thin transitions and elongated ascenders that feel engraved into a brass plate. Used at 64–112px for folio titles, always with tight `letter-spacing: -0.01em` and generous line-height so the descenders breathe. - **Document body / clauses — `Spectral`** (weights 300 + 400, plus 400 italic). A screen-tuned serif with a calm, juridical evenness — it reads like the body text of a well-set legal codex. Used at 17–19px for all clause text, declarations, marginal annotations. - **Case headers, stamps, index tabs, numerals — `IBM Plex Mono`** (weights 400 + 500). The bureaucratic machine-voice: case numbers, filing strings, the `FOLIO 0X` labels, the ring-text around wax seals. Uppercase, `letter-spacing: 0.14em`. - A single decorative flourish: folio numbers also appear once each, huge (240px+), set in `Cormorant Garamond` italic at 6% opacity behind the central plate, like a watermark pressed into the sheet. **Palette — lacquered jewel-tones on aged document paper:** - `#0E1B16` — **abyss green-black**: primary ink, the colophon background, the deepest shadows. Not pure black — it has a green undertone like old bottle glass. - `#F4ECDA` — **vellum**: the paper field, the base background of every folio. - `#7A0E2E` — **garnet**: the wax-seal red, used for stamps, the active index tab, key emphasized clauses. Deep, blood-jewel, never bright. - `#1F4D3E` — **deep emerald**: the lattice lines (dimmed to ~22% there), bracket marginalia, secondary plate fills. - `#C9A227` — **tarnished gold**: hairline rules, the embossed edges of seals, the vanishing-point lines in folio 07. Used sparingly, as metal-leaf accent only. - `#3A2E26` — **bistre brown**: body-text ink on vellum (softer than the abyss green-black for long reading), annotation text. - `#5B6E8C` — **slate dusk**: the one cool note — used for the faint "dream-light" glows behind certain plates, and for hover states on mono labels. Contrast pairing rule: garnet and tarnished gold never touch directly; deep emerald always mediates between them. ## Imagery and Motifs Everything is **collage-built** — layered flat SVG shapes, engraved-line illustration, halftone-dot fills, and "torn paper" edges — never photography, never 3D render. Recurring motifs: - **The breathing staircase** (folio plate): an Escher-flavored stair where every third tread is slightly transparent and the whole figure scales 1.00→1.015→1.00 on a slow 9-second loop, as if inhaling. - **The leased window**: a tall casement window drawn in engraved line, its panes filled with a tiny crescent moon and a clause-strip across the sill reading "ON LOAN — 99 SUMMERS". - **Wax seals**: circular stamps in garnet, with `IBM Plex Mono` ring-text, a simple engraved sigil in the center (a key, an eye, a doorknob, a tide-mark), pressed at a 3–8° rotation, half-bleeding off page edges. - **Bracket marginalia**: thin tarnished-gold square brackets `⌐` `¬` that "point" from the gutter at parts of the plate, each terminating in a one-line italic clause. - **The lattice**: the faint ruled grid behind everything; in folio 07 it stops being orthogonal and bends toward a single vanishing point on the horizon, like the floor of a dream-room receding. - **Floating elements**: small drifting artifacts between folios — a loose page corner, a paperclip, a pressed leaf, a tiny door — each drifting up at parallax speeds slower than scroll, occasionally rotating. - **Halftone shadows**: shadows under plates and seals are not soft blurs but engraved dot-screens, reinforcing the "printed document" feel. - **Stamp ink texture**: garnet elements get a subtle grain/imperfect-edge mask so they look hand-pressed, never vector-clean. ## Prompts for Implementation Build munju.im as **one HTML page, one CSS file, one ES module** — no framework, no build step. It is a 90–120 second descent through seven folios of an impossible archive. There is **no CTA, no pricing, no signup, no testimonials, no stats grid, no contact form, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner, no nav bar.** If a section feels like marketing, delete it. **Narrative sequence (seven folios, vertical scroll, scroll-triggered reveals):** 1. **Folio 00 — The Cover / Filing.** Full vellum field. Centered art-deco serif title "MUNJU" with a `IBM Plex Mono` subtitle "REGISTRY OF ROOMS THAT DO NOT EXIST — EST. (DATE WITHHELD)". A garnet wax seal half-bleeds off the right edge. The faint emerald lattice fades in line-by-line (path-draw style). One mono line at the bottom: "Begin descent." that gently pulses (slow opacity breathe, not a button). 2. **Folio 01 — The Breathing Staircase.** Case header in the left gutter. The engraved staircase plate, scaling-breathing on a 9s loop. Three bracket-marginalia clauses in the right gutter, each fading + sliding 12px from the gutter as it enters view (stagger). Huge watermark "01" behind the plate. 3. **Folio 02 — The Corridor Measured in Heartbeats.** Plate breaks the grid hard (columns 1–7), a long horizontal corridor in one-point engraved perspective; a thin garnet line runs its length with tick-marks labeled "♥ 4,200 / ♥ 4,201 / …". Marginalia hangs in the *left* gutter this time (broken-grid asymmetry). 4. **Folio 03 — The Window On Loan.** The leased casement window, crescent moon in the panes, slate-dusk dream-light glow behind it that morphs shape slowly (blob morph, 14s). Clause strip across the sill. 5. **Folio 04 — The Drawer of Borrowed Names.** A flat-collage chest of drawers, three drawers ajar, each spilling a ribbon of `Spectral`-italic words. Drawers slide out 6–10px as the folio scrolls into center, then settle (spring). 6. **Folio 05 — The Tide That Was Filed Indoors.** A room with a waterline drawn across its walls; halftone-dot water fills the lower third, and a single paper boat drifts across on parallax. Garnet "high-water" stamp pressed at 6° in the corner. 7. **Folio 06 — The Door Without A Building.** A single ornate engraved door standing in pure vellum, casting a long halftone shadow; on hover the doorknob glints (tarnished-gold highlight sweep). Marginalia: "Item 9. The door opens onto the next page and nothing else." 8. **Folio 07 — The Colophon.** Full-bleed abyss green-black plate. The emerald lattice lines bend and converge to a single vanishing point on a low horizon (SVG path-draw on scroll). The page "signs itself": a garnet signature flourish draws itself in `Cormorant` italic — "filed by Munju" — followed by one mono line: "End of register. The rooms remain." Tarnished-gold hairline closes the page. **Motion principles:** - **Scroll-triggered, never autoplay-heavy.** Reveals are IntersectionObserver-driven: fade + small translate, staggered for marginalia. - **Slow morphs only.** Dream-light glows and the breathing staircase use long (9–14s) eased loops — never fast, never bouncy. - **Seals "press" on scroll.** As a folio centers, its footer seal animates an inset shadow + 1px scale-down, like wax being stamped. - **Floating artifacts** drift between folios at sub-scroll parallax speeds, with gentle rotation. - **Index-tab rail**: active tab slides outward 14px and darkens; smooth scroll on click. - **Cursor**: a faint tarnished-gold ring follows the cursor with spring lag, *only* over the central plates (a "magnifying loupe" feeling) — elsewhere the cursor is default. - Respect `prefers-reduced-motion`: kill loops and parallax, keep static composition + instant reveals. **Texture:** apply a very subtle paper-grain overlay (CSS noise or a tiny tiled PNG) at ~4% over the vellum; garnet stamps get an imperfect-edge mask. Keep it restrained — this is a lacquered document, not a distressed one. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Surreal rendered as bureaucracy, not as psychedelia.** The corpus's rare "surreal" sites lean dreamy/whimsical/soft. munju.im does the opposite: cold jewel-tones, juridical copy, stamped folios, deadpan delivery. The strangeness comes from *form-language formality wrapped around impossible content* — Magritte in a notary's office — which no other site here attempts. 2. **Broken-grid as a literal "wrong document" metaphor.** Instead of the corpus-default card-grid (90%) or centered (84%) layouts, every element here deliberately violates a visible ruled lattice — folios straddle columns, seals bleed off-edge, marginalia hangs in gutters — so the layout itself reads as a misfiled, overstuffed binder. 3. **No photography, no glassmorphism, no hand-drawn cuteness.** Against the 98% photography / 78% glassmorphism / 96% hand-drawn conventions, munju.im is built entirely from engraved-line SVG collage, halftone-dot shadows, and torn-paper edges — a print-archive visual language, not a web-app one. 4. **"Press" interactions instead of hover-lift cards.** Seals stamp inward, drawers slide and settle, doors glint — tactile *document* gestures rather than the ubiquitous floating-card hover. 5. **The page signs itself.** The closing folio is a colophon where the grid collapses to a vanishing point and a signature draws itself — an ending, not a CTA. The experience terminates with "The rooms remain," not "Get started." **Chosen seed / style:** *aesthetic: surreal, layout: broken-grid, typography: art-deco-display (via Cormorant Garamond), palette: jewel-tones, patterns: morph, imagery: collage, motifs: floating-elements, tone: mysterious-moody.* **Avoided overused patterns (per frequency analysis):** hand-drawn (96%), glassmorphism (78%), photography (98%), card-grid (90%), full-bleed-as-default, warm palette (98%), cursor-follow-everywhere — all sidestepped or used only in a single deliberate, recontextualized spot (e.g. the loupe cursor confined to plates, the one full-bleed plate reserved for the colophon).