# Design Language for hinagiku.quest ## Aesthetics and Tone **Hinagiku** is the Japanese word for "daisy" — and *hinagiku.quest* is the home of a fictional, perpetually-unfolding side-quest: a bedazzled handheld dream-machine where a single chrome daisy is your guide, your save-file, and your reward. The governing aesthetic is **mcbling** — the rhinestoned, glossy, lip-gloss-and-flip-phone luxe of roughly 2003–2008 — but pulled forward and *up*, into a **retro-futuristic** spec-sheet of a personal device that never shipped: the "Hinagiku Quest Companion v1," a translucent jelly-cased pocket oracle with a bezel of cabochon gems, a screen full of rising bubbles, and a daisy that blooms a new petal every time you scroll. The mood is **futuristic-cutting-edge** in tone — confident, glossy, "look what we made" — but warm and playful underneath, never cold. Think: the unboxing video for a product from a parallel 2007 where Frutiger Aero and Juicy-Couture rhinestone culture merged in the same R&D lab. Everything has *shine*: specular highlights crawl across surfaces, chrome bevels catch a moving light, gel buttons depress with a wet click, and a faint sparkle-glint travels diagonally across the daisy mark like a diamond ring catching the sun. There is glitter, but it is *engineered* glitter — particle systems, not clip-art. Reference touchstones: clear-jelly Y2K electronics (translucent purple Game Boys, see-through pagers), Motorola RAZR chrome, bedazzled bubble-letter logos, Paris-Hilton-era pink-on-pink gradients, the bubble-and-grass Frutiger Aero wallpaper, Tamagotchi/digital-pet UI chrome, lip-gloss product macro photography, holographic Lisa-Frank-adjacent sticker sheets, and the soft-glow vector "aqua" buttons of mid-2000s OS chrome — all reassembled into one cohesive, premium-feeling dream device. ## Layout Motifs and Structure A **hero-dominant** layout: the first viewport is not a banner-over-cards — it *is* the page's center of gravity, a full-bleed "device hero" that holds ~80% of the visual weight, and everything below is a slow, scroll-triggered descent through the device's "screens." Structure: - **The Hero Device** — center-stage, a large rounded-rectangle "handheld" rendered in CSS: a translucent jelly shell (frosted, with visible internal glow), a chrome-bevel rim studded with cabochon "gems" at the corners, and a glossy screen showing a **field of slowly rising water-bubbles** behind a single big chrome-and-rhinestone **Daisy Mark**. The wordmark "hinagiku" arcs along a flowing curve beneath it in bubble-rounded type. A pulsing gel "QUEST" button sits at the bottom of the device like a console start button. This hero fills the viewport and *breathes* — it floats with a gentle 4–6px buoyancy, bubbles drift up forever, the chrome catches a moving spec highlight. - **The Petal Descent** — scrolling does not reveal "sections" so much as **petals**: as you scroll, the daisy in the hero (which becomes a small sticky companion in the corner) blooms a new petal, and a corresponding content "screen" slides up from below on a flowing-curve path. 4–6 screens total, each framed inside its own smaller jelly-device chrome (a "screenshot" of the companion app): *The Quest* (what this is), *The Daisy* (the mascot/lore), *The Garden* (a gallery of states/skins), *The Codex* (notes, in a glossy bubble), *The Save* (a closing "your file is saved" moment). - **Flowing-curve spine** — a single continuous bézier "ribbon" runs vertically down the whole page, like the cable connecting the device's parts; content screens hang off it at alternating offsets (gentle asymmetry, never a rigid grid). The ribbon is glossy, gradient-filled, and a string of tiny bubbles rises along its length as you scroll. - **Bezel framing everywhere** — every block sits inside a chrome-beveled, gem-cornered rounded-rect. Negative space is treated as the *jelly interior*: faintly tinted, faintly glowing, never flat white. - No persistent nav bar; navigation is the daisy companion in the corner whose petals are the section anchors (hover a petal → that screen glows and the page scrolls to it). Avoid: hero-then-three-cards-then-CTA funnels, pricing tables, "trusted by" logo walls, stat-grids with big numbers and "+" signs, testimonial carousels, sidebars, dashboards. The "screens" look like a product but report *vibes and lore*, never metrics. ## Typography and Palette **Display / wordmark — playful-rounded, bubble-letter:** **"Fredoka"** (Google Fonts) at maximum weight for the "hinagiku" wordmark and the big screen titles — its rounded terminals and chubby bowls are pure inflatable-bubble-letter, and they take a chrome/gradient fill and a beveled drop-shadow beautifully. **"Baloo 2"** (Google Fonts) as the secondary rounded display for petal/screen headers and the "QUEST" button — friendly, glossy, marquee-ready. **Body / UI text — rounded humanist sans:** **"Quicksand"** (Google Fonts) for all readable copy, captions, and the codex notes — its geometric-but-soft roundness keeps the whole thing legible and warm against all the gloss. **Accent / labels / spec-sheet numerals — clean techno-mono:** **"Space Mono"** (Google Fonts) for small uppercase labels, the fake "spec sheet" data, version stamps, and coordinates — a deliberate cool, precise counterpoint to the bubble-letters so the device reads as *engineered*, not just cute. Palette — **retro-futuristic**: candy-bright pinks/violets against chrome and a cool "aero" cyan-glass, with an electric pop of citrus: - `#ff5fb0` — **Bubblegum Bling** — the dominant mcbling pink; the daisy's blush, button fills, headline glow - `#b15cff` — **Jelly Violet** — the translucent shell tint, secondary gradients, deep bevel shadows - `#3fd4e8` — **Aero Cyan** — Frutiger-Aero water/glass cyan; bubbles, screen wash, the "online" glow - `#fff14d` — **Citrus Spark** — the daisy's center disc, sparkle glints, the "QUEST" accent — the one loud pop - `#fbe9f6` — **Glosslight Pink** — near-white pale pink for body text on dark, the lit screen base - `#1b0f2e` — **Midnight Plum** — deepest background behind the device, the "powered-off" void at the footer - `#e9ecf5` → `#9aa6c2` — **Chrome Pair** — the cool light/dark stops for every metallic bevel, rim, and gem facet - `#6a3b00` is *not* used; warmth comes only from Citrus Spark — discipline keeps it candy, not muddy Default state is the dark Midnight-Plum void with the device glowing in it; one or two interior screens may flip to a bright Glosslight-Pink "lights on" mode like a phone in daylight. ## Imagery and Motifs - **The Chrome-Rhinestone Daisy** — the single hero motif: a daisy whose petals are individually-faceted, gem-edged jelly shapes (pink → violet gradient, glossy specular streak on each), and whose center disc is a pavé cluster of tiny Citrus-Spark "rhinestones." Pure inline SVG with layered gradients, a moving ``-style highlight, and an animated diagonal sparkle-glint. It blooms a petal per scroll-section and idles with a slow wobble. - **Rising water-bubbles** — everywhere, but tasteful: a `` (or layered SVG) bubble system inside every "screen," bubbles of varied size with thin specular rings rising and gently jittering, popping at the top with a tiny shimmer. Bubbles also climb the flowing-curve spine as you scroll. Restrained density — atmospheric, never a snow-globe. - **Jelly + chrome bezel emblems** — translucent rounded-rect "device" frames with chrome bevels and cabochon corner gems; gel "aqua" buttons with a top-half white gloss and a wet press animation; a tiny chrome "battery/heart" status pip; a sparkle-particle burst on button press. - **Flowing-curve ribbons** — glossy gradient bézier ribbons used as the page spine, as headline underlines that *draw themselves* on scroll, and as the path the daisy wordmark arcs along. Curves only — no sharp angles anywhere in the chrome. - **Engineered glitter** — a sparse particle field of star-glints and tiny diamonds, denser near the daisy and on hover/press; obeys `prefers-reduced-motion` by freezing into one pretty arrangement. - **Fake spec-sheet ornament** — small Space Mono "data" tags ("v1.0 / petals: 5 / shine: max / save: ☑") tucked into bezel corners, treating the lore as a product spec — playful, never a real stat-grid. - **Texture** — a faint glossy "screen reflection" sheen (a soft diagonal light-band) over dark areas, plus an almost-invisible fine sparkle-grain so flat fills never look dead. ## Prompts for Implementation - Build it as **one immersive, hero-dominant "device" experience** the visitor unboxes, not a scrolling brochure. The first paint: the dark Midnight-Plum void, then the Hinagiku Quest Companion device fades+scales in with a glossy bevel-shine sweeping across it, the daisy mark assembling petal-by-petal (path-draw SVG) with a sparkle-burst on completion, the bubble field already alive behind the screen, the "hinagiku" wordmark arcing in along its flowing curve, and the gel "QUEST" button settling with a soft overshoot and a slow pulse. - **Scroll is the primary verb.** Use `scroll-triggered` reveals as the page's spine: each scroll milestone (a) blooms one more petal on the (now-sticky-corner) daisy companion, (b) slides the next interior "screen" up from below along a flowing-curve path with a spring/overshoot ease, (c) advances the bubbles up the spine ribbon, and (d) draws that screen's curved headline underline. Implement with IntersectionObserver + a scroll-progress variable driving the daisy bloom and ribbon-bubble position; everything spring-eased, durations .4–.8s, calm not frantic. - **Gloss is the material law.** Every surface gets: a chrome bevel (light/dark `#e9ecf5`/`#9aa6c2` linear-gradient edges), a top-half white gloss overlay on buttons, a slow-moving specular highlight (animate a `background-position` light-band or an SVG highlight ellipse), and rounded everything (`border-radius` generous, never a hard corner). Gel buttons depress on `:active` (translate + scale + inner shadow) and emit a sparkle-particle burst. - **The bubble & glitter systems**: a lightweight `` per screen for rising bubbles (varied radius, thin specular ring, gentle horizontal jitter, pop-shimmer at top) and a sparse star-glint particle field that intensifies near the daisy and on hover/press; both freeze to a beautiful still under `prefers-reduced-motion`. - **Content screens (as device "screenshots," not funnel blocks):** *The Quest* (a glossy intro card — what hinagiku.quest is, in Quicksand, headline in chrome-filled Fredoka); *The Daisy* (the mascot/lore — the big rhinestone daisy SVG that wobbles and glints, with a Space-Mono "spec" tag); *The Garden* (a soft asymmetric gallery of daisy "skins"/states in their own little jelly frames); *The Codex* (quiet notes/log inside a translucent speech-bubble shape); *The Save* (a closing "★ your quest is saved ★" moment — a satisfied glossy confirmation, sparkle-burst, the daisy fully bloomed). A daisy companion in the corner whose petals are the section anchors. - **AVOID:** CTA-stacked landing layouts, pricing tables, big-number stat grids, "Trusted by" logo walls, popup modals, testimonial carousels, generic card-grid-then-footer, sidebars, analytics dashboards. The "spec sheet" tags are *playful product flavor*, never KPIs. - Type treatment: Fredoka huge with a chrome/gradient fill, beveled multi-layer drop-shadow, and a soft pink `text-shadow` glow; Baloo 2 for marquee screen headers and the QUEST button; Quicksand at comfortable reading size, generous line-height, for warmth; Space Mono tiny, uppercase, wide-tracked for all labels/spec-data/version stamps. - Palette discipline: dark Midnight-Plum `#1b0f2e` void default with the device glowing in it; Bubblegum Bling `#ff5fb0` and Jelly Violet `#b15cff` as the candy gradient core; Aero Cyan `#3fd4e8` reserved for water/bubbles/glass; Citrus Spark `#fff14d` as the *single* loud pop (daisy center, sparkles, QUEST accent); Chrome Pair for every metallic bevel/rim/gem; at most one or two Glosslight-Pink `#fbe9f6` "lights-on" interior screens. ## Uniqueness Notes Differentiators from other designs in this collection: 1. **mcbling as the actual governing aesthetic** — rhinestoned, glossy, lip-gloss-luxe 2003–2008 bling rebuilt as a *cutting-edge product spec*, not a kitsch costume. mcbling appears in ~1% of designs here and almost never as the controlling system; pairing it with retro-futuristic palette (~4%) and playful-rounded bubble-letter typography (~4%) is essentially unrepresented. 2. **The "dream device" hero metaphor** — a single full-bleed translucent-jelly handheld ("Hinagiku Quest Companion v1") as the page's center of gravity, with content screens framed as the device's own screenshots; hero-dominant layout (~11%) used as a true product-object stage rather than a banner. 3. **Scroll-as-bloom** — scrolling literally blooms petals on the chrome-rhinestone daisy and slides device "screens" up along a flowing-curve spine; scroll-triggered (~20%) is the page's structural verb here, married to flowing-curves motifs (~5%), not a decorative add-on. 4. **Water-bubbles + engineered glitter as the imagery system** — `` rising-bubble fields inside every screen plus a sparse star-glint particle field; water-bubbles imagery (~6%) used as the literal screen content, fused with Frutiger-Aero cyan glass against mcbling pink. 5. **Candy-chrome retro-futuristic palette with strict discipline** — Bubblegum pink + Jelly violet + Aero cyan + a single Citrus-Spark pop over a Midnight-Plum void, with chrome bevels everywhere; the retro-futuristic palette (~4%) kept loud-but-coherent, no muddy warm fallback, no generic warm-gradient default. Chosen seed: **aesthetic: mcbling, layout: hero-dominant, typography: playful-rounded, palette: retro-futuristic, patterns: scroll-triggered, imagery: water-bubbles, motifs: flowing-curves, tone: futuristic-cutting-edge** Avoided per frequency analysis: no hand-drawn/glassmorphism aesthetic (96%/66% — avoided), no photography-led imagery (99% — avoided in favor of CSS/SVG/canvas device rendering), no card-grid/full-bleed/centered default layout (87%/94%/84% — replaced by a single hero-device stage with a flowing-curve spine), no warm/gradient default palette as the *whole* story (warmth here is one disciplined Citrus pop), no mono-only typographic crutch (mono is confined to fake spec-sheet labels), and explicitly no over-reliance on parallax/cursor-follow/magnetic/spring-everything (parallax is reduced to a few px of device buoyancy; the controlling pattern is scroll-triggered blooming, not pointer tricks).