# Design Language for yamato.quest ## Aesthetics and Tone yamato.quest should feel like opening an lacquered travel case and finding a miniature floating expedition inside: an elegant, isometric quest-map where old Yamato court ceremony, sea routes, folded paper geometry, and playful game-board movement coexist. The mood is **isometric, elegant-sophisticated** rather than arcade-cute: polished indigo lacquer, vermilion seals, moonlit parchment, and tiny raised platforms that appear crafted from washi, ceramic, and dark wood. The experience is a ceremonial journey toward an unnamed horizon. “Yamato” should be treated as a mythic place-name, not a literal history lesson: use suggestion, fragments, and atmosphere. Imagine a vertical emakimono scroll translated into a dimensional toy theater. Each scroll segment reveals a new isometric island of meaning — harbor, gate, archive, garden, observatory — with elastic motion that makes the world feel alive but never childish. The sophistication comes from restraint: ample night space, precise shadows, limited complementary color accents, and carefully paced reveals. ## Layout Motifs and Structure Use a **timeline-vertical** structure as a descent through five “quest stations,” each occupying nearly a full viewport. A thin ceremonial timeline runs down the page slightly left of center, but it is not a generic line with dots; it should behave like a braided red-and-indigo cord that bends around isometric platforms. Each station sits on a different raised diamond plane, offset alternately left and right, creating a zig-zag pilgrimage through depth. Recommended page choreography: 1. **The Lacquered Map Case:** A full-screen opening with the domain name arranged on an isometric title plaque. A folded map unfurls diagonally from lower-left to upper-right while tiny geometric waystones pop into place with elastic easing. 2. **Harbor of First Bearings:** A small isometric pier and crescent bay rendered in flat duotone shapes. Copy appears as short poetic coordinates rather than marketing claims. 3. **Vermilion Gate Segment:** A torii-like abstract gate made from blocks and circles, crossed by the vertical cord. It marks a transition from ordinary navigation to mythic quest. 4. **Archive Terraces:** Stacked diamond tiles carrying fragments, sigils, and short chapter labels. Avoid cards; make each tile feel like a ceramic tablet embedded in the landscape. 5. **Moon Compass Finale:** A quiet, expansive closing scene with a rotating isometric compass, a pale moon disc, and the domain set as a final seal. The composition should avoid centered card grids completely. Favor large negative space, diagonal movement, layered-depth, and objects that appear to be placed on a ceremonial board. Sections may overlap vertically so the timeline cord threads behind one platform and in front of the next. ## Typography and Palette Typography should blend rounded approachability with courtly refinement: - **Display:** “M PLUS Rounded 1c” from Google Fonts, weights 500, 700, and 800. Use it for the main yamato.quest title, chapter numerals, and large station names. Its rounded terminals keep the quest playful without losing Japanese-inflected elegance. - **Body:** “Nunito Sans” from Google Fonts, weights 400 and 600. Use for compact narrative text, captions, and timeline annotations; keep line lengths short and airy. - **Accent / Seal Text:** “Shippori Mincho” from Google Fonts, weight 500. Use sparingly for small poetic fragments, vertical labels, or seal-like captions to add a refined manuscript note. Palette: a complementary indigo-vermilion system with moonlit neutrals and lacquer shadows. - Deep lacquer indigo: `#101A3A` - Midnight ink: `#060914` - Vermilion quest cord: `#E7472E` - Soft coral highlight: `#FF7A59` - Moon parchment: `#F4E8CF` - Pale ceramic blue: `#A7C7D9` - Aged gold linework: `#C9A24D` - Shadow plum: `#2A1633` Use `#101A3A` and `#E7472E` as the central complementary pair. Backgrounds should lean dark and lacquered, with parchment islands and ceramic-blue duotone imagery providing relief. Shadows may be hard-edged isometric shadows in `rgba(6, 9, 20, 0.55)` rather than blurred generic drop shadows. ## Imagery and Motifs Primary imagery should be **duotone-photo translated into isometric artifacts**: use CSS/SVG masks or gradient overlays to make any photographic texture feel like printed ink on folded paper. If photographs are used, keep them abstract and cropped — waves, paper fiber, lacquer grain, stone, moonlit clouds — and recolor them strictly into indigo/parchment or vermilion/blue duotone. No stock hero people, no product mockups. Motifs: - **Isometric quest tiles:** Diamond planes with beveled edges, tiny steps, bridges, and stacked plinths. These form the core visual grammar. - **Geometric court seals:** Circles, hexagons, corner brackets, and triangular fold marks used as station badges, never as generic icons. - **Elastic waystones:** Small spheres, cubes, and arches that bounce into alignment along the timeline cord, like pieces on a board settling after a move. - **Folded-map diagonals:** Subtle crease lines, dashed route marks, and map annotations running at 30° and 60° angles. - **Moon compass:** A circular compass rendered as layered rings, rotating very slowly behind the final station. Keep the art direction crisp: flat geometric shapes, carefully controlled gradients, and occasional duotone texture panels. The site should look handmade in composition but digitally precise in execution. ## Prompts for Implementation Build a full-screen narrative HTML/CSS/JS experience, not a landing page. The user should feel they are scrolling through a vertical quest scroll. Avoid navigation bars, CTA-heavy hero layouts, pricing blocks, testimonials, feature-card grids, stat-grids, and corporate SaaS language. Implementation guidance: - Create one continuous vertical timeline with five immersive sections, each near `100vh`, connected by a braided cord element using CSS gradients or SVG. - Use CSS transforms to construct isometric planes: `rotateX(60deg) rotateZ(45deg)` for bases, with separate face elements for thickness and shadows. - Use elastic animation deliberately: waystones overshoot, map folds spring open, seals compress then settle. Prefer `cubic-bezier(.2, 1.4, .35, 1)` and layered delays; do not rely on generic fade-only reveals. - Add scroll-linked storytelling with IntersectionObserver: as each station enters, the cord glows vermilion, nearby geometric pieces snap into place, and a short caption appears like ink being stamped. - Use a few large atmospheric gestures: a moon disc drifting behind the timeline, diagonal map creases slowly sliding, and tiny isometric objects bobbing by 2–6px. - Keep text sparse and poetic. Each station should have a title, one short paragraph, and a small “coordinate” or “seal” label. - Use duotone texture overlays through CSS `mix-blend-mode`, pseudo-elements, and masked gradients; preserve the complementary palette instead of introducing photographic color. The finished page should feel like a playable ceremonial map: a sophisticated object with tactile motion, not a template with decorative isometric icons. ## Uniqueness Notes 1. **Isometric ceremonial quest-scroll:** The planned isometric language is used as spatial storytelling — raised map stations and physical route objects — rather than as ordinary tech documentation icons. 2. **Vertical timeline as braided cord:** The timeline-vertical motif becomes a vermilion-and-indigo ceremonial cord that weaves through depth, avoiding the overused centered/card-grid layouts shown by frequency analysis. 3. **Rounded typography with refined restraint:** “M PLUS Rounded 1c” provides playful-rounded character while “Shippori Mincho” adds seal-like elegance, separating the design from the batch’s very high mono usage. 4. **Duotone-photo as material texture:** Photography is constrained to lacquer, paper, wave, and stone textures recolored into duotone artifacts, avoiding broad stock photography despite photography being extremely overused. 5. **Elastic motion as board-piece physics:** Elastic patterns are applied to quest stones, folded-map parts, and stamped seals; the animation feels tactile and ceremonial instead of bouncy startup UI. Chosen seed/style: aesthetic: isometric, layout: timeline-vertical, typography: playful-rounded, palette: complementary, patterns: elastic, imagery: duotone-photo, motifs: geometric-shapes, tone: elegant-sophisticated. Avoided patterns from frequency analysis: corporate tone, warm gradient palettes, centered card-grid structures, generic parallax/stagger reveals, mono-heavy typography, broad photography, CTA-first landing pages, pricing blocks, and stat-grids.