# Design Language for tsundere.party ## Aesthetics and Tone A Japanese-minimal terracotta tea-room scrolled as a single continuous breath. The page is a long, immersive reading-scroll — a vertical hand-scroll (emakimono) where each section unfurls beneath the previous one in a slow, ceremonial cadence. Aged paper carries terracotta brushwork; thin SVG paths self-draw like ink finding its line. Inspiration: Kenya Hara's "White" essays, the Nakagawa Masashichi Shoten paper packaging, the Daisen-in stone garden, Hiroshi Sugimoto's wax-paper portraits, and the burnt-sienna palette of a Bizen-yaki tea bowl. Minimal in tone — quiet, deliberately spaced, with long silences between phrases. The voice is hushed. No exclamation marks. Sentences end like a tea ceremony's bow — completed, unhurried. The "party" referenced in the domain is a private one: a small gathering around a single bowl, where the celebration is the slowness itself. ## Layout Motifs and Structure Immersive-scroll structure as a vertical hand-scroll. The viewport is a single 100vh slice that the page slides through; sections are stitched edge-to-edge with no visible breaks, only a 1px terracotta hairline that itself draws via path-draw-svg as the reader crosses the seam. Layout grid: - 8-column hidden grid; content lives in columns 2-7 with generous ma (negative space) in columns 1 and 8. - Each section is 100vh tall, but elements within breathe at fractional rhythms: a leaf-svg occupies columns 4-5, a single character of brush-stroke kanji occupies column 7. - Scroll-velocity is dampened by a 180ms inertia buffer so the page feels heavier than the wheel. - Section transitions happen via a single horizontal terracotta brush-stroke that draws itself across the viewport at scroll-progress 0.92-1.00, then dissolves as the next section enters. There is no nav-bar in the traditional sense. Instead, a vertical 12px-wide aged-paper rail clings to the right edge, with 7 micro-tick marks (one per section). When a section is in view, its tick draws a 2px terracotta line; the others remain as 1px graphite hairlines. ## Typography and Palette - **Display headlines:** "Zen Maru Gothic" (Google Fonts), weight 500 — rounded-sans for section openers at 56-72px, generous letter-spacing 0.04em, soft circular terminals. - **Body / narrative:** "Zen Kaku Gothic New" (Google Fonts), weight 300 — rounded-sans body copy at 18px, line-height 1.95 for a slow reading rhythm. - **Caption / micro:** "Noto Serif JP" (Google Fonts), weight 400 — for kanji accents and small terracotta-ink captions at 14px. - **Accent / quote:** "Klee One" (Google Fonts), weight 400 — for hand-lettered margin notes in italic-feel rounded calligraphy. Palette — Terracotta-warm tea-room: - `#F4ECD8` Aged Vellum — base paper background, with subtle paper-aged noise grain at 0.04 alpha. - `#E7D9BC` Faded Mulberry — paper shadow tone for layered seams. - `#C44D2E` Terracotta Ink — primary brush color for headlines, hairlines, path-draws. - `#8B3A1F` Bizen Earth — deepest accent, reserved for kanji glyphs and section-tick marks. - `#3A2A1C` Sumi Whisper — body text color, never pure black. - `#A88F6C` Wabi Gold — micro-accent for ornamental flourishes and the right-rail. Color discipline: terracotta-warm is the only saturated hue; everything else is paper or earth. No second accent intrudes. ## Imagery and Motifs - **Paper-aged imagery**: every full-bleed visual element is layered atop a procedural paper-aged texture — feTurbulence + composite-multiply giving a subtle fiber grain. Edges of larger compositions feather toward the page via a soft 24px Vellum vignette. - **Path-draw-svg leaves**: leaf-organic SVGs drawn live as the section enters viewport. Each leaf is a single SVG path traced from a digitized maple/ginkgo silhouette; stroke-dasharray animation draws the leaf in 1.4-2.2 seconds with cubic-bezier(.3,.7,.2,1). Leaves fall from header to section base, settling with a 6deg rotation jitter. - **Leaf-organic motifs**: a small library of 9 hand-digitized leaves (ginkgo, momiji, bamboo, mountain ash, sakura petal, willow strand, hosta, fern frond, persimmon leaf). Each section uses 1-3 leaves as silent punctuation. - **Brush-stroke seams**: each section seam is a 1px Terracotta Ink path that draws itself with a slightly irregular stroke-width (1.0 → 1.6 → 1.0), simulating brush pressure. - **Kanji accents**: a single oversized kanji per major section, set in Noto Serif JP at 220px, 0.08 alpha Bizen Earth, anchored in column 7 as a quiet visual chord. ## Prompts for Implementation - The entire experience is a slow, immersive vertical scroll — no menu, no CTAs, no pricing blocks, no stat-grids. The page is a single continuous emakimono. - Use IntersectionObserver with rootMargin "-30% 0px -30% 0px" to trigger path-draw-svg animations for leaves and seams as they enter the central reading zone. - Implement scroll inertia: capture wheel/touch events, integrate into a damped velocity model (0.92 friction), apply transform to a single fixed scroller div. Avoid native scroll for the hero rail effects but allow native fallback if reduced-motion. - Path-draw-svg: each leaf SVG path has `stroke-dasharray = pathLength`, `stroke-dashoffset = pathLength`; on enter, animate dashoffset to 0 over 1600ms; then fill from transparent to Terracotta Ink at 0.08 alpha over a further 800ms, simulating ink soaking into paper. - Right-rail micro-ticks: 7 short horizontal hairlines, each a separate SVG. Active tick animates stroke-width 1 → 2 over 320ms. - Each section carries a single hand-lettered margin note in Klee One — short, koan-like ("the cup is warm because the hands are still"). - Bias toward narrative: copy reads as a tea-master's observations. No marketing voice. Section headings are like haiku fragments. - Paper-aged texture is a single 1024×1024 PNG tile, set as `background-image` with a subtle 0.06 alpha multiply over the Aged Vellum base; offset by scroll to suggest paper drift. ## Uniqueness Notes - Differentiator 1: immersive-scroll layout used as emakimono hand-scroll, not as parallax storytelling — the structural metaphor is unusual. - Differentiator 2: rounded-sans typography (Zen Maru/Kaku Gothic) in a Japanese-minimal aesthetic, instead of the corpus-default Noto Serif JP traditional pairing. - Differentiator 3: terracotta-warm palette as the ONLY saturated hue — most palette decisions in the corpus deploy 2-3 accents. - Differentiator 4: path-draw-svg used for leaves and seams as the sole pattern, replacing parallax (94% corpus default). - Differentiator 5: tone-minimal site themed "party" deliberately inverts the domain's expectation — a quiet ceremony as celebration. - Chosen seed: aesthetic: japanese-minimal, layout: immersive-scroll, typography: rounded-sans, palette: terracotta-warm, patterns: path-draw-svg, imagery: paper-aged, motifs: leaf-organic, tone: minimal. - Avoided patterns from frequency analysis: parallax (94% — replaced with path-draw-svg), mono typography (81% — replaced with rounded-sans Japanese variants), photography (90% — replaced with paper-aged texture compositions), card-grid (90% — replaced with continuous emakimono), centered layout (94% — replaced with 8-col asymmetric ma).