# Design Language for cherrypop.xyz

## Aesthetics and Tone

cherrypop.xyz (v2) is a **Cinematic Pastel Pop-Up Storybook** -- an approachable-casual, illustration-driven cinematic experience where every scroll-section behaves like a chapter in an animated pop-up book about a small cherry-themed café. The cinematic aesthetic is rendered through patient parallax-sections, slow camera-feeling pans, and full-bleed compositions that occupy the viewer like a Wes Anderson tableau. The pastel palette keeps everything warm and ungimmicky -- this is a soft, picturebook cinema.

The tone is **approachable-casual** -- a friendly storyteller's voice, never selling, just narrating. The variable-fluid typography subtly responds to scroll velocity (wider when the user scrolls fast, slimmer when slow), giving the typography its own breath. The book-scholarly motif appears as small chapter ornaments, page-corner illustrations, and tiny printed-text margin notes.

## Layout Motifs and Structure

The composition is **parallax-sections** -- a vertical sequence of full-viewport sections, each containing a layered pop-up illustration that animates in 3D-feeling depth as the user scrolls. The parallax is engineered for storytelling, not for flash: each section is a single tableau with 5-8 layered illustration elements, each layer drifting at its own scroll-speed to create cinematic depth.

**Macro structure:**
- **Chapter Cover (Section 0, 100vh):** A pastel sunrise sky background (rose-cream gradient). In the foreground: a small illustrated café shopfront with a single cherry-pop sign, drawn in 4 z-stacked layers (sky, distant trees, café building, foreground flowerbox). The title "A SMALL CHERRY BOOK" sits in variable-fluid type at the top, with a chapter-mark "01 // OPENING" in small book-scholarly type below.
- **Chapter 1: The Door Opens (Section 1):** A close-up tableau of the café's door, with a hanging "OPEN" sign on a chain. Layers: brick wall background, door frame, door (slightly ajar), the chain-and-sign, a pot of geraniums. As the user scrolls, the door appears to open further (its z-rotation animates from 0 to 14deg). Body text describes the café's history.
- **Chapter 2: The Counter (Section 2):** A wide horizontal scene of the café counter at morning rush. Layers: back wall with menu chalkboard, espresso machine, counter with pastries, foreground barista hands (illustrated), front bar with a single half-eaten muffin. Body text on the side describes a typical morning.
- **Chapter 3: The Cherry Pop (Section 3):** A close-up tableau of the signature drink being made. Layers: bartender's pour-line, the glass filling, cherries being dropped, a foreground spoon. Body text describes the recipe with handwritten-feel annotations.
- **Chapter 4: The Window (Section 4):** A view *out* the café window. Layers: window frame foreground, hanging plants, rain streaks (animated, falling), distant street, far-back rooftops fading into gradient. The text muses about being inside on a rainy afternoon.
- **Chapter 5: Closing (Section 5):** A reverse-shot of the opening: the door closing, "CLOSED" sign hanging, lights dimming. The chapter-mark reads "05 // GOODNIGHT."
- **Colophon (Section 6):** A small final page with the imprint and a tiny pop-up illustration of a cherry on a paper.

