# Design Language for murasaki.quest ## Aesthetics and Tone *Murasaki* — the dye, the color, the woman who wrote the first novel. This site is a **wabi-sabi reading-room**: a quest told not in levels and loot but in pages, brushstrokes, and the slow oxidation of dye in cloth. The mood is a low-lit study at the hour when ink is still wet — a single sheet of *kozo* paper warming under a paper lamp, gromwell-root pigment bleeding from violet into ash at its torn edge. Nothing here is glossy. Surfaces are imperfect on purpose: the off-register print, the kintsugi seam, the brush that ran dry mid-character. The "quest" framing is deliberate misdirection — the visitor expects a game and finds instead a contemplative scroll through eleven fragments of a story that keeps rewriting its own first line. Tone: hushed, literary, a little melancholic, faintly amused at its own seriousness. Think *The Pillow Book* margins annotated by a tired archivist who loves the work too much to hurry. The governing tension: **a precious thing handled by imperfect hands.** Purple was the most expensive color in the Heian court; here it is shown cracked, faded, re-glued, and more beautiful for the damage. ## Layout Motifs and Structure A **vertical scroll-as-handscroll (emakimono)** — the page reads top to bottom the way a Japanese picture-scroll unrolls left to right, one continuous painted band rather than discrete "sections." No card grid. No bento boxes. No dashboard. - **The Margin Column**: a fixed narrow gutter (≈9vw) on the right edge running the full height, holding vertical *tategaki* text — a running marginalia of dates, dye recipes, and half-thoughts that scrolls at 0.7× the body speed. On narrow viewports it collapses to a thin seam of color, not a hamburger menu. - **The Band**: the main column is a single off-center vertical strip (max-width ≈ 62ch) of paper-toned ground that drifts subtly — its left margin breathes between 14vw and 22vw as you scroll, as if the scroll were never quite straight on the desk. - **Eleven Fragments**: the content is eleven "leaves" (chapters of a quest that is really a manuscript). Each leaf is separated not by a hard rule but by a **kintsugi seam** — a thin meandering gold-violet crack drawn in SVG, slightly different every page load. - **Negative space (*ma*) carries weight**: long unpainted stretches between fragments. Scrolling through emptiness is part of the rhythm; do not fill it. - **Asymmetric anchoring**: headings sit flush to whichever margin the band is currently leaning away from, never centered. ## Typography and Palette **Typefaces (all Google Fonts):** - Display & fragment titles: **Shippori Mincho** — a contemporary Japanese-style serif (Mincho) with crisp brush-derived terminals; used large, weight 500–700, generous tracking. Carries the manuscript gravity. - Body prose (Latin): **EB Garamond** — a quiet, ink-warm old-style serif; 1.7 line-height, weight 400, with italic used for the "rewritten" first lines. - Marginalia & vertical *tategaki* column: **Klee One** — a Japanese textbook-handwriting face that looks like a careful pen; small, weight 400, set in `writing-mode: vertical-rl`. - Accents, dye-recipe labels, page numerals: **Zen Antique** — a retro Mincho with a printed-poster feel; used sparingly, uppercase Latin and numerals only. **Palette:** - `#2A1B2E` — *sumi-murasaki*, near-black aubergine (primary ink / text) - `#5C3A6E` — *gromwell violet*, the true expensive purple (links, seams, key brushstrokes) - `#9C7BB0` — *faded dye*, the oxidized lavender-grey of old cloth (secondary text, marginalia) - `#EDE6DA` — *kozo paper*, warm un-bleached oatmeal (page ground) - `#F6F2E9` — *bright leaf*, the lighter band ground - `#C9A227` — *kintsugi gold*, muted antique gold (crack-seams, fragment numerals, the single hover color) - `#7A8B6F` — *moss grey-green*, a single cool counterpoint (rare — used only for the running marginalia ticks) Everything sits on paper. There is **no pure white and no pure black** anywhere. ## Imagery and Motifs - **Dye-bleed gradients**: not CSS linear-gradients but soft, irregular radial bleeds — SVG `feTurbulence` + `feDisplacementMap` masking a violet wash so its edge feathers like pigment soaking into fiber. One large bleed behind the first leaf, smaller ones echoing down the scroll. - **Kintsugi seams**: hand-irregular SVG paths between fragments, stroked in gold with a faint violet under-glow, animated to "fill" from one end as they scroll into view (`stroke-dasharray` draw, ~1.2s, eased like a slow brush). - **Grain & tooth**: a 3–4% opacity paper-grain noise overlay (tiled SVG, regenerated per session) gives every surface the tooth of handmade paper. A faint horizontal "deckle" shadow at the band's edges. - **The dry brush**: fragment titles are *masked* by a brush-stroke alpha texture so each glyph looks slightly starved of ink at its tail — never a clean fill. - **Genji-incense ciphers**: the *Genji-mon* — the little stacked-bar incense symbols from the chapters of *The Tale of Genji* — appear as tiny gold ornaments marking each of the eleven leaves. Decorative, abstract, instantly recognizable to those who know, mysterious to those who don't. - **Torn edges**: where an image or wash ends, it ends on a ragged SVG-clipped tear, never a straight crop. - **No photography. No icons-as-buttons. No stat counters. No mesh gradients.** ## Prompts for Implementation Build a **single-route, full-screen vertical narrative**. The visitor lands on an almost-empty paper ground; a faint violet bleed grows at the top; one line of EB Garamond italic types itself, deletes itself, and retypes — slightly different — three times before settling. That is the only "hero." No nav bar, no CTA, no "Start Quest" button. Scrolling is the sole affordance. - **Scroll = unrolling the emakimono.** Use a lightweight scroll-driven approach (IntersectionObserver + CSS `animation-timeline: scroll()` where supported, JS fallback otherwise). Each leaf fades up from the paper, its Genji-mon glyph draws itself, its kintsugi seam fills with gold as it crosses into view. - **The drifting band**: animate the main column's left margin as a function of scroll position with a slow sine — subtle (±4vw), never dizzying. The right marginalia column parallaxes at 0.7×. - **Type that rewrites**: at least one fragment per third of the page has its opening sentence "corrected" — a word strikes through and a new one writes in beside it — triggered once when the fragment enters the viewport. Use this sparingly; it's a motif, not a tic. - **Hover grammar**: links don't change color to blue — a thin gold underline *brushes* in from left to right (dry-brush mask on the underline itself). The Genji-mon glyphs rotate a few degrees and glow faintly gold on hover, like incense catching light. - **Sound (optional, default off, one toggle in the marginalia)**: a single soft *koto* note when a kintsugi seam completes its fill. Quiet, never looping. - **Motion budget**: everything eased slow (cubic-bezier ~.16,1,.3,1), durations 0.8–1.4s. Respect `prefers-reduced-motion` by showing all fragments settled, seams already gold, no typing. - **The ending**: the eleventh leaf's kintsugi seam continues past the text, off the bottom of the page, unfinished — the quest does not resolve. Below it, only paper grain and the smallest gold Genji-mon, alone in *ma*. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, card grids, glassmorphism, hero-with-button, dark-mode-neon, photography, icon rows. ## Uniqueness Notes Differentiators from other sites in the batch: 1. **Emakimono scroll logic** — content as one continuous unrolling painted band with a drifting off-center column and a 0.7× *tategaki* marginalia gutter, not the near-universal card-grid / full-bleed / centered stack (90% / 89% / 84% in the batch). 2. **Wabi-sabi as a hard rule, not a vibe** — no pure white, no pure black, every surface bears regenerated paper-grain and ragged torn edges; the expensive purple is shown *cracked and re-glued* (kintsugi seams as the section divider). Almost nothing in the batch commits to imperfect-by-design at the structural level. 3. **Genji-mon incense ciphers** as the navigation/ornament system — a literary-cultural cipher specific to *The Tale of Genji* (Murasaki Shikibu → murasaki) that no other domain could borrow without losing meaning. 4. **"Type that rewrites itself"** — opening lines that strike through and re-author themselves on scroll-in, an editorial-manuscript motif rather than the batch-standard typewriter-once effect. 5. **The quest deliberately doesn't resolve** — the final seam runs off-page unfinished; an anti-payoff ending in a category obsessed with conversion. Chosen seed/style: **wabi-sabi imperfect ceramic** (underused — ~8% in the batch), reinterpreted as a Heian-literary reading-room rather than a pottery shop. Avoided patterns from frequency analysis: card-grid (90%), full-bleed (89%), centered (84%), glassmorphism (78%), photography imagery (98%), warm/gradient palettes treated as glossy CSS gradients (96%/98% — we use feTurbulence dye-bleeds instead), cursor-follow (89%), magnetic (80%), parallax used as a flashy 3D effect (we keep it to a slow 0.7× marginalia drift). Mono typography (94%) is dropped entirely in favor of Mincho + Garamond + handwriting.