# Design Language for yamato.quest ## Aesthetics and Tone **yamato** (大和) is the ancient name for Japan — the Yamato dynasty, the first imperial court, the soul of the nation before it had a name for itself. This site treats that origin story as a design prompt: what would it look like if the ancient Yamato world were documented by a far-future reconnaissance system? A HUD overlay archiving a civilization through the lens of sensors and data streams — yet the underlying imagery is pure hand-painted watercolor, soft and irreducibly human. The aesthetic is **isometric-archival** — ancient Japanese landscapes and artifacts locked inside axonometric sensor grids, as if a satellite intelligence is cataloguing feudal Japan for a civilization that no longer exists. Cherry blossoms are specimen entries. Temple rooftops are surveyed from above in 30-degree isometric projection. Ink-wash mountain ranges are traced by glowing reticles. The mood is **controlled awe** — the professional silence of a researcher who has just discovered something extraordinary but must stay clinical. The HUD interface does not interrupt the beauty; it *frames* it, creates distance, makes the watercolor imagery feel precious precisely because it is being archived. The triadic palette places three anchors equidistant on the color wheel: a deep imperial vermilion (#C0392B), a vivid indigo-cobalt (#1B4F8A), and a warm temple gold (#D4A017). Against a near-black ink ground (#0D0C0A), these three colors never compete — each owns a distinct register of the visual hierarchy. The HUD elements live in the cobalt register. The watercolor imagery bleeds in the vermilion register. Typography and structural geometry hold the gold register. Tone: **professional, reverent, quietly cinematic.** Not reverent as in solemn — reverent as in: this thing being shown to you deserves your full attention. No noise. No clutter. Just the grid, the artifact, and the light. ## Layout Motifs and Structure The layout is **hero-dominant** — a single enormous isometric scene fills the entire first viewport, with no navigation bar obscuring it. The hero is the argument. Everything else is annotation. **Structural hierarchy:** **Hero zone (100vh):** An isometric aerial view of a Yamato-era ceremonial ground — a composite watercolor painted at 2000×2000px resolution, rendered as if viewed from a reconnaissance satellite at 30-degree isometric tilt. The entire viewport is occupied by this painted scene. A CSS grid of fine HUD lines — pale cobalt `#1B4F8A` at 12% opacity — overlays the painting in a 40×40px isometric diamond grid. Three HUD reticles pulse at key points in the scene (a temple gate, a mountain peak, a ceremonial fire). The site wordmark "YAMATO.QUEST" is set in the upper-left in 11px uppercase tracking, HUD-style, below a blinking cursor indicator. **Scroll transition:** On first scroll, the isometric scene scales outward (CSS transform: scale 1→1.08) as the HUD grid contracts — a zoom-in + grid-tighten effect suggesting the sensor system is resolving to higher detail. This happens over 800ms with a cubic-bezier easing that front-loads the acceleration. **Content sections (below fold):** Three full-width isometric panels stacked vertically. Each panel is a different artifact domain — Architecture, Ceremony, Landscape — rendered as individual watercolor paintings with HUD metadata overlaid. Panels do not use card containers; each is a full-bleed painting with text positioned as floating data labels with connecting hairline vectors to specific points in the image. **Footer:** A minimal isometric grid floor texture fading to black, with the domain name centered in the same 11px HUD typeface. **Grid system:** 12-column CSS grid base, but the visible geometry is isometric — all borders, dividers, and decorative lines run at 30° / 150° angles, never orthogonal. The orthogonal grid is invisible scaffolding. The isometric grid is what the user sees. No sidebar. No sticky navigation. No off-canvas drawer. The scroll itself is navigation. ## Typography and Palette **Typography (Google Fonts only):** - **HUD / Interface / Navigation / Labels:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — weight 300, all-caps, letter-spacing 0.2em, 11–13px. This is the "frutiger-clean" register: geometric, airy, precision-engineered. Used for all UI chrome: coordinates, reticle labels, section identifiers (SECTOR 01 / ARTIFACT CLASS: ARCHITECTURE), the wordmark, copyright. Color: temple gold `#D4A017` for primary labels, cobalt `#1B4F8A` for secondary data. - **Body / Long-form text:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 400, regular tracking, 16px / 1.65 line-height. The frutiger-clean companion: humanist but geometric, legible at reading size without visual loudness. Color: off-white `#E8E3DA`. - **Section headers / Artifact names:** [Noto Serif JP](https://fonts.google.com/specimen/Noto+Serif+JP) — used exclusively for Japanese kanji and kana transliterations that appear as decorative secondary labels beneath the HUD callouts (e.g., 大和 beneath "YAMATO", 桜 beneath "CHERRY BLOSSOM — SPECIMEN 004"). Weight 300, 18–24px. Color: vermilion `#C0392B` at 80% opacity. These are the only italic-ish elements — the brush-derived letterforms create organic contrast against the geometric HUD grid. **Palette (triadic, anchored to Yamato-era ceremonial colors):** - `#0D0C0A` — Ink Black (background ground, 90% of viewport by area) - `#C0392B` — Imperial Vermilion (primary accent: watercolor warm tones, cherry blossoms, fire-glow elements) - `#1B4F8A` — Indigo Cobalt (HUD interface chrome, grid lines, reticle halos, active states) - `#D4A017` — Temple Gold (typography primary, divider lines, data label borders) - `#E8E3DA` — Washi White (body text, the paper-white warmth of Japanese hand-made paper) - `#2C2A26` — Charcoal Ash (card backgrounds where needed, tertiary surfaces) - `#7A9B6E` — Celadon (used sparingly in landscape watercolors: moss, pine, river — never in UI chrome) ## Imagery and Motifs **Watercolor base imagery — Yamato-era subjects:** The entire visual language is built on hand-painted watercolor illustrations in the style of traditional Japanese ink wash (sumi-e) combined with the more saturated Yamato-e polychrome tradition. Key subjects: 1. **Cherry blossom specimens:** Individual branches with blossoms in vermilion-to-white gradients, painted at high detail. Used as the primary decorative element — they appear as living specimens being catalogued by the archive system, each with a HUD label showing bloom date, specimen class, and GPS coordinates (fictional). 2. **Isometric temple architecture:** Yamato-era shrine and palace structures redrawn as isometric axonometric diagrams, but rendered in soft watercolor washes rather than hard vector lines. The result is an architectural survey that looks like it was painted by a meticulous scholar, not drafted by an engineer. 3. **Mountain landscapes (ink wash):** Mt. Yamato and the Asuka valley rendered in diluted sumi-e washes, the mountains layered in atmospheric perspective from near-black to pale grey-blue. These appear as wide backgrounds in the lower content sections. 4. **Specimen tile motif:** Small isometric tiles (60×60px) showing a single detail — a tea bowl, a sword guard (tsuba), a folded paper, a koi — rendered in watercolor. These are used as decorative dividers and section-break elements. **Sci-fi HUD motifs:** The HUD overlay is the technology frame through which Yamato imagery is viewed. Specific HUD elements: - **Isometric grid overlay:** `#1B4F8A` at 8–15% opacity, diamond-pattern isometric grid covering the full hero image. Grid collapses on scroll (line weight decreasing, opacity fading) as if the sensor is locking in. - **Reticle indicators:** Three-ring target reticles (two thin outer rings + one cross-hair center) positioned at points of interest in watercolor scenes. Pulse animation: ring-diameter oscillates ±3px at 2s period, cobalt glow `box-shadow: 0 0 6px #1B4F8A`. - **Corner bracket markers:** HUD corner brackets (two-line L-shape, 16px arms) at viewport corners and section boundaries. Temple gold `#D4A017`, 1px stroke. - **Data readout labels:** Fixed-position text blocks in Space Grotesk 10px showing fictional coordinates, artifact classifications, and scan status lines. Format: `[SCAN ACTIVE] 34°27'N 135°49'E / ALT: 312M / ARTIFACT CLASS: CEREMONIAL` - **Scan-line effect:** A single 2px horizontal cobalt line descends through the hero image on page load (3s duration, once), simulating an initial sensor sweep of the scene. - **Spring scroll animation:** Petals falling. Ten cherry blossom petal SVGs (teardrop-shape, vermilion-to-white gradient, 12–20px) are scattered in the scroll container as `position: fixed` elements that descend at different rates using `requestAnimationFrame` velocity tied to `window.scrollY`. They are not confetti — they fall slowly (0.3–0.8px per scroll pixel), drift laterally with a sine wave, and accumulate at the footer. This is the primary "spring patterns" implementation: not a CSS @keyframes loop but a physics-driven scroll-dependent fall. ## Prompts for Implementation **The story being told:** A far-future intelligence agency has recovered fragments of Yamato-era Japan. This site is their archive interface — clean, precise, reverent. The visitor is a researcher granted access to the archive for the first time. The page loads as if the sensor system is initializing: the scan-line sweeps, the grid materializes, the reticles pulse to life. Then: silence. The painting. The blossoms beginning to fall. **Hero section:** - `background-image` with the isometric Yamato watercolor at full-bleed, `background-size: cover`, `background-position: center 30%`. - CSS grid overlay: `repeating-linear-gradient` at 30° and 150° angles, line color `rgba(27, 79, 138, 0.12)`, line weight 1px, repeat 40px — creates the isometric diamond grid without any DOM elements. - Reticle circles: `position: absolute` SVG circles with `animation: pulse 2s ease-in-out infinite`. Three reticles placed via percentage positions, responsive via CSS custom properties. - On load: `@keyframes scanline` — a `::after` pseudo-element on the hero with `background: linear-gradient(rgba(27,79,138,0.4), transparent)`, height 2px, `animation: scanDown 3s ease-in-out forwards`. - Hero title: `position: absolute; top: 2rem; left: 2rem;` — "YAMATO.QUEST" in Space Grotesk 300, 11px, letter-spacing 0.3em, color #D4A017, all-caps. Below it: a blinking cursor (`|`) in cobalt, `animation: blink 1.2s step-end infinite`. **Content panels:** - Each panel: `min-height: 80vh; display: grid; grid-template-rows: 1fr auto;`. Full-bleed watercolor image behind, text block as a floating overlay anchored to one corner. - Text blocks: `background: rgba(13,12,10,0.72); backdrop-filter: blur(4px); border: 1px solid rgba(212,160,23,0.25);` — semi-transparent ink-black with gold hairline border. - Connecting lines from data labels to image points: SVG `` elements with `stroke: #D4A017; stroke-width: 0.5; stroke-dasharray: 4 4;` — dashed gold hairlines that look like HUD annotation vectors. **Spring scroll / petal physics:** - 10 SVG petal elements, each `position: fixed; pointer-events: none; z-index: 9999`. - Each petal has: `startX` (random 0–100vw), `speed` (random 0.3–0.8), `drift` (sine amplitude 20–50px), `sineFreq` (random). - In `scroll` event handler: `petal.style.top = (baseTop + scrollY * petal.speed) % 110 + 'vh'`; `petal.style.left = startX + Math.sin(scrollY * sineFreq) * drift + 'vw'`. - Petals wrap: when top > 100vh, reset to -5vh with new startX. Creates continuous gentle fall without jarring reset. **Typography implementation:** - Load from Google Fonts: `Space Grotesk:wght@300;400`, `DM Sans:wght@400`, `Noto Serif JP:wght@300`. - Japanese kanji labels are `aria-hidden="true"` since they are decorative — screen readers use the adjacent Space Grotesk English labels. - All HUD text is uppercase via `text-transform: uppercase`, no exceptions. **AVOID:** - Centered hero text blocks (all text is corner-anchored, HUD-style) - Card grids for content (use full-bleed painting panels) - Hover underlines on navigation (use HUD reticle-zoom on hover instead: `transform: scale(1.05)` on the reticle SVG) - Rounded corners anywhere (the aesthetic is isometric geometry — right angles and 30° diagonals only) - White background sections (ink black throughout) - Drop shadows (use cobalt glow `box-shadow` only on interactive HUD elements) ## Uniqueness Notes 1. **Triadic palette at 2% registry frequency — only design combining isometric aesthetic with triadic color.** No other isometric design in the registry uses triadic palette. The three-anchor color system (vermilion, cobalt, gold) creates visual complexity that isometric designs typically avoid. The three colors map to distinct semantic roles: humanity (vermilion/watercolor), technology (cobalt/HUD), and structure (gold/type) — triadic as architecture, not decoration. 2. **Sci-fi HUD as archaeological documentation frame, not futuristic branding.** The 4% of designs using sci-fi-hud motifs apply them to tech startups and dashboards. Here, the HUD frames ancient Japan — the technology serves the past, not the future. The Noto Serif JP kanji labels existing beneath the HUD English readouts create a layered temporal friction: ancient characters annotated by a fictional future system. 3. **Spring patterns implemented as scroll-physics petal simulation, not CSS animation loops.** The 33% spring pattern usage in the registry is nearly all `@keyframes` CSS animation or scroll-triggered class toggles. This design uses scroll-velocity-driven physics for petal fall — the faster you scroll, the more intensely the petals fall, tying the navigation gesture directly to the seasonal metaphor. Spring is not decorative here; it is the interaction model. 4. **Seed used:** aesthetic: isometric, layout: hero-dominant, typography: frutiger-clean, palette: triadic, patterns: spring, imagery: watercolor, motifs: sci-fi-hud, tone: professional. 5. **Avoided overused patterns:** spring as CSS loop animation (33%), hero with centered text (common), card-grid content sections (common). All three are subverted by the isometric/HUD frame.