# Design Language for matsurika.stream ## Aesthetics and Tone matsurika.stream is an editorial long-form publication about lost summer festivals — the kind that flickered out in small Japanese towns between 1978 and 1996, captured here as a single immersive scroll-essay rather than a feed or grid. The mood is **nostalgic-retro**, but not the saccharine kind: it is the warm, slightly faded register of a Polaroid sleeve found in a rented kominka, terracotta dust on the print, the smell of cedar smoke still on the page. Visual inspiration draws from the editorial gravitas of *The Gentlewoman*, the ochre-burnt palettes of Saul Leiter's New York work translated into a Kansai summer, and the **futuristic** undertone of late-Showa graphic design that imagined the next century in copper and cream rather than chrome and blue. The site does not feel "designed for the screen"; it feels like a printed object that learned to scroll, with cursor-follow halos acting as a soft reading lamp the user drags across each spread. ## Layout Motifs and Structure The architecture is a single **immersive-scroll** narrative divided into seven movements ("Lanterns", "Stalls", "Embers", "Bon", "Foxlight", "Closing", "Echo"), each occupying 140–220vh of vertical real estate. There is no global navigation bar; a thin terracotta progress filament runs down the right edge with seven dots, each labeled by a vertical Japanese gloss that the cursor un-collapses on hover. Type and imagery sit on an asymmetric 12-column grid that drifts: column 1 is reserved for kerned chapter numerals set vertically (01 — 七), columns 2–7 carry pull-quotes that escape into the gutter, and columns 8–12 carry body editorial set in long measure with deliberate widows allowed for breath. Section transitions use a **gradient-mesh** wipe that resolves into the next chapter's heading, so the eye never lands on a "fold". Sticky moments — a recovered ticket stub, a half-burned program — float in the foreground while the page continues to move behind them, a parallax thicker than usual (0.35 speed) to evoke physical depth without dizziness. ## Typography and Palette **Typography** uses Commissioner across the full range of its variable axes (the "commissioner-versatile" brief): Commissioner 200 Italic at 14px for marginalia and dateline microcopy, Commissioner 400 at 19px/1.62 for body essay, Commissioner 720 at 92–168px for chapter titles allowed to break across two lines, and Commissioner Flair 300 for the recurring lantern-glyph chapter numerals. A secondary face, Shippori Mincho B1, appears only for the Japanese vertical glosses on the progress filament and pull-quote attributions, set in 13px with letter-spacing -0.01em to feel like a stamp rather than a font. **Palette** is terracotta-warm, drawn from sunbaked clay and dusk: - `#3A1F17` — kuroni iron oxide (text and ground) - `#B85C38` — terracotta primary (chapter numerals, filament, headline accents) - `#E27D5C` — ember orange (hover state, lantern glow) - `#F2DDC4` — washi cream (page ground) - `#D9B38C` — sand kraft (figure captions, secondary surfaces) - `#6C8B7A` — moss verdigris (pull-quote attributions, rare accent) - `#1A1410` — deep umber (vignettes and full-bleed image overlays) ## Imagery and Motifs Imagery is built almost entirely from **gradient-mesh** compositions — soft, large-radius color fields blended in CSS conic and radial gradients to evoke the bokeh of paper lanterns through humid air, the smear of fireworks on long exposure, and the dye-bleed of cotton yukata patterns. Each chapter opens with a full-bleed mesh that names a "color of the night" (e.g., *#B85C38 over #1A1410* labeled "Lantern Two, 21:14"). Mesh is paired with a few **futuristic** motifs harvested from 1985 Japanese pavilion graphics: thin copper orbital rings, single-pixel sans-serif chrome captions, satellite-arc divider rules. Decorative inline glyphs include a hand-drawn matsurika (jasmine) sprig used as a chapter end-mark, vertical tally marks counting visitors per night, and faint terracotta thumbprints in the gutter where the reader's cursor has rested longest. No stock photography is used; the only photo-like elements are gradient-mesh "non-photographs" — imagined images of festivals that may never have existed. ## Prompts for Implementation Build a full-screen narrative scroll experience. The hero opens on a black-umber field while a single line of Commissioner 720 fades in character-by-character: "Seventeen Augusts ago, the lanterns came down for the last time." Beneath it, a cursor-follow ember (a 320px soft radial-gradient halo, #E27D5C at 22% opacity, mix-blend-mode multiply on cream sections and screen on umber sections) tracks the pointer with a 90ms ease-out lag, never jittering. As the user scrolls, gradient-mesh backgrounds cross-fade between the seven movements using a custom CSS `@property` interpolation on three hue stops simultaneously, so the page feels like it is breathing color rather than swapping slides. Pull-quotes scale from 32px to 96px as they cross the viewport center, locked with `scroll-timeline` where supported and an IntersectionObserver fallback. The terracotta progress filament should not be a generic scrollbar; it is a single 1px terracotta line whose dot at the current chapter softly pulses, and clicking a dot triggers a smooth-scroll with a 1.4s eased duration. Avoid CTA buttons, pricing tables, stat grids, signup forms, and feature blocks entirely — this is a publication, not a product. The footer is a single line of Shippori Mincho B1, vertical, reading "終 — 提灯は消えても、夜は続く." ## Uniqueness Notes - **Differentiator 1:** Treats the entire site as a single seven-movement editorial essay with no nav bar, no feed, no cards — extremely rare in a registry dominated by `playful`/`corporate`/`portfolio-grid` work. - **Differentiator 2:** Uses gradient-mesh as the primary imagery layer in place of photography (which the frequency analysis shows saturates 89% of designs). - **Differentiator 3:** Pairs a terracotta-warm Showa-era palette with subtle late-Showa **futuristic** motifs (copper orbital rings, satellite-arc rules) — a rarely combined register. - **Differentiator 4:** Cursor-follow is implemented as a *reading lamp* with blend-mode shifts per section ground, not as a generic dot-follow novelty. - **Differentiator 5:** Typography uses a single variable family (Commissioner) across six weight/width settings, treating it as a "versatile" tool — matching the planned typography keyword precisely. - Planned seed: aesthetic=editorial, layout=immersive-scroll, typography=commissioner-versatile, palette=terracotta-warm, patterns=cursor-follow, imagery=gradient-mesh, motifs=futuristic, tone=nostalgic-retro. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.