# Design Language for lunar.quest ## Aesthetics and Tone lunar.quest is a **pop-art cosmology** — a bold, irreverent mission control for the inner explorer, rendered as if Andy Warhol were hired to redesign NASA's lunar ops center the morning after a particularly productive fever dream. The aesthetic is **HUD-overlay pop**: deep burgundy command surfaces layered with flat-color organic blob panels, halftone dot fields, and brushstroke-thick grotesque letterforms that bark instructions like a cheerful flight director. The mood is **conversational and kinetic** — not the cold precision of aerospace, but the warm banter of a late-night radio DJ who happens to be guiding you to the moon. Every label reads like a friend leaning in: "hey, here's your orbit window." Nothing is precious. Urgency arrives through color and weight, never through jargon. The site behaves like a living **mission dashboard** that talks back. Visual inspiration: Jasper Johns target paintings filtered through a vintage NASA mission patch aesthetic, with thick hand-inked letterforms and bleed-saturated ink blocks. The deep burgundy (#5C0A2D) acts as the mission-critical ground — every element lands on it or lifts from it. Acid green (#B8F23A) is the live-data highlight. Bone white (#F5ECD7) carries text. Warm black (#1A0A0F) anchors shadows and typography. Coral orange (#FF5733) fires event-state pulses. Tone is **conversational** — second person, present tense, contractions welcome. Labels say "you're in orbit" not "orbital insertion confirmed." ## Layout Motifs and Structure The page is a **HUD-overlay composition** — a single mission command surface where content panels float as blob-shaped instruments over a fixed deep-burgundy field. There is no conventional grid in the traditional sense; instead, the layout is governed by **blob territories**: each content zone is a distinct organic shape cut into the burgundy plane, as if control panels were silk-screened onto the hull of the ship. **Structural logic:** - **Fixed Command Background:** 100vw × 100vh deep burgundy (#5C0A2D) base, always visible. A subtle halftone dot grid (2px dots, 12px pitch, #7A1040 on #5C0A2D) overlays the entire surface — this is the "mission skin," never scrolling. - **HUD Panel Blobs:** Floating organic-blob panels in bone white (#F5ECD7), acid green (#B8F23A), and warm black (#1A0A0F). Each blob is a distinct `` clipping mask applied to a content container. Panels drift slightly on scroll (parallax ±8px) and breathe with a slow 6-second scale oscillation (0.98 → 1.01). - **Path-Draw SVG Navigation:** The main navigation is a hand-drawn SVG path that connects the panels like a wiring diagram — a thick single-stroke line (6px, acid green) with animated `stroke-dashoffset` draw-in on page load over 1.4 seconds. Intersection nodes are filled circles that pulse. - **Vertical Rhythm:** Content stacks in three loose columns on desktop — left blob (33%), center oversized typography zone (40%), right blob cluster (27%) — but the blobs bleed across column boundaries freely, rejecting rigid containment. - **Mobile:** Blobs stack vertically in a single-file queue, each full-width with rounded top/bottom edges only. The path-draw SVG becomes a vertical spine connecting them. - **No sticky nav bar.** Navigation lives inside a HUD panel blob that is always visible in the upper-right of the composition, floating at `position: fixed`. ## Typography and Palette **Typography — grotesque-neo, all Google Fonts:** Three typefaces, maximum contrast, zero serifs: - **Display & Headlines:** `Bebas Neue` (Google Fonts, weight 400 only — the face is already designed at maximum optical weight). Used at clamp(3.5rem, 9vw, 8rem) for the wordmark and mission section headers. Tracked loosely (+0.04em) to let each letterform breathe on the burgundy field. Always in bone white (#F5ECD7) or acid green (#B8F23A). - **Body & UI Labels:** `Space Grotesk` (Google Fonts, variable weight 300–700). Body copy at 1rem/1.6 weight 400 in bone white. UI labels (HUD panel headers, mission status tags) at 0.75rem weight 700 uppercase, letter-spacing +0.12em, in warm black (#1A0A0F) on acid green (#B8F23A) backgrounds. Interactive labels in weight 600. - **Monospace / Data Readouts:** `Space Mono` (Google Fonts, weight 400/700). Used for mission timestamps, coordinate strings, and any numeric data readouts. Always at 0.85rem, warm black on acid green, or acid green on warm black. The face's rigid courier DNA reads as instrument panel output. **Color Palette:** | Role | Hex | Name | |---|---|---| | Command Ground | `#5C0A2D` | Mission Burgundy | | Halftone Ink | `#7A1040` | Claret Shadow | | Text & Panel Fill | `#F5ECD7` | Bone White | | Live Data / Accent | `#B8F23A` | Acid Green | | Deep Background | `#1A0A0F` | Warm Black | | Event Pulse | `#FF5733` | Coral Fire | | Secondary Panel | `#D4A0C0` | Dusty Rose | Halftone overlays use CSS `radial-gradient` dot patterns. Pop-art flat fills only — no gradients between hues, no blurs on primary panels. ## Imagery and Motifs **Organic Blobs as primary shapes.** Every panel, card, and hero container is a blob — not a rectangle with border-radius, but a genuine irregular organic SVG path with 8–12 control points. Blobs are pre-generated as SVG `` elements baked into the HTML. Families of three blob variants per role (small/medium/large) with subtle random variation between page visits via CSS custom property seeding. **Leaf-organic motifs woven through the command surface.** Oversized botanical leaf silhouettes in #7A1040 (claret, 15% opacity) tile behind content panels as a secondary layer — referencing both organic growth and mission patch iconography. Leaves are SVG paths with thick 3px outline strokes in coral fire (#FF5733) that draw in via `stroke-dashoffset` animation when the panel enters the viewport. **Path-draw SVG connection web.** The primary decorative system is a network of hand-drafted SVG paths that connect panel blobs — thick (4–8px), flat-color (acid green), with animated draw-in triggered by scroll position. This is the visual spine of the page: as the user reads down, the path extends to the next panel, stitching the mission together stroke by stroke. **Halftone dot fields.** Subtle halftone patterns on panel backgrounds using CSS `radial-gradient` repeating patterns. Pop-art visual DNA — not photographic, always flat. On hover, panel halftones shift dot pitch from 12px to 8px over 0.4s (zoom-in print effect). **No photography.** Zero stock images. All imagery is SVG vector: leaf outlines, blob fills, halftone fields, path webs, and oversized typographic lockups. **Mission patch lockup.** The site header uses a circular SVG badge — 200px diameter — with `lunar.quest` as curved text along the arc, a central organic blob moon shape, and a leaf-organic border ring. Drawn in bone white on warm black, it reads as a mission patch sewn onto the command surface. ## Prompts for Implementation Build lunar.quest as a **single scrolling mission surface** — the visitor is the astronaut, the page is their onboard HUD. The experience begins with the command surface already active and narrates the mission in five acts: Departure, Transit, Lunar Orbit, Landing, Return. No splash screens, no loading bars, no pricing grids, no testimonials. **Structural blueprint (top to bottom):** 1. **COMMAND SURFACE HERO — `100svh`.** Fixed burgundy (#5C0A2D) base. The mission patch SVG badge animates into position from bottom (translate3d(0, 60px, 0) → 0) over 1s ease-out. The wordmark `lunar.quest` in Bebas Neue at clamp(5rem, 12vw, 9rem) drops in from top, staggered 0.2s after badge. Below the wordmark, a Space Grotesk weight-700 uppercase tag in acid green: `MISSION BRIEFING ACTIVE`. The halftone grid breathes with a 0.3px offset sine wave tied to mouse position. The HUD nav blob appears fixed upper-right with 4 mission-phase labels connected by a green SVG path already fully drawn. 2. **ACT I — DEPARTURE BLOB PANEL.** A large bone-white blob (SVG clipPath) floats in from the right at scroll 15vh with `translate3d(40px, 0, 0) → 0` over 0.8s. Inside: headline "Your window opens at T-minus…" in Bebas Neue 5rem acid green. Body copy in Space Grotesk 400. A leaf-organic SVG silhouette in claret overlaps the blob edge. The connecting path extends from the hero badge to this panel's left node as the blob enters — animated draw-in with `stroke-dashoffset`. 3. **ACT II — TRANSIT DATA CLUSTER.** Three small acid-green blob panels arranged in loose right-column diagonal. Each contains a Space Mono readout: coordinates, elapsed time, velocity. The path extends between them. On scroll-enter, blobs scale from 0.9 → 1.0 over 0.6s with a slight bounce (cubic-bezier(0.34, 1.56, 0.64, 1)). Mouse-hover on any blob shifts its halftone dot pitch and brightens the panel border by 1px coral fire. 4. **ACT III — LUNAR ORBIT FULL-WIDTH BAND.** A warm-black (#1A0A0F) full-width section, no blob clipping — this is the "dark side." Bone-white Bebas Neue headline `YOU'RE IN ORBIT` at 8rem fills the width. Below: three leaf-organic SVG outlines in bone white with coral fire stroke animate in from the left. Path continues its draw across this section as a straight horizontal rule in acid green. 5. **ACT IV — LANDING NARRATIVE BLOB.** The largest blob on the page — a wide, low organic shape in dusty rose (#D4A0C0) that takes 80vw and sits low in the viewport. Contains the main narrative body: a three-paragraph story in Space Grotesk, size 1.1rem, warm black text. A mission-patch SVG watermark (40% opacity) floats behind the text. The leaf motif border traces the outer blob edge as an SVG stroke-dashoffset element that completes as the user reaches the section midpoint. 6. **ACT V — RETURN FOOTER.** Back to full burgundy. The path draw completes a full circuit back to a small badge below the footer text. Two circular acid-green blob elements flank the footer message: `mission complete. see you on the next one.` in Space Grotesk weight 300 italic, bone white, 1.4rem. No links, no social icons, no copyright grid — just the message, the badge, and the dot field receding. **Animation principles:** - All scroll-triggered: `IntersectionObserver` with threshold 0.2 - Path draw: `stroke-dasharray` = full path length, `stroke-dashoffset` = 0 → full length on scroll-progress - Panel bounce: cubic-bezier(0.34, 1.56, 0.64, 1) for organic feel - Halftone hover shift: CSS transition 0.4s ease - No auto-play loops except the hero badge breathing (2s scale, 1% amplitude) - Leaf draws: 1.2s ease-in-out on IntersectionObserver trigger **AVOID:** CTAs with buttons, pricing blocks, feature stat grids, testimonial carousels, email capture forms, sticky navigation bars with dropdowns. ## Uniqueness Notes **Seed:** aesthetic: pop-art, layout: hud-overlay, typography: grotesque-neo, palette: deep-burgundy, patterns: path-draw-svg, imagery: organic-blobs, motifs: leaf-organic, tone: conversational **Differentiators from existing registry:** 1. **Pop-art HUD synthesis (registry first combination).** The frequency report shows `pop-art` at only 1% and `hud-overlay` at 3% — neither has been combined before. lunar.quest is the only site in the registry that treats a mission HUD as a pop-art composition: flat ink blocks, halftone fields, and oversized grotesque type pressed onto a deep burgundy command surface. The nearest neighbors (cyberpunk, brutalist) use neon/chrome; lunar.quest uses ink and paper. 2. **Organic blob panels as HUD instruments.** No current registry design combines `organic-blobs` (3%) with `hud-overlay` (3%). Blobs are consistently used as decorative backgrounds or hero shapes elsewhere; here they ARE the instrument panels — every data zone, navigation element, and content card is blob-shaped, creating a HUD that feels hand-silkscreened rather than CAD-drawn. 3. **Path-draw SVG as narrative connective tissue.** `path-draw-svg` is at 15% frequency — but its use here is structural, not decorative. The animated SVG path physically stitches mission acts together as the user scrolls, acting as both navigation indicator and visual spine. Most implementations use path-draw for loading screens or decorative borders; lunar.quest uses it as the page's primary spatial orientation system. 4. **Conversational deep-burgundy pop (tone inversion).** Deep burgundy (#5C0A2D) is used in 4% of designs, typically paired with gold and serif typography for luxury/opulent tones. lunar.quest inverts this entirely: the same burgundy becomes a mission command surface paired with acid green data readouts and casual second-person copy. The palette material is the same; the cultural register is completely different. 5. **Leaf-organic motifs in a space context.** Leaf-organic appears in 3% of designs, always in botanical or wellness contexts. Planting oversized leaf silhouettes inside a lunar mission HUD creates productive cognitive dissonance — the organic growth imagery collides with the command-surface aesthetic to suggest that the "lunar quest" is an inner, natural journey, not a mechanical one.