# Design Language for matsurika.stream ## Aesthetics and Tone matsurika.stream — 茉莉花, *the night-blooming jasmine* — is a single, slow, vertical descent through a cup of jasmine tea as it steeps from clear water to amber dusk. The whole site is the inside of a cracked celadon teabowl: a **wabi-sabi imperfect-ceramic** surface, glaze-fissured, kiln-warped, where nothing is symmetrical and every edge admits its own making. The tone is **zen-contemplative** with a thread of quiet melancrony — *mono no aware*, the ache that things bloom and pass. There is no marketing here. There is a stream, and you fall down it slowly, and somewhere around the third screen the jasmine opens. Reference touchstones: the unglazed foot-ring of a Hagi chawan; Hasegawa Tōhaku's *Pine Trees* screen — pine reduced to ink-mist and the rest left as raw paper; the inside lid of an old lacquer tea-caddy; the way steam reads on a cold morning as moving negative space. The site should feel less *designed* than *thrown on a wheel* — slightly off-center on purpose, with a visible "tea stain" where the cup has sat too long. Crucially: this is **not warm, not gradient-soaked, not photographic**. It is cool — wet stone, steeped indigo, the grey-green of celadon under shadow — punctuated by exactly one bloom of muted amber. The corpus is 98% warm and 96% gradient; we are deliberately cold and flat-washed, ink on damp paper. ## Layout Motifs and Structure The structure is **ma-negative-space** taken to a near-absurd extreme, organized as an **immersive vertical scroll** that behaves like a column of liquid. Six "screens," each `100svh`, scroll-snapped (`scroll-snap-type: y proximity` — *proximity*, not mandatory, so the fall feels loose, like tea-leaves settling, not like a slide deck): 1. **Still Water** — almost empty. A single off-center vertical hairline (the rising thread of steam), one tiny kanji 茉, and 78% empty paper. The fold-line of an imaginary scroll runs down the left third. 2. **The Drop** — the jasmine pearl falls: a small dark sphere descends on scroll, leaving an expanding ink-ring (SVG path-draw) that pushes the layout's single text column gently rightward as it "displaces water." 3. **Unfurl** — the bloom. A line-illustration jasmine (six petals, drawn live with `path-draw-svg`) opens across the diagonal of the screen; body text wraps *around* the petals using CSS `shape-outside` on floated invisible shapes. 4. **Steep** — the longest screen. Text set in a single narrow measure (max 52ch) drifts down a tea-coloured wash that deepens via `mix-blend-mode: multiply` layers as you scroll — never a CSS gradient, always stacked translucent ink-blots. 5. **The Stain** — an off-grid moment: content sits inside the irregular ring left by a teacup, an asymmetric blobby SVG clip-path. This is the only "card" and it is broken on purpose. 6. **Sediment** — settle. Everything sinks to the lower third; the top two-thirds become raw paper again. A last hairline. 茉莉花. No nav bar. Navigation is a single thin vertical progress-thread on the right edge — it *is* the steam — with six dew-drop nodes. No footer in the conventional sense; the page simply runs out of water. ## Typography and Palette **Typography** pairs an **elegant-serif** (for the few human sentences) with a **mono** voice (for labels, the kanji romaji, timestamps of the steep) — but the mono is used sparingly and at small sizes, against the 94%-mono corpus. - **Display & body serif:** *Cormorant Garamond* (Google Fonts) — weights 300 and italic 400. Headlines at `clamp(40px, 8vw, 132px)`, leading `0.96`, tracking `-0.02em`. Italic preferred for verbs and for the word *jasmine* wherever it appears. - **Secondary serif / running text:** *Spectral* (Google Fonts), 300/400 — for paragraphs in the Steep screen, opsz-friendly, slightly humanist, set at 19px / 1.75. - **Accent mono:** *DM Mono* (Google Fonts), 300 — only for: the screen index ("02 — THE DROP"), the brewing timer ("00:00 → 03:14"), and the romaji *matsurika*. Letter-spacing `0.22em`, uppercase, 11px. - **Kanji:** *Shippori Mincho* (Google Fonts) for 茉 / 莉 / 花 / 茉莉花 — a true Japanese mincho, used large and pale as watermark glyphs. **Palette** — cool, muted, near-monochrome with one warm release. Minimum hexes: - `#EDEAE2` — *unbleached paper* (base background; not white, slightly raw) - `#1F2A28` — *wet ink* (primary text; near-black with a green undertone) - `#5C7A72` — *celadon shadow* (the dominant accent; grey-green glaze in the dark) - `#A9BDB4` — *celadon light* (hairlines, dew-drop nodes, faded glyphs) - `#2E3D52` — *steeped indigo* (the cold water; used in the multiply-wash layers) - `#C98A3C` — *jasmine amber* (the one bloom — appears ONLY on screen 3 and the open jasmine; nowhere else) - `#3A322B` — *tea stain* (the irregular ring on screen 5, 22% opacity multiply) ## Imagery and Motifs All imagery is **line-illustration** + **paper-aged** texture — *no photographs*, against the 98% photography corpus. - **The jasmine** rendered only as a single-weight ink contour (1.25px stroke, `#1F2A28`), six rounded petals, slightly imperfect — one petal larger, the stroke wobbling like a brushed line. Drawn live with `stroke-dasharray` path animation. - **Steam / stream** — a hand-traced wavering vertical line that is at once: the navigation thread, the structural fold-line, and the rising vapour. One line doing three jobs. - **Ink-rings** — concentric expanding circles (the jasmine pearl hitting water), SVG, drawn outward on scroll, never filled. - **Paper grain** — a fixed-position `feTurbulence` SVG noise filter at 4–6% opacity over the whole page, `mix-blend-mode: multiply`, plus a faint kōzo-fibre fleck layer. The paper has a deckle edge: the body's left margin is an irregular SVG path, not a straight line. - **Glaze cracks** — extremely faint hairline cracks (`#A9BDB4` at 8%) crossing the viewport at shallow angles, like crazing in celadon. Three of them, fixed. - **Tea-stain ring** — one asymmetric, broken ellipse, the imperfect "card" frame on screen 5. No icons. No logos. The kanji 茉莉花 *is* the mark. ## Prompts for Implementation Build this as **one continuous immersive scroll-poem**, not a page with sections. It should read top to bottom like water finding its level. - **Layout:** six `
` elements, each `min-height: 100svh`, `scroll-snap-align: start` with `scroll-snap-type: y proximity` on the scroll root. Generous, almost uncomfortable whitespace — text columns never exceed 52ch and are *deliberately off-center* (left-weighted on odd screens, right on even), using `margin-inline` asymmetry, never `auto auto`. - **The steam-thread nav:** a fixed 1px vertical line on the right (`#A9BDB4`), with six `` dew-drops. As you scroll, a `#5C7A72` "fill" rises from the bottom of the thread (scaleY transform driven by scroll progress) — the cup filling. Dew-drops grow slightly (`scale`) and pick up the amber tint *only* when their section is active. Smooth `spring` easing on the grow. - **The pearl drop (screen 2):** on entering the section, a small `#1F2A28` circle translates downward (`scroll-triggered`), and on "impact" three concentric ``s expand via `stroke-dashoffset` animation while the text column eases ~40px to the right (it is being displaced). Use `IntersectionObserver` + a scroll-linked progress value; respect `prefers-reduced-motion` by showing the final state immediately. - **The unfurl (screen 3):** the jasmine SVG path draws itself (`stroke-dasharray`/`stroke-dashoffset` from 100% to 0) timed to scroll position within the section. Once "open," the petals get a barely-there breathing animation (`scale(1) ↔ scale(1.012)`, 8s ease-in-out). Body copy flows around the bloom with `shape-outside: url(petal-mask.svg)` on floated spacer elements. This is the *only* screen permitted the amber `#C98A3C`. - **The steep wash (screen 4):** do NOT use `linear-gradient`. Stack 4–5 absolutely-positioned translucent `#2E3D52` / `#3A322B` blobs (organic SVG shapes) with `mix-blend-mode: multiply`; as the user scrolls down the section, fade each in sequentially (`opacity` 0→1 on scroll progress) so the "tea" visibly darkens. Text stays `#EDEAE2`-on-deepening, switching to high-contrast as the wash thickens. - **The stain (screen 5):** content lives inside an asymmetric `clip-path` (a hand-authored irregular blob, the cup-ring). Slightly rotate it `-1.4deg`. It is the lone broken-grid card; let it bleed past the text measure on one side. - **Typography motion:** headline serif lines do a soft `blur-focus` reveal — `filter: blur(8px); opacity:0` → sharp — staggered word by word (`stagger`), once, on first view. The mono labels do a tiny `typewriter-effect` only for the brewing timer ("00:00" counting up to "03:14" via `counter-animate` as you traverse the whole page — the page *is* a three-minute steep). - **Texture:** apply the `feTurbulence` paper-noise as a `position: fixed` overlay, `pointer-events: none`, `mix-blend-mode: multiply`, 5% opacity. Add the three faint glaze-crack hairlines as fixed SVG. The body's left edge should be an irregular deckle path (SVG mask), so the "paper" never has a clean machine edge. - **Sound (optional, off by default):** one 1.2s field recording — a single drop into water — when the pearl lands on screen 2. Muted unless the user opts in. - **AVOID:** any CTA, "sign up," pricing block, stat-grid, feature cards, testimonial carousel, hero button, or nav menu. AVOID warm color washes, CSS gradients, photographic imagery, glassmorphism panels, and hand-drawn-doodle clutter. There is nothing to buy. There is tea, and a flower, and the falling. ## Uniqueness Notes Differentiators from the corpus: 1. **Cold near-monochrome ink palette with a single amber release.** Against a corpus that is 98% warm and 96% gradient, this site uses *zero* CSS gradients (only stacked multiply blots) and one warm hue confined to a single screen. Celadon-grey-green + steeped indigo + raw paper is essentially absent elsewhere. 2. **No photography, no hand-drawn clutter.** Photography appears in 98% of designs and hand-drawn aesthetic in 97%; this is pure single-weight line contour + paper texture, restrained to one jasmine, one steam-line, concentric rings, and crazing cracks. 3. **One line, three roles.** The wavering vertical stroke is simultaneously the navigation progress thread, the structural scroll fold-line, and the rising steam — a single SVG element load-bearing across the whole document. 4. **The page as a literal 3-minute steep.** A `counter-animate` brewing timer runs 00:00 → 03:14 mapped to total scroll progress, and the background "tea" darkens via sequenced multiply layers — the duration of reading *is* the duration of brewing. No stat counters, just one quiet timer. 5. **Wabi-sabi by construction:** off-center text columns, an irregular deckle left margin, a deliberately broken "stain" card rotated -1.4deg, asymmetric petals with a wobbling stroke. `scroll-snap-type: proximity` (not mandatory) so even the scroll refuses to be perfectly regimented. 6. **Chosen seed/style:** `wabi-sabi imperfect ceramic` — combined with `japanese-minimal`, `zen` aesthetic, `ma-negative-space` + `immersive-scroll` layout, `monochrome`/`muted` palette, `line-illustration` + `paper-aged` imagery, `Cormorant Garamond` + `Spectral` + `DM Mono` + `Shippori Mincho` typography. Avoided patterns from frequency analysis: warm palette (98%), gradient palette (96%), photography (98%), hand-drawn aesthetic (97%), glassmorphism (74%), card-grid (88%), centered layout (86%), cursor-follow (89%), mono-as-dominant-type (94%) — all consciously sidestepped here.