# Design Language for bunnygirl.quest ## Aesthetics and Tone bunnygirl.quest (v2) is a **Muji Chrome Pilgrimage** -- a raw-authentic immersive-scroll documentary site for a fictional pilgrim's quest log along a remote chrome-mineral coastline, presented as if a muji-quiet field journal had been rendered on slightly weathered chrome-metallic photo paper. The .quest TLD is the documentary register, and the design behaves like a long immersive scroll through a still, contemplative pilgrimage -- one grain-overlay portrait per chapter, one short paragraph beneath. The mood is **raw-authentic**: still, slightly bleached, slightly mineral, with a confident reductiveness that refuses ornament. Spring patterns mean every transition snaps with a tactile metallic spring. Nature motifs appear in faint nature-stamp icons in the gutter. Where most documentary sites lean photographic-dense and serif-heavy, this one stays in a sans-grotesk muji minimalism with chrome-metallic grayscale -- a quest stripped to its breath. ## Layout Motifs and Structure The composition is **immersive-scroll** -- each chapter occupies the full viewport (110vh) as the user scrolls through a continuous documentary sequence. There are no section dividers; chapters bleed into the next. Spring patterns govern transitions between chapters. **Macro structure:** - **Departure (Section 0, 110vh):** A single grain-overlay portrait photograph (a back-turned figure at the edge of a chrome-grey sea) fills 70% of the viewport; a small sans-grotesk caption beneath: "01. Departure / North Cape." The wordmark "bunnygirl.quest" sits as a tiny chrome-silver mark in the upper-left. - **Coastline (Section 1, 110vh):** Grain-overlay portrait of mineral chrome cliffs; caption: "02. Coastline / Three Days In." - **Field rest (Section 2, 110vh):** Grain-overlay portrait of a small camp-fire on chrome-grey sand; caption: "03. Field Rest / The Fourth Night." - **The well (Section 3, 110vh):** Grain-overlay portrait of an abandoned wellhead; caption: "04. The Well / A Found Place." - **Return (Section 4, 110vh):** Grain-overlay portrait of the back-turned figure walking inland; caption: "05. Return / The Hand Empty." **Spring pattern:** Section transitions use a stiff spring physics (stiffness 0.42, damping 0.86) so the new chapter's grain-overlay portrait springs into place with a small metallic click. Spring snaps trigger on intersection observer; the new portrait scales from 0.96 to 1.0 with a faint overshoot to 1.012, settling over 0.9s. **Spacing:** Outer margin 8vw. Caption padding 6vw. Vertical rhythm 24px. Each chapter is exactly 110vh tall, with no inter-chapter gap (chapters bleed continuously). ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "Inter" weight 500 -- a sans-grotesk used at clamp(24px, 3.2vw, 48px). Tracking 0.005em. Used for chapter captions, kept restrained. - **Sub-labels:** "Inter" weight 500 small-caps at 12-13px, tracking 0.16em uppercase. Used for chapter numbers (01., 02., ...). - **Body text:** "Inter" weight 400 at clamp(15px, 1.1vw, 17px), line-height 1.7. Body kept short -- 2-3 sentences per chapter. - **Numerals:** "Inter" tabular figures for chapter numbering. **Palette (chrome-metallic grayscale):** - `#1A1A1C` -- **Iron Deep**, the primary background for grain-overlay portraits. - `#33332F` -- **Slate Mineral**, secondary background. - `#A8A8A0` -- **Chrome Silver**, the primary metallic mid-tone. - `#D8D6CD` -- **Pearl Steel**, the bright chrome highlight. - `#EFEDE2` -- **Salt Bone**, the rare warm-neutral for captions. - `#6E6E6A` -- **Stone Smoke**, the muted gray for sub-labels. - `#2D3A38` -- **Mineral Teal**, the single rare cool accent for hover states. The palette is rigorously grayscale-mineral with a hint of teal as the sole chromatic flicker. ## Imagery and Motifs **Core visual motifs:** - **Grain overlay (imagery mandate):** Every chapter portrait is a grayscale photograph with a heavy grain-overlay (18% noise opacity, generated via SVG `feTurbulence` baseFrequency 1.2). The grain gives every image a chrome-metallic film-paper texture. - **Nature motif (motif mandate):** Tiny 1.2px chrome-silver nature-stamp icons (a small pine cone, a rock, a wave, a flame, a hand) sit in the gutter beside each chapter caption -- a nature pictograph language. Stamps are subtly etched, not playful. - **Spring pattern:** Section transitions use stiff spring physics (stiffness 0.42, damping 0.86) with a 1.012 overshoot. - **Chrome strip rule:** A single 1px chrome-silver horizontal strip runs across the upper 6vh of each chapter, like a chrome film-strip border. - **Salt bone underline:** Chapter captions are underlined in a 0.8px salt-bone line that appears on chapter enter. - **Photographic gradient mask:** Each portrait has a soft 8% gradient mask along its top and bottom edges, simulating a darkroom paper-edge fade. ## Prompts for Implementation **Opening narrative:** Page loads on Iron Deep. Over 2.6s, the first chapter's grain-overlay portrait fades-in from a 0.96 scale; the grain noise overlay materializes at 18% opacity; the chapter caption "01. Departure / North Cape" appears via sans-grotesk letter reveal (60ms stagger); the chrome strip rule at the top of the chapter draws on from left over 800ms; the small nature-stamp pine-cone icon in the gutter draws on via 1.0s SVG stroke reveal. **Scroll narrative:** As the user scrolls, each chapter transitions with a stiff spring (stiffness 0.42, damping 0.86): the new portrait springs into place with a 1.012 overshoot and settles over 0.9s; the previous portrait fades out at the same time; the chapter caption fades-and-reveals; the gutter nature-stamp icon transitions to the new icon via a 600ms cross-fade. The grain overlay re-randomizes its noise pattern subtly on each transition. **Microinteractions:** - **Portrait hover:** Grain overlay opacity lifts from 18% to 24%; image gains a faint mineral-teal duotone at 8% opacity overlay; chrome strip rule pulses pearl steel to chrome silver over 600ms. - **Caption hover:** Caption underline thickens from 0.8px to 1.2px; chapter number small-caps pulse stone smoke to chrome silver over 400ms. - **Nature-stamp hover:** Stamp's icon stroke thickens from 1.2px to 1.6px; icon scales 1.0 to 1.08 with a soft spring overshoot. - **Section transitions:** Spring snap with stiffness 0.42, damping 0.86, 1.012 overshoot. - **Mineral-teal accent on hover only:** Mineral teal appears only on hover states -- the page is otherwise rigorously grayscale. **Storytelling:** The site is structured as a five-chapter pilgrimage. Section anchors: "Departure," "Coastline," "Field Rest," "The Well," "Return." The voice is raw-authentic, contemplative, slightly bleached. There are no marketing CTAs. The final chapter ends with "the hand empty -- the page rests here." **Typography motion:** Inter sans-grotesk captions reveal letter-by-letter with a 60ms stagger and a per-letter Y-rise of 2px. Chapter number small-caps (01., 02., ...) type in via mono cadence (45ms per character). **AVOID:** stat-grids, pricing tiers, "subscribe" CTAs, social-proof testimonial blocks, three-up service tiles, generic glossy travel-photography cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Immersive-scroll as continuous documentary:** Five 110vh chapters bleed continuously without dividers, creating a single uninterrupted documentary scroll. 2. **Chrome-metallic grayscale discipline:** The palette is rigorously chrome-silver, pearl-steel, salt-bone -- with mineral teal appearing only on hover states. The page is otherwise stripped of color. 3. **Grain-overlay at 18% with re-randomization:** Heavy 18% noise grain overlays every portrait, with the noise pattern re-randomizing subtly at each section transition -- a continuous film-paper texture. 4. **Nature-stamp gutter pictographs:** Tiny chrome-silver nature-stamp icons (pine cone, rock, wave, flame, hand) inhabit the gutter beside each chapter caption -- a quiet pictograph language. 5. **Stiff spring transitions with 1.012 overshoot:** Section transitions snap with a tactile metallic spring (stiffness 0.42, damping 0.86) -- a deliberate physical click between chapters. **Chosen seed/style:** Planned seed -- aesthetic: muji, layout: immersive-scroll, typography: sans-grotesk, palette: chrome-metallic, patterns: spring, imagery: grain-overlay, motifs: nature, tone: raw-authentic. **Avoided patterns from frequency analysis:** Avoided overused photography-as-color (91%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused muji aesthetic (1%), grain-overlay imagery, nature motif, chrome-metallic palette, and immersive-scroll layout with spring pattern and sans-grotesk typography.