# Design Language for murasaki.day ## Aesthetics and Tone murasaki.day is **a single day measured by an incense clock, written in violet ink on the inside of a folding screen**. *Murasaki* (紫) is the Japanese word for purple — the color the Heian court reserved for its highest ranks, the dye crushed from the roots of the *murasaki* gromwell plant, and the brush-name of Murasaki Shikibu, who wrote *The Tale of Genji* a thousand years ago by candlelight. The TLD *.day* is one rotation of the earth. So this site treats the viewport as **a *byōbu* — a six-panel paper screen — unfolding from dawn to deepest night, while a thread of incense smoke (not a clock face, not a progress bar) marks the hours by how far it has burned**. The tone is **zen-contemplative crossed with dark-academia** — not the cottagecore "warm cabin" zen that floods the registry, but the austere, scholarly hush of a court poet's writing room: low light, the smell of *jinkō* aloeswood, a single oil lamp, a stack of paper, and the patience to wait for one perfect line. Where most zen sites resolve to sumi-black ink on rice white, **murasaki.day resolves to *every* shade of purple that Heian dyers had names for** — *futaai* (twice-dyed indigo-violet), *kobai* (red-plum), *usu-murasaki* (pale lavender), *kon* (deep navy-violet) — layered like the twelve robes of a *jūnihitoe*. Nothing is bright. Everything glows the way a screen-painted moon glows: from behind, dimly, with gold leaf catching the lamp. This is **slow software**. It does not announce, sell, or convert. It asks the visitor to sit with a single unfolding image for as long as the incense lasts. ## Layout Motifs and Structure The page is **a horizontal *byōbu* screen, six panels wide, viewed by scrolling sideways** — `horizontal-scroll` (7% of the registry — preferred over the 89% full-bleed-vertical default; 90% card-grid is wholly absent; 84% centered is absent). There is **no header, no nav bar, no footer, no sidebar, no card grid, no hero block, no CTA, no pricing, no stat counters**. The entire experience is the screen and the smoke. **The six panels (`stacked-sections` reinterpreted horizontally — 2% of registry):** 1. **PANEL ONE — 暁 (akatsuki, before dawn).** Near-black `kon` violet. A single line of vertical text (tategaki, right-to-left) rises from the bottom of the panel like the first thought of the day. The wordmark *murasaki.day* sits as a faint *kao* (cipher-signature) seal in oxidized vermilion, lower-right, the size of a thumbnail. 2. **PANEL TWO — 朝 (asa, morning).** The `futaai` ground lightens at the fold-line by one robe-layer. A poem-fragment in three lines of tategaki, set in negative space so wide the words feel like islands. 3. **PANEL THREE — 昼 (hiru, midday).** `usu-murasaki` — the palest panel. Gold-leaf flecks (`kirikane`, cut-gold) drift across an otherwise empty field. This is the panel of greatest *ma* — ninety-two percent empty colored air. 4. **PANEL FOUR — 夕 (yūbe, evening).** `kobai` red-plum bleeds in from the right fold. The incense thread, which has been climbing the *bottom* edge of every panel as a 1px line of animated smoke, here turns and rises vertically. 5. **PANEL FIVE — 宵 (yoi, nightfall).** Deepening `murasaki`. A painted moon — a flat circle of `kindei` (gold paint) with a single ink cloud crossing it — rises slowly as you scroll. 6. **PANEL SIX — 夜 (yoru, deep night).** Back to `kon`, almost black, but now the gromwell-root motif (a tangle of dye-roots rendered in hairline violet line) spreads across the whole panel like veins in the dark. The day closes where it began. The fold-lines between panels are **real**: 2px vertical seams with a faint inner shadow, so the screen reads as physically hinged paper, not a flat canvas. On scroll, panels exhibit a barely-perceptible **parallax** (92% — common, but used here at extreme restraint: foreground text moves 1.0×, the painted moon 0.85×, the gold flecks 0.6×) — `layered-depth` (10%). Asymmetry is governed by the **golden-section fold placement** rather than a CSS grid (`broken-grid` / `editorial-flow`, 8% / 3%). ## Typography and Palette **Fonts (Google Fonts only — verified available).** - **Shippori Mincho** (weights 400, 500, 600, 800) — *the brush voice*. A Japanese serif (*mincho*) by FONTWORKS, modeled on Edo-period woodblock type, with strong vertical stress, sharp *uroko* serifs, and excellent vertical-writing (tategaki) metrics. It carries every Japanese line, the kanji panel-headers (暁 朝 昼 夕 宵 夜), and the wordmark. Set kanji headers at `clamp(4rem, 11vw, 9rem)`, `font-weight: 800`, `writing-mode: vertical-rl`, `letter-spacing: 0.08em`. Poem-fragments at `clamp(1.4rem, 2.6vw, 2.2rem)`, weight 400, line-height 2.1 (loose, breathing). - **Cormorant Garamond** (weights 300, 400, italic 400) — *the translator's voice*. Christian Thalmann's high-contrast revival of Garamont's 1592 specimens. It carries the English-language counterpoint text — the romanized poem titles, the season-words (*kigo*), the faint marginal glosses — always smaller and dimmer than the Japanese, set at `0.86rem`–`1.1rem`, weight 300, `letter-spacing: 0.04em`, `font-style: italic` for *kigo*. - **Zen Kaku Gothic New** (weight 400, used sparingly) — *the lamp-label voice*. A clean humanist Japanese sans by Yoshimichi Ohira, used only for the tiny incense-clock readout ("香 — 三刻" style time markers) and the seal-caption, at `0.7rem`, `letter-spacing: 0.18em`, uppercase-equivalent spacing. **Palette — the twelve-layer robe (*jūnihitoe*) of purple. All hex values fixed.** - `#1A1530` — **kon** (深紫 / navy-violet), the night ground, panels one and six. - `#2E2348` — **futaai** (二藍), twice-dyed indigo-violet, the morning ground. - `#574B7A` — **murasaki** (紫), the true imperial purple, mid-tone structural color, the painted-moon's shadow side. - `#8E7BAE` — **usu-murasaki** (薄紫), pale lavender, the midday ground — the lightest the page ever gets. - `#7A2E45` — **kobai** (紅梅), red-plum, the evening bleed. - `#C9A24B` — **kindei** (金泥), gold paint, the moon and the *kao* seal's frame. - `#D8C98E` — **kirikane** (切金), cut-gold leaf flecks, drifting accents. - `#9C2B22` — **shu** (朱), oxidized vermilion, the seal/cipher signature only. - `#E8E2D4` — **kōzo** (楮 / mulberry-paper), the off-white of text on dark grounds, never pure #FFF. - `#3D2F1C` — **sumi-on-gold**, the warm near-black used for ink lines that fall on the gold moon. Contrast is intentionally **soft** on the pale midday panel and **deep** on the night panels — the day literally brightens and darkens as you move through it. ## Imagery and Motifs **No photography (98% of registry — emphatically rejected). No 3D, no Lottie, no raster textures, no stock illustration, no glassmorphic cards (5%).** Every visual element is **pure inline SVG drawn at hairline weight**, with one paper-grain ``. - **The incense thread (`path-draw-svg`, 38%).** A single 1px `` of `stroke-dasharray`-animated "smoke" runs along the bottom edge of all six panels, then turns vertical in Panel Four. Its `stroke-dashoffset` advances on a real clock — over an 18-minute cycle it "burns" from Panel One to Panel Six, then resets at midnight-of-the-cycle. Tiny `feTurbulence` displacement gives it a wandering, smoke-like wobble. This is the only "clock" on the site. - **The gromwell roots (motif: `leaf-organic` / `nature`, 6% / 13% — but rendered as a *root* system, which the registry's nature motifs never do).** In Panel Six, a generative tangle of thin violet `` curves spreads from a single point — the *murasaki* plant's dye-roots — drawn with a recursive branching algorithm, each branch fading toward `futaai` at its tips. - **The painted moon (`star-celestial`, 4%).** A flat `` filled `#C9A24B`, with one elongated `#3D2F1C` ink-cloud `` crossing it at a slight diagonal — deliberately *unrealistic*, like a moon painted on a screen, not photographed. - **Kirikane flecks.** 30–50 small gold quadrilaterals (``), scattered by a seeded PRNG so the layout is reproducible, drifting at sub-pixel speeds during scroll. - **The *kao* seal.** The wordmark *murasaki.day* rendered inside a hand-drawn-looking SVG seal-frame in `#9C2B22` — a single closed `` with a faint `feGaussianBlur` bleed, mimicking ink soaking into paper. - **The fold-seams.** 2px vertical lines with `box-shadow: inset 8px 0 16px rgba(0,0,0,0.18)` to read as hinged paper. - **Grain.** One `feTurbulence` + `feColorMatrix` filter at ~3% opacity, multiplied over everything, so even the flat color fields have the tooth of *washi* paper. ## Prompts for Implementation Build murasaki.day as **one HTML file, one CSS file, one JS module, one inline SVG sprite**. No framework, no router, no build step, no service worker. Target bundle under 70KB uncompressed. **Document skeleton:** ```
…tategaki line…
…three-line poem…
…kirikane field…
…incense turns…
…painted moon…
…gromwell roots…
…murasaki.day seal…
``` **Layout / motion guidance:** - `main.byobu` is `display: flex; overflow-x: scroll; scroll-snap-type: x proximity;` — each `.panel` is `min-width: 100vw; scroll-snap-align: start; position: relative;`. The whole thing reads as one continuous painted screen, scrolled sideways with trackpad, arrow keys, or a thin custom scroll-rail at the bottom edge. - **Storytelling is the entire point.** As the visitor scrolls right, the ground color crossfades through the *jūnihitoe* palette (CSS custom property `--ground` interpolated by an IntersectionObserver-driven scroll-progress value). The painted moon translates upward across Panels Five and Six. Poem-fragments fade in line-by-line (`fade-reveal`, 18%; `stagger`, 73% — used here at deliberately slow ~700ms-per-line cadence) when their panel enters view. - **The incense clock is real.** On load, read `Date.now()`, map the current minute-of-the-cycle (an 18-minute loop) to a `stroke-dashoffset`, and animate from there forward with `requestAnimationFrame`. The thread should *always* be mid-burn when the page loads — never a fresh start — reinforcing that the day was already underway before you arrived. - **Vertical text (tategaki).** Panels One and Six use `writing-mode: vertical-rl; text-orientation: upright;` for the kanji headers; modern browsers handle this natively. English glosses stay horizontal, in the margins, dim. - **Cursor:** the faintest `cursor-follow` (89% — common, so do it almost invisibly): a single 6px soft `#D8C98E` dot with a 0.4 lerp, like a fleck of gold dust the reader stirs as they move. No magnetic buttons, no tilt-3D, no ripple. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hamburger menus, hero sections, card grids, photography, glassmorphism, neon, dopamine color, dark-cabin cottagecore zen. If a section looks like a SaaS landing page, delete it. - **Reduced-motion:** if `prefers-reduced-motion`, freeze the incense thread at its current burn point, disable parallax and crossfade-on-scroll, and let the visitor simply scroll through the six static panels — the screen still works as a painting. ## Uniqueness Notes Deliberate departures from the 404 designs already in the registry and from the seed's defaults: 1. **A *byōbu* folding screen as the literal page geometry.** `horizontal-scroll` is 7% of the registry and `stacked-sections` 2%; nothing in the corpus uses a *hinged six-panel screen with real fold-seams* as its structural metaphor. The day unfolds left-to-right like paper, not down like a feed. `card-grid` (90%), `centered` (84%), and `hero-dominant` (12%) are entirely absent. 2. **The entire palette is one color — purple — split into a dozen named Heian dye-shades.** Monochrome palettes are 15% of the registry, but they are almost always grey or sepia; an *all-violet jūnihitoe* graded from `#1A1530` to `#8E7BAE` with `#C9A24B` gold leaf as the only non-purple is, as far as the corpus shows, unprecedented. Warm (98%) and gradient (96%) defaults are rejected in favor of cool violet step-fades. 3. **An incense clock instead of any UI clock or progress indicator.** A real-time `stroke-dashoffset`-animated smoke thread that "burns" across the screen on an 18-minute loop and is always mid-burn on load. No counter-animate, no progress bar, no typewriter hero — just a slowly disappearing line. 4. **Zen × dark-academia, not zen × cottagecore.** Every zen design in the registry pairs with muted/monochrome/ethereal-blue and a "warm cabin" or pastoral-romantic tone; murasaki.day pairs zen-contemplative with the austere scholarly hush of a Heian poet's lamp-lit writing room — `dark-academia` (5%) territory the existing zen designs never enter. 5. **Pure-SVG hairline imagery including a *root system*.** No photography (rejecting the 98% norm), no 3D, no raster. The generative gromwell-dye-root tangle in Panel Six treats a botanical motif as *roots in the dark* rather than the registry's usual leaves-and-flowers. Chosen seed/style: **japanese zen portfolio** (from seeds.json), interpreted through a Heian-court literary, all-violet, incense-clock lens. Avoided overused patterns per frequency analysis: hand-drawn (96%), glassmorphism (78%), photography (98%), card-grid (90%), centered (84%), warm palette (98%), gradient (96%), cursor-follow/spring/magnetic kept to near-invisible minimums.