# Design Language for murasaki.quest ## Aesthetics and Tone murasaki.quest is a **wabi-sabi** field-journal of failed quests — a quiet, almost monastic chronicle that honors the cracks, asymmetries, and imperfections of incomplete pilgrimages. The aesthetic embraces wabi-sabi's three core qualities: *imperfection* (every page element is intentionally off-balance), *impermanence* (subtle slow transitions imply decay), and *incompleteness* (cards reveal partial views, sentences trail mid-thought). The tone is **elegant-sophisticated** — the gentle dignity of an aging tea master whose every gesture is deliberate. Inspiration draws from Leonard Koren's *Wabi-Sabi for Artists, Designers, Poets & Philosophers*, the broken-edged ceramics of Lee Kang-hyo, the dry-brush calligraphy of Inoue Yuichi, and the bokeh-saturated photographs of Rinko Kawauchi. Visiting feels like leafing through a found notebook left at a forest shrine — silk pages, ink bleed, missing corners. ## Layout Motifs and Structure The architecture is **full-bleed** — each page-section occupies a full viewport with no margins, edges, or framing devices, content floating asymmetrically within the bleed. There are seven sections, each devoted to one failed quest: *the unwritten letter*, *the snow festival missed*, *the kiln that cooled too fast*, *the koan unfinished*, *the path closed by deer*, *the song forgotten*, *the bow that did not draw*. Each full-bleed panel arranges its content using an asymmetric ratio (3:7, 7:3, 1:1 with offset, etc.) with one large bokeh photograph (rendered as SVG/CSS gradient — see Imagery) bleeding from one edge, and the quest text set in Garamond Italic floating in the remaining negative space. The page scrolls vertically through the seven panels, and panel transitions use a **card-flip** rotation around the Y-axis at 0.7s ease-in-out, treating each panel as a single sheet of washi being turned. There is no nav bar, no breadcrumb, no progress indicator — only the page and the next turn. ## Typography and Palette **Typography** is led by EB Garamond (the **garamond-classic** brief): EB Garamond Italic 96pt for quest titles set ragged on three lines maximum, EB Garamond Regular 22px / 1.7 for body, and EB Garamond Italic 14px for footnotes and small-caps glosses. A secondary face, Shippori Mincho B1 at 17px, appears only for the Japanese title-equivalent set as a soft mirror beneath each Latin title. Body text is set in cream on a deep umber-mauve ground; only first sentences are dropcapped with a 7-line-deep Garamond initial in oxblood. Tabular figures for date stamps, oldstyle for body. **Palette** is **analogous**, running through the warm purple-rose-brown spectrum: - `#1F1620` — washi smoke (page ground, deepest tone) - `#3B2638` — aubergine quiet (panel ground, primary) - `#5C3B47` — wine-clay (secondary surface) - `#7B5963` — rose ash (tertiary, intermediate tone) - `#A78A8E` — warm taupe (body text, secondary type) - `#D9C7B6` — bone-paper cream (high-emphasis text, key callouts) - `#3D2027` — oxblood deep (dropcap, accent ornament) - `#6E4F5A` — dusk mauve (subtle gradient mid) All seven hues drift gently into each other; no high-contrast jumps — this is wabi-sabi by definition. ## Imagery and Motifs Imagery is built around **bokeh-background** compositions — each full-bleed panel has one large soft-bokeh "photograph" rendered entirely in CSS (a 100vw × 100vh container with multiple absolutely positioned `
`s of `border-radius: 50%`, `filter: blur(48px)`, and varied opacity, layered to suggest out-of-focus paper lanterns, snow particles, kiln embers, falling magnolia petals). Each panel's bokeh palette draws from 2–3 of the analogous-palette tones. **Layered-depth** motifs are reinforced via parallel translucent "scrim" layers — a faint sumi-ink calligraphy stroke at 8% opacity overlays the bokeh; a single Garamond italic phrase floats above it; a deeply blurred shape sits beneath. Decorative furniture includes intentional "imperfections": a hand-drawn ink-blot in the corner of every third panel, a small chip-mark drawn at the edge of one column, and a deliberate baseline-offset on one paragraph per panel (always the second). The single Japanese ornamental glyph 紫 appears once in the page footer, drawn slightly cracked. ## Prompts for Implementation Build a full-bleed wabi-sabi scroll-journal of seven failed quests. Each panel is `min-height: 100vh; width: 100vw; overflow: hidden; position: relative;` containing a CSS-only bokeh background composed of 8–14 absolutely positioned circular `
`s with `border-radius: 50%`, `filter: blur(40–80px)`, and `opacity: 0.18–0.45`, each in palette tones. The signature transition is **card-flip**: when the user scrolls into a new panel, the incoming panel rotates from `rotateY(-12deg)` to `rotateY(0deg)` over 700ms `cubic-bezier(0.25, 1, 0.5, 1)` with `transform-origin: left center` so it feels like a sheet of washi being turned from the left binding. The Garamond Italic 96pt quest titles enter with a 1.2s `letter-spacing` reveal from +320 to 0 — letters slowly assembling into the word like ink resolving on damp paper. Dropcaps must be rendered as `::first-letter` with `initial-letter: 7 5` and `color: #3D2027`. Avoid CTA stacks, pricing menus, signup ladders, stat grids, social proof rows — this is a wandering field-journal, not a product. The footer is a single Shippori Mincho line: "紫 — quest log, incomplete, 七, 残る." ## Uniqueness Notes - **Differentiator 1:** Bokeh compositions rendered entirely in CSS (blurred divs, no images) — sidesteps the 89% photography saturation noted by frequency while still feeling photographic. - **Differentiator 2:** Card-flip transition framed as the turning of a washi sheet rather than a UI card flip — narrative metaphor for the pattern. - **Differentiator 3:** Intentional imperfections (off-baseline paragraphs, hand-drawn ink-blots, chip-marks) are *required* details, not decorative options — a true wabi-sabi commitment. - **Differentiator 4:** Analogous palette of seven adjacent purple-rose-brown tones with zero high-contrast accent — a uniformly warm twilight that no other design in the registry adopts. - **Differentiator 5:** Garamond title letter-spacing reveal slowed to 1.2s — letters resolve like wet ink, not the typical 200ms fade-in. - Planned seed: aesthetic=wabi-sabi, layout=full-bleed, typography=garamond-classic, palette=analogous, patterns=card-flip, imagery=bokeh-background, motifs=layered-depth, tone=elegant-sophisticated. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.