# Design Language for undo.cafe ## Aesthetics and Tone undo.cafe should feel like a quiet espresso bar built inside a time-reversal laboratory: polished walnut counters floating in a blue-black observatory, porcelain cups glowing beside translucent archival pages, and every sip becoming a small command to rewind regret. The mood is **sci-fi but literary**, not chrome showroom sci-fi: a future where scholars, baristas, and machine historians meet after midnight to restore lost drafts, unsend bad sentences, and study the emotional physics of “take it back.” The tone is futuristic-cutting-edge with a restrained scholarly hush. Avoid startup cheer, dashboard literalism, and generic productivity metaphors. The experience should feel like entering a speculative library-cafe where time has visible grain: pages flutter backward, steam curls into punctuation marks, and the word “undo” behaves like a ritual rather than a button. ## Layout Motifs and Structure Use a **hero-dominant** structure: the first screen is the whole thesis, a full-viewport “Reversal Chamber” with a giant refined serif wordmark, an orbiting coffee cup/book apparatus, and minimal navigation tucked into the margins like catalog labels. Subsequent sections should feel like descending through annotated exhibits rather than stacking cards. Composition should be based on a theatrical 14-column grid with one dominant central stage and thin peripheral annotation lanes. Let large blocks of negative space surround the central artifact. Content appears as marginalia, footnotes, page tabs, and small research stamps rather than equal cards. The page can unfold in four cinematic panels: **The Spill**, **The Margin**, **The Rewind**, **The Return**. Each panel occupies nearly a full viewport and reveals a new layer of the same central motif instead of switching to generic feature rows. Spatial relationships should suggest backward motion: section dividers arc from right to left, page numbers count down, and captions align along reverse reading diagonals. Avoid centered repeated sections, card grids, pricing blocks, stat grids, and CTA-heavy strips. ## Typography and Palette Use Google Fonts with an academic/futurist pairing: - **Display serif:** “Libre Baskerville” for the main title, oversized chapter names, and quoted fragments. Use 700 for hero emphasis and 400 italic for time-worn annotations. Tight letter spacing around `-0.035em`, line-height around `0.88` for monumental words. - **Body serif:** “Libre Baskerville” 400 for reflective paragraph text, giving the cafe a bookish, essayistic voice. - **Interface sans:** “IBM Plex Sans” for labels, menu text, small technical notes, and capsule metadata. - **Code/clock accents:** “IBM Plex Mono” for timestamps, undo counters, catalog numbers, and animated reversal coordinates. Palette: complementary with deep nocturnal blues opposed by warm espresso-amber accents. - **Blackboard Navy:** `#07111F` — primary background, nearly black but with archival blue depth. - **Future Cyan:** `#63E6FF` — luminous sci-fi linework, Lottie strokes, focus glows. - **Espresso Amber:** `#C47A2C` — coffee warmth, brass page clips, key highlights. - **Porcelain Paper:** `#F3EAD7` — text, book pages, cup surfaces. - **Oxide Red:** `#D64B3C` — rare correction marks, reversed errors, emotional friction. - **Ink Violet:** `#2B1E4A` — shadow gradients and scholarly depth. Use gradients sparingly as atmospheric halos: `radial-gradient(circle at 60% 35%, rgba(99,230,255,.18), transparent 42%)` against the navy field, plus amber glows near cafe objects. ## Imagery and Motifs Primary imagery is a hybrid **book-scholarly + cafe apparatus**: an open book whose pages form a circular time dial; a porcelain demitasse suspended above it; steam trails becoming reversed footnotes, arrows, brackets, and erased words. The visual language should be CSS/SVG/Lottie-driven rather than photographic. Use a subtle **noise texture** over the entire site, like scanned paper captured through a laboratory lens. Add faint page fibers, dust motes, and phosphor speckles so the future feels tactile. Decorative elements include marginal correction glyphs, bibliography ticks, brass bookmark ribbons, countdown page numbers, cup-ring diagrams, and thin cyan orbital lines around text fragments. The hero Lottie animation should show a coffee spill running backward into the cup while a torn sentence repairs itself across an open page. Secondary micro-animations: footnotes slide backward into margins, serif ligatures briefly deconstruct then recompose, and tiny red correction marks fade into blue approval stamps. ## Prompts for Implementation Build a full-screen narrative single-page experience, not a conversion landing page. The first viewport must be cinematic: large “undo.cafe” title in Libre Baskerville, minimal copy, and one central animated reversal artifact. Treat scroll as a sequence of literary time experiments. Each panel should feel like a chapter plate in a future manuscript. HTML/CSS/JS guidance: create layered fixed background fields for noise, cyan orbital lines, and warm cafe glow. Use CSS Grid for the 14-column stage, but let text blocks live as marginalia along edges. Implement a lightweight Lottie container in the hero for the reversing spill/page animation; if no Lottie asset is available, approximate with SVG paths using stroke-dashoffset and CSS keyframes. Use `mix-blend-mode: screen` for cyan diagrams and `multiply`/low-opacity overlays for paper textures. Animation should be deliberate and story-led: reverse page counts on scroll, handwritten correction marks retract, steam curves loop slowly, and chapter titles reveal from right to left. Avoid parallax-heavy spectacle because parallax is overused; prefer Lottie animation, SVG path reversal, opacity sequencing, and subtle temporal distortions. No pricing blocks, no stat grids, no rows of feature cards, no oversized CTA buttons. The only invitation should feel like a quiet note on a receipt: “begin again.” ## Uniqueness Notes - Chosen seed/style: aesthetic: sci-fi, layout: hero-dominant, typography: baskerville-refined, palette: complementary, patterns: lottie-animation, imagery: noise-texture, motifs: book-scholarly, tone: futuristic-cutting-edge. - Differentiator 1: combines a cafe ritual with scholarly time-reversal instead of treating “undo” as a generic software/productivity command. - Differentiator 2: uses one central evolving artifact across full-screen chapters rather than common card-grid/centered content modules. - Differentiator 3: frames motion as reversal—spills unspill, sentences repair, page numbers count down—so animation expresses the domain name directly. - Differentiator 4: balances Baskerville-style literary refinement with cyan sci-fi instrumentation, avoiding the common mono-heavy terminal look. - Frequency analysis patterns avoided: corporate, photography, card-grid, centered layouts, warm-gradient SaaS styling, parallax-heavy effects, staggered reveals, authoritative CTA pages, and generic stat grids. - Frequency analysis patterns intentionally preferred: sci-fi, hero-dominant, baskerville-refined, complementary palette, lottie-animation, noise-texture, book-scholarly motifs, and futuristic-cutting-edge tone are all comparatively underused.