# Design Language for lunch.quest ## Aesthetics and Tone lunch.quest reframes the most ordinary ritual of the working day -- the lunch break -- as a small, repeating odyssey. Every weekday at noon a quiet quest begins: leave the desk, cross the city block, decide, return. The site treats that thirty-to-sixty-minute window with **Bauhaus seriousness** -- not nostalgia, but the Bauhaus conviction that geometry, primary structure, and honest materials can dignify a humdrum routine. Think Herbert Bayer's universal alphabet applied to a sandwich; Oskar Schlemmer's choreographed figures recast as office workers walking to a deli; a Kandinsky composition where the circles are clock faces and the diagonals are crosswalks. The mood is **elegant and sophisticated, never cute**. There is no cartoon hot dog, no comic-sans menu board. Instead: clean coastal light, a measured pace, the satisfaction of a well-composed plate rendered as a well-composed grid. The tone is that of a beautifully printed transit map for an itinerary you take every single day -- precise, generous with white space, faintly ceremonial. The visitor should feel that their lunch hour has been quietly elevated to the status of a designed object. The page is built as a **z-pattern journey**: the eye sweeps left-to-right across "noon," diagonally down to "the block," left-to-right across "the choice," diagonally down to "the return" -- four beats of a small daily epic, each beat a corner of a Bauhaus composition. ## Layout Motifs and Structure **Primary structure: z-pattern flow across full-bleed Bauhaus panels, anchored by a persistent geometric scaffold.** The viewport opens to a tall composition divided by a few thick, confident rules -- a single horizontal band at roughly 1/3 height, one vertical band at roughly the golden cut, and a large flat circle (clock-disc) parked at the first z-anchor (top-left). These three primitives -- line, circle, rectangle -- are the only structural vocabulary, in true Bauhaus reductive spirit. They never disappear; as the visitor scrolls, the circle migrates along the z-path, the bands re-proportion, and color blocks slide in behind them like printed plates registering one over another. Content sits in **four large z-stations**, each ~100vh: 1. **NOON (top-left anchor):** an oversized clock-disc whose hand sits at twelve; the domain wordmark "lunch.quest" set across the horizontal band; the ISO date in small caps tucked at the band's right terminus. The eye enters here. 2. **THE BLOCK (top-right -> diagonal):** a flat line-illustration of a city street -- awnings, a corner cafe, a traffic light, a figure mid-stride -- drawn entirely in single-weight strokes, animated as if being inked live. The diagonal of the crosswalk literally is the z-pattern's descending stroke. 3. **THE CHOICE (bottom-left anchor):** a Bauhaus "menu" -- not a list of dishes but a composition of colored geometric tiles (a yellow triangle = something light, a red square = something hearty, a blue circle = soup, etc.), arranged on an asymmetric modular grid. Hovering a tile reveals a single quiet line of prose about that kind of midday decision. 4. **THE RETURN (bottom-right terminus):** the figure walks back; the clock-disc's hand has moved to one; a closing line of prose; the horizontal band thins to a hairline and exits. The composition resolves -- back to the desk, quest complete, to be repeated tomorrow. Margins are wide and unapologetic (clamp(3rem, 8vw, 10rem)). Alignment is strict to an underlying modular grid (8px base, 12-column overlay that the visitor can almost feel). Nothing is centered for comfort -- everything is placed for composition. The persistent scaffold of line/circle/rectangle gives the long scroll the coherence of a single Bauhaus poster unfolding in time. ## Typography and Palette **Typography:** - **Display / Wordmark & Station Titles:** "Commissioner" (Google Fonts, variable, weights 200-900). Commissioner is a low-contrast humanist sans with a flared, slightly calligraphic skeleton -- versatile enough to feel geometric at heavy weights and refined at light. Used at weight 700-800 for "lunch.quest" at clamp(3.5rem, 11vw, 13rem), all lowercase, letter-spacing -0.02em, tightly kerned so the descenders of "q" and "g" interlock with the geometric scaffold. Station titles ("NOON", "THE BLOCK", "THE CHOICE", "THE RETURN") at weight 600, all caps, letter-spacing 0.32em, clamp(1.1rem, 2.4vw, 1.8rem) -- spaced like a Bauhaus exhibition title. - **Sub-display / Numerals:** "Commissioner" weight 300 for large clock numerals and the time-of-day markers, set very large (clamp(2rem, 6vw, 5rem)) and thin, so the figures read as precise instruments rather than decoration. - **Body / Prose:** "Commissioner" weight 400, 1.05rem, line-height 1.7, max-width 56ch. Italic forms (Commissioner has true italics) reserved for the single hover-line per menu tile. Keeping the whole site in one variable family is itself a Bauhaus move -- one rational system, exercised across its full range, rather than a clash of voices. - **Micro / Labels & Date:** "Commissioner" weight 500, 0.7rem, letter-spacing 0.18em, uppercase -- for the ISO date, tile labels, and the small "quest log" annotations. **Palette -- coastal-blend, the light of a seaside lunch:** - `#0d3b4f` — **Harbor Deep** (primary ink; deep teal-navy, the color of water under a pier — used for the geometric rules, the line-illustration strokes, and body text) - `#2e7d96` — **Tide** (mid coastal blue-green; secondary blocks, the soup-circle tile, hover states) - `#e9b44c` — **Noon Lemon** (warm sandy gold; the clock-disc, the "light meal" triangle tile, the diagonal crosswalk highlight) - `#d96c4a` — **Awning Coral** (sun-warmed terracotta-orange; the "hearty meal" square tile, accent strokes, the walking figure's path) - `#f4ede1` — **Salt Linen** (warm off-white paper ground; the dominant background, like sun-bleached canvas awning fabric) - `#a8c5c0` — **Sea Glass** (pale desaturated aqua; subtle panel tints, the scaffold's faint registration ghosts) - `#1c1c1a` — **Slate Ink** (near-black for the highest-contrast micro-labels and the final hairline) Color is applied as **flat printed plates** -- no gradients, no shadows softer than a single hard offset. The coastal blend keeps it bright and breezy where Bauhaus primaries would feel didactic; this is the Bauhaus palette gone to the shore for lunch. ## Imagery and Motifs - **The Clock-Disc:** A single large flat circle, Noon Lemon, with one thin Harbor Deep hand. It is the site's compass and protagonist's wristwatch. It appears at three scales: hero-size at NOON (hand at 12), medium at THE CHOICE (hand at 12:40-ish, the deliberating minutes), small at THE RETURN (hand at 1:00). The hand sweeps via SVG rotation as the visitor scrolls -- the quest measured in minutes. - **Line-Illustration City Block (city-urban motif):** All urban scenery is rendered in single-weight (2.5px) line illustration -- a corner cafe with a striped awning, a traffic light, a hydrant, a planter, a bus-stop sign, and a walking figure (a Schlemmer-esque simplified human: circle head, rectangle torso, two stride-lines). No fills except where a Bauhaus color-plate slides behind a shape. The illustration draws itself in via path animation, as if an architect is sketching the route. - **The Bauhaus Menu Tiles:** Geometry-as-cuisine. Yellow triangle (light), Coral square (hearty), Tide circle (soup/warm), a Sea Glass half-circle (something fresh), a thin Harbor Deep bar (a quick bite on the go). Arranged on an asymmetric modular grid with generous gutters. Each tile is purely flat color; meaning lives in the shape language, not in illustration. - **Registration Marks & Grid Ghosts:** Faint crop-marks and a barely-visible 12-column grid sit behind everything, like the print-shop scaffolding of a Bauhaus poster proof. They reinforce that this is a *composed object*. - **The Path (path-draw-svg motif):** A single continuous Awning Coral line traces the walking figure's route -- out the office, down the block, to the corner, and back -- literally drawing the z-pattern across the four stations. It is the connective thread that makes the four panels one journey. - **The Diagonal:** One bold diagonal -- the crosswalk at THE BLOCK -- is the only non-orthogonal element, and it doubles as the z-pattern's descending stroke. Bauhaus loved the dynamic diagonal against the static grid; here it is the moment of crossing the street. ## Prompts for Implementation **Build a full-screen narrative scroll, not a marketing page.** No CTA buttons, no pricing, no stat-grids, no testimonial blocks, no signup. The entire experience is the four-station z-pattern journey of a single lunch hour. The visitor scrolls; the quest unfolds. **Opening (NOON):** Background fades from Slate Ink to Salt Linen over 600ms. The horizontal Harbor Deep band draws in from the left (scaleX 0->1, transform-origin left, 700ms, cubic-bezier(0.65,0,0.35,1)). The Noon Lemon clock-disc scales up at the top-left z-anchor (scale 0.8->1, 500ms spring). The "lunch.quest" wordmark sets across the band -- each letter rising (translateY 24px->0, opacity 0->1) in a 40ms stagger. The clock hand snaps to 12. The ISO date types in at the band's right end (typewriter-effect, monospaced-feeling Commissioner 500, ~12 chars). Hold. **Scroll choreography:** As the visitor scrolls, drive everything off scroll progress (scroll-triggered + parallax). The clock-disc travels along the z-path -- top-left -> top-right -> bottom-left -> bottom-right -- via translateX/translateY tied to progress, its hand rotating from 12 toward 1 across the whole page. The persistent geometric scaffold re-proportions: the horizontal band shifts from 1/3 height to 2/3 height between stations; color-plates slide in behind shapes from offscreen (translateX, 400ms ease-out) as each station enters. **THE BLOCK:** When this station enters viewport, the line-illustration city scene draws itself -- each SVG path animates stroke-dashoffset from full to 0, staggered (cafe first, then awning, traffic light, hydrant, planter, the figure last), total ~1.8s. The crosswalk diagonal draws last, in Noon Lemon, and as it completes, the walking figure begins a slow translateX stride across it. The Awning Coral route-path extends with it. **THE CHOICE:** The Bauhaus menu tiles enter on a stagger (each: scale 0.85->1 + opacity, 60ms apart, gentle elastic). On hover, a tile lifts with a single hard offset shadow (4px 4px 0 Harbor Deep, no blur), rotates ~2deg, and reveals one italic line of prose beneath it (clip-path or max-height reveal, 280ms). Keep prose to a single quiet sentence per tile -- musings on the small daily decision, never a description of food. The clock-disc here reads ~12:40 (the deliberating minutes). **THE RETURN:** The figure walks back along the now-complete Awning Coral path (the path-draw reverses direction visually). The clock hand reaches 1:00. The horizontal band thins (scaleY -> hairline) and exits left. A final line of prose fades in, centered to its own column, Commissioner 400 italic. The composition settles into stillness -- the quest is complete, and implicitly: tomorrow it begins again. **Motion principles:** Everything moves with Bauhaus discipline -- linear or single-easing transitions, hard offsets instead of soft shadows, geometry that slides and rotates and scales but never wobbles or bounces excessively. The one exception is the gentle elastic on the menu tiles, which earns its softness. Respect `prefers-reduced-motion`: collapse the journey into the four static composed panels, all SVG paths drawn, clock at 1:00. **Texture:** A very faint paper grain over Salt Linen (SVG fractalNoise, opacity 0.04) so the flat plates read as printed ink on canvas. No glassmorphism, no neumorphism, no gradients. ## Uniqueness Notes 1. **The lunch hour as a Bauhaus poster unfolding in time.** No other design in the portfolio treats a mundane daily ritual as a four-corner geometric composition that the visitor literally walks through. The clock-disc-as-protagonist (hand sweeping 12 -> 1 across the whole scroll) is a singular structural device -- a UI clock repurposed as the narrative spine. 2. **Geometry-as-cuisine menu tiles.** Instead of food photography or illustrated dishes, the "menu" is a Bauhaus color-shape composition (yellow triangle = light, coral square = hearty, etc.) where meaning lives entirely in the shape language. This is a genuinely different take on a "menu" section than anything food-photographic in the portfolio. 3. **The z-pattern made literal as a crosswalk-and-route.** The descending stroke of the z-pattern is the crosswalk diagonal at THE BLOCK, and the Awning Coral path-draw-svg line is the walker's actual route connecting all four stations -- layout grammar fused with narrative content. 4. **Single variable family (Commissioner) exercised across its full weight range** as a Bauhaus rational-system gesture, against the portfolio's heavy reliance on mono and serif pairings. 5. **Coastal-blend palette applied as flat printed plates** -- Bauhaus rigor with seaside light, where the portfolio overwhelmingly leans warm-gradient. No gradients, no soft shadows: only hard offsets and registration ghosts. Chosen seed/style: aesthetic: bauhaus, layout: z-pattern, typography: commissioner-versatile, palette: coastal-blend, patterns: path-draw-svg, imagery: line-illustration, motifs: city-urban, tone: elegant-sophisticated Avoided per frequency analysis: corporate aesthetic (93%), centered layout (93%), gradient/warm palette (96%/91%), mono typography (94%), mysterious-moody tone (94%), photography/minimal imagery (66%/69%). This design deliberately uses the rare end of every axis: bauhaus (4%), z-pattern (7%), commissioner-versatile (0%), coastal-blend (2%), line-illustration (4%), city-urban (1%), elegant-sophisticated (6%).