# Design Language for renai.quest ## Aesthetics and Tone renai.quest is a **surreal dreamscape** dressed as the *save-file menu of a dating sim that has started dreaming about itself*. The word **renai** (恋愛 — "romantic love," the genre name for visual-novel romance) is taken literally and then bent: this is not a game *about* love, it is the *quest log* of one — a half-remembered route map, full of branches you cannot reach, affection meters that drift on their own, and a confession scene that loops at 3am with the lights still on in the classroom. The mood is **tender and slightly haunted**: the warmth of a CRT glow at midnight, the static hum of a paused cutscene, the ache of a heroine portrait that keeps half-smiling even when the dialogue box is empty. Think *Sailor-uniform melancholy meets liminal-space corridor* — sakura petals frozen mid-fall, a vending machine humming in an empty rooftop, a phone with one unread message that never opens. Nothing here sells anything. The site is a **playable-feeling artifact you cannot quite play** — it remembers a romance that may never have happened, and it invites you to scroll *down its memory* rather than click *toward a goal*. The tone register sits between **dreamy-ethereal** and **mysterious-moody**, with a thin candy-pink sweetness laid over a deep indigo unease, like cherry syrup poured into ink. ## Layout Motifs and Structure The page is a **single immersive vertical descent through eight "Routes"** — each Route is a full-viewport (100vh minimum) *scene card* composed like a visual-novel screen: a wide background plate, a lower-third **dialogue box** with a name plate and soft-typed text, and a floating **character sprite** anchored to one side that parallaxes slower than the background, so it feels pinned to the glass while the world drifts behind it. **Scene composition rules:** - **The dialogue box** is the spine. A rounded-corner panel (radius 18px) sitting in the bottom third, 86% width, centered, with a 1px inner highlight stroke and a faint scanline texture. It carries a small triangular "next" caret in the corner that pulses — but clicking it does nothing dramatic; it just nudges the scroll. The name plate is a smaller tab notched into the box's top-left edge. - **The affection meter** lives as a thin vertical track pinned to the right margin of the whole page — a heart-shaped filled cap that *slowly drifts* up and down as you scroll, never resolving, labeled in tiny mono caps like `好感度 / AFFINITY ▮▮▯▯▯`. - **Choice forks**: between Routes, a `:: SELECT ::` interstitial appears — two or three glowing option pills stacked like dialogue choices. Hovering one dims the others and tilts it slightly. Picking one just scrolls to the next Route regardless; the *illusion* of branching is the point. - **Off-grid sprites**: small UI ghosts — a blinking save-slot icon, a CG-gallery thumbnail with a padlock, a "skip" fast-forward glyph — float in the negative space, half-transparent, drifting on slow sine paths. - Asymmetry rules: sprites alternate left/right Route to Route; backgrounds bleed full-edge; the dialogue box is the only consistently-placed element, the anchor you hold onto as everything else floats. Mobile collapses the sprite to a smaller corner figure, widens the dialogue box to 94%, and keeps the affection track as a slim 3px edge ribbon. ## Typography and Palette **Typefaces (all Google Fonts, all available):** - **Zen Maru Gothic** (400 / 500 / 700) — the heroine's voice. A rounded Japanese-style sans with gentle terminals; used for all dialogue body text and headings, set at 1.0625rem / line-height 1.95 in dialogue passages, with generous letter-spacing (0.02em) so it reads like text being *typed onto a box* rather than printed. - **Klee One** (400 / 600) — used *only* for the Route titles and the name plates: it has a handwritten-pen-on-genkō-yōshi quality, slightly slanted, like a name scrawled in a notebook margin. Restricted use; never body. - **DM Mono** (400 / 500) — system chrome: affection labels, save-slot timestamps, the `:: SELECT ::` interstitials, percentage readouts, and the tiny "AUTO / SKIP / LOG" HUD glyph captions. Always uppercase, always wide-tracked, always small. **Palette (minimum three; full set):** - `#15102B` — **midnight-ink**: the deep base, the unlit classroom, the bottom of the screen. - `#2A1B4A` — **bruised-violet**: mid-tone backgrounds, the dusk behind the sprite. - `#F4B8D0` — **cherry-syrup pink**: the heroine's hair-light, the affection heart, the active choice glow. - `#FF6FA5` — **confession-pink**: hotter accent — the pulsing caret, hover states, the meter cap. - `#9AD8E8` — **screen-glow cyan**: scanline shimmer, the CRT halo, secondary UI ghosts. - `#FFF6E9` — **paper-cream**: dialogue text, name plates — warm so it doesn't glare against the ink. - `#6C5BA0` — **dim-lavender**: muted captions, locked-CG padlocks, the "unreachable route" text. Gradients are used sparingly: a soft vertical `#2A1B4A → #15102B` vignette on every scene plate, and a radial `#F4B8D0` bloom behind each sprite's head like rim-lighting from an off-screen window. ## Imagery and Motifs - **Sprite portraits as soft silhouettes**: rather than literal anime art, render the "character" as a luminous frosted-glass silhouette — a head-and-shoulders shape filled with a soft pink-to-cyan gradient and a single highlighted edge, suggesting *someone is there* without drawing them. A faint blink animation (the silhouette's "eye-line" highlight dims for 120ms every 4–7s). - **Falling things**: sakura petals, but also — pixel hearts, snippets of dialogue-box text, half a school emblem — all drifting downward at different parallax depths, some frozen mid-air when scroll pauses (a "cutscene paused" feel). - **Liminal backgrounds**: empty rooftop with a chain-link fence and a single vending machine; a corridor of identical lockers receding into violet haze; a train-window at dusk with smeared lights; a classroom at night with one desk lit. All rendered as low-detail gradient-and-silhouette compositions, never photographs, with a subtle ~6% film grain and faint CRT scanlines (`repeating-linear-gradient` at 3px, 4% opacity). - **UI relics**: heart meters, save slots ("DATA 01 — 23:47 — chapter ??"), a CG gallery grid where half the cells are padlocked silhouettes, a text-log scrollback, a "skip" double-triangle. These are decorative — the romance-game *furniture* of love, used as ornament. - **The recurring glyph**: a small **broken heart that is also a bookmark ribbon** — a heart with a notched bottom, used as the section marker and favicon motif. ## Prompts for Implementation Build renai.quest as **one long single-page HTML document** — eight Routes, no router, no SPA, no real game logic. The reader scrolls top-to-bottom through the quest log like clicking through a visual novel they've already finished and are now revisiting in a dream. Prioritize **atmosphere over information**, **mood over interaction**, **one slow descent over branching paths**. There is **no CTA, no pricing block, no stat-grid, no testimonials, no FAQ, no email capture, no "get started," no feature cards**. The page is a *read*, not a funnel. - **Scroll-driven scenes**: each Route pins for a beat, the background `transform: translateY` parallaxes at ~0.4×, the sprite at ~0.7×, and dialogue text **types itself in** (typewriter-effect, ~28ms/char) when the Route enters the viewport, then sits. Use `IntersectionObserver`; honor `prefers-reduced-motion` by skipping the typewriter and just fading text in. - **The caret**: a CSS-animated triangular "▼ next" indicator that pulses (scale 1 → 0.85, opacity 1 → 0.5, 1.1s ease-in-out infinite) — purely decorative; the actual advance is the user's scroll. - **The affection meter**: a fixed-position vertical track on the right; a heart-shaped fill whose height is `clamp`-mapped to `scrollY` but with a slow lerp/easing so it *lags and drifts* rather than tracking exactly — and it never reaches 100%. Tiny DM Mono label updates with the percentage. - **`:: SELECT ::` interstitials**: between Routes, two or three option pills (rounded, 1px `#FF6FA5` glow border, `box-shadow` bloom on hover, sibling pills fade to 0.4 opacity and translate away slightly). Clicking any one smooth-scrolls to the next Route. The "branch" is theatrical only. - **Dialogue box texture**: rounded panel, `backdrop-filter: blur(8px)` over a `rgba(21,16,43,0.72)` fill, 1px inset highlight `rgba(154,216,232,0.25)`, and a `::after` scanline overlay. Name plate as a notched tab using `clip-path`. - **Sprite rendering**: pure CSS — a `border-radius`-blob `
` with a `linear-gradient(#F4B8D0, #9AD8E8)` fill, `filter: blur(0.5px) drop-shadow(0 0 40px rgba(244,184,208,0.4))`, a pseudo-element "eye-line" highlight that periodically dims via keyframes. No external images required. - **Falling petals/hearts**: ~14 absolutely-positioned small elements with randomized `animation-delay`, `animation-duration` (8–18s), horizontal sway via a second nested keyframe, varied opacity and `filter: blur` for depth. On scroll-pause (debounced), pause the animations briefly to mimic a "paused cutscene." - **Color/atmosphere**: every section gets the `#2A1B4A → #15102B` vignette and a radial pink bloom behind the sprite. Keep contrast gentle — paper-cream text on bruised-violet, never pure white on pure black. - **Audio**: optional, off by default — a single muted-by-default toggle (DM Mono "♪ BGM" glyph) that, if enabled, loops a faint ambient hum; never autoplay. - **Footer**: a "SAVE & QUIT" panel styled like a VN exit dialog — a fake save-slot summary ("renai.quest — route incomplete — last seen 03:14"), the broken-heart-bookmark glyph, and nothing clickable that promises anything. ## Uniqueness Notes **Differentiators from other CMassC designs:** 1. **Visual-novel / dating-sim UI as the entire structural metaphor** — dialogue boxes, name plates, affection meters, choice forks, CG galleries, save slots. No other site in the corpus uses the *romance-game interface* as its layout grammar; it is a literal reading of the domain word `renai`. 2. **Sprites-as-frosted-silhouettes** — characters are present but un-drawn: pure-CSS luminous gradient blobs with blinking highlights, sidestepping both photography (98% of corpus) and literal illustration while still feeling *populated*. 3. **The "playable artifact you cannot play" conceit** — every interactive affordance (caret, choices, meter) is deliberately inert; the affection meter *drifts and never resolves*. The site performs interactivity as melancholy rather than function — no CTA, no funnel, no stat-grid. 4. **Japanese-rounded + handwritten-genkō-yōshi typography** (Zen Maru Gothic + Klee One) — a pairing absent from the corpus's mono-dominant (94%) / humanist (45%) norms, chosen to read as *text typed onto a dialogue box* and *a name scrawled in a notebook*. 5. **Cherry-syrup-pink over midnight-ink palette** — a candy-sweet accent laid over deep indigo unease, distinct from the corpus's overwhelmingly warm (98%) palettes. **Chosen seed/style:** `surreal dreamscape promo` — bent into a *dating-sim-that-dreams-about-itself*: `aesthetic: surreal, layout: immersive-scroll, typography: rounded-sans + handwritten, palette: midnight-blue + candy-bright accent, patterns: parallax / typewriter-effect / scroll-triggered, imagery: custom-illustration (silhouette), motifs: floating-elements / star-celestial, tone: dreamy-ethereal × mysterious-moody`. **Avoided patterns from frequency analysis:** no hand-drawn (95%), no glassmorphism-as-primary (82% — used only as a thin dialogue-box texture), no card-grid marketing layout (91%), no photography (98%), no warm palette (98%), no mono-as-body-typeface (94% — DM Mono is chrome-only). Leaned instead into underused territory: surreal (7%), immersive-scroll (14%), typewriter-effect (14%), midnight-blue (7%), dreamy-ethereal (6%), mysterious-moody (11%).