# Design Language for undo.quest ## Aesthetics and Tone undo.quest is a mid-century modern exploration of reversibility and second chances, where the clean lines and organic curves of 1950s-60s furniture design become metaphors for the elegant simplicity of undoing. The visual identity channels Charles and Ray Eames' design philosophy -- functional beauty, honest materials, and playful experimentation. Warm navy-metallic surfaces meet organic blob shapes in a composition that feels like a Herman Miller showroom crossed with a choose-your-own-adventure book. The tone is tech-tutorial meets warm nostalgia -- the kind voice of a mid-century instructional film explaining how to rewind time. Inspiration from Eames case study houses, Alexander Girard textile patterns, vintage Braun electronics, and the optimistic futurism of 1960s World's Fairs. ## Layout Motifs and Structure A **card-grid** layout reimagined through a mid-century lens -- cards are not rectangular boxes but organic, Eames-era shapes containing different "undo scenarios." **Primary structure:** - **Showroom entrance (100vh):** A warm navy background (#1a2a3a) with the word "UNDO" displayed in variable-fluid typography that responds to scroll position (font-weight shifts from 100 to 900 as user scrolls down). Below: a subtle metallic sheen gradient (linear-gradient with metallic silver #8a9aaa at 0.1 opacity). - **Quest cards grid:** A 3-column grid of organically-shaped cards (border-radius varies: 40% 60% 60% 40% / 50% 50% 60% 40%) on a light warm gray background. Each card represents an "undo quest" -- a scenario where reversibility matters. Cards use scroll-triggered entrance animations. - **Nature elements section:** A full-width band showing nature's own "undo" processes -- decomposition, seasonal cycles, tidal patterns -- using simple nature-element SVG illustrations (leaves, waves, spirals) in navy and copper tones. - **Blueprint footer:** A grid-paper background (fine lines, navy on lighter navy) with technical-drawing-style annotations about the architecture of undo systems. **Spatial relationships:** Card grid uses CSS grid with gap: 32px. Cards are 280-320px wide. Overall max-width: 1080px. Generous section spacing: 96px. ## Typography and Palette **Fonts:** - **Display/Hero:** "Epilogue" (Google Fonts) -- a variable-weight sans-serif with geometric character, used at clamp(48px, 8vw, 120px). Weight varies 100-900 via font-variation-settings. The variable nature of the font IS the undo metaphor -- weight can be dialed forward or back. - **Body text:** "Merriweather" (Google Fonts) -- a sturdy serif designed for screen readability at 16px/1.75 line-height. Weight 300 for body, 700 for emphasis. The warm serif echoes mid-century editorial design. - **Card labels:** "Work Sans" (Google Fonts) -- a grotesque sans-serif at 13px, letter-spacing: 0.1em, text-transform: uppercase for card category labels. **Color Palette:** - **Navy primary:** #1a2a3a (deep warm navy) - **Navy light:** #2a3a4a (lighter navy for cards, sections) - **Metallic silver:** #8a9aaa (brushed metal accent) - **Copper warm:** #c07850 (mid-century copper for highlights) - **Background warm:** #f0ece4 (warm light gray for card grid background) - **Text dark:** #1a2028 (near-black for body text on light backgrounds) - **Text light:** #d8e0e8 (light blue-gray for text on dark backgrounds) - **Nature green:** #5a8a60 (muted olive for nature elements) ## Imagery and Motifs **Core visual motifs:** - **Organic blob cards:** Card containers with asymmetric border-radius values creating Eames-era organic shapes. Each card has a unique radius combination, and on hover, the radii morph to a different organic shape (transition: border-radius 600ms ease). - **Nature elements:** Simple SVG illustrations of natural cycles -- a leaf decomposing into soil (3-frame sequence), a wave advancing and receding, a spiral suggesting cyclical return. Rendered in single-color strokes (navy or copper, 2px stroke, no fill). - **Variable-fluid hero typography:** The hero "UNDO" text responds to scroll position via JavaScript -- font-variation-settings: 'wght' mapped to scroll percentage. At top of page: ultra-thin (100). At full scroll: ultra-bold (900). This creates a tangible demonstration of "undoable" change. - **Scroll-triggered card entrances:** Cards enter viewport with a staggered cascade -- each row of 3 cards has 150ms delay between them, with scale(0.9) to scale(1) and opacity 0 to 1 transitions. ## Prompts for Implementation **Mid-century quest through undoability:** The site should feel like a beautifully designed 1960s exhibition about the concept of reversal. Clean, warm, thoughtfully composed. Every animation should be reversible -- things that fade in should visibly fade out when scrolled past. **Variable font scroll response:** - Listen to scroll event (throttled via requestAnimationFrame). - Calculate scroll percentage: scrollY / (document.body.scrollHeight - window.innerHeight). - Map to font weight: 100 + (percentage * 800), clamped to 100-900. - Apply via element.style.fontVariationSettings = `'wght' ${weight}`. **Organic card border-radius:** - Define 6+ radius combinations as CSS custom properties: --shape-1: 40% 60% 60% 40% / 50% 50% 60% 40%; etc. - Assign each card a different shape via nth-child or data-attribute. - Hover transitions between shapes over 600ms. **Reversible scroll animations:** - Intersection Observer with threshold array [0, 0.5, 1.0]. - When entering: apply entrance animation. - When exiting (isIntersecting: false): apply reverse animation (opacity back to 0, scale back to 0.9). - This creates literal "undo" of animations as user scrolls backward. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, angular/brutalist aesthetics. Maintain organic, warm composure. ## Uniqueness Notes **Differentiators from other designs:** 1. **Variable font weight responding to scroll position:** The hero typography that physically changes weight as the user scrolls -- and reverses when scrolling up -- creates a literal typographic undo experience unique among all designs. 2. **Reversible scroll animations:** Animations that play forward when scrolling down and reverse when scrolling up make the entire browsing experience an exercise in undoability -- structurally unique to this concept. 3. **Organic blob cards in mid-century palette:** The combination of asymmetric Eames-era organic shapes as card containers with a warm navy-metallic-copper palette creates a specific mid-century character not replicated in other designs. **Chosen seed/style:** aesthetic: mid-century, layout: card-grid, typography: variable-fluid, palette: navy-metallic, patterns: scroll-triggered, imagery: nature-elements, motifs: organic-blobs, tone: tech-tutorial **Avoided overused patterns:** photography imagery (90%), centered layout (98%), warm palette (94% -- used warm-cool balance instead), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).