# Design Language for candygirl.xyz

## Aesthetics and Tone

candygirl.xyz (v2) is a **Playful Marble Mosaic Diary** -- a nostalgic-retro, expressive-typography diary kept by Candy Girl (a recurring character across the cafesweets / candygirl domain family) in a sketchbook bound with veined-marble endpapers. The playful aesthetic is rendered with the patience of a hand-bound book: every page has a slight tilt, ribbons hang from page corners, marbled paper shows through tissue overlays, and the typography sings -- variable-axis fonts stretching and shrinking to fit the diary's mood from one entry to the next.

The tone is **nostalgic-retro** -- a 1990s pre-teen diary aesthetic re-grown into adult restraint. Reads like a real keepsake: weathered, intimate, with private margin-doodles. The masonry layout gives the diary its multi-entry density.

## Layout Motifs and Structure

The composition is **masonry** -- a vertical brick-flow of diary entries, polaroid-feel photographs, ticket stubs, candy wrappers (illustrated), and pull-quotes. Each entry is a card of varying height, tightly packed into 3 columns on desktop (2 on tablet, 1 on mobile). Cards are NOT all rectangles: about 40% have torn-paper edges, marble-tissue overlays, or ribbon-bookmarks attached.

**Macro structure:**
- **Opening Page (Section 0, 100vh):** A wide marble endpaper -- a veined pink-and-cream marble texture filling the viewport. Centered: a single brass-pin-attached label that reads "CANDY GIRL // a diary // 2014 - present" in expressive-variable type that slowly morphs its weight from 100 to 700 and back on a 6s loop. Two ribbon bookmarks hang from the top corners.
- **The Masonry Wall (Section 1-3, multi-screen):** Three to four screens of densely-packed diary entries. Card types include:
  - **Entry cards:** Short diary entries in handwritten-feel italic, 2-4 sentences each, dated in the top corner
  - **Polaroid cards:** Photographs treated with marble-texture overlays (so the photo is "under" a thin sheet of marbled tissue paper). Each polaroid is at a slight tilt (-3deg to +3deg).
  - **Ticket-stub cards:** Illustrated ticket-stub-shape cards with serrated edges, recording "events" -- "Saw the meteor shower // 11.14.18," "First batch of mochi // 03.02.19"
  - **Candy-wrapper cards:** Illustrated SVG candy wrappers (rose-petal taffy, salted caramel) with brand-name text inside in expressive-variable display
  - **Quote cards:** Pull-quotes in oversized italic, single sentence per card
- **The Recipe Index (Section 4):** A two-column index of recipe-titles, each a textured "tab" sticking out from the side of the page. Hovering a tab reveals a small preview card sliding out from the right.
- **The Letter Stack (Section 5):** A cluster of three "letter" cards layered in z-stack, each tilted at a different angle. Clicking the top letter slides it off the stack revealing the next.
- **Closing Endpaper (Section 6):** Mirror of Section 0 -- marble endpaper with a small "to be continued" label.

The typewriter-effect pattern is the dominant motion: every diary entry text reveals via typewriter cascade as it enters the viewport. The typewriter is gentle (90-130ms per character with subtle natural variance), with the cursor blinking at the end of each unfinished entry. After the entry completes typing, the cursor fades.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines / pull-quote / wrapper text:** "Roboto Flex" (a variable font with adjustable weight 100-900, width 25-151, and slant axis) -- the expressive-variable mandate. Used at clamp(28px, 4vw, 72px) for pull-quotes, with axes adjusted per card to give each piece its own typographic mood. Some cards have the weight on a 6s ease loop (100-700), others have the width oscillating (75-125), others remain static.
- **Diary entry body / typewriter:** "Cousine" weight 400 at clamp(15px, 1.1vw, 17px), line-height 1.7 -- a humanist mono that reads as a typewriter without feeling brutal. Used for all entry body text and the typewriter-effect cascades.
- **Sub-labels / dates / ticket-stub text:** "Roboto Flex" weight 500 (frozen), 11-13px, tracking 0.14em uppercase. Used on ticket-stub edges and date corners.
- **Handwritten-feel signature:** "Caveat" weight 500 at 22-28px, used for the diary's signature lines and margin doodles.

**Palette (analogous mandate -- analogous colors are adjacent on the wheel; this design uses a coral-pink-rose-mauve analogous sweep):**
- **#F2D6DB** Soft Petal (page ground, primary card surface)
- **#E8A2B5** Coral Pink (mid accent, ribbon bookmarks)
- **#C4727F** Dusty Rose (secondary accent, ticket stub backgrounds)
- **#9B4D6B** Mauve Plum (deep accent, headings, type ink)
- **#7A3055** Wine Mauve (deepest, masthead text)
- **#FBEEDB** Cream Pearl (highlight surfaces, marble veins)
- **#523040** Cocoa Mauve (deep type ink, body text)

The analogous sweep from soft-petal through wine-mauve gives the diary a single chromatic mood -- nothing surprises, everything blends into the next page.

## Imagery and Motifs

**Core visual motifs:**

- **Marble-texture (imagery mandate):** Veined pink-cream marble appears in:
  - The two endpaper sections (full-bleed marble)
  - Tissue overlays on polaroid cards (a thin marbled-paper sheet partially obscuring the photograph)
  - Section dividers (a thin marble strip running horizontally)
  - The deepest layer beneath the masonry (a faint marble texture at 8% opacity)
  Marble is rendered as procedural SVG with elliptical gradients and noise-displacement filters, giving organic veining that doesn't repeat.
