# Design Language for yamato.quest

## Aesthetics and Tone
yamato.quest channels the aesthetic of a **corporate expedition briefing room aboard a mythic vessel** -- an operations center where ancient Japanese cartography meets modern circuit-board infrastructure. The visual direction is rooted in the duality of the Yamato concept itself: the oldest name for Japan (大和), the legendary WWII battleship, and the fictional starship -- all unified by the theme of a civilization's quest for something greater than itself. The mood is earnest and forward-looking, neither cynical nor naive, imbued with the weight of heritage and the brightness of unfinished purpose.

Imagine entering a dimly lit war room where topographic maps of the Japanese archipelago are printed on translucent circuit boards, backlit with warm amber and occasional pulses of electric teal. The walls are paneled in dark walnut with exposed copper traces running between them -- half boardroom, half bridge of a vessel. Every surface communicates structured ambition: the precision of a corporate strategy document cross-bred with the reverence of a national archive. The tone is **optimistic-bright** -- not in a saccharine way, but in the way a navigator is optimistic when they can finally see the destination on the horizon. There is conviction here, quiet confidence, the energy of a team that knows the mission matters.

The overall feel avoids cold sterility. Earth-tones ground the palette while neon-glow accents inject urgency and modernity. Circuit motifs provide structural rhythm without descending into generic "tech aesthetic" territory -- these circuits trace the contours of Japanese geography, turning infrastructure into mythology.

## Layout Motifs and Structure
The layout employs a **layered-depth** composition model where content exists on visually distinct z-planes, creating a sense of looking through stacked transparent panels -- like peering through the layers of a geological cross-section or the decks of a great ship.

**The Depth Stack:**
Three persistent visual layers define the spatial architecture:

- **Layer 0 (Background Field):** A deep, matte surface in #2C2418 (dark loam) carrying a faint circuit-trace pattern rendered as a repeating SVG tile. The traces glow subtly in #D4A254 (warm amber) at approximately 8% opacity, creating a subliminal grid that suggests infrastructure without demanding attention. This layer is fixed-position and does not scroll.

- **Layer 1 (Content Plates):** The primary content lives on semi-translucent "plates" -- rectangular content blocks with a background of rgba(58, 48, 36, 0.85) and a 1px border of rgba(212, 162, 84, 0.2). These plates are offset from center, sitting at roughly 60% viewport width, positioned with deliberate asymmetry. Each plate casts a layered box-shadow: `0 4px 20px rgba(0,0,0,0.3), 0 1px 0 rgba(212,162,84,0.1)` to separate it from the background field. As the user scrolls, plates enter the viewport with a gentle translateZ micro-shift (CSS perspective on the parent container set to 1200px, individual plates translated between 0-40px on the z-axis) creating true parallax depth without traditional parallax scrolling.

- **Layer 2 (Signal Overlays):** Floating annotation elements -- small labels, coordinate markers, status indicators -- rendered in condensed type and positioned absolutely relative to the viewport. These elements use `position: sticky` with varying `top` values, so they drift at different rates than the content plates, reinforcing the layered-depth illusion. Color: #4AEAB8 (signal teal) for active states, #8A7B6B (muted stone) for passive.

