# Design Language for munju.wiki
## Aesthetics and Tone
munju.wiki is a **personal knowledge sanctuary** — an encyclopedia of one mind's encounters with the world, rendered in the quiet grammar of Muji aesthetics: no ornamentation that doesn't earn its space, no colour that shouts. The page breathes. Margins are not wasted space — they are the silence between thoughts.
The tone is **elegant-sophisticated**: unhurried, undefended, genuinely curious. The visitor is not sold to. They are invited into a room where things have been arranged with care. Everything visible has been chosen; nothing is there by default.
Inspiration draws from the Japanese concept of **ma (間)** — the meaningful interval, the pause between notes that makes music possible. Layout-white is ma. The narrow column that leaves generous side-air is ma. The single piece of crystalline imagery floating on a field of warm linen is ma.
The mood is that of a **winter morning reading journal** — ceramic cup, pale diffuse window light, soft bokeh behind the page, handwritten marginalia, the slight grain of good paper. Not cold. Not sparse. Precisely occupied.
## Layout Motifs and Structure
**Immersive-scroll architecture** — the page is a single vertical narrative composed of five distinct atmospheric chapters, each separated by a generous `12vw` breath of white-linen space rather than a dividing line or box. No cards. No grids. No columns fighting each other.
Chapter rhythm:
1. **Cover** — full-viewport, vertically centered logotype in handwritten type, surrounded by a single full-bleed bokeh field image at 30% opacity over warm linen `#F5F0E8`. The title fades in from opacity 0 over 1.4 s.
2. **Aperture** — a single pull-quote in oversized handwritten script, left-aligned, bleeding slightly past the left margin at `−4vw`, anchored by a fine `1px solid #C8B89A` hairline rule 120px above it.
3. **The Wiki Field** — entries rendered as a single narrow column (`max-width: 640px`, centered, left-aligned text). Each entry title in small-caps Cormorant, body in Caveat at 17px/1.9. Crystalline SVG motifs — ice-facet hexagons, 1px stroke, no fill — float in the right margin at `position: sticky` anchored to the current entry, fading in on scroll-entry.
4. **The Gallery Interval** — three bokeh-treated photography panels stacked full-width at 40vw height each, with `mix-blend-mode: multiply` over a warm-sand layer `#E8DFD0`. Each panel reveals with a bounce-enter upward lift on scroll intersection.
5. **Coda** — minimal footer: only the domain name in 10px tracking-widest Cormorant small-caps, centered, on a field of `#2C2416`.
**Spatial constants:**
- Body content: `max-width: 640px`, `margin: 0 auto`
- Section breathing room: `padding-block: 12vw`
- Crystalline margin ornament: `width: 64px`, positioned `calc(50% + 360px)` from center
## Typography and Palette
**Primary typeface — Caveat (Google Fonts):**
Handwritten, weight 400–700. Used for all body copy, pull-quotes, and entry labels. At body size 17px/line-height 1.9, it reads with warmth and personality without becoming illegible. Tracked at `0.01em` for breathing.
**Secondary typeface — Cormorant Garamond (Google Fonts):**
Used for section headings, entry titles in small-caps (`font-variant: small-caps`), and the footer logotype. Weight 300 italic for headings, weight 600 small-caps for titles. Cormorant's extreme thin strokes complement Caveat's casual pressure without competing.
**Tertiary — IM Fell English (Google Fonts):**
Used sparingly for single-word epigraph annotations in the margins. Its historical irregularity adds scholarly-atmospheric depth at small sizes (11px).
**Palette — earth-tones with crystalline accents:**
| Role | Hex | Description |
|---|---|---|
| `--linen` | `#F5F0E8` | Page background — warm natural white |
| `--sand` | `#E8DFD0` | Alternate section wash, photography overlay |
| `--parchment` | `#D4C5A9` | Hairline rules, subtle borders |
| `--bark` | `#8C6E4B` | Body text — warm dark brown, not black |
| `--umber` | `#5C3D1E` | Headings, strong emphasis |
| `--night-earth` | `#2C2416` | Footer field, darkest element |
| `--crystal-line` | `#B8C8D4` | Crystalline SVG motif strokes — pale ice-blue against warm ground |
| `--crystal-glow` | `#D4E8F0` | Crystalline facet hover highlight, 40% opacity |
**No black. No white. No pure grays.** Every neutral carries warmth or mineral coolness — the contrast between earth and crystal is the site's only colour tension.
## Imagery and Motifs
**Bokeh-background imagery** — photography appears three ways on munju.wiki:
1. **Hero bokeh field** (Chapter 1): A single full-bleed photograph of out-of-focus winter light through a window, lights resolved into soft warm orbs (`#D4A86A` and `#F5D5A0` tones), printed at 30% opacity over `--linen`. The image is `object-fit: cover`, `filter: blur(0px) brightness(1.1) saturate(0.7)`. This is pure atmospheric texture — the content floats above it.
2. **Gallery interval panels** (Chapter 4): Three tall-crop photographs (macro or landscape) treated with `mix-blend-mode: multiply` over `--sand`, desaturated 60% via CSS `filter: saturate(0.4) contrast(1.1)`. Subjects: dried autumn botanicals, morning mist over water, light through translucent stone. Each is a poem, not an illustration.
3. **Crystalline margin ornaments** — hand-constructed SVG hexagonal facet clusters, each unique (procedurally varied via JavaScript random seed per entry). Strokes in `--crystal-line` at `stroke-width: 0.8px`. No fill. The facets look like frost on cold glass. They appear in the right margin beside each wiki entry and dissolve in on scroll intersection at 400ms with an `ease-out` spring curve.
**Decorative pattern language:**
- Single `1px` horizontal rules in `--parchment` placed asymmetrically (never centered-below a heading — always 80–120px above a pull-quote, echoing Japanese pillow-spacing)
- Letter-spacing on small-caps section labels: `0.18em`, creating the deliberate air of a museum caption
- Caveat at display size (4.5rem) is used once per chapter for the pull-quote — its imperfect ink-pressure becomes the most expressive element on the page
## Prompts for Implementation
Build munju.wiki as a **single continuous vertical scroll** — one HTML file, no routing, no modals, no page transitions. The scroll is the experience.
**Chapter 1 — Cover:**
Full-viewport `section` with `position: relative`. Background bokeh image via `` absolutely positioned, covering the viewport, opacity 0.28, `object-fit: cover`. Centered inside: logotype in Caveat 700 at `clamp(3.5rem, 8vw, 7rem)`, color `--umber`. On page load, animate logotype from `opacity: 0; transform: translateY(18px)` to final state over `1.4s cubic-bezier(0.22, 1, 0.36, 1)`.
**Crystalline SVG generation (JavaScript):**
Write a small `generateCrystal(seed)` function that creates a `