# Design Language for tsundere.quest ## Aesthetics and Tone A watercolor cartography of a horizontal pilgrimage — the visitor sets out on a leftward-to-rightward journey across a wall-sized watercolor map, scrolling sideways through bleeding pigments and cultural waypoints. The aesthetic merges traditional Mughal miniature painting, the burgundy ledgers of medieval European trade routes, and the soft wash gradient of Rajasthani folio borders. The tone is bold-confident: the cartographer-narrator speaks with the certainty of someone who has walked the route many times, naming each region with assurance and a slight swagger. Inspiration: the British Library's Mughal manuscript collection, Saul Steinberg's illustrated maps, Hiroshige's "Sixty-nine Stations of the Kiso Kaidō," and the deep-burgundy folios of the 16th-century Hamzanama. The voice is plain-spoken but assured. "Here, in this region, the river bends like the throat of a pelican. Walk it." No marketing softness — direct declarations from someone who knows. ## Layout Motifs and Structure Horizontal-scroll layout. The page is one 8x-wide stage that pans laterally as the visitor scrolls (wheel + drag + arrow keys). Six waypoint-regions are painted along the stage; each region occupies roughly 1.2 viewport-widths. Vertical position is fixed; movement is purely east-west. Composition: - Each region carries a hand-painted watercolor backdrop with a deep-burgundy ink line drawing of architecture, terrain, or cultural artifact. - Headlines hover in mid-air over the watercolor at variable vertical positions, like cartouches pinned to a map. - Body copy lives in narrow 320px-wide vertical columns to the right of each cartouche, set in geometric-sans. - Between regions, the watercolor bleeds into a "frontier zone" of paper-cream where only a single thin trade-route line connects east and west; this is the "skeleton-loading" pattern repurposed as the connective tissue of the map. Skeleton-loading reinterpreted: as the visitor approaches an unseen region (300px before entry), placeholder watercolor washes shimmer in (linear-gradient stripe pulse, but in burgundy-on-cream), then resolve into full painted illustration over 800ms. The visitor watches the map paint itself ahead of them. A horizontal progress-rail at the bottom shows the journey: 6 cartouche-dots and a thin burgundy thread connecting them. The current region's dot is a filled diamond; passed regions are half-filled; coming regions are empty. ## Typography and Palette - **Display headlines:** "Archivo" (Google Fonts), weight 800 — geometric-sans for region cartouches at 64-92px, set ALL CAPS, letter-spacing 0.06em. - **Sub-headline / region tagline:** "Archivo" (Google Fonts), weight 500 italic — at 22-28px for region sub-titles. - **Body:** "Inter" (Google Fonts), weight 400 — at 16px line-height 1.7 for narrative narrative columns. - **Marginalia / map-labels:** "Spectral" (Google Fonts), weight 400 italic — for small cartographer-style annotations in burgundy at 13px. - **Numerals / waypoint codes:** "JetBrains Mono" (Google Fonts), weight 400 — for waypoint codes like "WPT 03 · LAT 23.7°". Palette — Deep-burgundy cartography: - `#F2E8D5` Paper Cream — base watercolor paper background. - `#E8D9BC` Faded Folio — secondary paper tone for skeleton-loading washes. - `#5C1A24` Deep Burgundy — primary ink line color for architecture and headlines. - `#7E3340` Wine Tannin — secondary burgundy for body copy and waypoint markers. - `#C77B5A` Saffron Wash — warm accent for watercolor flourishes and cultural motif highlights. - `#1F1219` Iron Gall — deepest accent, reserved for tiny labels and cartouche borders. Watercolor logic: each wash uses 2-4 burgundy stops at 0.18-0.42 alpha with soft feathered edges (radial-gradient at 70% transparency). ## Imagery and Motifs - **Duotone-photo illustrations**: each region's central image is a duotone of a real photograph (Burgundy / Cream), composited with watercolor washes and cultural motifs hand-painted in SVG over it. The duotone is the structural anchor; watercolor adds drift. - **Cultural motifs**: per region, a distinct cultural object is hand-illustrated: a Mughal jali screen for one waypoint, a Coptic textile pattern for another, a Yoruba beadwork pattern, a Bukharan tile, an Andean weaving border, and a Ryukyu bingata flower. Each is rendered as a thin SVG line in Iron Gall with Saffron Wash highlights. - **Trade-route thread**: a continuous 1.5px Wine Tannin SVG path running through the entire 8x stage, dotted at irregular intervals with small Saffron diamonds (waypoint markers). The path follows the watercolor topography organically. - **Watercolor blooms**: scattered Saffron and Burgundy radial blooms across the stage, set at 0.22 alpha with soft 80px blur; they drift slowly (rotate 2deg over 24s) to keep the map alive. - **Marginalia sketches**: tiny burgundy hand-drawn fauna and flora at region edges — a stylized stork, a thicket of grasses, a caravan silhouette — each is a 60-100px SVG with hand-drawn-feeling stroke jitter. ## Prompts for Implementation - Build the stage as a single 800vw-wide flex container; translate on the X axis based on wheel/scroll position. Use a damped scroll-x model with 0.88 friction. - Skeleton-loading shimmer is implemented as a 600px-wide linear gradient stripe (Faded Folio → Saffron Wash 0.08 → Faded Folio) that translates across each unloaded region's bounding box at 1.2s intervals; on intersection, the shimmer fades out and the real watercolor SVG fades in. - Each region is a self-contained `
` with: 1 duotone hero image, 1 cultural-motif SVG overlay, 1 hand-painted watercolor backdrop, 1 cartouche headline, 1 narrative column. Stitch them with absolute positioning on the stage. - Trade-route thread is a single SVG `` with `stroke-dasharray` animated based on scroll progress — the path appears to "walk" ahead of the visitor as they pan east. - Bias toward narrative: each region is a short cartographer's entry with a date and a journey note. No CTAs, no pricing blocks, no stat-grids. The visitor is on a quest, not a shopping trip. - Cursor becomes a small Iron Gall pen-nib cursor over the stage; on hover over a cultural motif, it shifts to an inkpot icon and the motif gently lifts (2deg rotate, 4px Y-translate). - Reduced motion: replace lateral pan with a vertical stack of regions; preserve duotone and watercolor; disable shimmer. ## Uniqueness Notes - Differentiator 1: horizontal-scroll used as a hand-painted east-west pilgrimage map, with watercolor regions and trade-route threads — narrative cartography rather than gallery scroll. - Differentiator 2: skeleton-loading repurposed as the "ahead-of-visitor map painting" pattern — not a loading state for content, but a diegetic part of the journey. - Differentiator 3: deep-burgundy palette as the dominant ink, with cream paper and saffron wash — opposite of the corpus's warm/gradient dominance. - Differentiator 4: cultural motifs rotated per-region rather than a single visual identity — each waypoint has its own ethnographic detail. - Differentiator 5: geometric-sans headlines paired with watercolor backdrops — typographic precision against pigment-bleed. - Chosen seed: aesthetic: watercolor, layout: horizontal-scroll, typography: geometric-sans, palette: deep-burgundy, patterns: skeleton-loading, imagery: duotone-photo, motifs: cultural, tone: bold-confident. - Avoided patterns from frequency analysis: centered (94% — replaced with horizontal-scroll), parallax (94% — replaced with damped lateral pan), card-grid (90% — replaced with continuous east-west stage), photography (90% — used only as duotone overlays under watercolor), mono typography (81% — used only for waypoint codes).