# Design Language for matsurika.day ## Aesthetics and Tone matsurika.day is a **watercolor sketchbook of a single day, page after page** -- a hand-painted journal of one jasmine-scented day, rendered with soft watercolor washes, hand-drawn pen sketches, and chrome-metallic accents that catch the light. Imagine a Beatrix Potter illustration colorized with chromographic foil details and bound as a daily-prayer journal. The aesthetic embraces hand-painted impermanence: bleeding washes, paper-bleed edges, ink-blotches, and stars-and-celestial motifs sprinkled across the day's progression from morning through night. The tone is *conversational* -- friendly, chatty, like a friend's handwritten letter. The brand "matsurika.day" frames itself as a single hand-painted day. The site is a long vertical hero-dominant scroll where one giant watercolor illustration anchors the page, with chrome-metallic borders and hand-drawn marginalia woven through. Stars and crescent moons appear as the day progresses into night. Inspirational anchors: Beatrix Potter's botanical illustrations, the watercolor field-sketches of Charles Tunnicliffe, John Singer Sargent's watercolor landscapes, hand-lettered Japanese tea ceremony journals (chashitsu memoranda), early Studio Ghibli storyboards (watercolor-and-pencil), and the chrome-foil accents of vintage Hallmark cards. ## Layout Motifs and Structure A **hero-dominant** composition where one massive watercolor illustration occupies the majority of the viewport (60-80vh), and supporting content lives in the negative space around it. Hand-written notes scrawl in the margins, chrome rules underline section titles, stars-and-celestial decorations scatter across the page. **Structural anatomy:** - **Top frame (full-width, 120px tall):** A hand-painted watercolor banner with the wordmark "matsurika.day" in handwritten script, with a soft bleed of color extending below. A single chrome-metallic horizontal rule extends across at 96px height. - **Hero day-illustration (full-width, ~85vh):** The page's anchor: a massive watercolor illustration of a jasmine plant in a window, with morning light streaming in. Painted with visible brush strokes, paper bleed at edges, soft color washes (jasmine white, leaf green, sky-blue, dawn-pink). - **Day-progression sections (vertical, with hero illustrations changing):** 6-8 sections, each anchored by a different watercolor scene depicting a *moment* of the day: morning (jasmine plant), late morning (teacup with steam), noon (sunlit floor), afternoon (bookshelf), evening (window at dusk), night (jasmine flowers under moonlight with stars). Between each scene: hand-written journal entries in italic handwritten script. - **Marginalia (hand-drawn pen-and-ink scribbles):** Small hand-drawn sketches in the margins -- arrows, asterisks-as-stars, little doodles of jasmine flowers, crescent moons, footnote markers. - **Chrome-metallic accents:** Thin chrome-gradient horizontal rules appear sparingly as section underlines (1.5px tall, with realistic chrome gradient). - **Closing scene (full-width, 60vh):** A final watercolor of night sky with stars and a crescent moon, with a hand-written line "and so, the day ended." in italic. Spatial rhythm: hero-anchored. Each section's hero illustration dominates -- text is supplementary. The user is invited to *look* first, *read* second. ## Typography and Palette **Fonts (all Google Fonts):** - **Handwritten (primary):** "Caveat" 400/700 -- a hand-drawn casual script with friendly proportions. Used for the wordmark at clamp(72px, 11vw, 168px), section titles at 36-52px, and all body text at 18-20px, line-height 1.6. The handwritten quality is the site's voice. - **Hand-printed serif (for moments of formality):** "Cormorant Garamond" 400i at 14-15px for tiny date stamps and time-of-day labels ("7:14 AM"). - **Display flourishes:** "Caveat" 700 italic at 28-38px for emphasis lines within journal entries. - **No sans-serif anywhere on the page** -- the commitment to handwritten + serif is total. **Palette (chrome-metallic):** - `#F5F1E8` -- Watercolor Paper (primary background, like aged sketchbook paper) - `#2E2A24` -- Pen Ink (primary type, hand-drawn marginalia) - `#B8B8B8` -- Chrome Silver (metallic rules, accent lines) - `#E8E5DC` -- Vellum Highlight (light wash areas) - `#7C3F5E` -- Twilight Plum (deep accent, jasmine-purple stamens) - `#A1844E` -- Brass Glow (warm chrome highlights, sunlit details) - `#3D6E80` -- Window Cyan (sky accents, evening shadows) Chrome-metallic strategy: chrome rules use a CSS linear-gradient (90deg, `#888 0%, #FFFFFF 35%, #B8B8B8 50%, #FFFFFF 65%, #888 100%`) producing a realistic chrome bar with light-streaks. Used sparingly -- 4-6 chrome rules per page maximum. ## Imagery and Motifs **Core visual motifs:** - **Hand-drawn watercolor illustrations (the centerpiece imagery):** Each section has one large watercolor illustration -- created using SVG paths with watercolor-edge SVG filters (feTurbulence + feDisplacementMap producing irregular wet edges). Brushstroke variation simulated with multiple overlapping SVG paths of slightly different opacity. - **Star-celestial motif:** Small hand-drawn star SVGs scattered across the page (more dense in evening/night sections). 5-pointed stars, 6-pointed stars, and tiny crescent moons rendered as pen-and-ink SVGs. - **Hand-drawn pen marginalia:** Arrows, asterisks-as-stars, brackets, footnote markers, tiny jasmine flowers, all drawn as SVG paths with irregular strokes (stroke-width varying 0.6-1.2px per path). - **Watercolor bleeds:** SVG filters producing realistic watercolor-edge bleeds at the boundary of every illustration -- soft, irregular, suggesting real paint on real paper. - **Chrome-metallic rules:** Thin chrome-gradient horizontal rules used 4-6 times per page as section underlines. **Decorative patterns:** - A watercolor-paper texture (SVG turbulence at 7% opacity, with subtle cream-yellow tinting) over the entire background. - Subtle paint-droplet specks scattered across (~30 tiny SVG droplets in varied colors, very low opacity 0.15-0.3). ## Prompts for Implementation **Open with paint flowing onto paper.** First 2800ms: viewport begins blank Watercolor Paper. The hero illustration's first wash appears at 0 alpha and grows to full alpha over 1200ms with a slight "bleed" expansion (clip-path mask expanding from 95% to 105% then settling to 100%). Once first wash is visible, subsequent layers build up over the next 1200ms -- second wash (different hue), then the ink line-work drawn with stroke-dashoffset over 1600ms with rough irregular drawing speed (some segments drawn faster than others to feel hand-applied). Finally, the wordmark in Caveat script writes itself letter-by-letter via stroke-dashoffset on each glyph's outline (1400ms total, jittered). **Underline-draw pattern (featured):** This is the primary motion vocabulary. - Every chrome-metallic rule on the page draws itself from left to right when its section enters viewport. Use SVG `stroke-dashoffset` from length to 0 over 800ms ease-out. - Chrome rules have a slight *gleam* effect after drawing: a 30px bright highlight travels across the chrome from left to right once (over 600ms), simulating light reflecting off metal. - Section titles in Caveat have a chrome-metallic underline that draws on entry. - Hand-drawn pen marginalia paths draw themselves on viewport entry with stroke-dashoffset over 600-1200ms (varying by path complexity). - Hand-written journal text has each *word* fade-in left-to-right (60-90ms per word) producing a "writing" effect. **Watercolor-bleed entrance:** Each section's hero illustration enters with a clip-path mask that starts at 70% width/height (centered) and expands to 110% then settles to 100% -- producing the visual sense of paint spreading from a center point. Combined with opacity 0 -> 1 over 1400ms. **Star-celestial twinkle:** Each star SVG on the page has a `twinkle` animation: scale 1.0 <-> 1.15, opacity 0.7 <-> 1.0, on a 2-3s ease-in-out loop with random phase offset. Evening/night sections have *more* stars and *brighter* twinkles. **Day-progression hue shift:** As the user scrolls through the day, the page background hue gradually shifts: - Morning: warm cream (current Watercolor Paper). - Noon: brighter warmer (subtle +5% saturation). - Afternoon: very slight golden cast. - Evening: cooler, slight blue cast. - Night: deepest -- background becomes a dark indigo wash (Window Cyan deepened) and the watercolor paper texture inverts subtly. This is achieved via CSS variables animated on scroll position. **Hand-drawn cursor:** The cursor changes to a custom SVG of a small ink-tipped pen on watercolor sections, returning to default elsewhere. **Storytelling beats (conversational watercolor journal, no CTAs):** 1. Paint-flowing intro. 2. Section I "Morning": jasmine plant illustration + handwritten morning thoughts. 3. Section II "Late Morning": teacup watercolor + tea-time journal. 4. Section III "Noon": sunlit floor + noon reflection. 5. Section IV "Afternoon": bookshelf + afternoon reading note. 6. Section V "Evening": window at dusk + evening reflection. 7. Section VI "Night": jasmine under moonlight + night thoughts + stars motif intensifies. 8. Closing scene: starry sky watercolor + "and so, the day ended." **Anti-patterns to avoid:** No CTAs, no signup, no pricing, no testimonials. The site is a watercolor journal, not a service. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Watercolor aesthetic (6%) + chrome-metallic palette (2%):** The pairing is unusual -- watercolor is typically paired with soft natural palettes; integrating chrome-metallic rules into a watercolor sketchbook creates a unique "Hallmark card meets botanical journal" feel. 2. **Hand-drawn imagery (commitment to no photography):** Every visual element is hand-painted or hand-drawn -- no photographs, no icons, no stock images. This commitment is rare. 3. **Star-celestial motif (2%) progressively intensifies through scroll:** As the day progresses to night, stars become denser and brighter -- a narrative use of motif rather than decorative. 4. **Underline-draw pattern (6%) + handwritten typography (10%):** The combination produces a "writing-by-hand" sensation throughout -- chrome rules drawing as if applied by hand, words fading in as if being written, illustrations bleeding as if paint spreads. 5. **Day-progression hue shift on scroll:** Most designs have static color schemes; this one shifts background warmth across the day's narrative arc -- a scroll-coupled visual aging. **Chosen seed/style:** aesthetic=watercolor, layout=hero-dominant, typography=handwritten, palette=chrome-metallic, patterns=underline-draw, imagery=hand-drawn, motifs=star-celestial, tone=conversational. **Avoided overused patterns:** Refused parallax-as-primary (95%), centered/card-grid (95%/91%), mono typography (81%), and mysterious-moody tone (71%) in favor of conversational hand-painted intimacy.