# Design Language for yamato.quest

## Aesthetics and Tone
yamato.quest channels the ancient spirit of Japan's Yamato province through a street-style timeline that chronicles the evolution of Japanese civilization from mythological origins to modern culture. The visual identity fuses the raw energy of Japanese street fashion (Harajuku, bosozoku) with the ceremonial weight of imperial history. A vertical timeline serves as the structural spine, with jewel-toned sections marking different historical eras. Slab-serif typography brings Western editorial authority to Japanese content, creating a cross-cultural typographic bridge. The tone is professional -- a museum exhibition designed by a street artist. Inspiration from Japanese history textbook timelines, Harajuku street photography, ukiyo-e woodblock print color palettes, and the star-patterned war banners of the Yamato court.

## Layout Motifs and Structure
A **timeline-vertical** layout where history unfolds as a linear descent through time periods, marked by a central timeline spine.

**Primary structure:**
- **Imperial gate (100vh):** A deep jewel-toned background (amethyst #2a1040) with "YAMATO" in massive slab-serif type (20vw) positioned upper-center. Below: ".QUEST" in lighter weight. A single star motif (五芒星, pentagram) rendered as a thin gold SVG line drawing (reflecting Yamato court symbolism) slowly rotates at center.
- **Timeline spine:** A vertical line (2px, gold #c8a838) running down the center of the page, with alternating content blocks on left and right sides. Each block represents a historical era. Timeline nodes (small circles, 12px) mark era transitions.
- **Era blocks:** Content blocks alternate left-right of the timeline. Each block has a jewel-toned accent color for its era (ruby for ancient, sapphire for medieval, emerald for modern). Blocks use glassmorphic-card styling: frosted glass effect over the jewel-toned background.
- **Star-celestial navigation:** Small star shapes (SVG, 5-pointed) placed along the timeline as navigational markers. Stars pulse with lottie-style CSS animation (scale 1.0 to 1.2, opacity 0.6 to 1.0, 2s cycle).
- **Street-style typography moments:** Certain era titles break out of the timeline structure, rendered at extreme sizes (30vw) with mix-blend-mode effects, crossing over the timeline spine.

**Spatial relationships:** Timeline spine: position: absolute, left: 50%, width: 2px. Content blocks: 45% width, alternating margin-left: 5% (left blocks) and margin-left: 55% (right blocks). Block spacing: 80px vertical.

## Typography and Palette
**Fonts:**
- **Display/Era titles:** "Roboto Slab" (Google Fonts) -- a sturdy slab-serif with geometric structure, used at clamp(36px, 6vw, 80px). Weight 700. The slab serifs feel monumental and historical, like inscriptions on stone monuments.
- **Body/Historical text:** "Shippori Mincho" (Google Fonts) -- a Japanese serif (mincho) with classical proportions at 16px/1.8 line-height. Weight 400 for body, 700 for emphasis. Native Japanese type for Japanese historical content.
- **Timeline labels:** "Barlow Condensed" (Google Fonts) -- a condensed sans-serif at 12px for timeline dates and era labels. Weight 600. text-transform: uppercase, letter-spacing: 0.1em.

**Color Palette:**
- **Background deep:** #1a0830 (deep imperial purple)
- **Ruby ancient:** #8a2040 (ruby red for ancient era)
- **Sapphire medieval:** #204080 (deep sapphire for medieval era)
- **Emerald modern:** #207040 (emerald green for modern era)
- **Gold timeline:** #c8a838 (imperial gold for timeline spine, stars)
- **Text primary:** #e8e0f0 (cool lavender-white)
- **Text secondary:** #8a80a0 (muted purple-gray)
- **Glass frost:** rgba(255, 255, 255, 0.06) (glassmorphic panel base)

## Imagery and Motifs
**Core visual motifs:**
- **Glassmorphic era cards:** Content blocks use backdrop-filter: blur(12px) with era-specific tinted backgrounds (ruby/sapphire/emerald at 0.08 opacity). Thin 1px border in the era's jewel color at 0.2 opacity. This creates a unified visual language across eras while maintaining color distinction.
- **Star-celestial markers:** Five-pointed star SVGs (16px) along the timeline spine, rendered in gold (#c8a838). CSS animation: scale and opacity pulse over 2s with varying delays. Stars serve as both decoration and navigation waypoints.
- **Lottie-style CSS animations:** Key transitions between eras feature animated elements: a sliding torii gate (CSS transform: translateX), unfurling scroll (width animation from 0 to 100%), or blooming chrysanthemum (CSS radial scale animation). All implemented in pure CSS.
- **Street-style breakout type:** Certain era names rendered at enormous scale (30vw), rotated slightly (-5 to 5deg), with mix-blend-mode: difference, breaking the timeline structure to create street-poster energy bursts.

## Prompts for Implementation
**Historical street-style timeline:** The site should feel like a museum timeline that was tagged by a street artist -- the structure is scholarly (vertical timeline, era blocks, dates) but the visual energy is raw (huge type, jewel neon, glassmorphic surfaces).

**Timeline implementation:**
- .timeline { position: relative; max-width: 900px; margin: 0 auto; }
- .timeline::before { content: ''; position: absolute; left: 50%; width: 2px; height: 100%; background: #c8a838; }
- .block-left { width: 45%; margin-right: 55%; }
- .block-right { width: 45%; margin-left: 55%; }
- Timeline nodes: small circles positioned at left: calc(50% - 6px).

**Glassmorphic era cards:**
- .card { backdrop-filter: blur(12px) saturate(120%); background: rgba(255,255,255,0.06); border: 1px solid rgba(var(--era-color), 0.2); border-radius: 12px; padding: 28px; }
- --era-color varies per block: ruby, sapphire, or emerald.

**Star pulse animation:**
- @keyframes star-pulse { 0%, 100% { transform: scale(1); opacity: 0.6; } 50% { transform: scale(1.2); opacity: 1; } }
- .star { animation: star-pulse 2s ease-in-out infinite; animation-delay: var(--delay); }

**Breakout type:**
- .era-breakout { font-size: 30vw; position: absolute; z-index: 5; mix-blend-mode: difference; color: #c8a838; transform: rotate(-3deg); pointer-events: none; }

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, horizontal timelines. Maintain the vertical descent through history.

## Uniqueness Notes
**Differentiators from other designs:**

1. **Street-style breakout typography erupting from a scholarly timeline:** The collision of museum-grade historical timeline structure with massive, rotated street-poster type creates a unique tension between academic rigor and urban energy.

2. **Jewel-toned era coding within glassmorphic panels:** Using distinct jewel colors (ruby, sapphire, emerald) as era identifiers within consistent glassmorphic card styling creates a color-coded historical navigation system.

3. **Star-celestial pulsing navigation along timeline spine:** Gold five-pointed stars with staggered pulse animations along the central timeline create a celestial navigation metaphor unique to the Yamato imperial theme.

**Chosen seed/style:** aesthetic: street-style, layout: timeline-vertical, typography: slab-serif, palette: jewel-tones, patterns: lottie-animation, imagery: glassmorphic-cards, motifs: star-celestial, tone: professional

**Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).
<!-- DESIGN STAMP
  timestamp: 2026-03-21T16:06:29
  domain: yamato.quest
  seed: breakout typography erupting from a scholarly timeline:
  aesthetic: yamato.quest channels the ancient spirit of Japan's Yamato province through a st...
  content_hash: 5ffef6f9a7e8
-->