**Section Transitions:**
Between major content sections, a thin horizontal rule appears -- not a simple `<hr>`, but an SVG circuit trace that draws itself left-to-right as it enters the viewport (underline-draw animation, 800ms duration, ease-out). The trace terminates in a small circular node that pulses once with a teal neon-glow (#4AEAB8 at 60% opacity, blur radius 8px) before settling to a steady dim amber.

**Navigation:**
No traditional nav bar. A small, fixed "mission compass" element sits in the bottom-right corner -- a 48px circular element with a 1px amber border containing a single kanji character (和, "wa" -- harmony, the second character of Yamato). On hover, it expands to reveal section labels rendered in condensed caps. The compass rotates subtly (360 degrees over 120 seconds, continuous) as ambient motion.

## Typography and Palette
**Primary Display Font:** "Barlow Condensed" (Google Fonts, weights 500, 700) -- a slightly industrial, narrow sans-serif with excellent readability at large sizes. Used for all section headings and the main title. Set at `clamp(2rem, 5vw, 3.8rem)`, `letter-spacing: 0.08em`, `text-transform: uppercase`. Color: #D4A254 (warm amber). The condensed proportion is essential -- it evokes mission briefs, engineering specifications, and the typographic density of Japanese corporate communications.

**Secondary Font:** "Source Serif 4" (Google Fonts, weight 400, 400-italic) -- a sturdy, readable serif with warmth and authority. Used for body text, descriptions, and extended passages. Set at `clamp(1rem, 1.8vw, 1.15rem)`, `line-height: 1.72`, `letter-spacing: 0.01em`. Color: #C4B8A8 (warm parchment). The serif's bracketed terminals and moderate contrast give it a grounded, archival quality without feeling antique.

**Accent Mono Font:** "IBM Plex Mono" (Google Fonts, weight 400) -- used sparingly for coordinate labels, status indicators, data annotations, and the floating overlay elements on Layer 2. Set at `0.75rem`, `letter-spacing: 0.06em`, `text-transform: uppercase`. Color: #4AEAB8 (signal teal) for active data, #8A7B6B (muted stone) for secondary annotations.

**Japanese Display:** "Noto Sans JP" (Google Fonts, weight 700) -- used for occasional single-kanji accent characters (大和, 道, 志) rendered at display sizes (clamp(4rem, 10vw, 8rem)) as watermark-like decorative elements behind content plates. Color: rgba(212, 162, 84, 0.06) -- barely visible, functioning as textural ghosts that reward close attention.

**Color Palette (Earth-Tones + Neon-Glow):**

| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Background | Dark Loam | #2C2418 | Primary background, Layer 0 |
| Surface | Warm Umber | #3A3024 | Content plate backgrounds |
| Primary Text | Warm Parchment | #C4B8A8 | Body copy, secondary headings |
| Display Accent | Warm Amber | #D4A254 | Headlines, circuit traces, borders |
| Signal Accent | Signal Teal | #4AEAB8 | Neon-glow accents, active states, CTAs |
| Muted | Stone Gray | #8A7B6B | Secondary annotations, inactive states |
| Deep Ground | Charred Earth | #1A1610 | Deepest shadow, footer backgrounds |
| Alert Warm | Kiln Orange | #E07A3A | Sparse highlight, hover states on key elements |

The palette's core tension: earth-tones (#2C2418, #3A3024, #C4B8A8, #D4A254) establish gravitas and material warmth, while the single neon-glow accent (#4AEAB8) punctuates the composition like a signal lamp in the darkness -- used with restraint so every teal element feels intentional and alive. The neon never dominates; it illuminates.

## Imagery and Motifs
**Circuit Topography:** The signature visual motif. SVG circuit-board traces are drawn not in rectilinear grids but along the contours of topographic lines -- as if the circuit layout was derived from elevation data of the Japanese landscape. These traces use `stroke: #D4A254` at varying opacities (0.06 to 0.15), `stroke-width: 1px`, `fill: none`, with occasional nodes (small circles, 4px radius) at intersections that carry a faint neon-glow box-shadow in teal. The traces are implemented as a tiling SVG background pattern on Layer 0, with a secondary set of traces on a `::before` pseudo-element that scrolls at 0.3x the content speed, creating subtle depth separation within the background itself.

**Underline-Draw Accents:** All section headings feature an underline that draws itself from left to right when the heading enters the viewport. The underline is not a simple border-bottom but an SVG `<line>` element positioned beneath the text, animated with `stroke-dasharray` and `stroke-dashoffset` over 600ms with `ease-out` timing. The stroke color transitions from #D4A254 (amber) at the origin to #4AEAB8 (teal) at the terminus -- a CSS gradient on the SVG stroke, reinforcing the earth-to-signal color narrative. After the draw completes, the teal end pulses once (opacity 0.4 to 1.0 to 0.6, 400ms) before settling.

**Neon-Glow Nodes:** At key interaction points -- the navigation compass, section terminators, and any clickable element -- a soft neon-glow effect radiates outward. Implemented as `box-shadow: 0 0 12px rgba(74, 234, 184, 0.3), 0 0 4px rgba(74, 234, 184, 0.6)` with a CSS animation that breathes the outer glow radius between 8px and 16px over a 3-second cycle. The glow is always teal (#4AEAB8), creating a visual vocabulary where "glowing = interactive or alive."

**Depth Fog:** Between sections, a gradient overlay simulates atmospheric depth -- a radial gradient from transparent center to rgba(28, 22, 16, 0.4) at the edges, applied to the content container. This vignette effect makes each section feel like it exists in its own illuminated pocket within a larger dark space, reinforcing the layered-depth spatial model.

**Grain Texture:** A fine noise overlay at 4% opacity applied globally via a fixed-position `::after` pseudo-element on the `<body>`. The noise is warm-tinted (generated from a data URI SVG with `baseFrequency="0.65"` and a warm color channel bias), giving all surfaces a tactile, almost photographic materiality that prevents the design from feeling flat or purely digital.

**Kanji Watermarks:** Large single kanji characters (大, 和, 道, 志, 船) rendered at display scale behind content plates. These are set in "Noto Sans JP" at weight 700, sized between 15vw and 25vw, colored rgba(212, 162, 84, 0.05), with `user-select: none` and `pointer-events: none`. They scroll with the content but are positioned on Layer 0.5 (between background and content plates via z-index), creating a ghostly presence that ties each section to a thematic concept without being readable as text.

## Prompts for Implementation
Build yamato.quest as a **single-page vertical scroll expedition** -- a descent through five "mission chapters" that narrate the quest of Yamato in increasingly specific and resonant terms. The experience should feel like reviewing a classified briefing that gradually reveals its true purpose: not just a corporate endeavor, but a civilizational aspiration.

**Chapter I -- "Origin" (first 100vh):**
The page loads to the darkest background (#1A1610). After a 300ms pause, a single circuit trace begins drawing itself from the exact center of the viewport outward in four directions -- north, south, east, west -- branching into topographic contours as it extends. The animation takes 1200ms. As the traces reach the viewport edges, the background fades to #2C2418 (dark loam) and the title "YAMATO.QUEST" fades in at center-top in Barlow Condensed 700, #D4A254, letter-spacing 0.12em. Below it, a subtitle in Source Serif 4 italic: "The coordinates of an unfinished journey" in #C4B8A8, fading in 400ms after the title. The mission compass appears in the bottom-right with a teal glow pulse. A single downward-pointing chevron (1px stroke, #8A7B6B) breathes opacity at the bottom center, inviting scroll.

**Chapter II -- "Heritage" (scrolls into view):**
The first content plate slides in from the right (translateX 40px to 0, opacity 0 to 1, 500ms, spring easing). Behind it, the kanji 大 (great) is visible as a watermark. The plate contains body text in Source Serif 4 describing the Yamato concept -- not as dry history but as living aspiration. The heading "THE NAME BEFORE THE NAME" draws its underline as it enters the viewport. Floating Layer 2 annotations appear at staggered intervals: coordinates (34.6851 N, 135.8050 E -- Nara, the ancient Yamato province), date markers, status labels in IBM Plex Mono teal.

**Chapter III -- "Infrastructure" (the circuit chapter):**
The background circuit traces increase in density and opacity as the user scrolls into this section. A content plate centered (breaking the asymmetric pattern for emphasis) presents the concept of building systems that outlast their creators. The heading "CIRCUITS THAT REMEMBER" features a double underline-draw: one amber, one teal, offset by 4px vertically and 200ms temporally. The kanji watermark is 道 (the way/path). Small animated nodes along the background circuit traces pulse in sequence, creating a cascade effect that flows downward with the user's scroll direction.

**Chapter IV -- "Signal" (the neon-glow chapter):**
The teal accent color takes prominence. The content plate border brightens to rgba(74, 234, 184, 0.3). Body text describes the moment a signal breaks through noise -- the instant a quest finds its bearing. The heading "WHERE THE SIGNAL LIVES" glows with a teal text-shadow on scroll-reveal: `0 0 20px rgba(74, 234, 184, 0.3)`. Floating annotations become more numerous and animated, drifting upward slowly (translateY -20px over 8 seconds, looping). The kanji watermark is 志 (will/aspiration), rendered at slightly higher opacity (0.08 instead of 0.05).

**Chapter V -- "Departure" (final section):**
The layout opens up -- wider margins, more negative space. A single content plate, narrower than previous ones, is centered. The heading "THE QUEST CONTINUES" draws its underline but the animation does not complete -- the line stops at 75% width, suggesting incompleteness and ongoing journey. The kanji watermark is 船 (ship/vessel). Below the plate, the circuit traces from Layer 0 converge toward a single node at the bottom-center of the viewport. That node carries the strongest neon-glow of the entire page: `box-shadow: 0 0 24px rgba(74, 234, 184, 0.5), 0 0 8px rgba(74, 234, 184, 0.8)`. It pulses steadily. Below it, a single line of IBM Plex Mono text: "34.6851 N, 135.8050 E -- YAMATO" in #4AEAB8.

**Technical Directives:**
- Use CSS `perspective` and `translateZ` for true depth layering, not simulated parallax
- All underline-draw animations use SVG `stroke-dasharray`/`stroke-dashoffset` with IntersectionObserver triggers
- Neon-glow effects use CSS `box-shadow` animation, never filter-based glow (performance)
- The circuit-trace SVG tile should be hand-authored as a single repeating unit (approximately 200x200px) for crispness
- All scroll-triggered animations use IntersectionObserver with `threshold: [0.15]`, not scroll event listeners
- Body text line-length capped at 65ch via max-width on content plates
- NO pricing blocks, NO stat-grids, NO CTA buttons, NO testimonial carousels
- The only interactive elements are the mission compass and the breathing chevron
- Total page weight target: under 150KB excluding fonts

## Uniqueness Notes
1. **Circuit-as-topography visual system:** No other design in this collection maps circuit-board traces onto topographic contours. This fusion of infrastructure motif and geographic identity creates a visual language entirely specific to yamato.quest -- circuits that are simultaneously maps, turning technology into terrain and terrain into technology.

2. **Three-layer CSS perspective depth model:** While layered-depth appears in ~10% of designs, this implementation uses actual CSS `perspective` and `translateZ` to create physical z-separation between background traces, content plates, and floating annotations. This is not simulated with opacity tricks or scale differences -- it produces genuine motion parallax when content scrolls, a technique absent from the other designs in this collection.

3. **Amber-to-teal chromatic narrative:** The palette is not merely a set of colors but a storytelling device. Earth-tones represent heritage and ground; the single neon-glow teal represents signal and future. The underline-draw animation physically transitions from amber to teal along its stroke, making every heading a micro-narrative of "from earth to signal." This chromatic storytelling is unique in this collection, where most palettes are applied uniformly rather than narratively.

4. **Incomplete terminal animation as philosophical gesture:** The final section's underline deliberately stops at 75% -- a designed incompleteness that embodies the ".quest" TLD's meaning. No other design in this collection uses animation incompleteness as a semantic choice rather than a technical limitation.

5. **Kanji watermark depth layer:** The ghost-opacity Japanese characters function as a "Layer 0.5" -- neither background pattern nor content, but a cultural-textural middle ground. While a few designs use decorative text, none use full kanji at architectural scale (15-25vw) as a z-depth separator between circuit-trace backgrounds and content plates.

**Seed/Style:** corporate, layered-depth, condensed, earth-tones, underline-draw, neon-glow, circuit, optimistic-bright

**Avoided overused patterns:** photography (99% -- zero photographic elements, purely typographic and SVG-based), full-bleed (97% -- asymmetric plate-based layout with deliberate margins), mono as primary type (76% -- mono relegated to annotations only, condensed sans leads), nature motifs (48% -- circuit-topography replaces organic nature), friendly tone (45% -- optimistic-bright is conviction, not friendliness), centered layout (58% -- asymmetric content plate positioning).
<!-- DESIGN STAMP
  timestamp: 2026-03-28T08:21:40
  domain: yamato.quest
  seed: unspecified
  aesthetic: yamato.quest channels the aesthetic of a **corporate expedition briefing room ab...
  content_hash: 330c95f20988
-->