# Design Language for lunar.bar ## Aesthetics and Tone lunar.bar is a late-night mountain bar that exists at the intersection of two worlds: the raw alpine wilderness above 3,000 meters and the electric pulse of a 1980s neon-lit dive. The site opens like a window cut through the side of a mountain at midnight — you see the glowing valley below, the stars above, and a backlit bar counter carved directly into the rock face. The aesthetic is **retro-energetic**: think cassette-era warmth colliding with neon signage against watercolor-washed peaks. The mood is **kinetic but grounded**. Visitors should feel the crunch of snow underfoot and the heat of a whiskey glass simultaneously. There is no sterile minimalism here — every pixel thrums with the low hum of analog amplifiers, the flicker of neon tubes against granite, the slow drip of snowmelt. Inspiration palette of references: 1980s ski lodge signage, vintage Japanese whiskey bar aesthetics (izakaya meets après-ski), VHS-era mountain documentaries with their characteristic color bleeding, worn hand-painted trail markers that glow under UV light, and watercolor topographic maps from alpine cartography. The tone is **energetic but never frenetic** — the energy of a fire roaring in a stone hearth, not a rave. Motion is purposeful. Numbers count. Counters tick. The mountain is always present. ## Layout Motifs and Structure **Single centered column, max 680px body width**, anchored in deep space with the mountain panorama bleeding edge-to-edge behind it. The centered axis is the spine of the experience — all text, counters, and interactive elements orbit this vertical line like constellations around a peak. **Structural layers (front to back):** 1. **Foreground layer** — text, counters, UI elements in `Space Grotesk`, stark and legible against the dark 2. **Midground layer** — watercolor mountain silhouettes, semi-transparent, drifting slowly left on a 120-second parallax loop 3. **Background layer** — deep navy/black gradient sky with animated star-grain (CSS noise, 0.3 opacity, 1px particles that pulse on a 4-second sine wave) **No traditional navigation bar.** Instead, a single sticky horizontal rule at 48px from the top bearing only the logo glyph (a crescent moon sitting in a mountain saddle, SVG inline) on the left and a neon-green "open/closed" live indicator on the right — always visible, always honest about bar hours. **Section rhythm:** Full-viewport height hero → 60vh counter cluster → 80vh watercolor mountain story section → 60vh drinks philosophy → 40vh closing coordinate stamp. Each section transitions via a shared "ridge line" SVG divider — a hand-trembled mountain silhouette in one continuous stroke — that separates sections without breaking the vertical flow. **Counter cluster:** Three large animated counters centered on screen, each labeled in small `Space Grotesk` caps below: - Nights Open (counting up from founding date, real-time) - Altitude in meters (static but displayed as if it's being measured live — digits shimmy ±1 on a 3-second interval) - Temperature at peak (a live or simulated alpine temperature reading, fluctuating ±0.3°C on a 7-second sine wave) These counters use `Bebas Neue` for the numerals — thick, condensed, white with a neon-green text-shadow blur at 4px, 0 0 12px #39ff14. ## Typography and Palette **Primary typeface:** Space Grotesk (Google Fonts) — used for all body text, labels, navigation. Weight 300 for body, 500 for headings, 700 for display. Letter-spacing +0.04em on labels and counters captions. The grotesque geometry reads as both technical (altitude readouts) and warm (bar signage). **Display/Numeral typeface:** Bebas Neue (Google Fonts) — used exclusively for animated counter numerals and the hero logotype. All-caps, condensed, carries the retro muscle of 1980s ski poster lettering. **Accent typeface:** Syne (Google Fonts) — used sparingly for pull-quotes and the drinks philosophy section. Weight 800, oversized, acting as a mid-section visual rest. **Palette:** | Role | Name | Hex | |------|------|-----| | Background sky | Abyss | #050a14 | | Deep navy mid | Midnight Ridge | #0a1628 | | Mountain silhouette dark | Obsidian Peak | #0f1f2e | | Mountain silhouette mid | Slate Face | #1a3040 | | Neon primary | Voltage Green | #39ff14 | | Neon accent | Plasma Cyan | #00e5ff | | Neon warm | Ember Neon | #ff6b35 | | Body text | Ice White | #e8f4f8 | | Muted text | Fog Grey | #8aabb8 | | Counter numeral glow | Ghost Green | #b4ffb4 | **Color application rules:** - Background is always `Abyss` or the `Midnight Ridge → Abyss` vertical gradient - All neon colors appear ONLY as `color`, `text-shadow`, `box-shadow`, or `border` — never as backgrounds - Watercolor mountain layers use `Slate Face` and `Obsidian Peak` with 40–70% opacity layered via CSS `mix-blend-mode: screen` - Interactive hover states shift from `Ice White` to `Voltage Green` with a 0.15s ease transition ## Imagery and Motifs **All mountain imagery is watercolor SVG** — not photography, not stock illustration, not solid-color fills. The mountains are rendered as layered `` elements with SVG `feTurbulence` + `feDisplacementMap` filters applied to create the characteristic soft wet-edge of watercolor bleeding into paper. Each mountain ridge is a different `Slate Face`-family color at varying opacity, creating atmospheric depth through layering alone. **The mountain roster (five silhouette layers, each an independent SVG path):** 1. **Far range** — barely visible, 15% opacity, gentle plateau silhouette 800px wide 2. **Mid range A** — 30% opacity, jagged alpine profile with notched saddle at center 3. **Mid range B** — 45% opacity, offset 40px right, taller pinnacle grouping 4. **Near range** — 65% opacity, dramatic foreground ridge with visible rock-texture turbulence 5. **Foreground ledge** — 85% opacity, hard-edged plateau suggesting the bar's physical terrace Each layer drifts on a different `translateX` parallax speed as the user scrolls — ranging from 0.02x (far range, barely moves) to 0.15x (foreground ledge, moves most). On mobile, parallax is disabled and layers stack at fixed opacity. **Motif system:** - **Crescent moon in mountain saddle** — the site's primary logomark, appearing in the sticky header as a white SVG (28×28px) and in the hero at 120×120px with a faint `Voltage Green` glow halo (box-shadow: 0 0 40px #39ff14 at 50% opacity) - **Neon tube border fragments** — CSS-drawn decorative elements: single horizontal lines with a `Plasma Cyan` glow (`box-shadow: 0 0 8px #00e5ff, 0 0 20px #00e5ff`) appearing as section dividers between counter cluster and philosophy section - **Alpine coordinate stamp** — the closing element: a rectangular stamp design with coordinates, elevation, and founding year, rendered in `Fog Grey` on `Midnight Ridge`, styled like a worn rubber-stamp impression (CSS `opacity: 0.7`, slight rotation -1.2deg, `letter-spacing: 0.2em`) - **Counter shimmy particles** — 12 tiny `Voltage Green` dots (2×2px, `border-radius: 50%`) that orbit each counter digit cluster on a CSS animation, simulating measurement instrument vibration **No photography.** The visual world is entirely hand-authored: watercolor SVG mountains, CSS neon glow, inline SVG iconography. ## Prompts for Implementation **The story to tell.** A traveler has been hiking for nine hours. The sun dropped behind the Obsidian Peak two hours ago. Their headlamp cuts through fog. Then — a glow. Not the cold blue of a phone screen, but the warm-electric pulse of neon through mountain mist. They descend toward it. The site IS that descent. The hero is the first glimpse of the bar light through fog. The counter cluster is the moment of sitting down, reading the altitude gauge on the wall, checking the temperature strip on the window. The drinks philosophy section is the bartender explaining why they only stock single malts from distilleries above 500m elevation. The closing stamp is the matchbook you pocket on the way out. **Hero section (100vh):** - Background: `Abyss → Midnight Ridge` gradient, top to bottom - Five watercolor mountain SVG layers stacked absolutely, each drifting at different parallax speeds on scroll - Star-grain layer: CSS `radial-gradient` noise at 0.3 opacity, 1px dots, animating `opacity` between 0.2–0.4 on a 4s `ease-in-out` infinite loop to simulate twinkling - Hero text: `LUNAR.BAR` in `Bebas Neue` 96px (desktop) / 64px (mobile), `Ice White`, centered, with `Voltage Green` text-shadow `0 0 30px #39ff14` - Tagline below: `Altitude Drinking. Mountain Hours.` in `Space Grotesk` 300 weight, 18px, `Fog Grey`, letter-spacing 0.15em - No hero CTA button. The scroll indicator is a single animated neon-green chevron (CSS-drawn, `Voltage Green`, pulsing opacity 0.4→1.0 on a 2s loop) 40px from the bottom center **Counter cluster section (60vh):** - Three counters in a horizontal row (desktop) / vertical stack (mobile), each in its own 200px-wide column - Numeral: `Bebas Neue` 80px, `Ice White`, glow: `text-shadow: 0 0 12px #39ff14, 0 0 30px #39ff14` - Label below: `Space Grotesk` 500, 11px, `Fog Grey`, `letter-spacing: 0.3em`, uppercase - JavaScript `setInterval` at 1000ms for the Nights Open counter (counts from a hardcoded founding date) - JavaScript sine wave oscillation for Altitude and Temperature counters: `Math.sin(Date.now() / 3000) * shimmerRange` - On counter change, a brief CSS class `flash` triggers: `text-shadow` amplitude doubles for 200ms then eases back - The 12 orbiting particles per counter use CSS `@keyframes` with `rotate` + `translateY`, staggered by 30deg per particle, radius 28px from counter center **Mountain story section (80vh):** - Split composition: left 55% is the watercolor mountain SVG stack (now static, no parallax), right 45% is text - Story text in `Space Grotesk` 300, 17px, line-height 1.75, `Ice White` - A pull-quote breaking the column: `Syne` 800 weight, 42px, `Plasma Cyan`, `opacity: 0.85` - The pull-quote has a subtle `filter: blur(0.5px)` for that neon-through-fog quality **Drinks philosophy section (60vh):** - Full-width centered layout, max 640px - A single large `Syne` 800 display word (`ALTITUDE`) at 180px, `Obsidian Peak` color (barely visible), acting as a watermark background — positioned absolute, centered, `z-index: 0` - Actual content text floats above at `z-index: 1` - A horizontal neon-tube divider (CSS `::before` pseudo-element, `Plasma Cyan` glow) separates this from the prior section **Closing coordinate stamp (40vh):** - Centered, a 320×160px rectangular box with `border: 1.5px solid` `Fog Grey`, slight rotation `-1.2deg` - Inside: bar coordinates (e.g., 47.3769° N, 10.6303° E), elevation (3,145m), founding year (MMXIX), bar name in `Bebas Neue` 28px - Whole stamp: `opacity: 0.7`, `filter: contrast(1.1) sepia(0.1)` for worn-stamp quality - On hover: opacity → 1.0, a `Voltage Green` glow border replaces the grey, `transition: all 0.3s ease` **Animation philosophy:** Counters are the heartbeat. Mountains are the breath. Neon is the warmth. Everything else is stillness. No scroll-jacking. No full-page transitions. No loading spinners. The page loads fast, the mountains are always there, the counters are always counting. **CSS architecture notes:** - CSS custom properties for all palette values: `--color-abyss`, `--color-voltage-green`, etc. - `prefers-reduced-motion` media query: all animations pause, counters show static values, parallax disabled - Mountain SVG layers use `will-change: transform` for GPU compositing - The `feTurbulence` filter for watercolor edges: `baseFrequency="0.015 0.008"`, `numOctaves="4"`, `seed` varies per layer (3, 7, 12, 19, 23) ## Uniqueness Notes 1. **Counter-animate as primary narrative device, not decoration.** The frequency report shows counter-animate is present in the planned seed but rare in the corpus. Most sites use animations for scroll reveals or hover effects. lunar.bar makes counters the emotional core: the Nights Open counter IS the site's age and credibility, the altitude shimmy IS the mountain's presence, the temperature fluctuation IS the weather outside. Numbers tell the story; the counters are characters, not widgets. 2. **Watercolor SVG mountain layers with `feTurbulence` displacement — not photography, not flat illustration.** Photography appears in 85% of the corpus. Flat vector illustration is common. This site uses SVG filter primitives to simulate genuine watercolor wet-edge bleeding, achieving a rare visual texture that reads as hand-made and organic while being purely code-generated — no image files, no external assets. 3. **Dark-neon palette anchored to an alpine physical context, not cyberpunk or vaporwave.** Dark-neon in the corpus (14% dark-mode, rare dark-neon specifically) almost always signals cyberpunk or tech aesthetics. lunar.bar inverts the reference: the neon colors are physically motivated by bar signage at high altitude, not by digital futurism. `Voltage Green` is a bar's open sign. `Plasma Cyan` is the glow of a drinks cooler through frosted glass. `Ember Neon` is a heat lamp. The palette is retro-alpine, not cyber-dystopian. 4. **Retro aesthetic expressed through analog instrument UI (counters, stamps, gauges) rather than pixel art or grain textures.** The corpus's 9% retro aesthetic skews heavily toward grain overlays, pixel art, and VHS glitch. lunar.bar's retro reference is the analog measurement instrument — altitude gauges, thermometer strips, rubber stamps, matchbook typography — giving the retro signal a physical, tactile register unique to the alpine domain. 5. **No photography, no hero CTA, no pricing blocks.** The site refuses the three most common conversion-focused patterns. Instead of a "Book a Table" button in the hero, there's a pulsing neon chevron. The site earns trust through atmosphere and counter data (how many nights it has been open), not through social proof grids or pricing tables. **Chosen seed:** `aesthetic: retro, layout: centered, typography: sans-grotesk, palette: dark-neon, patterns: counter-animate, imagery: watercolor, motifs: mountain-landscape, tone: energetic` **Avoided overused patterns from frequency analysis:** hand-drawn (60% — used SVG filters instead of illustration style), editorial layout (51% — used centered single-column instead), terminal aesthetic (31% — retro alpine instead of retro computer), botanical motifs (26% — mountain landscape instead), glassmorphism (21% — neon glow instead), warm palette (97% — inverted to cold dark-neon), gradient-heavy backgrounds (91% — minimal gradient, primarily dark field with neon accents), photography (85% — zero photography, all code-generated visuals).