# Design Language for lunar.bar ## Aesthetics and Tone lunar.bar is **The Selenite Lounge** -- a clandestine cocktail bar that exists in the impossible overlap of two eras: the gilded geometry of a 1931 transatlantic ocean-liner smoking room, and the riveted observation deck of a low-gravity lunar habitat fifty years from now. The conceit is fully committed: this is a *speakeasy on the Moon*, where the bartenders wear chevron-collared jackets, the cocktail menu is etched onto frosted regolith glass, and the back bar mirror is actually a porthole framing a slow-turning Earth. The aesthetic is **art-deco** -- but not the heavy, gold-leaf, Great-Gatsby cliche. This is *crisp* deco: stepped ziggurat forms, sunburst fans rendered as thin radiating hairlines, octagonal frames, and the precise machine-age optimism of Cassandre travel posters and the Chrysler Building's spire. Onto that armature we graft a **sci-fi-hud** layer: faint targeting reticles, altitude/azimuth tick marks, oscilloscope traces, and bracket-corner overlays that frame content like a cockpit display reading out a cocktail's "flight parameters." The tone is **whimsical-creative** -- this place does not take itself too seriously. Copy is dry and playful: a Negroni is described as "ballast for the soul, 1.5 lunar ounces"; the reservation form asks for your "preferred gravity coefficient." Nothing winks too hard, but everything is in on the joke. The mood overall: cool moonlight on polished brass, the hum of a recirculator, a saxophone two rooms away, and a martini that refuses to ripple because there's nothing to ripple it. ## Layout Motifs and Structure **Primary layout: portfolio-grid** -- the site is structured as a *specimen cabinet of cocktails and rooms*, not a scrolling brochure. The spine of the experience is a precise modular grid: on desktop, a 12-column system where the central content lives in an 8-column octagonal "vitrine," flanked by two 2-column rails carrying HUD telemetry (a running clock in lunar mission-elapsed-time format, a tiny rotating Moon-phase glyph, ambient "cabin pressure" and "deck temperature" readouts that are pure decorative theater). Sections, in order, each occupying full viewport height with **scroll-triggered** transitions between them: 1. **AIRLOCK (hero):** Black field. Two stepped deco doors -- left and right halves of a sunburst -- slide apart on load to reveal the wordmark "LUNAR · BAR" set in stacked deco capitals inside an octagonal frame. HUD bracket-corners draw themselves around the frame. A thin horizontal "horizon line" with Earth as a half-disc sits low. 2. **THE LOUNGE (about):** Asymmetric split -- a duotone photograph of the bar interior bleeds off the right edge; left column holds a deco-ruled paragraph and a vertical "sunburst rule" divider. 3. **THE CELLAR (cocktail portfolio-grid):** The centerpiece. A responsive grid of octagonal cocktail "specimen cards" -- 3 across on desktop, 2 on tablet, 1 on mobile -- each card is a duotone photo of a drink inside a stepped-deco frame, with a HUD data strip beneath: name, ABV as "thrust", base spirit, a one-line whimsical tasting note. Cards do not crop into rectangles; the photo masks to the octagon. 4. **THE OBSERVATION DECK (gallery):** Horizontal band of wider duotone images -- the room at different "hours" (Earthrise, midday-eclipse, Earthset) -- with parallax tick-marks scrolling past. 5. **MANIFEST (hours / location / reservation):** A deco "departure board" panel -- hours rendered like a flight schedule, address as "coordinates", and a minimal form (no aggressive CTA banner -- just an elegant "request a seat" with deco-bracketed inputs). 6. **TRANSMISSION END (footer):** The sunburst doors slide *closed*; a single line of fine print and a slowly blinking HUD cursor. Spatial rules: generous margins (min 8vw desktop), strict baseline grid visible as 0.08-opacity hairlines, content always centered within its octagonal vitrine. The grid is the discipline; the deco ornament and HUD chrome are the personality riding on top of it. ## Typography and Palette **Typography:** - **Display / Wordmark / Section Headers:** "Commissioner" (Google Fonts) -- a low-contrast humanist variable sans with a remarkable flared-stroke / slab-ish lower weight range. This is the **commissioner-versatile** seed in action: I exploit its full variable axis. Headers use Commissioner at weight 700-800, all-caps, letter-spacing 0.22em, often *stacked* vertically (one word per line, centered) to echo deco signage and elevator-floor indicators. The wordmark "LUNAR · BAR" uses weight 800 with a hairline-rule above and below. - **Sub-headers / Deco labels / Card titles:** "Commissioner" at weight 600, small-caps simulation via all-caps + 0.16em tracking, size clamp(0.9rem, 1.4vw, 1.1rem). - **Body text:** "Commissioner" at weight 400, size clamp(1rem, 1.15vw, 1.2rem), line-height 1.7, max 62ch. Generous leading to feel like low-gravity calm. - **HUD telemetry / numeric readouts / mono accents:** "Share Tech Mono" (Google Fonts) -- a clean, slightly squared monospace for the cockpit-display numbers, timestamps, ABV figures, coordinates. Size clamp(0.7rem, 0.9vw, 0.85rem), letter-spacing 0.05em, used in Lunar Silver on the dark field. - **Rare ornamental flourish:** A few large deco numerals (cocktail index "01 / 02 / 03") in "Commissioner" weight 200, oversized at clamp(4rem, 9vw, 9rem), ghosted at 12% opacity behind cards as watermark. **Palette (duotone -- the entire site is built from one two-tone axis plus a sliver of metallic accent):** - **Cosmos Black** `#0c0f14` -- the primary background; deep blue-black, the void outside the porthole. - **Lunar Silver** `#d8dde6` -- the primary foreground; a cool, faintly blue-gray "moonlight white" used for text, hairlines, HUD chrome, and as the light tone of every duotone photograph. - **Selenite Mid** `#5b6678` -- the duotone midtone / shadow tone for photographs and for secondary text; a slate-blue that bridges the black and the silver. - **Earthrise Brass** `#c79a4e` -- the *only* warm note, used sparingly (under 5% of surface): the wordmark accent dot, active-link underlines, the deco sunburst rays at full draw, the Moon-phase glyph's lit edge. Brass on moonlight is the single spark of the gilded-age past inside the cold future. - **Signal Cyan** `#6fd2e0` -- micro-accent only: the blinking HUD cursor, "live" telemetry digits, focus rings on form inputs. Reads as a CRT phosphor glow. Duotone photos are processed: shadows -> Cosmos Black, midtones -> Selenite Mid, highlights -> Lunar Silver, with a 6% film grain overlay. No full-color imagery anywhere. ## Imagery and Motifs **Core visual motifs (mostly CSS/SVG, plus the duotone photos):** 1. **The Sunburst Fan (deco):** A radiating set of 24 thin hairlines (1px, Lunar Silver at 30%, every 4th one Earthrise Brass) fanning from a point. Appears as the hero's "doors", as section dividers (a horizontal half-fan), and tiny -- 8 rays -- as a bullet/marker glyph. Drawn as inline SVG so the rays can animate-draw from center outward. 2. **Stepped Ziggurat Frame:** Every major content block sits inside a frame whose corners step inward in 3 decreasing rectangles -- classic deco. Pure CSS via layered box-shadows / clip-path. The octagonal vitrine is a variant (chamfered corners). 3. **HUD Bracket Corners:** L-shaped corner brackets ( ⌐ ¬ ) that frame cards and images; on scroll-into-view they "snap" inward from slightly outside the element. Share Tech Mono tick-mark scales run along the inner edges. 4. **Moon Phase Glyph:** A small circle in the corner rail whose terminator (the day/night line) is an animated SVG arc; the lit side is a brass-tinted gradient. It advances one "phase" per section scrolled, as if time passes as you descend. 5. **Earth Half-Disc:** A large, slow-rotating Earth rendered as a duotone circle (continents as Selenite Mid masses on a Lunar Silver ocean, atmosphere as a 2px brass rim-light) sitting at the bottom of the hero and again in the footer -- the constant in the window. 6. **Telemetry Strips:** Beneath cocktail cards and along the rails: rows of monospace labels and numbers -- `ABV 24% · THRUST: MEDIUM · BASE: GIN · TEMP: -4°C · STATUS: SERVED` -- some digits subtly animating (counter-animate on reveal). 7. **Octagon Cocktail Cards:** Duotone close-ups of drinks (a martini, an old-fashioned, something smoking), masked into octagons inside stepped frames, with the deco numeral watermark behind. 8. **Riveted Seam Lines:** Faint vertical lines with small circular "rivet" dots every 40px along section edges -- the hull of the habitat -- at 8% opacity. ## Prompts for Implementation Build this as a **full-screen narrative descent** -- the visitor "rides the lift down" through the lounge, six full-viewport scenes. Use `scroll-snap-type: y proximity` so each scene settles, and IntersectionObserver to trigger that scene's choreography. Respect `prefers-reduced-motion` by skipping the door slides and grain shimmer and just fading content in. **Hero / AIRLOCK:** On load, Cosmos Black fills the screen. Two SVG sunburst-fan halves occupy left and right; they slide apart over 1.4s `cubic-bezier(.16,1,.3,1)` revealing the octagonal vitrine. Inside, HUD bracket-corners draw themselves (SVG `stroke-dashoffset` animation, 0.8s, staggered per corner). Then "LUNAR" fades up, then "·" (brass), then "BAR" -- letter by letter, 60ms stagger, Commissioner 800 all-caps stacked. The Earth half-disc rises 4vh from below over 3s. A Share Tech Mono line types out: `// SELENITE LOUNGE — DECK 7 — EST. 1931 / RE-EST. 2087`. The Moon-phase glyph appears in the top-right rail at "new moon." **Scroll choreography (scroll-triggered + parallax):** As the user scrolls between sections, the riveted seam-lines parallax slowly; tick-mark scales drift; the Moon-phase glyph advances one phase. Section headers slide-reveal upward from behind a deco rule that "wipes" left-to-right. Cocktail cards in THE CELLAR enter on a stagger (80ms apart), each: octagon mask scales from 96%->100%, stepped frame draws its 3 corner-steps, HUD bracket-corners snap in, telemetry digits counter-animate to their values, the ghost numeral fades to 12%. Hover on a card: it lifts 6px, the brass rays in its corner sunburst light up sequentially, the tasting note's hidden second line ("...best enjoyed while pretending not to look at Earth") slides into view. **OBSERVATION DECK:** Horizontal-feeling parallax band -- three wide duotone images of the room at Earthrise / Eclipse-noon / Earthset; as you scroll, a thin brass "time-of-day" indicator slides along a deco arc above them, and the background black shifts almost imperceptibly cooler/warmer. **MANIFEST:** The departure-board panel: hours flip in like split-flap displays (CSS transform on rows, staggered). Form inputs are deco-bracketed underlines that glow Signal Cyan on focus with a soft 0 0 8px bloom; the submit control is a small octagon labeled "REQUEST A SEAT →" -- understated, never a full-width CTA banner. Whimsical field labels: "PARTY SIZE (MAX 8, GRAVITY PERMITTING)", "PREFERRED VIEW: ☐ EARTH ☐ STARFIELD ☐ THE BAR ITSELF". **Footer / TRANSMISSION END:** The two sunburst-fan halves slide back together, dimming the screen; a single Share Tech Mono line remains -- `// transmission ends · lunar.bar · all times mission-elapsed` -- with a slowly blinking Signal Cyan block cursor. The Earth half-disc keeps its slow rotation. **Texture & finish:** Apply a fixed 6% monochrome film-grain (CSS, fractal-noise SVG filter or a tiled PNG) over everything; add an extremely subtle 1px Lunar Silver vignette-inset on the viewport edge like a porthole rim. All hairlines hard 1px (no blur) to keep the deco crispness. Custom cursor: a tiny Share Tech Mono crosshair reticle. **AVOID:** stat-grids of "10,000 cocktails served", pricing tiers, multiple stacked CTA banners, generic three-column feature cards, testimonial sliders. The cocktail portfolio-grid *is* the content; let it carry the page. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Two-eras-in-one fusion as a literal premise:** This is the only design that welds *crisp art-deco* (stepped ziggurats, sunburst fans, Cassandre-poster geometry) directly onto a *sci-fi-hud cockpit layer* (reticles, telemetry strips, mission-elapsed-time clocks) -- and commits to the in-fiction explanation that it's a 1931 ocean-liner lounge re-established on the Moon in 2087. The deco isn't decoration and the HUD isn't decoration; they're two timelines occupying the same room. 2. **Single-axis duotone, ruthlessly enforced:** Every photograph, every hairline, every surface is built from exactly Cosmos Black / Selenite Mid / Lunar Silver, with brass and cyan as <5% sparks. No gradients-as-crutch, no warm-corporate palette. The restraint is the point. 3. **Cocktails as a portfolio-grid of "specimens"** rather than a menu list or a hero-driven brochure -- octagonal photo cards with HUD "flight parameter" data strips and ghosted deco numerals, in a strict modular grid. Almost no site in the set uses portfolio-grid (0% in frequency analysis), and none uses it for a *bar*. 4. **Commissioner exploited as a variable workhorse:** weights 200 (oversized ghost numerals) through 800 (stacked deco wordmark) from one family, paired only with Share Tech Mono for telemetry -- the **commissioner-versatile** seed taken at face value. 5. **The Moon-phase-as-progress-indicator:** the lit terminator of a corner glyph advances one phase per section, so scrolling literally passes lunar time -- a navigational/narrative device unique to this site. **Chosen seed/style:** aesthetic: art-deco, layout: portfolio-grid, typography: commissioner-versatile, palette: duotone, patterns: scroll-triggered, imagery: duotone-photo, motifs: sci-fi-hud, tone: whimsical-creative. **Avoided patterns from frequency analysis:** sidestepped the dominant corporate/gradient/warm/mysterious-moody cluster (90%+ each); avoided centered-only and full-bleed default layouts in favor of portfolio-grid (0%); chose duotone palette (7%) and duotone-photo imagery (0%) over gradient/photography defaults; used Commissioner (0%) instead of the ubiquitous mono/humanist pairings; whimsical-creative tone (7%) instead of mysterious-moody (94%).