The underline-draw pattern is the dominant interaction motion: every link, every hover-able label, every body-text emphasis word has a hand-drawn underline that draws in via SVG stroke-dashoffset when the element enters view or is hovered. The underlines have a slight wobble (the SVG path isn't perfectly straight) so they feel pen-drawn.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines:** "Inter" with variable axis (weight 100-900, optical-size 14-32) -- the variable-fluid mandate. Used at clamp(36px, 5vw, 96px) for chapter titles. The weight axis subtly responds to scroll velocity (default 500; faster scroll = 700, slower scroll = 400) on a smoothed easing curve.
- **Chapter-mark / book-scholarly labels:** "Cormorant Garamond" weight 500 small-caps at 12-14px, tracking 0.18em uppercase. Used for chapter numbers and section-labels (e.g., "CH 01 // OPENING").
- **Body text:** "Source Serif Pro" weight 400 at clamp(16px, 1.2vw, 19px), line-height 1.78. Italic Source Serif Pro for handwritten-feel annotations and pull-quotes.
- **Margin notes:** "Cormorant Garamond" weight 400 italic at 12px, used for tiny printed-text margin notes that look like a copy-editor's annotations.

**Palette (pastel mandate):**
- **#F8E1DC** Cherry Blossom Pink (page ground, soft brand color)
- **#FFC7B5** Apricot Cream (warm gradient mid-tone, cherry-pop highlight)
- **#E8B8C8** Rose Petal (secondary accent, illustration warm wash)
- **#A8C4D8** Sky Bluebell (background sky, distant elements)
- **#D4E5C8** Mint Leaf (geraniums, cafe greenery, fresh accent)
- **#F4EEDB** Vanilla Cream (alt page surface, espresso steam)
- **#3D2A2E** Soft Cocoa (deep type ink, illustration outline)

A gentle pastel sweep with warm rose-cherry as the dominant brand color; sky-bluebell and mint-leaf as the secondary illustration tones; soft cocoa as the consistent illustration line-weight.

## Imagery and Motifs

**Core visual motifs:**

- **Custom-illustration (imagery mandate):** Every scene is hand-illustrated in flat-vector style with soft cocoa outlines (1.5px stroke), pastel fills, and subtle texture overlays. No photographs anywhere. Illustrations are constructed as multi-layer SVG so each layer can animate independently. The illustration style is consistent: simple, slightly naive, charmingly imperfect.
- **Book-scholarly (motif mandate):** Small book-scholarly ornaments appear throughout:
  - Chapter-marks at the top of each section ("CH 01 // OPENING")
  - Page-corner page-numbers ("p. 14")
  - Drop-caps on the first paragraph of each chapter (a large Cormorant capital letter)
  - Margin notes in italic Cormorant ("see also: cherry season")
  - A tiny book-binding illustration in the colophon
  - Section-ending fleurons (small ornamental SVG flourishes)
- **Parallax pop-up layers:** Each scene has 5-8 illustration layers, each with its own z-depth and scroll-parallax speed:
  - Far background (slowest parallax, ~0.2x scroll speed)
  - Background buildings/walls (0.4x)
  - Mid-background (0.6x)
  - Subject mid-layer (0.8x)
  - Foreground subject (1.0x scroll speed -- moves with the page)
  - Foreground objects (1.2x -- moves slightly faster, "rushing past")
- **Hand-drawn underlines:** Every link and emphasis-word has a wobbly hand-drawn underline that draws in via SVG stroke-dashoffset.
- **Animated micro-elements:** Each scene has 1-3 ambient animations:
  - Chapter 1: the door subtly creaking 1deg back-and-forth on a 4s loop
  - Chapter 2: espresso steam wisps rising
  - Chapter 3: bubbles in the glass rising
  - Chapter 4: rain streaks falling (animated SVG paths)

## Prompts for Implementation

**Opening:** Page loads on cherry blossom pink. The Chapter Cover illustration assembles in parallax order: sky gradient fades in (1.0s), distant trees fade in (0.8s starting at 0.6s), café building fades in (0.8s starting at 1.2s), flowerbox fades in last (0.6s). The chapter title "A SMALL CHERRY BOOK" types in word-by-word in variable-fluid Inter, weight axis starting at 300 and settling to 500. The chapter-mark "01 // OPENING" fades in with a small Cormorant drop-cap. The hand-drawn underline beneath the title draws in via SVG stroke-dashoffset.

**Scroll narrative:** As the user scrolls into each chapter section:
- The parallax layers begin their differential drift (each at its own speed)
- The chapter-mark at the top fades in first
- The chapter title types in word-by-word
- The body text fades in line-by-line (100ms stagger)
- Drop-cap on the first paragraph reveals with a 1.2s scale-from-0.7 + opacity-from-0
- Margin notes fade in last in italic Cormorant
- Scene-specific ambient animation begins (door creaks, steam rises, etc.)

**Door interaction (Chapter 1):** As the user scrolls through Chapter 1, the door's rotation animates from 0deg to 14deg (a tracked-to-scroll-progress rotation). When the door reaches 14deg open, a faint "ding" SVG bell-icon appears momentarily beside the door.

**Variable-fluid weight response:** As the user scrolls, the page measures scroll velocity (px/sec) and smoothly adjusts the chapter-title Inter weight axis:
- Slow scroll (0-100 px/sec): weight 400
- Medium (100-400): weight 500
- Fast (400-1200): weight 600-700
- Very fast: weight up to 750
The transition is smoothed over 200ms so weight changes feel ambient, not jittery.

**Underline-draw on hover:** Hovering any link or emphasis-word:
- The wobbly hand-drawn underline beneath it expands (stroke-dashoffset re-draws fuller)
- A subtle 1.02 scale on the word
- A tiny cherry icon appears beside the word (fading in)

**Rain animation (Chapter 4):** Rain streaks are 12-16 SVG paths animating downward continuously, each at a different speed and starting position. The rain creates the ambient sound of the chapter visually.

**Closing colophon:** The final section has a small pop-up cherry illustration -- the cherry "pops" up from the page on scroll-in (a 0.8s scale-from-0 spring with subtle bounce). Imprint info appears in 11px Cormorant beside it.

**Avoid:** No CTA-heavy layouts. No pricing blocks (the café's actual menu is implied through the illustrated counter, never enumerated). No newsletter modal. No stat grid. This is a picturebook, not a marketing site.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Parallax-sections as a literal pop-up storybook:** Each section is a single tableau with 5-8 hand-illustrated layers parallaxing in depth -- the metaphor is a physical pop-up book unfolding. Parallax-sections is 3% in the batch; pop-up book treatment is original.

2. **Variable-fluid typography responding to scroll velocity:** The chapter-title weight axis subtly responds to how fast the user is scrolling -- type that breathes with reading pace. Variable-fluid typography is 1% in the batch.

3. **Custom-illustration as 100% of imagery:** No photographs anywhere -- the entire site is hand-illustrated SVG in a consistent flat-vector style. Custom-illustration imagery is 2% in the batch.

4. **Book-scholarly motifs (chapter marks, drop-caps, fleurons, margin notes):** A complete set of publishing-design ornaments scattered through the site, treating the café story as an actual short book. Book-scholarly motif is 2% in the batch.

5. **Approachable-casual tone enforced by friendly hand-drawn imperfections:** Hand-wobbled underlines, slightly naive illustration, soft pastel palette, ambient micro-animations -- nothing is sharp or aggressive. Approachable-casual tone is 3% in the batch.

Chosen seed: aesthetic: cinematic, layout: parallax-sections, typography: variable-fluid, palette: pastel, patterns: underline-draw, imagery: custom-illustration, motifs: book-scholarly, tone: approachable-casual

**Avoided patterns from frequency analysis:** No generic-parallax (96% -- parallax is used in service of a pop-up-book metaphor with multiple authored layers), no centered/card-grid (96%/93%), no warm gradient flat (95%/78%), no mono (81%), no mysterious-moody (71%), no photography (91% -- all custom illustration). Used: parallax-sections (3%), variable-fluid type (1%), custom-illustration (2%), book-scholarly (2%), underline-draw (6%), approachable-casual (3%), cinematic (5%), pastel (8% but with distinctive illustrated pop-up application).