# Design Language for matsurika.quest ## Aesthetics and Tone matsurika.quest is an **isometric ethereal aurora-cartography of bokeh-lit specimen-tiles** -- a 3D-rendered isometric world map where every "specimen" is a small floating tile in soft ethereal blues, surrounded by bokeh light and aurora bands. Imagine a Studio Ghibli architectural drawing of a sky-city, but rendered in isometric projection with oversized display typography labeling each district. The mood is *whimsical-creative* -- joyfully imaginative, soft, dreamy, with cursor-following light leaks creating a sense of magic. The brand "matsurika.quest" frames itself as a cartographic quest -- a journey through an isometric sky-city of jasmine-scented districts. Each "district" is one specimen tile floating in ethereal blue space. The cursor *paints light* across the cartography as it moves. Inspirational anchors: Studio Ghibli's *Castle in the Sky* sky-city architecture, the isometric pixel art of Eboy, the etherealized blue palette of Caspar David Friedrich paintings, the cartographic illustrations of Saul Steinberg, modern isometric design from Behance, and the bokeh-light photography of Hayao Miyazaki's location scouting. ## Layout Motifs and Structure A **centered** composition with the isometric cartography occupying the center of the viewport throughout the scroll, with content flowing vertically around and through it. The center axis is the spine of the sky-city. **Structural anatomy:** - **Top section (centered, 100vh):** A massive isometric cube/tile bearing the oversized wordmark "matsurika.quest" set in Bebas Neue or similar oversized-display caps -- the "capital tile" of the sky-city. Bokeh light floats around the tile, with faint aurora-light bands behind. - **District tiles (centered, vertical scroll, with isometric stacking):** 8-10 isometric tiles, each floating at slightly varied heights around the central axis. Each tile has: - An oversized district name in Bebas Neue caps (60-96px). - An isometric 3D rendering of a small building/specimen on top of the tile. - 2-3 lines of description below the tile in mid-sized geometric sans. - **Aurora-band motifs (between districts):** Faint horizontal aurora-light gradient bands separate major districts -- soft ethereal blue-to-violet gradients at low opacity. - **Bokeh ambient:** Throughout the page, a layer of bokeh light orbs drifts gently across the background -- 30-50 soft radial-gradient circles at varying sizes (12-80px), alphas (0.3-0.7), drifting at 0.04-0.08 px/ms with sine drift. - **Cursor-follow paint:** A subtle light-leak (radial-gradient soft glow) follows the cursor with a slight lag, painting transient illumination across whatever it passes. - **Footer tile (centered):** A small final isometric tile with "fin." in oversized caps and a tiny jasmine-flower SVG floating above. Spatial rhythm: centered and processional. Each district is a contemplation, ethereal and unhurried. ## Typography and Palette **Fonts (all Google Fonts):** - **Oversized display (primary):** "Bebas Neue" 400 -- a tall, narrow, all-caps display sans with high impact. Used for the wordmark at clamp(120px, 22vw, 280px), district names at 56-96px, all caps with letter-spacing 0.05em. The oversized treatment gives the cartography epic scale. - **Body / descriptions:** "Inter" 400/500 at 15-16px, line-height 1.62 -- a clean modern sans for readable descriptions. - **Small labels (coordinates, tile-numbers):** "Inter" 500 small-caps at 11-12px, letter-spacing 0.22em -- like map-key annotations. - **Numerals:** "Inter" 600 tabular figures for coordinate readouts ("36.21°N · 138.74°E"). **Palette (ethereal-blue):** - `#E8F1FA` -- Sky Mist (primary background, top of sky) - `#A6C9E0` -- Sky Cyan (mid background, mid-sky gradient) - `#4D6E94` -- Twilight Blue (tile surfaces, primary type) - `#0F1F3D` -- Deep Indigo (deepest contrast, type shadows) - `#F7E6CC` -- Sunset Cream (rare warm accent, district highlights) - `#B5A0D9` -- Aurora Violet (aurora-band gradient) - `#FFFFFF` -- Pure White (bokeh light, brightest highlights) Ethereal strategy: a global vertical gradient from Sky Mist (top) -> Sky Cyan (mid) -> deeper Sky Cyan (bottom) creates a continuous sky backdrop. Bokeh orbs use radial-gradients from White center to transparent edge, blended with `mix-blend-mode: screen`. ## Imagery and Motifs **Core visual motifs:** - **Isometric district tiles (the centerpiece imagery):** Each tile is a 3D isometric rendering -- a square tile with a small structure (tower, jasmine garden, pagoda, library, cocktail bar, observatory) atop it. Rendered as SVG with 30-degree isometric projection, 3-tone shading per face (light/mid/dark Twilight Blue). - **Aurora-lights motif:** Soft horizontal aurora-light bands (Sky Cyan -> Aurora Violet -> Sky Mist) between districts. Each band pulses opacity (0.25 -> 0.45 -> 0.25) on a 6s loop. - **Bokeh photography ambient:** A layer of bokeh light orbs drifting across the entire viewport, providing depth and atmosphere. Some orbs have tiny inner stars or jasmine-flower silhouettes. - **Cursor-follow paint-trail:** A subtle radial-gradient glow (40-60px diameter, Pure White at 0.3 alpha) follows the cursor with 80ms lag, painting transient illumination. - **Tiny jasmine-flower SVGs:** Distributed sparingly across the cartography -- floating jasmine flowers at varying scales (8-24px), as if the sky-city were perfumed. **Decorative patterns:** - A subtle vertical gradient backdrop (Sky Mist -> Sky Cyan -> deeper Sky Cyan) over the entire body. - A faint noise grain (SVG turbulence at 4% opacity) for atmospheric texture. ## Prompts for Implementation **Open with the sky-city emerging.** First 3000ms: viewport begins in Sky Mist. Over 1200ms, the sky gradient develops downward as Sky Cyan and deeper Sky Cyan reveal. The first capital tile materializes from above (translateY -120px -> 0, scale 0.6 -> 1.0, with cubic-bezier(0.22, 1, 0.36, 1) easing, 1200ms). As the tile lands, the wordmark "MATSURIKA.QUEST" types itself on top in Bebas Neue caps (letter-by-letter, 80ms per letter). Bokeh orbs begin drifting in from the edges of the viewport. The cursor-follow paint trail activates after the wordmark completes. **Cursor-follow pattern (featured):** This is the primary motion vocabulary. - The cursor is followed by a radial-gradient glow (40-60px diameter, Pure White at 0.3 alpha) with an 80ms lag (using requestAnimationFrame + lerp). The glow uses `mix-blend-mode: screen` so it brightens whatever's behind it. - When the cursor passes over an isometric tile, the tile's nearest face brightens proportionally -- mimicking real light reflection. The tile face has a CSS variable `--light-strength` modulated by cursor proximity. - When the cursor passes over a jasmine flower SVG, the flower briefly glows (drop-shadow expanding 0 -> 8px Sunset Cream, returning). - When the cursor passes over a bokeh orb, the orb intensifies briefly (alpha increases by 30% for 200ms). - The cursor itself becomes a small SVG jasmine-flower icon on the page (custom cursor). **Isometric tile parallax:** Each district tile has subtle scroll-coupled parallax -- nearer tiles (foreground) move at 100% scroll velocity, distant tiles at 70%. This produces a 3D depth-effect as the user scrolls through the sky-city. **Aurora-band pulse:** Aurora-light bands between districts pulse opacity (0.25 -> 0.45 -> 0.25) on a 6s ease-in-out infinite loop. The gradient `background-position` also slowly translates horizontally (8s linear loop), making the aurora *flow* across the band. **Tile hover choreography:** When the cursor hovers over a tile, the tile rotates ±3deg on its X and Y axes (CSS 3D transforms tied to cursor position), and a soft white halo appears beneath it (drop-shadow expanding 0 -> 16px). District name in Bebas Neue gains a subtle text-shadow glow. **Bokeh particle drift:** Pure JS Canvas2D layer with 40 bokeh orbs. Each has: position, radius (12-80px), alpha (0.3-0.7), velocity (0.04-0.08 px/ms in random direction), and a slow gentle drift pattern. Some orbs have inner content (tiny stars or jasmine outlines). When an orb leaves the viewport, it re-enters from an opposite edge. **Storytelling beats (whimsical-creative cartography, no CTAs):** 1. Sky-city emerging intro. 2. Capital tile with wordmark. 3. District tiles I through VIII-X, each a different specimen building atop an isometric tile, with district name in oversized caps. 4. Aurora-light bands between districts. 5. Bokeh ambient drift throughout. 6. Footer tile: small isometric base with "fin." and floating jasmine flower. **Anti-patterns to avoid:** No CTAs, no signup, no pricing, no testimonials, no feature trios. The site is an ethereal cartography of imaginary districts, not a service page. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Isometric aesthetic (4%) + ethereal-blue palette (1%) + bokeh imagery (3%) + aurora-lights motif (2%):** Four individually rare ingredients combined to produce an unmistakable "isometric sky-city" identity. 2. **Cursor-follow pattern (15% but typically used as small accent here used as primary):** Most cursor-follow uses are tiny custom-cursor accents; this design makes the cursor the *primary light source* of the page -- painting illumination, brightening tile faces, glowing jasmine flowers. 3. **Oversized-display typography (2%) used at extreme scales (up to 280px):** Most oversized-display in the collection caps at ~120px; here Bebas Neue reaches 280px, treating typography as architectural -- as much a building as the isometric tiles. 4. **Centered layout (95% used) reframed as cartographic spine:** Instead of using centered as the default hero-card pattern, this design treats centered as the *cartographic axis* of a sky-city -- a structural rather than presentational choice. 5. **Whimsical-creative tone (3%) + isometric imagery: the architectural whimsy is unique:** Most whimsical-creative designs lean illustrative; this one is whimsical *through* architectural isometric precision. **Chosen seed/style:** aesthetic=isometric, layout=centered, typography=oversized-display, palette=ethereal-blue, patterns=cursor-follow, imagery=bokeh-background, motifs=aurora-lights, tone=whimsical-creative. **Avoided overused patterns:** Refused parallax-as-decorative (95% -- here parallax is *3D depth*, not background drift), refused mono typography (81%), card-grid (91%), and the default mysterious-moody tone (71%) for ethereal whimsical wonder.