# Design Language for kaguya.quest ## Aesthetics and Tone kaguya.quest is **retro-futuristic moon-quest signage** -- a tall centered banner site that looks like a 1969 NASA mission patch projected onto a marble plinth in a museum gift shop in 2089. The mood is **bold-confident**: the title speaks first, the body explains nothing it doesn't need to. Inspirations: NASA Apollo mission patches, the kinetic-typography opening titles of "2001: A Space Odyssey," Verner Panton's 1969 plastic-orb living rooms, the marble plinth of Brancusi's "Bird in Space," Saul Bass's "Vertigo" spiraling type, and the 3D-render aesthetics of Behance Wallpaper Roll posters circa 2023. Retro-futuristic supplies the chrome arcs, ringed-planet illustrations, and starburst markers; kinetic-animated typography makes the wordmark slowly transform; the pastel palette grounds it in soft optimism. Marble-classical motifs (acanthus, ionic capitals, fluted columns) recur as decoration, treated in pastel tones rather than ivory -- a soft remix of the classical. The voice is bold and direct: "begin the quest. you are already prepared." ## Layout Motifs and Structure A **centered** layout, vertically banner-shaped. Everything sits within a 640px-wide centered column. The narrowness focuses attention on the type. - **Opening banner (140vh):** Centered in the column, a tall composition: - Top: a hand-drawn marble-classical urn motif in pastel mint. - Middle: the wordmark "KAGUYA.QUEST" set in kinetic-animated type at clamp(64px, 11vw, 168px). Each letter has its own subtle animation -- some letters slowly rotate by ±2deg, some letters' weight axis oscillates over 6.4s, some letters' tracking expands and contracts. The animation never stops; the title is alive. - Bottom: a small subtitle "an exhibition for moon-born travellers" in pastel-burnt orange small caps. - **Quest cards (5x ~120vh):** Each card is a centered marble-plinth illustration with a 3D-rendered object sitting on top -- a moon orb, a brass compass, a ringed planet, a glass cube, a chrome rose -- and a single quest title beneath. Each card has a 1px border-animate pattern: the border traces around the card on hover (clockwise sweep over 1.2s). - **Star map (90vh):** A centered constellation of small star-dots arranged in patterns; hovering on each reveals a quick quest hint. - **Hall of completed quests (60vh):** A centered list of small marble busts, each labeled with a one-line quest summary. - **Footer banner (80vh):** A repeat of the kinetic-animated wordmark, now in pastel-burnt orange instead of mint, with a single closing line: "the quest awaits." The centered column creates a tall axis of attention; everything is on the vertical line and breathes vertically. ## Typography and Palette **Fonts (Google Fonts only):** - **Display (kinetic-animated):** "Bungee" weight 400 at clamp(64px, 11vw, 168px) for the wordmark. Bungee's geometric block letterforms read as retro-futurist signage. Each letter is wrapped in a span and given its own animation timing. - **Sub-display:** "Bungee" at clamp(28px, 4vw, 52px), tracking 4%, for quest titles. - **Body:** "Quicksand" weight 500 at 18px / 1.7. Rounded body type softens the angular display. - **Italic:** Quicksand light italic for asides. - **Numerals:** "Bungee" tabular at 22px. - **Captions / small labels:** "Quicksand" weight 700 small caps at 11px tracking 14%. **Palette (pastel -- a moon-quest sky at dawn):** - `#f4ecdc` -- moondust cream (primary background) - `#e8d8f0` -- amethyst pastel (secondary background) - `#c4e0d8` -- mint pastel (highlight, marble fill) - `#f0c8d4` -- rose pastel (decorative accent) - `#9890c4` -- twilight lavender (mid-tone) - `#3a3050` -- ink violet (text) - `#e8a060` -- pastel-burnt orange (the only warm tone, used for the second wordmark and small accents) Six pastels and one warm orange: the palette is balanced soft with a single warm anchor at the bottom. ## Imagery and Motifs - **3D-render objects on marble plinths:** Each quest card features a hand-rendered 3D illustration of an object on a marble plinth -- moon orb, brass compass, ringed planet, glass cube, chrome rose. Rendered with soft pastel gradients and subtle shadows, evoking Behance 3D render aesthetics. - **Marble-classical motifs:** Urns, capitals, acanthus leaves, and fluted columns in pastel hand-drawn line work. These are the classical alphabet of the site. - **Kinetic-animated wordmark:** Each letter of "KAGUYA.QUEST" has its own continuous subtle animation -- rotation, weight, tracking, or scale -- on independent 4-9s cycles, creating a permanently alive title. - **Border-animate quest cards:** Each card's border is drawn as four SVG `` elements. On hover, they animate in clockwise sequence (top -> right -> bottom -> left), each line drawing over 300ms with `stroke-dashoffset`. - **Particle-effect stars:** The star map section has small pulsing stars (3-5px dots) that twinkle individually (opacity 0.3 -> 1 cycles at 4-7s, random per star). - **Retro-futurist arcs:** Faint concentric arcs in the background of the opening banner, in twilight lavender at 12% opacity, suggesting orbital paths. ## Prompts for Implementation The site is a tall centered banner, alive with kinetic type and gentle marble decoration. Build for vertical attention and slow continuous motion in the display. - Centered column: `max-width: 640px; margin: 0 auto; padding: 0 24px;`. All content lives inside this column on desktop; on mobile, it's just `padding: 0 16px`. - Kinetic-animated wordmark: wrap each letter in `` and apply per-letter CSS animations: - Letter K: `@keyframes lk { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-2deg); } }` at 6.4s. - Letter A: `@keyframes la { 0%, 100% { letter-spacing: 0; } 50% { letter-spacing: 2px; } }` at 5.2s. - Letter G: `@keyframes lg { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }` at 4.8s. - And so on. Each letter has its own timing; the title never repeats the same configuration. - Border-animate: each card has four SVG `` elements with `stroke-dasharray` set to their length. On `:hover`, JS adds a class that sets `stroke-dashoffset: 0` with staggered transition delays (0ms, 300ms, 600ms, 900ms). - 3D-render illustrations: each is an SVG with multiple `` and `` elements and a soft pastel gradient `` to simulate shading. Plinths are short cylindrical SVGs with marble-vein noise overlays. - Reduced motion: all kinetic letter animations stop on first frame; border-animate becomes an instant border on hover; particle stars stop twinkling. - AVOID generic CTAs, signup banners, pricing tiers. The site is an exhibition; the only interaction is one mailto in the footer: "begin a new quest by writing to the curator." - Storytelling: opening banner declares the exhibition; quest cards introduce five quest objects; star map shows them as constellations; hall of completed quests honors history; closing banner repeats the wordmark with a new color, completing the circle. - Bold-confident voice: "begin the quest. you are already prepared." "the moon orb has waited two thousand years. you are not late." "if you choose nothing today, you have still chosen well." ## Uniqueness Notes **Differentiators from other designs:** 1. **Retro-futuristic + marble-classical + 3D-render pastel:** A specific intersection (Apollo-era retro + classical antiquity + Behance pastel 3D) that no other design assembles. 2. **Centered 640px tall banner column:** Most centered designs use wider columns (720-960px). The 640px discipline produces a banner-poster feeling more than a reading column. 3. **Kinetic-animated wordmark with per-letter independent timing:** Each letter has its own slow animation cycle, never synchronized. The title is permanently alive but never aggressive. 4. **Border-animate cards with sequential edge drawing:** Borders draw in around each card in clockwise sequence on hover -- a quest-completion animation made literal. 5. **Pastel palette with single warm anchor (burnt orange) for second wordmark:** The closing wordmark reprises the opening but in burnt orange, creating a temporal A-to-B color shift that signals quest progression. **Chosen seed:** retro-futuristic centered kinetic-animated pastel border-animate 3d-render marble-classical bold-confident -- planned seed from assignment. **Frequency-aware choices:** `retro-futuristic` (6%), `kinetic-animated`, `border-animate`, `3d-render`, and `marble-classical` motifs are all uncommon. Avoids overused `playful`, `corporate`, and `photography` patterns. Bungee + Quicksand pairing is rarely combined with pastel retro-futurism.