# Design Language for cherrypop.bar

## Aesthetics and Tone

cherrypop.bar (v2) is a **Maximalist Star-Chart Soda Counter** -- a tech-tutorial-toned, hero-dominant explainer for a fictional cosmic-themed soda bar where every drink is named after a constellation and every page is an over-stuffed firework of dopamine-neon shapes, futura-geometric labels, and star-celestial ornaments. Maximalism here means: every available pixel doing work, every margin filled with auxiliary diagrams, every gap occupied by a small annotation. The site reads like an over-illustrated science-textbook page from the Apollo era, cross-bred with a 2025 zine about soda.

The tone is **tech-tutorial** -- patient, explanatory, step-by-step. The maximalism never tips into chaos because every element is labeled, footnoted, or numbered. The site teaches you about cherry-cola the way a NASA briefing teaches you about orbital mechanics.

## Layout Motifs and Structure

The composition is **hero-dominant** -- a single oversized hero section consumes 140vh of vertical space (so the user must scroll into the hero before reaching it), with subsequent sections subordinated to the hero's scale and density. The hero contains a layered cosmic diagram: a giant SVG star-chart with a single hero soda glass at the center, surrounded by 12 annotated cosmic objects (constellations, planets, ringed-systems). Each annotation is a labeled callout with a thin line connecting it to the object.

**Macro structure:**
- **Hero Soda Chart (Section 0, 140vh):** A full-bleed deep-space background (a dopamine-neon star-field with magenta, cyan, and lime stars on near-black). At the center: a tall SVG soda glass (cherry-red with cyan ice) treated as a cosmic object. Around the glass: 12 annotated cosmic callouts numbered 01-12, each pointing to a feature of the drink (the cherry-celestial garnish, the bubble-particle column, the syrup-layer gradient). The hero title "POP THE CHERRY UNIVERSE" stacks in futura-geometric oversized type across the top. A persistent "READ THE LEGEND" prompt at the bottom invites scroll.
- **The Tutorial (Sections 1-4):** Four didactic spreads, each explaining one aspect of the cherry-pop universe:
  - **01: Syrup Gradient** -- explains the syrup-density gradient with annotated SVG diagrams
  - **02: Bubble Mechanics** -- explains carbonation with bubble-physics callouts
  - **03: The Garnish Cluster** -- explains the cherry/orange-peel/star-anise garnish triad
  - **04: The Glass Stack** -- explains the variant glassware (3 glass types)
  Each tutorial spread is dense: a central diagram occupying 60% of the space, dozens of small annotations, footnoted micro-text in the margins.
- **The Cocktail Menu (Section 5):** A maximalist menu page with 12 cocktails arranged in a star-pattern (constellation positions). Each cocktail has a numbered callout with name, ingredients, and price.
- **The Star Chart Legend (Section 6):** A dense legend page explaining the symbology used throughout the site. Reads like the back-cover of a star-map.
- **Closing: The Toast (Section 7):** A single oversized animated soda glass with a "Cheers" annotation -- the only un-annotated moment in the site.

The spring pattern is the dominant interaction motion: every annotation callout, every numbered marker, every diagram element enters with an over-shoot spring animation (cubic-bezier overshoot of 1.2-1.4, settling back to scale 1.0 with a small wobble).

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines & callouts:** "Jura" weight 500-700 -- a futura-geometric mandate. Used at clamp(40px, 6vw, 96px) for the hero title and at clamp(20px, 2vw, 32px) for tutorial section headings. Tracking 0.06em uppercase. The geometric sans reads as a NASA-briefing typeface.
- **Annotation labels:** "Jura" weight 600 at 11-13px, tracking 0.16em uppercase, used for callout labels (e.g., "CHERRY GARNISH // VAR. PRUNUS").
- **Body / tutorial copy:** "IBM Plex Sans" weight 400 at clamp(14px, 1vw, 16px), line-height 1.6. Used for tutorial explanations and footnotes.
- **Numerical markers:** "Jura" weight 700 at large scale (24-48px), the numbered callouts (01, 02, ... 12) become typographic ornaments themselves.
- **Pull-quotes / cherry-cola wisdom:** "Jura" weight 400 italic-skew at clamp(28px, 4vw, 56px), used sparingly.

**Palette (dopamine-neon mandate):**
- **#0A081A** Cosmic Void (page ground, deep-space)
- **#1A1230** Nebula Purple (secondary deep background)
- **#FF1E5E** Cherry Pop Magenta (primary brand, cherry-glass fill, hero accent)
- **#FF8C29** Solar Orange (secondary accent, syrup gradients)
- **#39E2FF** Soda Cyan (ice, bubble columns, callout lines)
- **#B9FF3F** Lime Pop (highlight, garnish, footnote markers)
- **#E8E5F2** Star Bone (text on cosmic-void, body type, primary readable)

Cherry Pop Magenta is the brand-name color; soda cyan and solar orange are the chromatic syrup-layers; lime pop is the highlight-on-everything; star bone is the readable text against the deep cosmic background.

## Imagery and Motifs

**Core visual motifs:**

