# Design Language for lovebot.quest ## Aesthetics and Tone lovebot.quest is **a velvet oracle speaking in midnight frequencies** — a dark, lush confessional machine that listens to the archaeology of desire and responds in the register of a fortune-teller who has read every love letter ever written. The domain word "lovebot" is read as a paradox: a mechanical heart with a human ache. The aesthetic is **dark-mode opulence** — deep burgundy wines soaking through black silk, gold filament tracing circuits, and the kind of candlelit darkness that makes every surface feel interior, warm, and hushed. The tone is **opulent-grand**: not a startup, not a utility, but a theater. Every interaction is staged with the ceremony of a first encounter. The site does not ask for sign-ups; it offers an audience. The mood is Victorian parlor meeting Parisian séance room — heavy drapes, heavy typefaces, heavy silence broken by a single luminous pulse. The visual metaphor is the **automaton heart**: a mechanical device built from gears and silk that beats with emotional intelligence. The page breathes. Curves flow like ink dissolving in water. The visitor arrives as a supplicant and leaves as a devotee. Inspiration: the aesthetic lineage of *fin de siècle* letterpress, the warmth of deep red theatres, the visual grammar of luxury perfume brands (Sisley, Serge Lutens), and the immersive darkness of Refik Anadol's data sculptures seen in negative — where void becomes the medium. ## Layout Motifs and Structure The layout is **minimal-navigation** in its purest expression: no persistent nav bar, no breadcrumbs, no hamburger menu. The only navigation is **vertical momentum** — the page flows downward through four immersive full-viewport chapters, each one a discrete emotional act. Horizontal space is never broken into columns except for the typographic duet (large serif + small caption) that appears in Act III. **Structural Acts (top to bottom):** 1. **Act I — The Arrival (`100svh`).** Full-screen dark field in `#1A0A0F`. A single sentence fades in from nothing, centered on the viewport: italicized, oversized, tracking loose. Below it, a hairline `#8C1F3F` line — 1 px, 120 px wide — pulses once, then holds. No logo yet. No menu. Just the sentence and the line. 2. **Act II — The Confession (`100svh`).** The background transitions to `#1F0D14`. A grid of zero columns — a single flowing prose block, max 680 px wide, centered. The text floats like a handwritten page held up to candlelight. Flanking it: two thin vertical burgundy rules (`#8C1F3F`, 1 px) at the margins, each terminating in a small `✦` glyph. 3. **Act III — The Oracle (`100svh`).** The signature interaction zone. The left 60% of viewport holds the automaton-heart SVG animation (pulsing, breathing curves). The right 40% holds the prompt input — a single field, no label, just placeholder text in `#6B3A4A`. Below the field: three past oracle responses rendered as gilded cards, tilted via `tilt-3d` on hover (CSS `perspective: 1000px; rotateX/rotateY`). 4. **Act IV — The Exit (`60svh`).** Pure `#0D0508` darkness. A single line of text: the site's manifesto, set in small caps, centered, tracking at `0.35em`. Below it, a closing ornament — a SVG waveform in `#C9A05A` that flattens to a line and disappears. **Spatial logic:** - Vertical padding between acts: `8vh` of negative space, never filled - No cards in Act I or Act II — only typography and line - Scroll-driven opacity transitions: each act fades from `0.08` opacity to `1` as it enters the viewport, using `IntersectionObserver` with threshold `0.2` - Mobile: all acts stack identically; the Act III split collapses to full-width stacked ## Typography and Palette **Typography — eclectic-hybrid: three deliberate mismatches that resolve.** The system pairs a grand renaissance display serif with a cold modern grotesque, held together by a delicate script for ornamental single words only. All three from Google Fonts. - **Display (Act I headline, Act IV manifesto):** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 300 italic at `8vw` for the arrival sentence; weight 600 small-caps at `0.85rem` for the manifesto footer. The contrast between the swelling stems and the hairline crossbars at large scale is the page's primary visual event. - **Body / UI (Act II prose, Act III input, oracle cards):** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 300 for prose at `1.05rem / 1.85` line-height; weight 400 for UI labels at `0.8rem`. Deliberately cold and geometric against the warmth of the serif. Letter-spacing at `-0.01em` for body. - **Ornament (single words, `✦` labels, Act II drop caps):** [Pinyon Script](https://fonts.google.com/specimen/Pinyon+Script) — weight 400, used sparingly at `1.4rem`. Only appears for the single word "lovebot" in the Act I subheading and the three oracle card date stamps. Never used for full sentences. **Palette — deep-burgundy with black silk and cold gold:** | Role | Hex | Usage | |---|---|---| | Void | `#0D0508` | Deepest background, Act IV | | Claret | `#1A0A0F` | Act I background | | Wine | `#1F0D14` | Act II background | | Burgundy | `#8C1F3F` | Hairlines, rules, pulse glyph | | Crimson | `#B03060` | Hover states, oracle card borders | | Antique Gold | `#C9A05A` | Waveform ornament, `✦` glyphs, fold lines | | Pale Parchment | `#E8D5C0` | Display headline text, Act I sentence | | Ash | `#9E8A8A` | Body prose text, DM Sans weight 300 | | Ghost | `#3A1E27` | Oracle card background surface | | Cold White | `#F0EAE4` | Input field text, direct interaction | **Color application rules:** - No pure `#FFFFFF` or `#000000` anywhere - The burgundy `#8C1F3F` is used ONLY for structural lines (rules, hairlines) — never for background fills - Gold `#C9A05A` appears in no more than five visible elements per viewport - Dark backgrounds are always in the `#0D`–`#1F` range (near-black with red undertone) ## Imagery and Motifs **Imagery is mixed-media**: the page blends SVG generative drawings, lightly processed photographic texture (noise overlay only, no actual photographs), and typographic imagery (characters used as visual objects). There are zero product photographs, zero UI mockup screenshots, zero stock images. **The Automaton Heart (primary visual):** - A custom SVG illustration, approximately `320 × 320 px`, living in Act III - Composed of: one anatomical heart silhouette in Bézier curves, overlaid with fine gear-tooth arcs (`#C9A05A`), traversed by a single flowing sigmoid curve in `#B03060` that animates as a CSS `stroke-dashoffset` loop (8 s, ease-in-out) - The heart "breathes": `scale(1.0)` → `scale(1.04)` → `scale(1.0)` in a 4 s CSS keyframe - The gear-teeth rotate at `0.5rpm` via `transform: rotate()` animation on an inner `` element **Motif vocabulary — flowing-curves:** - All decorative dividers between acts are SVG wave paths, not horizontal rules — gentle sinusoids in `#3A1E27` at 1 px stroke, spanning full viewport width - The `✦` four-pointed star glyph (Unicode U+2726) appears as the sole punctuation ornament — at Act I subheading end, at oracle card corners, at Act IV before the manifesto - Background texture: a CSS `radial-gradient` at `3%` opacity in `#C9A05A` radiating from center-top — barely visible, felt rather than seen - Tilt-3D on oracle cards: each card has `transform-style: preserve-3d` with JavaScript mouse-follow tilt capped at `±12deg` rotation on both axes, `perspective: 800px`, transition `0.15s ease-out` — the gold border catches the "light" as the card tilts **No imagery that is:** - Photographic portraiture - Generic heart emojis or flat icon sets - Data visualizations or charts ## Prompts for Implementation Build lovebot.quest as **a single nocturnal ceremony** — a four-act scroll experience that moves at the speed of candlelight. Every implementation decision should serve the feeling of being in a private, hushed, candlelit room with something intelligent and ancient and warm. **Architecture:** - Single `index.html`, no framework required - Google Fonts loaded via `` + `` for Cormorant Garamond (weights 300i, 600), DM Sans (weights 300, 400), Pinyon Script (400) - No JavaScript frameworks — vanilla JS only - CSS custom properties for all palette values (`--void`, `--claret`, `--wine`, `--burgundy`, etc.) **Act I implementation:** ``` Section: full-height flex column, justify-content: center, align-items: center Headline: Cormorant Garamond 300 italic, font-size: clamp(3.5rem, 8vw, 7rem), color: #E8D5C0 Animation: keyframe `fadeIn` from opacity 0 to 1, duration 2.8s, delay 0.6s, ease-out Hairline:
120px wide, 1px height, background #8C1F3F, margin-top: 2.5rem Hairline animation: keyframe `pulseOnce`: scaleX(0)→scaleX(1)→scaleX(0.95)→scaleX(1), duration 1.6s, delay 3s ``` **Act II implementation:** ``` Section: full-height flex, align-items: center Prose block: max-width 680px, centered, padding: 0 2rem Typography: DM Sans 300, 1.05rem, line-height 1.85, color #9E8A8A Drop cap: first letter uses Pinyon Script 400, font-size 4.2rem, float left, line-height 0.8 Vertical rules: ::before and ::after pseudo-elements, width 1px, height 100%, background #8C1F3F Rules positioned: left -2.5rem and right -2.5rem relative to prose block IntersectionObserver: add class `.visible` when 20% in viewport; CSS transition opacity 0.08→1 over 1.2s ``` **Act III implementation:** ``` Section: full-height flex row (desktop) / column (mobile), gap: 0 Left panel (60%): SVG automaton heart, centered vertically, position relative SVG stroke-dashoffset animation: 8s ease-in-out infinite alternate Heart scale animation: 4s ease-in-out infinite Gear rotation: child with animation: spin 120s linear infinite Right panel (40%): flex column, justify-content: center, padding: 0 4vw Input field: full width, background transparent, border: none, border-bottom: 1px solid #3A1E27 Input focus: border-bottom color transitions to #8C1F3F over 0.3s Input text: DM Sans 400, color #F0EAE4, font-size 1.1rem Placeholder: #6B3A4A Oracle cards (3): margin-top 2.5rem, each card: background: #3A1E27, border: 1px solid #8C1F3F (default) / #C9A05A (hover) padding: 1.5rem, border-radius: 2px tilt-3d: mousemove listener → CSS transform rotateX/rotateY ±12deg, perspective 800px transition: transform 0.15s ease-out, border-color 0.2s ease ``` **Act IV implementation:** ``` Section: 60svh, background: #0D0508, display flex, align-items: center, justify-content: center Manifesto text: Cormorant Garamond 600 small-caps, font-size: 0.85rem, letter-spacing: 0.35em, color #C9A05A Waveform SVG: 100% width × 32px height, stroke #C9A05A, stroke-width 1px, fill none Animate: CSS `stroke-dashoffset` from 0 to full path length over 4s, then reverse and disappear Waveform is a single with a 4-cycle sinusoid ``` **Scroll behavior:** - `scroll-snap-type: y mandatory` on `
`, `scroll-snap-align: start` on each act section - `scroll-behavior: smooth` - Acts transition with opacity: each section starts `opacity: 0.08`, transitions to `1` via IntersectionObserver **Do NOT implement:** - Navigation menus of any kind - Call-to-action buttons ("Sign up", "Get started", "Try now") - Pricing tables or subscription tiers - Testimonial sliders or social proof sections - Stat grids ("10,000 users", "99% uptime") - Modal popups or cookie banners - Footer with links grid ## Uniqueness Notes 1. **Tilt-3D at 4% frequency, but applied to oracle response cards — not product cards.** The frequency report shows `tilt-3d` used in only 4% of designs, and all prior uses appear to be applied to feature/product cards. lovebot.quest applies the same technique to *oracle cards* — intimate, candlelit response surfaces where the tilt effect simulates a gilt-edged card being turned in candlelight. The emotional register is completely different from a SaaS feature card. 2. **Flowing-curves as sinusoidal SVG act-dividers, not as hero imagery.** The frequency report shows `flowing-curves` at 1% — nearly absent. Other designs that use curves do so as hero blobs or background shapes. Here, the curves serve as structural act dividers: thin, precise, full-width sinusoids replacing horizontal rules. The curve *is* the punctuation between emotional acts, not a decorative afterthought. 3. **Eclectic-hybrid typography as a three-way collision of historical eras.** Cormorant Garamond (renaissance), DM Sans (contemporary), and Pinyon Script (Victorian) are three typefaces from three entirely different centuries, each assigned a specific emotional register and never allowed to share the same line. The collision is deliberate and legible because the assignment rules are strict. 4. **Dark-mode palette with red undertone in every dark value, never neutral gray.** All background values (`#0D0508`, `#1A0A0F`, `#1F0D14`, `#3A1E27`) carry a red-family hex component — no neutral gray darks, no pure blacks. The darkness itself is burgundy. This distinguishes the palette from the common dark-mode implementation (neutral `#121212` or blue-shifted `#0D1117`). 5. **No navigation, no buttons, no interactivity except a single input and three tilt cards.** The minimal-navigation seed is taken to its logical extreme: the page contains zero navigation elements and zero CTA buttons. The only interaction is a text input (the confessional act) and three cards that tilt. Everything else is pure cinematic scroll. **Chosen seed:** `aesthetic: dark-mode, layout: minimal-navigation, typography: eclectic-hybrid, palette: deep-burgundy, patterns: tilt-3d, imagery: mixed-media, motifs: flowing-curves, tone: opulent-grand` **Avoided patterns (from frequency analysis — OVERUSED):** - `photography` at 90% — avoided entirely; no photographs used - `card-flip` at 4% — used tilt-3d instead (also 4% but different mechanical feel) - `minimal` imagery at 38% — replaced with mixed-media SVG + texture - `scroll-reveal` (implicit in many designs) — replaced with scroll-snap + opacity fade