# Design Language for manner.quest ## Aesthetics and Tone manner.quest is an immersive journey through the manners and social rituals of cultures around the world, framed as a traveler's quest. The site presents etiquette not as a set of rigid rules but as a living, breathing map of human social intelligence -- from the Japanese art of bowing (ojigi) to the French table setting, from Korean age-based honorifics (jondaenmal) to the Brazilian abraco greeting. The aesthetic is warm, worldly, and hand-crafted -- watercolor-inspired washes, hand-drawn map illustrations, and the tactile quality of a well-traveled journal. The tone is approachable-casual yet grounded-earthy -- the voice of a seasoned traveler sharing stories at a hostel, blending personal anecdote with genuine cultural respect. The .quest TLD is taken literally: the visitor embarks on a quest through cultural territories, unlocking manners knowledge as they scroll through geographical and thematic regions. ## Layout Motifs and Structure **Primary layout: parallax-sections** with **organic-flow** creating a sense of geographic travel between cultural zones. The page is structured as a continuous vertical journey through cultural "territories" -- East Asia, Western Europe, Latin America, Middle East, and a final universal section. Each territory occupies 120-150vh and uses parallax-layered backgrounds: a distant watercolor wash (moving at 0.2x scroll rate), a mid-ground decorative border pattern (0.5x rate), and foreground content (1.0x rate). The parallax creates a sense of physical movement through space. **Spatial relationships**: Content within each territory flows organically -- text blocks, illustrated manner cards, and cultural notes are positioned in an organic-flow pattern rather than a strict grid. Elements appear to be pinned to a surface like items on a corkboard or journal pages, with slight random rotations (-2deg to +2deg) and overlapping edges. **Navigation**: A horizontal "journey map" bar sits fixed at the top of the viewport -- a simplified illustrated world map (CSS/SVG) spanning the full width, with territory markers (small flag-like icons) that glow when active. The visitor's current position is indicated by a small walking figure icon that moves along the map as they scroll. Clicking a territory marker navigates to that section. ## Typography and Palette **Typography** - **Display / Territory Names:** "Amatic SC" (Google Fonts) -- a hand-drawn condensed sans-serif with the informal, personal quality of handwritten journal headers. Used at 3rem-5rem, weight 700. Its imperfect letterforms evoke travel diaries and handmade signage. - **Body / Cultural Descriptions:** "Merriweather" (Google Fonts) -- a sturdy serif designed for screen reading with a warm, bookish character. Weight 300 for body, 700 for emphasis. Line-height 1.8. 17px size. Its reliability grounds the playful display type. - **Accent / Manner Rules and Notes:** "Kalam" (Google Fonts) -- a handwritten font inspired by Indian penmanship. Weight 400. Used for pull-quotes, margin annotations, and "traveler's notes" that appear alongside main content. Its authentic handwriting quality adds personal warmth. **Color Palette** | Role | Color | Hex | |------|-------|-----| | Parchment Base | Warm aged paper | #f2e8d5 | | Ink Walnut | Rich writing ink brown | #3e2b1c | | Watercolor Sage | Soft green wash | #8fad88 | | Watercolor Terracotta | Warm earth wash | #c57b4a | | Watercolor Indigo | Deep blue wash | #3d5a80 | | Compass Gold | Metallic accent | #b8860b | | Journal Red | Margin note accent | #8b3a3a | The palette draws from natural materials associated with travel and craft: aged parchment, walnut ink, watercolor pigments, brass compass fittings, and red margin annotations. Each cultural territory receives a dominant watercolor accent: Sage for East Asia, Terracotta for Middle East, Indigo for Europe. ## Imagery and Motifs **Core Visual Motifs** 1. **Watercolor Wash Backgrounds**: Each territory section has a large, soft-edged color wash as its background layer. Created using radial-gradient with large spread values and very low opacity (0.15-0.25), producing the effect of watercolor bleeding on paper. Multiple overlapping gradients at slightly offset positions create organic, non-uniform color distribution. These move at parallax rate 0.2x. 2. **Manner Cards**: Individual manner rules are presented as illustrated cards -- rectangular containers with rounded corners (border-radius: 8px), subtle box-shadow (paper-lift effect), a torn-edge top border (CSS clip-path with irregular polygon), and a pin/clip decoration at the top-left (CSS pseudo-element creating a small circle with a shadow). Each card has a slight rotation (transform: rotate(-1deg to 1deg), randomized) and overlaps adjacent cards by 5-10px. 3. **Compass Rose Dividers**: Territory transitions feature a CSS-drawn compass rose (four pointed triangles arranged cardinally, with a circle at center) in Compass Gold. The compass needle (north pointer) rotates to point in the direction of the next territory (up for north, right for east, etc.), adding geographic logic to the scroll navigation. 4. **Hand-drawn Border Patterns**: Each territory uses a distinct border pattern referencing its culture: East Asia uses a wave pattern (CSS repeating-conic-gradient creating seigaiha waves), Europe uses a Greek key/meander pattern (CSS border-image with repeating linear gradients), Latin America uses a zigzag textile pattern (CSS repeating-linear-gradient), Middle East uses a geometric arabesque (CSS repeating radial gradients creating interlocking circles). 5. **Traveler's Journal Stamps**: Circular "passport stamp" elements appear at the completion of each territory section -- a CSS-drawn circle with double borders, rotated slightly, containing the territory name in Amatic SC and a completion date. These stamp themselves into view with a scale animation (0 to 1.1 to 1.0, bounce) and an opacity pulse when the section is fully scrolled past. ## Prompts for Implementation **Storytelling and Narrative Arc** The quest begins at "HOME" -- a blank parchment page with only the title "MANNER QUEST" in Amatic SC and the instruction "Scroll to begin your journey." The journey map at the top shows all territories as unvisited (muted icons). East Asia (first territory) introduces the quest with accessible manners: the bow in Japan (three depths, three meanings), chopstick etiquette, the Korean two-handed receive, the Chinese toasting hierarchy. Manner cards appear with slide-reveal animations as the visitor scrolls, pinned to the parchment background at organic angles. The journey map's East Asia icon illuminates. Western Europe introduces table manners, the Continental vs. American fork switch, the French "bon appetit" debate, and the German punctuality code. The watercolor wash shifts from Sage to Indigo. The parallax background layers smoothly blend between territories. Latin America covers the abraco greeting, time flexibility culture, the Argentine mate sharing ritual. The Middle East addresses the left-hand taboo, hospitality obligations, and tea ceremony protocols. The final section, "The Universal," presents manners that transcend culture: the smile, the thank-you, the willingness to learn. All territory passport stamps are visible. The journey map shows the full traversal. A final card reads: "The quest continues everywhere you go." **Animation Priorities** - Parallax scroll layers (three-layer system: background wash at 0.2x, border patterns at 0.5x, content at 1.0x, driven by scroll listener updating translateY via CSS custom properties) - Manner card slide-reveal with rotation (IntersectionObserver triggering translateY + opacity + slight rotation transition) - Compass rose needle rotation (CSS transition on transform: rotate when territory boundary crosses viewport center) - Passport stamp scale-bounce (CSS keyframes: scale(0) to scale(1.15) to scale(1.0), triggered on section completion) - Walking figure position on journey map (JS scroll listener mapping scroll percentage to translateX on map icon) - Watercolor wash cross-fade between territories (CSS transition on background gradient positions and colors) **Full-screen Narrative Experience**: Territory sections use min-height: 120vh to ensure parallax has room to breathe. No scroll-snap -- the journey should flow continuously. **AVOID**: CTA-heavy layouts, pricing blocks, stat-grids, corporate grid systems, tech-dark aesthetics, neon colors, rigid geometric layouts. ## Uniqueness Notes **Differentiators:** 1. **Geographic quest structure with journey map**: The persistent world map with a walking traveler icon creates a unique navigation metaphor -- the visitor is literally traveling the world through scroll, with their progress visualized geographically. 2. **Culture-specific CSS border patterns**: Using distinct CSS-only decorative patterns (seigaiha, Greek key, zigzag textile, arabesque) for each cultural territory creates visual diversity within a unified framework, with each pattern being culturally authentic. 3. **Passport stamp completion mechanic**: The stamp-collection system gives the visitor a sense of achievement as they complete each territory, gamifying the educational content without trivializing it. 4. **Watercolor wash parallax system**: The layered watercolor backgrounds that blend between territories via parallax create an atmospheric transition unique in the batch, evoking the pages of a travel watercolor journal. **Chosen seed/style:** parallax storytelling journey **Avoided overused patterns:** corporate aesthetic (89%), centered as sole layout (87%), minimal imagery (84%), counter-animate as sole pattern (90%), mysterious-moody as sole tone (96%), mono typography (92%). Instead used parallax-sections with organic-flow layout, approachable-casual + grounded-earthy tone, handwritten + serif typography, and warm-earthy + terracotta-warm palette.