# Design Language for sister.quest ## Aesthetics and Tone Pixel-art arcade kiosk meets 1994 candy-shop holographic foil — but everything is rendered in a sugar-sweet pastel future, like a Game Boy Color screen filtered through the haze of a bubble-tea straw. The page invokes the energy of a Saturday-morning game-show set built inside a glittering marble showroom: chunky pixel sprites, candy-shimmer marble inlays, jellybean parallax-free bounce. Inspiration: PICO-8 demoscene exhibition reels, the title screens of Kirby's Adventure and Mother 2, vaporwave but with the saturation dialed UP not down, Sanrio pastel-futurism, the marble-stuccoed showrooms of mid-century Italian gelaterias. The tone is energetic — bouncing, exclaimed, joyful. The page should feel like it just had three pixel-sugar cubes. ## Layout Motifs and Structure Hud-overlay layered atop a marble-showroom backdrop. Three planes: the marble floor base (a pale rose travertine field), the pixel HUD overlay (chunky 4× pixel sprite frames at corners with character portraits, score chips, mini-map pings), and the foreground content panels (rounded pixel-bordered cards). Sections are arranged as level-stages: a sequence of arcade-screen viewports, each with a top-banner HUD ("STAGE 04 — SISTER QUEST"), pixel character sprite bouncing in lower-left, and a central pastel content panel. Futuristic motifs (small SVG pixel rockets, comm-link icons, holographic gem chips) drift into the HUD at intervals. Bounce-enter pattern dominates: every section, sprite, and panel enters with a tight spring bounce (overshoot 1.12 then settle in 380ms). No standard parallax; bounce is the page's emotional metronome. ## Typography and Palette - **Display:** "Press Start 2P" (Google Fonts) — pixel-display for HUD banners, score chips, stage numbers - **Display secondary:** "Poppins" (Google Fonts) — playful-rounded for character speech and section titles, weight 700 - **Body:** "Quicksand" (Google Fonts) — playful-rounded, weight 500, for narrative dialog at 16px - **Caption:** "Space Mono" (Google Fonts) — for HUD numeric counters and item codes Palette — Pastel candy-arcade: - `#FFF0F6` Cotton Cloud — background, marble base tint - `#FFB7D5` Bubblegum Pink — primary accent, HUD frames - `#A3E4FF` Sherbet Sky — secondary, sprite outlines - `#FFE066` Honey Pop — accent for score chips, coin shimmer - `#7C5CFF` Grape Soda — text emphasis, sprite shadow - `#3B2A4F` Plum Twilight — body text, deep contrast anchor ## Imagery and Motifs - **Marble-texture**: pale rose travertine backdrops behind each stage — but rendered with subtle 1-bit pixel dithering at the edges, where the marble meets the pixel HUD. The texture is real marble at the center, pixelated at the seams - **Futuristic motifs**: tiny pixel rockets, comm-link glyphs, holographic gem chips, satellite ping bursts. Each appears in the HUD corners and animates with a soft bounce-spawn - Pixel-art sprites: 4 recurring character chibi sprites in 24×24 pixel canvases scaled 4× — each used as section guide - Candy-bubble ornaments: small pastel star pings, lollipop spirals, candy-wrapper ribbons twirling between sections - Holographic gem chip: a 6-sided pastel SVG gem reappears at chapter resolutions, sparkling via 3-frame CSS keyframe ## Prompts for Implementation - Page structure: 5 "stages" each as a full viewport with a top HUD banner, central marble panel, and a pixel sprite anchor at lower-left - Bounce-enter: every panel and sprite enters with `cubic-bezier(.34,1.56,.64,1)` over 380ms, scale from 0.92 → 1.08 → 1.0 - Pixel sprites: render as inline SVG with `image-rendering: pixelated`, scale via CSS transform (no antialiasing); animate two-frame idle bobs at 600ms intervals - Marble surface: an SVG turbulence field tinted with rose hues, with the outer 80px feathered into a 1-bit dither pixel pattern via SVG mask - AVOID: pricing tiers, CTA bars, social proof, testimonials. Replace any "feature" presentation with character-dialog speech bubbles - HUD overlay: thin 3px Bubblegum Pink frames at top and bottom of each viewport with corner-tick decorations, holding stage codes - Character speech bubbles: rounded rectangles with a Poppins 700 caption, a Press Start 2P speaker label, and a 4px pixel border - Pages should feel buoyant: no element ever sits still longer than 5s — every sprite has a micro-bob, every chip has a micro-pulse ## Uniqueness Notes - Differentiator 1: pixel-art + marble-texture is a high-contrast surface pairing the corpus rarely attempts — chunky lo-fi over haute mineral - Differentiator 2: hud-overlay used for arcade staging rather than cyberpunk dashboards - Differentiator 3: bounce-enter as the canonical entry pattern displaces the 94% parallax dominance with kinetic spring - Differentiator 4: pastel palette executed with full saturation — opposite of the pale-washed pastel tradition - Differentiator 5: futuristic motifs as candy-shop arcade glyphs, not cyber-circuit; energetic tone counters mysterious-moody dominance - Chosen seed: aesthetic: pixel-art, layout: hud-overlay, typography: playful-rounded, palette: pastel, patterns: bounce-enter, imagery: marble-texture, motifs: futuristic, tone: energetic - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%), photography (90%), warm palette (93%), mysterious-moody (70%), mono typography (81%)