# Design Language for lunar.quest ## Aesthetics and Tone lunar.quest is a **y2k-futurism** travel brochure for the Moon, as imagined by a 1999 design studio that believed lunar tourism would launch by 2005 -- and rendered the whole fantasy not in the usual cold chrome, but in the **warm terracotta of a Martian-adjacent dream**: clay-orange, amber, burnt sienna, the color of a desert at golden hour bottled inside a glossy bubble interface. The site is the surviving promotional microsite for "LUNAR.QUEST -- Your Passage to the Sea of Tranquility," half real-estate prospectus, half pilgrimage map, fully convinced of itself. The mood is **raw-authentic** crossed with the irrepressible optimism of millennium-era web design. Nothing here is slick in the 2020s sense -- the gradients are a little too saturated, the bevels a little too proud, the bubble buttons a little too round, and that is exactly the point. It reads like a found artifact: a brochure that promised something that never quite happened, preserved with all its earnestness intact. There is dust on the chrome. The aspirational copy is unembarrassed. The Y2K glossiness is genuine, not ironic -- but it has aged into something almost tender. Imagine: the warmth of a 1970s NASA mission patch, the bubble-translucency of a Nokia 5510 menu screen, the f-pattern reading rhythm of a printed travel catalog, and the orange-clay glow of a terrarium left in a sunbeam. A quest brochure for a journey measured in 384,400 kilometers and forty years of waiting. ## Layout Motifs and Structure **Primary layout: f-pattern with full-bleed terracotta panels and glassmorphic card clusters.** The page is built on a deliberate **F-pattern** -- the reading shape of a printed brochure being skimmed. The eye lands top-left on the wordmark, sweeps right across a horizontal hero band, drops down the left margin past a vertical "mission log" rail, then sweeps right again across the first content shelf, drops again, sweeps right once more. The F is not hidden -- it is structural. A thin amber baseline grid is faintly visible (rgba terracotta at 4% opacity, 1px lines every 32px) so the brochure-print feeling is literal. **The Brochure-Quest structure (vertical scroll, ~520vh):** 1. **The Cover Plate (hero, 100vh)** -- Full-bleed terracotta-warm gradient. The wordmark "LUNAR.QUEST" sits top-left in display-bold caps; a single huge bubble (a glossy translucent sphere, 40vw wide, anchored bottom-right and bleeding off the edge) holds a faint contour map of the Moon's near side inside it. A horizontal strip of "departure board" type runs along the upper third: DESTINATION: MARE TRANQUILLITATIS / DISTANCE: 384,400 KM / FIRST PROMISED: 1999. 2. **The Itinerary Rail** -- A left-margin vertical column (the descending stroke of the F) listing the five legs of the quest: 1 LAUNCH WINDOW, 2 TRANS-LUNAR COAST, 3 ORBITAL INSERTION, 4 DESCENT, 5 THE TRANQUIL SHORE. Each leg is a small glossy bubble-bullet. As you scroll, an SVG path **draws itself** down the rail, connecting the bubbles -- the trajectory being plotted in real time. 3. **The Coast Shelf (horizontal sweep)** -- The first crossbar of the F. A wide band of glassmorphic cards laid edge to edge: "WHAT YOU WILL SEE," "WHAT YOU WILL FEEL," "WHAT YOU WILL CARRY HOME." Each card is a frosted terracotta panel (backdrop blur, warm tint, fat 22-32px corner radius, a soft inner bevel-highlight at the top edge). 4. **The Promised Land Spread** -- Full-bleed. A large path-drawn line illustration of a lunar horizon (just two or three curved strokes, drawn on scroll) with the Earth as a small glossy bubble low on the line. Caption set in display-bold, ragged-left, brochure-confident. 5. **The Logbook** -- Returning to f-pattern: left rail of dated entries (1999, 2007, 2019, 2025 -- "still waiting"), right side a wide shelf of bubble-framed "postcard" cards that never got sent. 6. **The Departure Stamp (footer)** -- A single oversized glossy bubble containing a faux boarding-stamp: SEAT UNASSIGNED / GATE: ANY CLEAR SKY. The wordmark repeats, smaller, dusty. No CTA stacks, no pricing tiers, no stat grids. The "numbers" that appear (384,400 km, 1969, 1999) are dates and distances, set as brochure marginalia, never as conversion widgets. ## Typography and Palette **Typography** - **Display / Wordmark & Headings:** "Anton" (Google Fonts) -- an ultra-condensed, heavy display sans with relentless presence. Used for "LUNAR.QUEST," section titles, and the largest brochure callouts at clamp(2.6rem, 9vw, 8.5rem). All-uppercase. Letter-spacing tightened to -0.01em at large sizes so the letters press together like a printed cover headline. This is the **display-bold** voice -- loud, certain, mid-millennium. - **Secondary Display / Departure Board:** "Bungee" (Google Fonts) -- a chunky signage display with a faintly toy-like, bubble-ish weight. Used for the "departure board" strips, leg numbers, and stamp text at clamp(0.8rem, 1.6vw, 1.4rem), uppercase, letter-spacing 0.16em. Renders in a slightly inset/embossed treatment (text-shadow: 0 1px 0 rgba(255,243,230,0.6), 0 -1px 0 rgba(120,52,30,0.4)). - **Body / Brochure Copy:** "Spline Sans" (Google Fonts) -- a humanist sans with a warm, optimistic terminal shape; weights 400 and 600. Used for all running text at clamp(1rem, 1.15vw, 1.2rem), line-height 1.65, set ragged-left in measured columns (max ~60ch) like a catalog. Confident, plainspoken -- the raw-authentic register. - **Numerals / Marginalia:** "Bungee" for the big departure-board figures; "Spline Sans" 600 small-caps-feel (letter-spacing 0.08em) for the dated logbook entries. **Palette -- terracotta-warm** - `#C65A3B` -- Terracotta Primary. The signature clay-orange; dominant gradient anchor, headline color on light grounds. - `#E8855A` -- Amber Glow. The warmer mid-tone; the second stop in most warm gradients, glossy bubble highlights. - `#7A3220` -- Burnt Sienna Deep. Near-black-brown; body text on light grounds, the dusty footer ground, inner-bevel shadows. - `#F4E3CE` -- Bone Cream. The "paper" of the brochure; card text on dark grounds, baseline-grid lines, page negative space. - `#FCD9A8` -- Sand Light. The pale highlight; top-edge bevels on bubbles and cards, gleam stops. - `#3A2A28` -- Cocoa Shadow. The deepest ground for full-bleed dark spreads and shadow casts. - `#9FB4C9` -- Pale Earthrise Blue (single, sparing accent only). Used exactly once or twice -- the small "Earth bubble" in the line illustrations -- so the otherwise relentlessly warm world has one cool dot of homesickness. Glassmorphic cards: `background: rgba(232,133,90,0.16)`; `border: 1.5px solid rgba(252,217,168,0.45)`; `backdrop-filter: blur(14px) saturate(120%)`; top inner highlight via `box-shadow: inset 0 1.5px 0 rgba(252,217,168,0.6)`. Bubbles: `radial-gradient(circle at 32% 28%, #FCD9A8, #E8855A 38%, #C65A3B 70%, #7A3220 100%)` with a small bright specular dot (a white-ish `#FFF6E8` blurred ellipse) at 30%/25%. ## Imagery and Motifs **Core visual elements:** 1. **Glossy Translucent Bubbles** -- The defining motif. Y2K-era bubble UI, but warm: spheres built from warm radial-gradients with a single specular highlight and a soft cast shadow below. They appear as: the hero's giant Moon-holding bubble, the itinerary leg-bullets, the footer's boarding-stamp capsule, hover states on cards (a small bubble inflates from the cursor point). Sizes 14px to 40vw. They evoke water droplets, soap bubbles, the rounded blobs of millennium interface design, and -- in this context -- pressurized habitat domes. 2. **The Self-Drawing Trajectory (path-draw-svg)** -- A single continuous SVG line that draws itself as the user scrolls, threading down the itinerary rail and reappearing across the full-bleed spreads as the lunar horizon and the coast arc. Implemented with `stroke-dasharray`/`stroke-dashoffset` tied to scroll progress. Stroke: 2.5px, `#7A3220`, with a faint dashed "planned route" version (`#C65A3B` at 30%, dasharray 6 6) drawn just ahead of it -- the plotted course vs. the path actually traveled. 3. **Glassmorphic Brochure Cards** -- Frosted terracotta panels with generous corner radius and a top-edge gleam. They hold the "what you will see/feel/carry" copy and the unsent postcards. On hover they lift 4px and the backdrop blur deepens slightly, like a card picked off a table into the light. 4. **The Faint Baseline Grid** -- A barely-there warm horizontal rule grid (rgba terracotta, 4% opacity, every 32px) under the whole page, making the brochure-print metaphor literal. Occasionally a leg-number or marginalia note sits hung from a grid line like a printer's registration mark. 5. **Departure-Board Strips** -- Horizontal embossed-type bands (Bungee, wide tracking) carrying mission marginalia: distances, dates, the "FIRST PROMISED: 1999" line. They behave like the flapping split-flap boards of an airport, but warm-toned -- a small CSS flip animation on a couple of characters when a strip first enters view. 6. **Dust & Patina** -- A subtle grain overlay (a tiled noise data-URI at ~5% opacity, warm-tinted via blend mode) over full-bleed panels, so the chrome-bright Y2K gloss reads as *aged* gloss -- a brochure that has been handled. One or two hairline "fold creases" (faint lighter diagonal lines) across the hero, as if the page had been folded into a pocket. ## Prompts for Implementation **Full-screen narrative experience:** Build lunar.quest as one continuous vertical scroll (~520vh) -- a brochure being read cover to cover, top to bottom. No scroll-snap; let the self-drawing trajectory line and the floating bubbles provide continuity at every scroll position. The terracotta warmth is constant; what changes is the *register* -- cover plate, itinerary rail, content shelves, full-bleed promised-land spreads, the logbook, the departure stamp. **Honor the F-pattern literally.** Major scenes alternate between (a) a left-margin vertical rail (itinerary legs, logbook dates) -- the descending stroke -- and (b) wide horizontal card shelves -- the crossbars. The faint 32px baseline grid runs under everything. Headlines hang top-left of their scene. The eye should be able to skim the page in an F and get the whole quest. **The trajectory draw (path-draw-svg, the signature interaction):** A single SVG `` (or a small set of joined paths) overlays the scroll. Use `getTotalLength()`, set `stroke-dasharray` and `stroke-dashoffset` to that length, then map `scrollY / maxScroll` to `strokeDashoffset` so the line draws itself as the reader descends. Draw a faint dashed "planned route" path slightly *ahead* of the solid "traveled" path. Where the line crosses the itinerary rail it threads through the leg-bubbles; where it crosses full-bleed spreads it becomes the lunar horizon and the coast arc. This is the spine of the whole site -- give it real care. **Y2K bubbles, warm not chrome:** Build bubbles as `
`s or pseudo-elements with warm radial-gradients (`#FCD9A8 -> #E8855A -> #C65A3B -> #7A3220`), a small blurred `#FFF6E8` specular dot near the top-left, a soft drop-shadow below, and a slow `translateY` float (8-12px oscillation, 5-7s, staggered). The hero bubble (40vw, bottom-right, bleeding off-edge) contains a faint SVG contour map of the Moon's near side. On card hover, a small bubble scales up from `scale(0)` at the cursor point and pops (`scale(1.15)` then fades). **Glassmorphic cards:** `background: rgba(232,133,90,0.16)`; `backdrop-filter: blur(14px) saturate(120%)`; `border: 1.5px solid rgba(252,217,168,0.45)`; `border-radius: 26px`; top inner gleam via `box-shadow: inset 0 1.5px 0 rgba(252,217,168,0.6), 0 18px 40px -12px rgba(58,42,40,0.4)`. On hover: `translateY(-4px)`, blur to 18px. Stagger card entrances (fade + 16px rise, 90ms apart). **Departure-board strips:** Horizontal bands of Bungee uppercase with 0.16em tracking and an embossed text-shadow. When a strip enters the viewport, run a brief split-flap flip on two or three glyphs (`rotateX` swap on a `::before`/`::after` pair) before settling. **Patina & honesty:** Tile a faint warm noise data-URI at ~5% opacity over full-bleed panels (`mix-blend-mode: overlay` or `soft-light`). Add one or two hairline diagonal "fold crease" gradients across the hero. Keep the copy plainspoken and a little melancholy -- this brochure made a promise. The dated logbook entries (1999 -> "still waiting", 2025) should land quietly, never as a stat grid. **Display-bold headlines:** Anton, uppercase, tracking -0.01em at large sizes, sometimes spanning the full content width and wrapping mid-phrase like a printed cover headline. Let them be loud and certain -- the millennium believed. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, signup forms, cookie-style modals, generic centered-hero SaaS framing. There is nothing to buy here -- only a passage to imagine. ## Uniqueness Notes 1. **Warm Y2K-futurism instead of chrome Y2K.** Y2K-futurism appears in only ~2% of designs, and where it does it is almost always cold metallic chrome (see gabs.games). lunar.quest is the only site to render the millennium-bubble aesthetic entirely in **terracotta-warm** clay-orange and amber -- the gloss is real, but it glows like desert evening rather than gleams like steel. The pairing of terracotta-warm palette (~3%) with y2k-futurism is, as far as the portfolio shows, unprecedented. 2. **The brochure-that-never-happened framing.** Rather than a celebratory space-tourism pitch, the site is staged as a *found artifact* -- a 1999 promotional microsite preserved with all its earnest, unfulfilled optimism intact, complete with dust on the chrome, fold creases, and a logbook of years spent waiting. The **raw-authentic** tone (~6%) is doing real narrative work, not just texturing a corporate page. 3. **Literal F-pattern as structure, not just reading guideline.** F-pattern layout appears in only ~1% of designs. Here it is made structural and visible -- alternating left-margin rails and wide horizontal shelves over a faint 32px baseline grid -- so the page physically reads like a printed travel catalog being skimmed. 4. **The self-drawing trajectory as the site's spine.** A single path-draw-svg line threads the entire 520vh scroll -- down the itinerary rail through the bubble-bullets, then out across full-bleed spreads as the lunar horizon -- with a faint dashed "planned course" drawn just ahead of the solid "traveled" line. path-draw-svg is common (~28%) but using it as one continuous, scroll-driven structural element across the whole page (rather than as a decorative flourish) is distinctive. 5. **Bubble-playful motifs (~2%) reframed as pressurized habitat domes.** The Y2K bubbles aren't just cute -- in a lunar-quest context they double as the rounded domes of imagined Moon habitats, giving the playful blob-shapes a quiet sci-fi second reading. **Avoided overused patterns from frequency analysis:** corporate aesthetic (93%), centered layout (93%), counter-animate (91%), mysterious-moody tone (94%), mono typography (94%), photography imagery (66%) -- none of these are used. This design instead leans on the underused: y2k-futurism, f-pattern, display-bold, terracotta-warm, glassmorphic-cards, bubble-playful, raw-authentic. **Chosen seed/style:** aesthetic: y2k-futurism, layout: f-pattern, typography: display-bold, palette: terracotta-warm, patterns: path-draw-svg, imagery: glassmorphic-cards, motifs: bubble-playful, tone: raw-authentic.