# Design Language for undo.cafe ## Aesthetics and Tone undo.cafe is a retro-futuristic digital cafe where the concept of "undo" becomes a time-travel experience. The visual identity merges 1950s space-age diner aesthetics with futuristic computing interfaces -- chrome surfaces, rounded atomic-age furniture shapes, and deep ocean-blue atmospheric lighting. Think of a cafe on a submarine that serves both espresso and ctrl+z. The mood is optimistic and bright despite the deep color scheme -- the kind of cheerful confidence that comes from knowing you can always undo your mistakes. Parallax depth creates the sensation of looking through layers of water in a deep-sea observation lounge. Inspiration from Googie architecture, 1960s NASA mission control rooms, Jacques Cousteau documentaries, and the warm glow of vintage jukebox interfaces. ## Layout Motifs and Structure An **asymmetric** layout that deliberately breaks conventional alignment, mirroring the disruptive nature of "undo" -- things are not where you expect them, but they feel right. **Primary structure:** - **Porthole entrance (100vh):** A deep ocean blue background (#0a2a4a) with a large circular "porthole" element (60vmin diameter, centered) framed by a chrome-silver border (8px, #c0c8d0). Inside the porthole: the word "UNDO" in tech-mono type with a blinking cursor after it, as if about to be erased. Subtle bokeh lights (small blurred circles) drift slowly in the background. - **Asymmetric menu sections:** Content blocks are positioned with deliberate asymmetry -- a text block at 20% left offset on one row, then 45% on the next, then 10%. Each block has a rounded chrome border on one side only. This "scattered" positioning mimics the disorder before an "undo" restores order. - **Bubble navigation:** Small circular nav dots (playful bubble shapes, 12px) float in a vertical column on the right side, bobbing gently with CSS animation. - **Time machine footer:** A horizontal timeline at the bottom showing "states" the user has scrolled through, with a rewind button that smooth-scrolls back to the top -- the ultimate undo. **Spatial relationships:** Asymmetric offsets using CSS margin-left with clamp values. Content blocks max-width: 560px. Blocks alternate sides (odd: margin-left 15%, even: margin-left 40%). Vertical spacing: 100px between sections. ## Typography and Palette **Fonts:** - **Display/Commands:** "Share Tech Mono" (Google Fonts) -- a monospace with tech personality, used at clamp(32px, 5vw, 64px). Weight 400. The monospace letterforms evoke terminal commands where "undo" originates. - **Body text:** "Outfit" (Google Fonts) -- a modern geometric sans-serif with subtle rounding at 17px/1.7 line-height. Weight 300 for body, 600 for emphasis. The light weight creates an airy, buoyant feeling that matches the underwater/floating theme. - **Accent/Retro labels:** "Bungee Shade" (Google Fonts) -- a layered display font with built-in shadow effect, used sparingly at 24px for section labels and decorative headings. The retro-futuristic shadow evokes vintage neon signage. **Color Palette:** - **Ocean deep:** #0a2a4a (deep navy-blue primary background) - **Ocean mid:** #1a4a6a (medium navy for section backgrounds) - **Chrome silver:** #c0c8d0 (metallic silver for borders, porthole frame) - **Bokeh warm:** #e8c070 (warm amber for bokeh lights, highlights) - **Bokeh cool:** #70b8e8 (light blue for secondary bokeh) - **Text primary:** #e0e8f0 (cool white for readability) - **Text muted:** #7090a8 (muted ocean blue for secondary text) - **Bubble playful:** #80d8c0 (seafoam green for interactive bubbles) ## Imagery and Motifs **Core visual motifs:** - **Bokeh background lights:** 15-20 circular elements (4-12px radius) with CSS filter: blur(3px) and soft opacity (0.2-0.5), positioned randomly across the viewport background. Colors alternate between warm amber (#e8c070) and cool blue (#70b8e8). Slow CSS animation: translateY(-20px to 20px) over 10-20s creates a drifting underwater light effect. - **Bubble-playful navigation:** Navigation dots rendered as semi-transparent bubbles (radial-gradient with highlight in upper-left quadrant, seafoam border). On hover, bubbles grow 1.5x and wobble (CSS animation combining scale and slight rotation). - **Porthole circular frame:** The large chrome-bordered circle serves as a recurring framing device -- smaller portholes (120px diameter) appear as decorative elements throughout, containing icons or small illustrations. - **Parallax depth layers:** Background bokeh moves at 0.3x scroll speed, chrome decorative elements at 0.6x, content at 1.0x -- creating the sensation of underwater depth parallax. ## Prompts for Implementation **Retro-futuristic underwater cafe:** The site should feel like visiting a cafe at the bottom of the ocean in 1965. Warm amber light filtering through deep blue water. Chrome surfaces catching scattered light. Every interaction should feel buoyant and reversible. **Porthole hero implementation:** - Circular container: width: 60vmin, height: 60vmin, border-radius: 50%, overflow: hidden. - Chrome border: border: 8px solid #c0c8d0, box-shadow: inset 0 0 30px rgba(0,0,0,0.3), 0 0 40px rgba(192,200,208,0.2). - Content inside: centered text with blinking cursor (border-right: 3px solid #e0e8f0, animation: blink 1s step-end infinite). **Bokeh light generation:** - Create 15-20 absolutely positioned divs with border-radius: 50%. - Random sizes (4-12px), positions (%), and animation-delays (0-10s). - Filter: blur(3px) for soft glow. Mix warm/cool colors. - Animation: translateY with ease-in-out for gentle drift. **Asymmetric layout:** - Use CSS margin-left with nth-child selectors: :nth-child(odd) { margin-left: 15%; } :nth-child(even) { margin-left: 40%; } - On mobile: collapse to centered single column. **Time machine footer rewind:** - A "Rewind" button that triggers window.scrollTo({ top: 0, behavior: 'smooth' }). - As user scrolls, small dots populate a progress bar showing "save states." **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, flat designs. Embrace depth and luminosity. ## Uniqueness Notes **Differentiators from other designs:** 1. **Porthole as primary framing device:** The chrome-bordered circular viewport serving as both the hero element and a recurring decorative motif creates a unique nautical-computational metaphor -- undoing is peering through a window into another timeline. 2. **Asymmetric scattered layout as "pre-undo" chaos:** The deliberate misalignment of content blocks visually represents the disorder that "undo" aims to correct, making the layout concept itself a metaphor for the domain. 3. **Time machine rewind footer:** A progress bar that tracks scroll position as "save states" with a rewind button that smooth-scrolls to top creates a literal "undo" interaction within the page navigation -- the form IS the function. **Chosen seed/style:** aesthetic: retro-futuristic, layout: asymmetric, typography: tech-mono, palette: ocean-deep, patterns: parallax, imagery: bokeh-background, motifs: bubble-playful, tone: optimistic-bright **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), mono typography (81% -- tech-mono is assigned but used distinctly with retro character), mysterious-moody tone (70%).