# Design Language for matsurika.moe ## Aesthetics and Tone matsurika.moe is a **blobitecture parallax garden of vintage paper-aged blobs floating through warm earthy memory** -- imagine sliding through a scrapbook of paper-textured organic shapes, each one a vintage memento glued onto warm earthy paper, with magnetic-pull interactions tugging the cursor toward each blob like jasmine-scented sticker collecting. The aesthetic blends blobitecture (soft amoeba silhouettes) with vintage paper-aged photography and warm-earthy palette, all viewed through scroll-coupled parallax sections. The mood is *conversational* -- intimate, warm, like a friend showing you their scrapbook of "remember when..." The brand "matsurika.moe" (jasmine + moe -- the Japanese concept of affection/cuteness/devotion) frames the site as a moe-scrapbook -- a collection of vintage-paper blob-stickers, each holding a small affectionate fragment. The "moe" energy is *contemplative* rather than hyperactive, anchored by paper textures and earthy warmth. Inspirational anchors: 1960s Japanese scrapbooks ("kawaii-no-aji" -- "the flavor of cuteness"), pressed-flower journals, the paper-collage work of Marina Abramović, vintage Japanese washi paper stickers, mid-century stationery design from Iroha shops, and the magnetic-hover interactions of award-winning portfolio sites. ## Layout Motifs and Structure **Parallax-sections** composition where the site is divided into 7-9 full-viewport sections, each containing a layered parallax scene with paper-aged blobs at different depths. Scrolling through is like walking through a series of dioramas. **Structural anatomy:** - **Cover section (100vw x 100vh):** A warm earthy background with one large vintage-paper blob containing the wordmark "matsurika.moe" in geometric sans. Around the blob: 3-4 smaller paper blob "stickers" at varying depths, each with magnetic-pull hover behaviors. Mid-depth: a single hand-pressed jasmine flower SVG. - **Memory sections (each 100vh):** 7-8 full-viewport sections, each a parallax diorama with: - Foreground layer (100% scroll speed): 1 large vintage paper blob with a memory-photograph inside. - Mid layer (75% scroll speed): 2-3 smaller paper blobs with tiny scribbled annotations. - Background layer (50% scroll speed): warm earthy paper-texture wash with faint marks. - Each section has a "scrap caption" in handwritten serif at the bottom-right. - **Section transitions:** Between sections, a thin paper-edge tear (irregular SVG path) suggesting torn pages. - **Closing section:** A single small blob containing a hand-pressed jasmine flower SVG and the text "thank you for looking." in italic. Spatial rhythm: parallax-paced. Each section is a complete viewport, fully experienced before scrolling to the next. The parallax depth gives each section a *physical* layered feel. ## Typography and Palette **Fonts (all Google Fonts):** - **Geometric sans (primary):** "Jost" 400/500/700 -- a clean geometric sans inspired by Futura. Used for the wordmark at clamp(64px, 10vw, 156px), section labels at 28-36px, body at 16-17px, line-height 1.62. - **Section labels:** "Jost" 500 small-caps at 13-15px, letter-spacing 0.22em. - **Handwritten captions:** "Caveat" 400 at 18-22px italic -- only for the "scrap captions" at the bottom of each section. - **Numerals:** "Jost" 600 with tabular figures. **Palette (warm-earthy):** - `#E8D4B8` -- Aged Kraft Paper (primary background, the scrapbook page) - `#5A3F26` -- Walnut Bark (typography, deep accents) - `#A0703F` -- Caramel Wood (blob fills, secondary surfaces) - `#F0DEC1` -- Warm Cream (light surfaces, blob inner fills) - `#3D2718` -- Dark Coffee (deepest contrast, type shadows) - `#C49563` -- Honey Bronze (paper-edge accents, vintage-stamp colors) - `#7A5234` -- Toasted Tobacco (mid-tone accents, sketch-line color) Earthy strategy: all colors are warm-tinted, from cream through tobacco. No cool tones. The palette evokes aged paper, dried leaves, vintage tobacco-tin lithography. ## Imagery and Motifs **Core visual motifs:** - **Paper-aged imagery (the centerpiece):** Every photograph in the site is processed to look vintage paper-aged -- yellow-cream cast, soft grain overlay, slight chromatic aberration at edges, paper-fold creases visible. Each photograph is mounted on a blob-shaped "sticker" with a thin Honey Bronze border. - **Vintage motifs:** Small SVG vintage stamps, postage marks, ticket stubs, pressed flowers, scribbled doodles -- scattered around blob stickers like real scrapbook ephemera. - **Organic blob silhouettes:** Each "sticker" is an organic SVG blob with a paper-edge SVG filter (jagged irregular edge, slight torn-paper feel). Blobs vary 12-16 control points. - **Pressed flower jasmine motif:** Each section has at least one small hand-drawn jasmine flower SVG -- a unifying brand motif rendered in Caramel Wood and Honey Bronze. - **Faint scribble annotations:** Small handwritten Caveat scribbles around blobs -- arrows, asterisks, "(1962)" date stamps -- in Toasted Tobacco at 0.6 alpha. **Decorative patterns:** - A repeating washi-paper texture (SVG turbulence with feMerge for fiber-like patterns) at 8% opacity over the Aged Kraft Paper background. - Paper-edge irregular borders on every blob (SVG feTurbulence + feDisplacementMap producing torn-paper rather than smooth curves). ## Prompts for Implementation **Open with stickers being placed.** First 2200ms: viewport begins blank Aged Kraft Paper. Vintage scrapbook stickers (small blob SVGs) drop into view from above with a small bounce (translateY -80px -> 0, slight rotation -8deg -> 0deg, cubic-bezier(0.34, 1.56, 0.64, 1), staggered 100ms apart). The hero wordmark blob lands last with a *slap* -- a 0.95 scale bounce on landing. As each sticker lands, a tiny "paste" effect: a brief expand-and-settle of its drop-shadow. **Magnetic pattern (featured):** This is the primary motion vocabulary. - Each blob sticker has a magnetic-pull interaction: when the cursor approaches within 120px of the blob, the blob translates toward the cursor by `(cursorOffset / 120) * 12px` (max 12px pull). On cursor leave, the blob springs back with a slight overshoot (cubic-bezier(0.34, 1.56, 0.64, 1), 480ms). - The handwritten captions also have magnetic behavior -- they translate slightly toward the cursor when the cursor is over their parent section. - Pressed jasmine flowers gently *bloom* on magnetic-hover proximity -- petals expand outward by 8% scale. - Section transitions: when a section enters the viewport, all its blobs perform a brief "settling" magnetic-pulse (translate ±4px in random directions, return). **Parallax-section depth:** Each section's three depth layers (foreground, mid, background) scroll at different velocities: - Foreground: 100% scroll velocity. - Mid: 75% scroll velocity (slightly slower). - Background: 50% scroll velocity (slowest). This is implemented via `transform: translateY(scrollY * (1 - depthFactor))`. Use `will-change: transform` for smooth performance. **Paper-edge animation:** When a section enters viewport, its blob's paper-edge filter (SVG turbulence) has a brief animation -- the `baseFrequency` of the turbulence shifts from 0.04 to 0.08 and back over 600ms, producing a brief "paper crinkle" effect. **Handwritten caption reveal:** Each section's handwritten Caveat caption fades in word-by-word as the section enters viewport (each word 80ms apart). The cursor stops at the end of the caption for 600ms before the next section's blobs are accessible. **Storytelling beats (conversational scrapbook, no marketing):** 1. Stickers-being-placed intro. 2. Cover: wordmark blob + jasmine flower SVG + 4 floating sticker blobs. 3. Memory sections I through VII-VIII: each a vintage parallax scene with paper-aged photo blob, mid-layer stickers, background wash, and handwritten caption. 4. Closing section: small jasmine flower + "thank you for looking." italic. **Anti-patterns to avoid:** No CTAs, no signup, no pricing, no testimonials, no feature trios. The site is a moe-scrapbook of memories, not a service page. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Blobitecture (2%) + paper-aged imagery (3%) + parallax-sections (3%):** Three rare ingredients combined -- the blobs are *paper stickers*, the parallax gives them physical depth, and the paper-aged imagery anchors them as vintage memorabilia. 2. **Magnetic pattern (4%) as primary cursor interaction across every blob:** Most magnetic designs use it sparingly; this one uses magnetic-pull on every interactive blob, plus on captions and decorative elements -- a fully-tactile cursor language. 3. **Vintage motif (15%) refocused as scrapbook ephemera rather than vintage-as-aesthetic:** Most vintage designs use vintage as the visual *system*; here vintage is specifically *scrapbook* -- stickers, stamps, ticket stubs, pressed flowers -- a specific cultural artifact rather than a general aesthetic. 4. **Warm-earthy palette (2%) committed totally:** No cool colors anywhere. The unified warm-earthy palette across all visual elements creates a tonal coherence rare in the collection. 5. **Geometric-sans typography (5%) paired with handwritten captions (10%):** The duet of clean Jost and warm Caveat -- one structural, one personal -- gives the scrapbook a typographic "voice + handwriting" duality not attempted elsewhere. **Chosen seed/style:** aesthetic=blobitecture, layout=parallax-sections, typography=geometric-sans, palette=warm-earthy, patterns=magnetic, imagery=paper-aged, motifs=vintage, tone=conversational. **Avoided overused patterns:** Refused parallax-as-decorative (95% -- here parallax is *structural*, not decorative), centered/card-grid (95%/91%), mono typography (81%), and the default mysterious-moody tone (71%) for warm conversational scrapbook.