# Design Language for murasaki.moe ## Aesthetics and Tone murasaki.moe is a **nocturnal handscroll** — an *emaki* unrolled across the screen, ink-wet, in the violet hour between dusk and true night. "Murasaki" is the Japanese word for purple, the name of the Heian court author of *The Tale of Genji*, and the color the aristocracy reserved for the highest ranks because the dye (from *Lithospermum* gromwell root) was so laborious to extract. This site treats that single word as a whole cosmology: a private notebook kept by someone who measures the world in shades of purple — wisteria at the eaves, gromwell-root ink still drying, the bruise-blue of a clearing storm, the lilac smoke off an incense trail, the deep aubergine of a sky just before the first star. The tone is **dreamy-ethereal and quietly literary** — not whimsical, not "kawaii", not the candy-bright register most `.moe` domains fall into. It reads like classical Japanese prose translated into light: melancholy, attentive, a little in love with transience (*mono no aware*). Nothing shouts. The page breathes at the pace of a brush lifting off paper. There is **no marketing voice anywhere** — no hero headline selling anything, no "get started", no testimonial carousel, no plan tiers. The visitor is not a customer; they are someone who has been handed a scroll and asked to walk slowly along it. The governing surrealism is gentle: gravity is slightly negotiable here. Ink behaves like fog, fog behaves like ink, calligraphy strokes detach from their characters and drift like koi, stars are drawn with the same brush that wrote the text. The whole thing should feel like a memory you are not sure you actually had. ## Layout Motifs and Structure **Primary structure: a single horizontal handscroll** — the site scrolls *left-to-right* (wheel, drag, arrow keys, and a slim progress brushstroke at the bottom all advance it), the way a Japanese *emaki* is physically unrolled with the right hand while the left hand re-rolls what's been read. The entire experience is **seven "panels" laid end to end on one continuous violet field**, roughly 7× viewport width, with no hard page breaks — scenery, ink, and stars bleed continuously from one panel into the next exactly like a painted scroll. This is deliberately the opposite of the corpus-default vertical card-grid: there are **no cards, no grid, no bento boxes**. The seven panels: 1. **The Seal** — title panel. The word 「紫」 (murasaki) brushed enormous, three-quarters of the viewport tall, in still-wet gromwell ink; the romaji "murasaki.moe" set small beneath in restrained serif. A faint red *hanko* (name-seal) impression sits in the lower corner. The ink is visibly *drying* — its darkest core lightening over the first few seconds. 2. **The Color That Was Forbidden** — a short woven passage about why purple was the rank-color, set as a vertical column of running text (top-to-bottom, right-to-left flow within the panel), beside a slowly rotating diagram of a gromwell root with violet threads spooling off it. 3. **The Hour** — twilight gradient field; a single torii or eave-line silhouetted along the horizon; the sun has just gone; the first star is being *drawn* by a visible brush-tip. 4. **The Scattered Strokes** — calligraphic strokes that have come loose from their kanji and drift across the panel like a school of fish; hovering one re-assembles a character for a heartbeat (帚 → 帚木 "Hahakigi", the "Broom-Tree" Genji chapter, etc.) then it dissolves again. 5. **The Wisteria Eaves** — hanging racemes of wisteria along the top edge, rendered as long pendulous SVG clusters that sway on a slow sine; beneath them, a low veranda line; petals fall *upward* occasionally (the gentle surreal beat). 6. **The Notebook** — the closest thing to "content": a quiet stack of dated fragments / links / thoughts, each one a single line of serif text on a torn-edge slip of pale paper, arranged along the scroll like pages pinned to a clothesline. No headings, no metadata clutter — just lines. 7. **The Re-Rolling** — the scroll visibly begins to curl back up at the far edge; ink fades to deep aubergine; one last star; a tiny seal that says "again?" which scrolls you home. A **persistent thin overlay** lives above the scroll: top-left, the seal-mark 「紫」 (click → return to panel 1); bottom edge, a **single horizontal brushstroke that fills with violet ink** as you progress — that is the entire navigation. No menu. No hamburger. No footer bar. No logo wall. The cursor itself is a faint brush-tip glow (not a follower-dot trail — a soft inked nib that leaves a 2-frame fading wet smudge). ## Typography and Palette **Fonts (Google Fonts only):** - **Display / brushed title:** `Yuji Syuku` — a Google Fonts Japanese serif (mincho) with visible brush entry and exit strokes; used for the giant 「紫」 and any kanji that appear (Genji chapter names, the closing seal). It has exactly the dry-brush calligraphic quality this design needs. - **Body & literary text:** `Cormorant Garamond` (weights 300, 400, italic) — a high-contrast, almost diaphanous old-style serif; used for all running English/romaji prose, the notebook fragments, captions. Set generously: `line-height: 1.85`, `letter-spacing: 0.01em`, body size ~19px, prose color never pure white. - **Micro-labels / dates / UI numerals:** `Zen Kaku Gothic New` (weight 300) — a calm Japanese sans for tiny things (dates on the notebook slips, the panel counter "三 / 七"), so the small text stays legible against the ink without competing with the Garamond. - Vertical-text passages use `writing-mode: vertical-rl` with `Yuji Syuku` for kanji intermixed with `Cormorant Garamond` for any latin. **Palette — a chromatic essay on purple (no warm-orange anywhere, no neon):** - `#1A1424` — *yoru-murasaki*, near-black aubergine. The base scroll field at the dark end (panels 1, 7). - `#3B2A57` — *gromwell ink*, deep blue-violet. Primary ink color for brushwork and the title 「紫」. - `#6E4FA0` — *edo-murasaki*, the classic forbidden court purple. Accent strokes, the progress brushstroke fill. - `#9B7BC4` — *fuji-iro*, wisteria-violet. Mid-tones, hanging racemes, secondary text on dark. - `#C9B6DD` — *usu-iro*, "thin color", pale lilac. Body prose color on dark panels, drifting petals. - `#E8DEF0` — *shironeri-violet*, an almost-white violet-grey. Background of the twilight panels (3, 5) and the torn-paper notebook slips. - `#A03A4E` — *sumi-aka*, the muted vermilion of a stone name-seal. Used ONLY for the hanko impressions and the closing "again?" seal — the single non-violet note, deliberately rare. - `#0E2A3A` — *deep dusk teal*, used in tiny amounts where twilight sky meets the violet (panel 3 horizon), to keep the purples from feeling monochrome. Gradients are allowed but must be *vertical twilight washes* (aubergine → fuji-iro → shironeri at the horizon line), never the corpus-default warm sunset gradient. ## Imagery and Motifs - **Wet-ink calligraphy** as the central visual material: every major stroke is an SVG path that *draws itself* (stroke-dashoffset animation) with a slightly irregular, pressure-varying width, then shows a faint "bleed" halo (a blurred duplicate at low opacity) as if absorbing into paper. The giant 「紫」 is the showpiece — it should take ~3.5s to brush itself in on load. - **Detached strokes drifting like koi** — short calligraphic segments float horizontally across panel 4 with a lazy bobbing path; near the cursor's brush-nib they're gently attracted (a soft magnetic pull, not a snap), and on hover briefly snap into a complete Genji-chapter kanji before scattering. - **Generative star-field** — stars are not dots; each is a tiny four-stroke brush-asterisk drawn procedurally, scattered with low density across the dark panels, twinkling by redrawing one stroke at random intervals. A "shooting star" is literally a fast self-drawing brushstroke that fades behind itself. - **Wisteria racemes** — long hanging SVG clusters of small lilac blossoms along the top of panel 5, each raceme swaying on its own slow phase-offset sine; individual blossoms detach and fall (mostly down, occasionally up — the surreal beat). - **Gromwell-root diagram** — in panel 2, a botanically-suggestive line drawing of a *Lithospermum* root with violet "dye threads" unspooling from its tips and re-coiling, slowly rotating, to literally illustrate where the color comes from. - **Torn-paper notebook slips** — in panel 6, pale `#E8DEF0` rectangles with a hand-irregular torn top edge (SVG clip-path), a faint horizontal rule, a thin shadow, slightly rotated (±2°), holding one line of Garamond text each. They sway minutely as the scroll moves, like paper pinned on a line. - **Hanko seals** — small carved-stone vermilion impressions (`#A03A4E`), intentionally imperfect (slightly broken edges, uneven ink), appearing only twice: lower corner of panel 1, and as the "again?" loop seal in panel 7. - **Horizon eave-lines** — minimal black-violet silhouettes of a temple eave, a torii crossbar, a veranda rail — never full buildings, just the single defining line, sitting low on the twilight panels. No photography. No 3D renders. No glassmorphic frosted cards. No gradient-mesh blobs. Everything is ink, paper, or light. ## Prompts for Implementation Build murasaki.moe as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker. It is a ~2-minute walk along a horizontal painted scroll. There is **no CTA, no pricing block, no stat-grid, no testimonials, no email capture, no contact form, no FAQ, no logo wall, no newsletter, no cookie banner, no nav menu**. If the page feels like it's selling something, it's wrong. **Scroll mechanics:** - The page body is `overflow: hidden`; an inner `.scroll-track` is ~700vw wide and is translated on X. Map vertical wheel delta → horizontal translate (so a normal trackpad/mouse-wheel unrolls the scroll); also support click-drag, arrow keys, and Home/End. Ease the translate with a spring/lerp (target vs current, ~0.08 factor) so it has weight, like a heavy scroll being pulled. Respect `prefers-reduced-motion`: disable inertia and the upward petals, keep all content reachable by arrow keys. - A single bottom **brushstroke progress bar**: an SVG path the width of the viewport that fills with `#6E4FA0` ink (stroke-dashoffset) proportional to scroll position. That's the only progress indicator. A tiny `Zen Kaku Gothic New` counter "三 / 七" near it, optional. **Panel-by-panel storytelling (this is a narrative experience, not a landing page):** 1. **The Seal.** On load, the deep `#1A1424` field is empty for ~400ms, then the brush enters and draws 「紫」 in `#3B2A57` over ~3.5s with a visible bleed-halo; the dark core then lightens slightly over the next 2s ("drying"). Romaji `murasaki.moe` fades in small below in `Cormorant Garamond` 300. A `#A03A4E` hanko stamps into the lower corner with a tiny ink-spread. Then the scroll becomes interactive (a faint "→ unroll" hint in `usu-iro` near the right edge, fading after first scroll). 2. **The Color That Was Forbidden.** As the user scrolls in, a `writing-mode: vertical-rl` column of `Cormorant Garamond` + occasional `Yuji Syuku` kanji writes itself line by line (translate/opacity stagger) — a ~120-word passage on gromwell-root dye and sumptuary law. Beside it, the slowly rotating gromwell-root line drawing with unspooling violet threads. 3. **The Hour.** A full-height vertical twilight wash (`#1A1424` → `#6E4FA0` → `#E8DEF0` at a low horizon, with a thread of `#0E2A3A` at the meeting line). A low torii-crossbar silhouette. A brush-tip enters and *draws the first star* — a four-stroke asterisk — then the generative star-field (sparse) begins twinkling across this and following dark areas. One slow shooting-star (self-drawing fading brushstroke) every ~25s. 4. **The Scattered Strokes.** 8–12 detached calligraphic stroke-segments drift across on lazy bobbing paths. The cursor's brush-nib exerts a soft attraction; hovering a segment makes nearby segments converge and briefly form a complete Genji-chapter kanji (帚木, 夕顔, 紫の上 …) with its English chapter name fading in small beneath in Garamond italic, then they scatter after ~1.2s. 5. **The Wisteria Eaves.** Long pendulous wisteria racemes hang from the top edge, each swaying on its own sine phase. A low veranda rail silhouette beneath. Blossoms detach and fall — ~85% downward, ~15% drifting *upward* and off the top. The vertical wash here is `usu-iro` over `shironeri-violet` — the lightest panel. 6. **The Notebook.** Torn-paper `#E8DEF0` slips strung along the scroll like pinned pages, each holding ONE line of `Cormorant Garamond` text (a date in tiny `Zen Kaku Gothic New`, then a fragment / link / thought). They enter with a gentle fade + slight rotate; they sway micro-amounts with scroll velocity. This is the only "useful" section and it stays austere — no headings, no excerpts, no thumbnails. 7. **The Re-Rolling.** The far edge of the scroll-track visibly curls (a CSS perspective + rotateY on the trailing wrapper, plus a soft inner-shadow "rolled paper" edge). Field darkens back to `#1A1424`. One final brushed star. A small `#A03A4E` hanko reading 「また」 / "again?" — clicking it springs the scroll back to panel 1 (re-rolling animation, ~1.4s). **Texture & atmosphere details:** add a very faint SVG `feTurbulence` "washi paper" grain over the whole field at ~3–5% opacity; give every drawn stroke its blurred bleed-duplicate; the custom cursor is a soft `#C9B6DD` glow nib that leaves a 2-frame fading wet smudge (not a long follower trail). Keep all motion *slow* — nothing snappy, nothing bouncy; springs are heavy and over-damped. Sound is optional and off by default; if added, a single soft *koto* pluck on panel transitions, behind a tiny mute toggle in the top overlay. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Horizontal handscroll (emaki) as the entire site structure**, scrolled by mapping vertical wheel input → horizontal unrolling, with a literal "re-rolling" curl at the end. The corpus is overwhelmingly vertical card-grid / full-bleed-centered (card-grid 90%, full-bleed 89%); horizontal-scroll sits at only ~7% and almost never as the *whole* spine of the page rather than one strip. 2. **A monochromatic essay on a single named color** — the site's entire palette is eight historically-grounded Japanese purples (yoru-murasaki, edo-murasaki, fuji-iro, usu-iro …) with exactly one rare vermilion seal as contrast. This rejects the near-universal warm/gradient sunset palette (warm 98%, gradient 96%) in favor of a cool violet monochrome with documented provenance. 3. **Self-drawing brush calligraphy with ink-bleed halos as the primary imagery** — `Yuji Syuku` kanji and procedural four-stroke brush-stars, no photography at all. The corpus is 98% photography and leans hard on hand-drawn-cute and glassmorphism; this is wet sumi ink rendered as light, in a literary register, not a doodle register. 4. **Literary / classical-Japanese voice, not `.moe`-cute voice** — Heian court, *The Tale of Genji* chapter names, sumptuary dye law, *mono no aware*. No marketing copy, no CTA, no pricing, no stats — the visitor is a reader of a scroll, never a lead. 5. **Gentle structural surrealism** (petals falling upward, calligraphy strokes swimming free of their characters, ink drying in real time) kept restrained and melancholy rather than zany — surreal aesthetic sits at only ~5% in the corpus and is usually loud; here it's a quiet undertow. **Chosen seed / style:** *aesthetic: surreal, layout: horizontal-scroll, typography: serif-revival, palette: midnight-blue (violet monochrome), patterns: path-draw-svg, imagery: generative-art, motifs: star-celestial, tone: dreamy-ethereal* **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism (78%), photography (98%), card-grid (90%), full-bleed-centered (89%), parallax (92%), cursor-follow trails (89%), mono typography (94%), warm palette (98%), gradient sunset (96%), tilt-3d, counter-animate, typewriter-effect, stat-grids, CTA/pricing blocks.