# Design Language for lunch.day ## Aesthetics and Tone lunch.day is a single-page zine — a **glitch-soaked midday manifesto** about the most underrated hour of the workday. The premise: lunch is sacred, lunch is a glitch in the productivity matrix, lunch is the 60 minutes the system forgot to monetize. The site reads like a photocopied magazine spread that got run through a broken scanner — full-bleed columns, oversized retro-display headlines, hand-set captions, and **chromatic-aberration glitch artifacts** smeared across the layout like ketchup on a Xerox. The mood is **approachable-casual** with a mischievous streak: this is not a corporate "wellness break" deck, it is a friend texting you "drop everything, it's noon." Warm and human at the core, but visually rebellious — the kind of zine you'd find stapled to a community-board cork next to a flyer for a free guitar lesson. Inspiration: 1970s diner placemats, RISO-printed punk fanzines, the color-channel-split aesthetic of VHS tracking errors, and the deliberately-misregistered layouts of early-2000s indie magazines like *Bidoun* and *Apartamento*. Nothing here is slick. Edges are slightly off. Headlines occasionally **judder** as if the page itself is hungry. But underneath the noise, the typography is generous and the whitespace is honest — it wants you to actually read it, then go eat. ## Layout Motifs and Structure **Primary layout: magazine-spread with broken-grid columns and layered-depth collage.** The page is built as a sequence of full-viewport **"spreads"** — left page / right page compositions divided by an asymmetric gutter that wanders (sometimes 38/62, sometimes 55/45, never centered). Each spread is a self-contained editorial moment: - **Spread 1 — The Cover.** Oversized retro-display masthead "LUNCH.DAY" set on a slight tilt (`rotate(-2.5deg)`) and exploded into three offset color channels (cyan / magenta / yellow ghosts behind a black master). A subhead reading "the daily one-hour rebellion against the calendar" tucked into the bottom-left like a cover line. Tilted "issue №" badge in the top-right corner. - **Spread 2 — The Editor's Letter.** A two-column justified text block (left page) about why noon matters, with a giant pull-quote bleeding off the right edge of the page, rotated 90° so you tilt your head. Marginalia notes in the gutter, set in monospace, like a copy-editor's pencil. - **Spread 3 — The Menu Manifesto.** A list of "lunch rights" laid out as a numbered menu — each item a horizontal strip with a number in a circle, a bold retro-display line, and a casual one-liner below. Each strip has a faint **tilt-3d** hover (perspective lift, ~6deg) like you're picking it up off the table. - **Spread 4 — The Centerfold.** A full-bleed abstract-shapes composition: overlapping organic blobs, half-circles, sausage shapes, and torn-paper rectangles in the triadic palette, layered at different z-depths with drop shadows, the whole thing slowly drifting on parallax as you scroll. Overlaid: "TAKE THE WHOLE HOUR" in massive condensed display, channel-split. - **Spread 5 — The Back Page.** A "classifieds" grid of tiny tilted cards — fake small-ads ("WANTED: a coworker who respects the 1pm hard stop", "FOUND: 47 minutes of peace, contact noon") — playful, hand-set, slightly crooked. - **Spread 6 — Colophon.** Small print, printer's marks (registration crosshairs, color bars), a single closing line: "now close this tab and go eat something." The CMYK color-bar strip from a print proof runs along the very bottom. The grid is intentionally **broken**: baselines don't always align, images overlap text columns, and a thin "registration error" — a 2–4px duplicate of an element in cyan or magenta — sits behind key blocks. A faint **6-column ruled grid** (like notebook paper / a layout grid) is visible at ~5% opacity behind everything, reinforcing the "printed page" feeling. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Mastheads & Headlines:** "Bungee Shade" — a chunky retro-display face with a built-in extruded shadow, used for "LUNCH.DAY" and spread titles at `clamp(3.5rem, 13vw, 11rem)`. Its blocky, signage-poster character is the backbone of the retro-display direction. Paired occasionally with "Bungee" (the flat sibling) for tighter sub-headlines. - **Secondary Display / Pull-quotes:** "Fredoka" (weight 600/700) — a warm, rounded, slightly retro sans for big friendly pull-quotes and the "lunch rights" item titles. Keeps the tone approachable rather than aggressive. - **Body / Editorial text:** "Newsreader" (weights 300/400, with italic) — a softly contrasted serif designed for screen reading; gives the "editor's letter" a genuine magazine-column feel. Justified text, optical margin feel, drop caps on opening paragraphs. - **Marginalia / Captions / Colophon / Small-ads:** "Space Mono" (weights 400/700, italic) — typewriter-ish monospace for the copy-editor marginal notes, image captions, printer's marks, and classifieds. The "manual paste-up" voice. **Palette — triadic, warm-leaning, with a paper substrate:** - `#f4ede0` — **Newsprint Cream** (primary background — warm off-white "paper") - `#1a1714` — **Carbon Ink** (primary text & the "master" channel of glitch type — near-black with a brown undertone) - `#e8472b` — **Tomato Red** (triadic anchor 1 — ketchup / diner-sign red, headlines & accents) - `#2b6be8` — **Cobalt Blue** (triadic anchor 2 — the "cyan-ish" glitch channel & link color) - `#f2c200` — **Mustard Yellow** (triadic anchor 3 — highlight blocks, the "yellow" glitch channel, sticky-note callouts) - `#d63a8f` — **Magenta Misprint** (secondary glitch channel only — never a fill, only a 2–4px chromatic-aberration ghost) - `#7c8a6e` — **Pickle Green** (rare tertiary — small-ad borders, colophon marks, a tired green for balance) - `#0c0a09` — **Deep Carbon** (the CMYK proof-bar strip, registration crosshairs) Tomato / Cobalt / Mustard form the true triad; the rest are substrate and print-process artifacts. Color is applied in **flat fills and offset duplicates**, never gradients — this is a printed page, not a glowing screen. ## Imagery and Motifs - **Abstract-shapes collage:** the centerfold and section dividers use a vocabulary of cut-paper forms — fat half-circles, lozenge "sausage" shapes, wobbly blobs (think a fried egg), torn-edge rectangles, dotted-line "cut here" scissors paths. All pure CSS / inline SVG, flat-filled in triadic colors, layered with subtle drop shadows for **layered-depth**. - **Chromatic-aberration glitch:** the signature motif. Headlines and key shapes get duplicated into 2–3 offset layers in cyan/magenta/yellow positioned 3–8px off the black master, with `mix-blend-mode: multiply`. Occasionally a headline "tears" — a horizontal slice shifts 10–20px sideways for 80ms then snaps back (the **glitch** animation). - **Print-process furniture:** registration crosshairs (⊕) in the corners of spreads, a CMYK color-bar strip, "FPO" stamps, density patches, halftone-dot textures at low opacity over photo-shaped placeholders. The page pretends it's a proof sheet. - **Tilt & paste-up:** nearly everything sits at a slight angle (±1° to ±3°) — masthead, badges, small-ad cards, pull-quotes — as if hand-glued onto a layout board. Hover states deepen the tilt into a **tilt-3d** perspective lift. - **Notebook / layout grid:** a faint ruled column grid behind everything, plus the occasional blue "non-repro" guideline. - **Diner-placemat iconography:** a fork, a clock at 12:00, a coffee ring stain, a sandwich triangle — drawn as minimal single-weight line marks in Carbon Ink, used as section bullets and marginalia doodles. - **No literal food photography.** Lunch is evoked through shape, color, and stain — never a stock salad bowl. ## Prompts for Implementation - Build it as a **vertical sequence of full-viewport "spreads"** that the visitor scrolls through like flipping a zine. Each `
` is a spread; use `scroll-snap-type: y proximity` so spreads settle gently without feeling locked. - **Load sequence:** start on Newsprint Cream paper. The faint ruled grid fades in (200ms). Then the masthead "LUNCH.DAY" assembles: first the cyan ghost slides in from the left, then the magenta from the right, then the black master drops in from above and "registers" with a 60ms shudder — a deliberate **glitch** that resolves into crisp alignment. The cover line types itself in Space Mono (**typewriter-effect**). - **Glitch behavior:** implement chromatic aberration as 2–3 absolutely-positioned pseudo-elements or stacked spans per glitch headline, each a single color channel, offset 3–8px. On an irregular timer (every 4–9s, randomized) trigger a brief "tear": `clip-path` a horizontal band and `translateX` it 12–22px for ~70–110ms, then restore. Keep it occasional — flavor, not seizure. Also trigger a tiny glitch burst on hover over the masthead. - **Scroll storytelling, not CTAs:** as the visitor scrolls into each spread, the page elements **paste up** — column blocks slide in from the gutter with a slight rotation that settles to their final ±2° tilt (`stagger` the marginalia notes 80ms apart). The centerfold's abstract shapes drift on **parallax** at different speeds (background blobs slow, foreground sausages faster) so the collage feels physically layered. The 90°-rotated pull-quote slides up out of the page edge as you reach Spread 2. - **Tilt-3d interactions:** the "lunch rights" menu strips and the back-page classifieds cards respond to pointer with a `perspective(800px) rotateX/rotateY` lift (max ~7°) plus a deepening drop shadow — like lifting a coaster off a table. Subtle, springy easing (`cubic-bezier(.34,1.56,.64,1)`). - **Typography drama:** mastheads in Bungee Shade at huge `clamp()` sizes, full-bleed, sometimes letting a letter run off the page edge. Editor's letter in justified Newsreader columns with a 4-line drop cap in Tomato Red. Marginalia in small italic Space Mono running vertically in the gutter. Numbers in the menu set in circled badges, hand-tilted. - **Texture:** apply a very subtle paper grain (CSS `background-image` of a noise data-URI or repeating radial micro-dots) at ~4% opacity over the whole page, plus a faint halftone-dot screen over any image-placeholder shape. A 1px inner "page edge" border on each spread, slightly imperfect. - **Colophon close:** the last spread is small print — printer's marks, the CMYK proof-bar pinned to the bottom of the viewport, and the single line "now close this tab and go eat something." A tiny clock graphic ticks once to 12:00 when it scrolls into view. - **AVOID:** hero-with-signup-button layouts, pricing tables, stat-grids, testimonial carousels, feature-card triplets, gradient backgrounds, glassmorphism, neon glow. This is a printed zine, not a SaaS landing page. No "Get Started." The only "action" is closing the tab. - Animations: prefer CSS transitions/keyframes + IntersectionObserver for scroll triggers; a tiny bit of JS for the randomized glitch timer and pointer-tilt math. Keep it light, keep it crunchy. ## Uniqueness Notes - **Differentiator 1 — Glitch as a *print* artifact, not a digital one.** Most glitch designs reach for cyberpunk/terminal/VHS sci-fi vibes. Here the chromatic aberration is reframed as **misregistered offset-printing** on warm newsprint — the glitch lives inside a 1970s photocopied-zine world, paired with a serif body face and diner colors. That collision (glitch + cozy paper magazine + casual tone) doesn't exist elsewhere in the portfolio. - **Differentiator 2 — A literal magazine "spread" structure with a *wandering* gutter.** Instead of centered columns or bento boxes, the whole site is left-page/right-page compositions whose dividing gutter never sits in the middle and never repeats its ratio — reinforced by visible registration marks, a CMYK proof-bar, and copy-editor marginalia. It's a faux print-proof, not a webpage cosplaying as one. - **Differentiator 3 — Anti-conversion content.** The "call to action" is *close the tab and go eat*. No signup, no pricing, no stats. The content is an editorial manifesto ("lunch rights"), a fake classifieds page, and a colophon — pure zine, zero funnel. - **Differentiator 4 — Bungee Shade + Newsreader + Fredoka + Space Mono** is a deliberately mismatched, paste-up font set (extruded signage display / screen serif / rounded warm sans / typewriter mono) that screams "assembled by hand on a light table," distinct from the mono-dominant or elegant-serif pairings common in the portfolio. - **Differentiator 5 — Triadic flat ketchup/cobalt/mustard palette on cream paper**, applied only as flat fills and offset duplicates — no gradients anywhere, against a portfolio where 96% of designs use gradients. Chosen seed: **aesthetic: glitch, layout: magazine-spread, typography: retro-display, palette: triadic, patterns: tilt-3d, imagery: abstract-shapes, motifs: layered-depth, tone: approachable-casual** (maps loosely to seeds.json "abstract glitch art tech", but reframed away from "tech" toward a cozy print zine). Avoided overused patterns from frequency analysis: no `corporate` aesthetic (93%), no `centered` layout (93%), no `gradient` palette (96%), no `mysterious-moody` tone (94%), no `mono`-primary typography (94%), no `photography` imagery (66%), no `counter-animate` (91%). Leaned into underused territory: `glitch` aesthetic (6%), `retro-display` typography (2%), `triadic` palette (4%), `tilt-3d` pattern (6%), `abstract-shapes` imagery (0%), `approachable-casual` tone (5%).