- **Duotone-photo (imagery mandate):** Where photographs appear (in the cocktail menu callouts), they are duotones in cherry-magenta and cosmic-void -- two-color science-textbook plates. Each duotone has a thin lime-pop 1px border with a tiny corner registration mark. Photographs are small (max 240px) and embedded as plate-figures within larger diagram compositions.
- **Star-celestial (motif mandate):** Star clusters, constellation lines, planetary rings, and orbit arcs run through every section:
  - The hero background is a procedural starfield (small SVG stars in magenta, cyan, lime, scattered by Poisson disc distribution)
  - Constellation-lines connect the 12 callouts in the hero as if they were stars in a constellation
  - Section dividers are short arcs of the "soda zodiac" -- a fictional zodiac with cherry, lemon, lime, etc. as zodiacal signs
  - Tiny star ornaments accompany every numbered marker (a small 4-point star beside each callout number)
  - The cocktail menu's star-pattern arrangement is itself a constellation
- **Annotation callouts:** Numbered callouts (01-12) with thin lime-cyan lines connecting them to their referent objects. Each callout has a small SVG arrow-head and a label-box with name, scientific-feeling sub-label, and a 1-sentence description.
- **Footnote micro-text:** Margin-text in 10px Jura, lined with small lime-pop bullets, providing "footnotes" to the main diagrams.
- **Glass-illustration diagrams:** SVG soda-glass illustrations rendered as scientific cutaways -- the glass is drawn with a cross-section line showing the ice layer, syrup gradient layer, bubble-column.

## Prompts for Implementation

**Opening:** Page loads on cosmic void. The procedural starfield fades in over 1.2s, each star at a slightly different timing (a Poisson cascade rather than a uniform fade). The hero soda glass scales up from 0.7 with spring overshoot (cubic-bezier(0.34, 1.56, 0.64, 1.0), 800ms). The 12 callouts then enter in numbered order (01 first, 12 last), each callout's line drawing in via SVG stroke-dashoffset (300ms), then the label-box scale-springing in (240ms with overshoot to 1.08 then settling to 1.0). The title "POP THE CHERRY UNIVERSE" types in word-by-word during the callout cascade.

**Hero idle state:** Once settled, the hero has continuous ambient motion:
- Stars in the starfield twinkle gently (random subset, 8% at any moment have a 240ms scale-pulse from 1.0 to 1.4 to 1.0)
- The soda glass's bubble column animates upward (10 bubbles per second rising in a slight zigzag)
- The 12 callouts' label-boxes have a 1-2% scale breathing on 4s loops, slightly out of phase with each other
- Cherry-magenta pulses (a 4s 1.0-1.05-1.0 sine wave) on the central glass

**Scroll narrative:** As the user scrolls into each tutorial section:
- The central diagram for that section scales-in from 0.95 with spring (400ms)
- Annotations enter in numbered order around the diagram (spring-pop each)
- Connecting lines draw via stroke-dashoffset
- Footnote micro-text in the margins fades in last
- The user dwells momentarily before the next section's annotations begin

**Callout hover:** Hovering any callout:
- Springs the label-box to 1.1 scale (200ms)
- Highlights the connecting line (stroke 1px to 2px, with lime-pop glow filter)
- Brightens the referent object (the diagram element it points to)
- Reveals a small extended-footnote tooltip (additional text appears below the label)

**Cocktail Menu interactivity:** The 12 cocktails are arranged in a constellation pattern. Hovering any cocktail:
- Brightens its callout-line
- Triggers the cocktail's duotone-photo to fade in beside the callout (it was hidden)
- The constellation-lines connecting this cocktail to adjacent cocktails brighten

**Closing toast:** The final section's soda glass scales-up with spring, then a small "CHEERS" annotation pops in beside it without a numbered marker -- the first unlabeled element in the entire site, breaking the maximalist annotation discipline for a single warm-tutorial moment.

**Avoid:** No CTA-heavy layouts. No standard pricing-grid (prices are embedded in the constellation menu's callouts). No newsletter modal. No stat grids (the maximalist annotations are a deliberate inversion of stat-grid presentation).

## Uniqueness Notes

**Differentiators from other designs:**

1. **Hero-dominant at 140vh with constellation-annotation density:** The hero is engineered to demand scrolling into, not over. Hero-dominant layout is 4% in the batch; using it as a single annotated cosmic chart with 12 callouts is original.

2. **Tech-tutorial tone applied to soda-bar marketing:** Most maximalist designs lean into vibe; this design enforces patient explainer-prose alongside every visual. Tech-tutorial tone is 4% in the batch and rarely paired with maximalist aesthetic.

3. **Star-celestial motif used as a soda zodiac:** A fictional zodiac of soda-flavors (cherry, lemon, lime, etc.) running through section dividers, callout markers, and the menu's constellation arrangement. Star-celestial is 2% in the batch.

4. **Spring overshoot as the dominant entry motion:** Every callout, every label-box, every diagram element pops in with overshoot bounce -- making the maximalist density read as playful rather than oppressive. Spring pattern is 16% in the batch but rarely applied so consistently.

5. **Annotation callouts as primary content vehicle:** Most content is delivered through numbered callouts attached to diagrams, rather than through prose paragraphs. The annotation-as-content style is unique among the 1100+ designs.

Chosen seed: aesthetic: maximalist, layout: hero-dominant, typography: futura-geometric, palette: dopamine-neon, patterns: spring, imagery: duotone-photo, motifs: star-celestial, tone: tech-tutorial

**Avoided patterns from frequency analysis:** No parallax (96%), no centered/card-grid (96%/93%), no warm gradient (95%/78%), no mono-dominant (81% -- the design uses Jura geometric sans, not mono), no mysterious-moody (71%), no photography-fill (91% -- duotone-photo only). Used: hero-dominant (4%), maximalist (3%), futura-geometric (2%), dopamine-neon (2%), star-celestial (2%), tech-tutorial tone (4%), duotone-photo (2%), spring pattern (16% but distinctive in maximalist application).