- **Layered-depth (motif mandate):** Each card type has 3-4 z-stacked elements:
  - Background marble texture (8% opacity)
  - Mid-layer paper card (with torn edge or rounded corners)
  - Foreground content (text, photograph, illustration)
  - Decorative accents (ribbon, brass-pin, stitch-line)
  Cards slightly parallax against each other on scroll (subtle 12px maximum).
- **Ribbon bookmarks:** SVG ribbon-illustrations hang from the top corners of select cards. Each ribbon is a coral-pink-to-dusty-rose gradient with a small stitched edge. Ribbons subtly sway on a 4s loop (3deg rotation oscillation).
- **Brass pins:** Small brass-pin SVG dots anchor the diary label and some polaroids. Each pin has a tiny highlight gleam that pulses on a 4s loop.
- **Margin doodles:** Hand-drawn-feel SVG doodles in the margins of certain entries -- a small star cluster, a heart with arrow, a flower sketch, a "+ Lucy 4 ever" scribble. These are nostalgic-retro authenticity touches.
- **Torn paper edges:** About 30% of cards have hand-torn paper edges (SVG path with subtle noise displacement) instead of clean corners.
- **Polaroid frames:** Photographs sit inside polaroid-style white frames with a small label area at the bottom for the date.

## Prompts for Implementation

**Opening:** Page loads on a soft-petal ground. The marble endpaper texture fades in with a slight scale-from-1.02 (1.2s). The brass-pin-attached label "CANDY GIRL // a diary" types in via typewriter (90-130ms per character) while the variable font weight slowly morphs from 100 to 700 across the duration of the typewriter (so the text grows heavier as it appears). The ribbon bookmarks descend from the top corners with a gentle drop-and-sway (400ms drop, then settling into their 4s sway loop). After the typewriter completes, the cursor blinks 3 times then fades.

**Scroll narrative:** As the user scrolls into the masonry wall, cards appear with the following choreography per card:
- The card's torn-paper edge draws in via SVG stroke-dashoffset (300ms, ease-out)
- The card's marble-overlay (if polaroid) fades in (200ms)
- The card's text content begins typewriter cascade (per the typewriter-effect pattern)
- Cards stagger 80ms apart within each row, 140ms apart across rows
- Ribbon-bookmarks (if present) drop and settle

**Card-hover interaction:** Hovering any card:
- Brings the card 4px forward (z-translate)
- Brightens its shadow (a soft mauve drop-shadow expands)
- Triggers a variable-font axis shift on its display text (weight increments +200 over 200ms)
- If a polaroid: the marble overlay shifts slightly (the tissue paper "lifts" by 2px)
- If a ticket-stub: the serrated edge briefly highlights

**Recipe Index hover:** Hovering any recipe tab causes:
- The tab to slide out from the page edge (24px shift)
- A small preview card slides in from the right with the recipe's first line typed in via typewriter

**Letter Stack interaction:** Clicking the top letter:
- Causes the letter to slide off the stack in a peeling motion (320ms, rotating -8deg as it falls off-screen-right)
- The next letter beneath becomes the new top (its tilt and content revealed)

**Closing:** Reaching the bottom triggers the closing endpaper marble to fade in. The "to be continued" label types in via typewriter. Ribbon bookmarks hang from the corners (one is partially "out of frame" -- a small narrative touch).

**Avoid:** No CTA-heavy layouts. No pricing blocks. No standard "subscribe to newsletter" -- if anything, a "send me a letter" mailto link in the colophon styled as a margin doodle. No stat grids.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Marble-texture as tissue-paper overlay on photographs:** Every polaroid has a thin marbled-paper sheet partially covering it -- the photograph is read *through* marble, not beside it. Marble-texture imagery is 4% in the batch; this overlay treatment is original.

2. **Expressive-variable typography animated per-card:** Each diary entry's display type has its own subtle variable-axis animation (weight breathing, width oscillating). Expressive-variable typography is 2% in the batch.

3. **Analogous palette as full chromatic discipline:** The site uses only adjacent-wheel colors (coral-pink-rose-mauve) -- no green, no yellow, no blue. This kind of analogous-only restraint is rare; analogous palette is 2% in the batch.

4. **Masonry as diary scrapbook, not product grid:** The masonry holds entries, photos, ticket stubs, candy wrappers, and margin-doodles -- a scrapbook density rather than an inventory. Masonry layout is 3% in the batch.

5. **Authored margin-doodles and brass-pin anchors:** Small hand-drawn margin scribbles and brass-pin attachments give the site a tactile, kept-keepsake feel that's nearly impossible to fake. Nostalgic-retro tone is 3% in the batch.

Chosen seed: aesthetic: playful, layout: masonry, typography: expressive-variable, palette: analogous, patterns: typewriter-effect, imagery: marble-texture, motifs: layered-depth, tone: nostalgic-retro

**Avoided patterns from frequency analysis:** No parallax (96%), no centered/card-grid (96%/93%), no warm gradient (95%/78%), no mono-dominant (81% -- Cousine mono is used only for typewriter accents), no mysterious-moody (71%), no photography-as-fill (91% -- photography is treated as polaroid inserts with marble overlay). Used: masonry (3%), expressive-variable typography (2%), analogous palette (2%), marble-texture imagery (4%), typewriter-effect pattern (5%), layered-depth motif (9%), nostalgic-retro tone (3%), playful aesthetic (27% but with a distinctive diary framing).