# Design Language for bunnygirl.bar ## Aesthetics and Tone bunnygirl.bar (v2) is a **Pop-Art Negative Space Speakeasy** -- a raw-authentic, deliberately rough lithograph poster site for a fictional after-hours cocktail-and-collage speakeasy. The .bar TLD becomes the after-hours register, and the design treats every page like a freshly printed silkscreen poster left to dry on a velvet wall: vast unmodulated negative space, oversized Garamond classical headlines floating like printed slogans, and small hand-drawn pop-art zoom-focus collage illustrations punctuating the white. The mood is **raw-authentic**: handmade, slightly off-register, full of confidence but never glossy. Where most bar sites lean glossy gold-and-black or dim cinematic photography, this one stays in deep navy ground washed with metallic warm white, hot pop-art crimson, lithograph cyan, and a single chrome-silver flourish. ## Layout Motifs and Structure The composition is **ma-negative-space** -- vast expanses of unmodulated background separated by single oversized statements. Each section is dominated by negative space (80%+ of the viewport is empty); content sits in a single small focused composition somewhere within. Zoom-focus pattern means content zooms gently from outside the negative-space frame to settle in a deliberate placement. **Macro structure:** - **Poster cover (Section 0, 110vh):** Vast navy background. A single small silkscreen-style hand-drawn poster sits in the lower-third center, with the wordmark "BUNNYGIRL/BAR" set in Garamond classical at the top of the poster. A small pop-art bunny silhouette in hot crimson appears at the upper-right. - **Drinks list (Section 1, 130vh):** Vast negative space. A single column of 5 cocktail names set in Garamond italic at clamp(28px, 3.6vw, 56px) -- no prices, no descriptions, only names. Each name has a small hand-drawn pop-art glyph adjacent. - **Featured cocktail (Section 2, 120vh):** Vast negative space. A single oversized hand-drawn cocktail glass illustration (silkscreen style, 3-color pop-art) centered, with a small Garamond italic caption "the spring tonic, by hand." - **House note (Section 3, 110vh):** Vast negative space. A single Garamond italic pull-quote, centered, set at clamp(28px, 3.6vw, 56px) -- "we open at the second bell, not the first." - **Address card (Section 4, 90vh):** Vast negative space. A single tiny hand-drawn pop-art address card in the lower-right corner with hand-set Garamond figures. **Zoom-focus pattern:** As the user scrolls into each section, the single small composition zooms from 1.08 to 1.0 scale (1.6s ease-out) and the surrounding negative space "settles" via a brief 800ms ground-color saturation pulse. **Spacing:** Outer margin auto, full-bleed background. Content placed at deliberate compositional positions (not centered defaults). Vertical rhythm 28px on body. Section heights 90-130vh. ## Typography and Palette **Fonts (all Google Fonts):** - **Display headlines:** "EB Garamond" weight 600 -- a Garamond classical used at clamp(32px, 4.6vw, 72px). Italic for poster slogans. Tracking 0.005em. - **Sub-labels:** "EB Garamond" weight 500 small-caps at 13-14px, tracking 0.16em uppercase. Used for small caption labels. - **Body text:** "EB Garamond" weight 400 at clamp(17px, 1.25vw, 20px), line-height 1.7. Italic predominantly. - **Numerals:** "EB Garamond" old-style figures for the address card; the asymmetric numerals signal handset type. **Palette (navy-metallic pop-art):** - `#0E1730` -- **Navy Wall**, the dominant background -- deep ink-navy with slight metallic undertone. - `#1B2548` -- **Velvet Indigo**, secondary background tint. - `#E9DEC6` -- **Metallic Warm White**, the primary text color and silkscreen highlight -- a slightly metallic warm bone. - `#D14238` -- **Pop Crimson**, the primary pop-art accent -- saturated lithograph red. - `#3DB6CE` -- **Lithograph Cyan**, secondary pop-art accent -- saturated print-cyan. - `#B8B3A6` -- **Chrome Silver**, the metallic flourish -- used once per section for a small chrome strike. - `#1A1A12` -- **Print Ink**, the deepest ink for italic captions. The palette is pop-art bold but anchored in deep navy, with metallic warm white acting as the negative-space ink. ## Imagery and Motifs **Core visual motifs:** - **Hand-drawn illustration (imagery mandate):** Every section's single composition is a hand-drawn pop-art silkscreen illustration -- a bunny silhouette, a cocktail glass, an ice cube, a sliced lime, a star burst -- rendered as a 3-color silkscreen (pop crimson, lithograph cyan, metallic warm white) with deliberate off-register misalignment (2-3px color-offset between layers). - **Floral-botanical motif (motif mandate):** A tiny floral garnish motif (a sprig of mint, a thyme stem, a slice of cucumber) accompanies each cocktail name, drawn in 1.2px lithograph-cyan strokes -- a delicate bouquet within the pop-art frame. - **Zoom-focus pattern:** Each section's composition zooms from 1.08 to 1.0 on enter (1.6s ease-out), settling into its deliberate compositional position. - **Off-register silkscreen offset:** Hand-drawn illustrations carry a 2-3px color-offset between their crimson and cyan layers, mimicking imperfect silkscreen registration. - **Chrome-silver flourish:** Once per section, a small chrome-silver strike mark (a thin diagonal slash) appears as the section's signature -- a tiny mark of the poster's hand-printed origin. - **Cocktail name underline:** Each cocktail name carries a hand-drawn underline drawn in 1.4px pop crimson with slight jitter. ## Prompts for Implementation **Opening narrative:** Page loads on Navy Wall. Over 2.4s, the small silkscreen poster in the lower-third assembles: the metallic warm white silkscreen "paper" appears first via 1.0s alpha; the wordmark "BUNNYGIRL/BAR" reveals letter-by-letter in Garamond italic (90ms stagger); the hand-drawn pop-crimson bunny silhouette draws on via 1.4s SVG stroke reveal with a 3px off-register cyan ghost; the chrome-silver strike mark appears last via a single 400ms diagonal slash animation. **Scroll narrative:** As the user scrolls, each section's single composition zooms from 1.08 to 1.0 (1.6s ease-out); the negative space ground saturation pulses brief 800ms; hand-drawn illustrations draw on with their off-register silkscreen layers (crimson stroke at 0ms, cyan offset stroke at 200ms). Cocktail names underline-draw in pop crimson with 1.4s jitter sweep. **Microinteractions:** - **Cocktail name hover:** Name italic tilts 1deg toward cursor; the pop crimson underline thickens from 1.4px to 2.0px; the adjacent floral-botanical garnish rotates 8deg. - **Illustration hover:** Off-register offset between crimson and cyan layers temporarily widens (3px to 5px), then snaps back over 600ms -- a silkscreen "click" interaction. - **Pull-quote hover:** Italic Garamond quote scales 1.0 to 1.012 with a 280ms ease. - **Chrome strike hover:** Strike pulses metallic warm white to chrome silver over 600ms. - **Section transitions:** Negative space ground saturation pulses for 800ms. **Storytelling:** The site is structured as a series of hand-printed posters left to dry. Section anchors: "Poster Cover," "Drinks List," "Featured Cocktail," "House Note," "Address Card." The voice is raw-authentic, slightly proud, never glossy. There are no marketing CTAs. The address card ends with "ring once and wait." **Typography motion:** EB Garamond italic display reveals letter-by-letter with 90ms stagger and per-letter Y-rise of 4-6px. Body italic underlines in pop crimson on hover (1.4s jitter draw). Old-style numerals fade-in on the address card with a 60ms per-glyph cascade. **AVOID:** stat-grids, pricing tiers, reservation CTAs, social-proof testimonial blocks, three-up service tiles, generic glossy bar cliches. ## Uniqueness Notes **Differentiators from other designs:** 1. **Ma-negative-space at 80% empty:** Each section's content occupies less than 20% of the viewport; the remaining 80%+ is unmodulated negative space. The design lets emptiness be the medium. 2. **Pop-art silkscreen with deliberate off-register offset:** Every hand-drawn illustration is composed as a 3-color silkscreen (crimson, cyan, metallic warm white) with a 2-3px color-offset between layers -- a deliberate handmade imperfection. 3. **Navy-metallic palette with pop-art accents:** Deep navy wall ground with metallic warm white as the negative-space ink, and pop crimson + lithograph cyan reserved for hand-drawn illustrations only. 4. **No prices, no descriptions:** The drinks list shows only cocktail names. The site refuses to itemize -- the speakeasy speaks in posters, not menus. 5. **Chrome-silver flourish strike per section:** Once per section, a small chrome-silver diagonal strike appears as the poster's signature mark of hand-printed origin. **Chosen seed/style:** Planned seed -- aesthetic: pop-art, layout: ma-negative-space, typography: garamond-classic, palette: navy-metallic, patterns: zoom-focus, imagery: hand-drawn, motifs: floral-botanical, tone: raw-authentic. **Avoided patterns from frequency analysis:** Avoided overused photography (91%), minimal imagery (33%), playful aesthetic (26%), corporate aesthetic (23%). Embraced underused pop-art aesthetic (2%), hand-drawn imagery, floral-botanical motif, navy-metallic palette, and ma-negative-space layout with zoom-focus pattern and Garamond classical italic typography.