# Design Language for lunch.quest ## Aesthetics and Tone lunch.quest is a **retro-futuristic mission control for the midday meal** — a site that reimagines the act of finding lunch as a tactical HUD operation beamed from a 1980s orbital space station retrofitted with 2040s vector AI. The dominant aesthetic is *optimistic retro-futurism*: warm amber phosphor glows against deep space-navy panels, every UI element framed as a scanline-lit instrument panel. The mood is bright, playful, and self-aware — this is not cold tech dystopia but a sun-drenched space opera where the mission briefing is "find a good sandwich." Inspiration: NASA mission control circa 1969 reinterpreted by a Pixar production designer who grew up on Futurama. Panels are bold but not aggressive. The geometry is deliberate — circles within squares within hexagons, all constructed from vectors with no photographic textures anywhere. Every element has a purpose label in condensed geometric caps as if annotated by a mission engineer. The overall tone is **optimistic-bright**: high-energy color without darkness, space without emptiness. The background is deep but luminous — not black, but a rich deep indigo-cobalt that still reads as alive and saturated. Amber, warm gold, and a vivid cyan-teal form the analogous accent system, all pulled from the same warm-to-cool sweep of the color wheel around yellow-green-cyan. ## Layout Motifs and Structure The page is structured as a **bento-box mission dashboard** — a grid of named instrument panels, each a self-contained rectangular cell with a visible border, a top-left label in all-caps condensed type, and a bottom-right status indicator. No cell bleeds into another. Every cell has a precise function, like the displays on a real mission control console. **Grid system:** - Desktop: a 12-column, 8-row explicit CSS Grid. Major panels snap to named grid areas: `MISSION-HEADER`, `RADAR`, `FEED`, `STATUS-A`, `STATUS-B`, `MAP`, `LOG`, `COMM`. - The panels are asymmetric in size — hero cell is 6-wide × 3-tall; the radar cell is 3-wide × 3-tall; status cells are 3-wide × 1-tall each — creating visual hierarchy through *area*, not decoration. - Mobile: single column, cells stack as full-width instrument panels, maintaining top-label/bottom-status anatomy. **Spatial relationships:** - Cell gaps are exactly 8px — a deliberate thin seam, not a gutter, with a hairline `#2A3F6F` border on each cell. - Inside each cell: 24px inset padding on all sides. The content floats in a contained field. - Corner radii: 0px on outer cell borders; 4px on inner sub-elements. The cells feel like real instrument cases. - A persistent top-of-page **status bar** (40px tall, full-width) serves as the global HUD: shows mission clock, a blinking green READY signal, and the wordmark. **Scroll behavior:** The status bar is sticky. The bento grid scrolls below it. On scroll, each panel's label fades from `opacity: 0.4` to `opacity: 1` as it enters the viewport, as if the panel is powering on. ## Typography and Palette **Typography — geometric-sans family, all Google Fonts:** - **Display / Panel Labels:** `Orbitron` (Google Fonts) — weight 700–900, all-caps, letter-spacing 0.12em. Used for the wordmark `LUNCH.QUEST`, all panel header labels (`MISSION:`, `RADAR:`, `STATUS:`), and the HUD status bar. Reads as pure mission-control geometry. - **Body / Descriptions:** `DM Sans` (Google Fonts) — weight 400 and 500. Used for all paragraph text, menu descriptions, location names. Humanist geometry that stays legible at small sizes without losing the clean aesthetic. - **Monospace / Data Readouts:** `Share Tech Mono` (Google Fonts) — used exclusively for numerical readouts: distance in meters, time remaining, coordinates, percentages. Pairs with Orbitron to create instrument-panel authenticity. **Scale:** Display at clamp(2.4rem, 5vw, 4.2rem); panel labels at 0.65rem / Orbitron 700; body at 1rem / DM Sans 400; mono data at 0.8rem / Share Tech Mono. **Palette — analogous sweep from warm amber through cool cyan:** - `#0D1B3E` — Deep Mission Navy — primary background, all cell backgrounds - `#1A2F5A` — Panel Interior — slightly lighter than background, used inside bento cells - `#2A3F6F` — Grid Seam — cell borders and structural lines - `#F5A623` — Mission Amber — primary accent, Orbitron labels, active status indicators, the wordmark glow - `#FFD166` — Solar Yellow — hover states, highlight halos around active elements, Lottie animation fills - `#06D6A0` — Teal Signal — secondary accent, map pings, "READY" status lights, link underlines - `#118AB2` — Cobalt Telemetry — chart fills, progress bars, the radar sweep arm - `#FFFFFF` at 90% opacity — primary body text on dark panels ## Imagery and Motifs **Imagery is exclusively vector-art** — no photography anywhere. Every visual element is an SVG constructed from geometric primitives: circles, arcs, rectangles, and polygons. Zero organic curves from Bezier handles; only compass-and-ruler geometry. **Sci-fi HUD motifs throughout:** - **Radar sweep panel:** A circular SVG radar display — rotating sweep arm in `#06D6A0`, blip pings for nearby restaurants animating in with `scale(0)` → `scale(1)` pulses. Distance rings at 0.25km intervals. Each ping is a diamond shape with a callout label. - **Mission clock:** Digital countdown/countup readout in Share Tech Mono. Ticks every second via JS. Displays "T+00:00:00 SINCE LAST QUEST" in amber. - **Hexagonal category icons:** Each food category (ramen, tacos, salads, etc.) is a flat vector icon set in a hexagonal frame with a `#2A3F6F` background and `#F5A623` stroke. Icons are 40×40px on a 24-grid, 1.5px stroke weight. - **Scan lines overlay:** A CSS `repeating-linear-gradient` overlay at 3% opacity creates a subtle CRT scanline texture across the hero cell only — adds retro-futuristic depth without obscuring content. - **Corner brackets:** Every panel has vector corner brackets (L-shaped, 12×12px, 1.5px stroke in `#2A3F6F`) at all four corners — a classic HUD framing device. These are pure CSS `::before`/`::after` pseudo-elements with clip-path. **Lottie animations (the signature interactive layer):** - **Hero panel:** A Lottie animation plays — a stylized vector-art astronaut in a spacesuit holding a lunch tray, floating in zero gravity. The animation loops: tray wobbles, steam rises from a bowl in geometric puffs. Rendered entirely in flat vectors matching the palette. - **Loading state:** A Lottie spinner — not a generic circle but a radar-sweep arc with the Orbitron "SCANNING..." label below it. Plays while location data loads. - **Success ping:** When a lunch spot is selected, a Lottie burst plays — geometric diamond sparks radiate outward from the selected radar blip in `#FFD166`. **Decorative vector constellation map:** A full-width SVG at the page footer — abstract star map where the "stars" are tiny restaurant location dots connected by thin gold lines, forming constellations named after meal categories. Pure atmosphere, no interactivity. ## Prompts for Implementation Build lunch.quest as a **single-page mission control interface** that makes the act of finding lunch feel like a NASA operation. No pricing blocks, no testimonial carousels, no stat grids. Pure atmosphere and function. **Structural blueprint (bento grid, top to bottom):** 1. **HUD STATUS BAR (full-width, sticky, 40px):** `#0D1B3E` background with a 1px `#2A3F6F` bottom border. Left: wordmark `LUNCH.QUEST` in Orbitron 800, `#F5A623`, 1rem. Center: blinking green dot (`#06D6A0`) + `SYSTEM READY` in Orbitron 700, 0.6rem, `#06D6A0`. Right: live mission clock in Share Tech Mono, `#FFD166`. Blink via CSS `animation: blink 1.2s step-start infinite`. 2. **MISSION HEADER CELL (col 1-6, row 1-3):** The hero bento cell. Black-panel inset with the floating astronaut Lottie animation on the right half. Left half: `MISSION:` label in Orbitron 700 at 0.65rem `#F5A623`, then headline `YOUR NEXT QUEST AWAITS` in Orbitron 900 at clamp(2rem, 4vw, 3.6rem) white. Below: a single-line location input styled as a terminal prompt — `> COORDINATES:` prefix in amber, text input in DM Sans. Scanline overlay at 3% opacity covers this cell only. 3. **RADAR CELL (col 7-9, row 1-3):** Circular SVG radar display, animated sweep arm, pinging restaurant blips. Each blip shows restaurant name on hover in a small DM Sans tooltip framed with corner brackets. The sweep arm is a `conic-gradient` on a `` element that rotates 360° every 4 seconds. 4. **STATUS-A CELL (col 10-12, row 1):** `TODAY'S MISSION` label. DM Sans body text with the day's featured quest — a curated lunch pick. Simple, no CTA. 5. **STATUS-B CELL (col 10-12, row 2):** `CONDITIONS` label. Weather-style readout: TEMP `72°F`, `WALK: 0.3km`, `QUEUE: SHORT` — all in Share Tech Mono with `#06D6A0` value highlights. 6. **STATUS-C CELL (col 10-12, row 3):** `LAST QUEST` label. A miniature log entry: date + place + one-line verdict, all DM Sans. 7. **FEED CELL (col 1-9, row 4-6):** The main content field — a scrollable list of lunch options rendered as mission briefing cards. Each card is its own sub-bento panel with: hexagonal food-category icon (top-left), restaurant name in Orbitron 700, details in DM Sans, distance in Share Tech Mono with a `#06D6A0` blip indicator. Cards animate in with `translateY(20px) → translateY(0)` on scroll intersection. 8. **MAP CELL (col 10-12, row 4-6):** A stylized vector map — abstract, not realistic. Street grid drawn as thin `#2A3F6F` lines on `#0D1B3E`. Restaurant locations as `#F5A623` hexagonal pins. Animated path trace from current location to selected restaurant when a feed card is hovered. 9. **LOG CELL (col 1-6, row 7-8):** `MISSION LOG` — recent quests as a monospace log stream. Each entry: timestamp in Share Tech Mono, restaurant name in DM Sans, outcome tag (`SUCCESS`, `ABORT`, `RETRY`) in Orbitron 600 with color coding (green/red/amber). New entries scroll in from the top with `overflow: hidden` and a CSS clip animation. 10. **COMM CELL (col 7-12, row 7-8):** Abstract vector constellation footer — SVG star map of restaurant dots. `LUNCH.QUEST` wordmark centered. `MISSION CONTINUES` tagline in Orbitron 400. Social links as minimal vector icon buttons with corner-bracket hover frames. **Animation principles:** - All Lottie files should be lightweight (< 80KB each), vector-only, using the site palette colors. - Scroll-triggered panel power-on: `IntersectionObserver` on each `.panel` element, adds `.powered` class which transitions `border-color` from `#2A3F6F` to `#F5A623` over 300ms and fades the panel label from 0.4 to 1.0 opacity. - Radar sweep: `requestAnimationFrame` loop, canvas arc fill with `rgba(6,214,160,0.15)` gradient. - No parallax. No scroll-jacking. All motion is additive (adds to the experience, never required to read content). ## Uniqueness Notes 1. **Bento-box as mission control console (registry first).** The frequency data shows `bento-box` layout at 0% in the registry. This design uses CSS named grid areas to create an authentic instrument-panel bento that references real mission control console anatomy — not the trendy rounded-card bento of SaaS dashboards, but a functional-geometry layout where every panel has a type label and a status indicator. 2. **Lottie animation as primary character illustration.** The frequency data shows `lottie-animation` at 0%. Using Lottie for a floating astronaut character — not a UI micro-interaction — as the hero visual makes this site image-first without using photography. The astronaut is the mascot, the brand, and the main illustration simultaneously. 3. **Analogous amber-to-cyan palette on deep navy.** The palette avoids the overused `glassmorphism` (21%) and `dark-mode` (14%) treatments. Instead of glass blur panels, these are opaque instrument panels. The analogous color sweep from `#F5A623` amber → `#FFD166` yellow → `#06D6A0` teal on `#0D1B3E` navy is a specific palette that does not appear in the existing registry. 4. **Vector-art + sci-fi HUD as a unified non-photography system.** Photography is at 90% in the registry — this design uses zero photography. The entire visual system is SVG/canvas/Lottie, giving it a fully constructed, authored feel versus assembled stock imagery. 5. **Chosen seed:** `aesthetic: retro-futuristic, layout: bento-box, typography: geometric-sans, palette: analogous, patterns: lottie-animation, imagery: vector-art, motifs: sci-fi-hud, tone: optimistic-bright`. Avoided overused patterns: `hand-drawn` (60%), `editorial` (51%), `photography` (90%), `glassmorphism` (21%).