# Design Language for rational.quest ## Aesthetics and Tone rational.quest channels a street-style aesthetic — the raw, authentic energy of urban creative culture applied to a platform for rational quests, investigations, and intellectual street-level inquiry. The site tags truth — bold declarations spray-painted on the walls of conventional thinking, wheat-pasted evidence on the surfaces of assumption, and the DIY energy of a community that builds its own intellectual frameworks. Inspiration draws from the political posters of Shepard Fairey's Obey campaign, the documentary graffiti of JR's large-format street installations, the protest art of Emory Douglas, and the typographic murals of EINE. The tone is mysterious-moody — shadowy, atmospheric language that treats rational quests as investigations into the unknown. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — content arranged in layered depth that creates the urban-exploration quality of investigating deeper into the city's hidden rational truths. **Parallax Sections Architecture:** - Full-viewport sections as investigation zones - Content at varied parallax depths - Evidence panels overlapping between sections - Feature investigations: full-immersion depth-zero anchors - Container: 100vw sections with max-width: 800px inner content - The parallax creates the urban-exploration quality of diving deeper into investigation **Section Sequence:** 1. **Investigation:** Hero with garamond-classic title on duotone street gradient, mixed-media layered evidence surfaces, city-urban architectural accent markers 2. **Leads:** Quest evidence in parallax depth — border-animate interactive connection reveals with mixed-media collaged evidence boards 3. **Case:** Featured quest in full-immersion with city-urban architectural framing and mixed-media immersive evidence wall 4. **Archive:** Cold cases in deeper parallax layer with city-urban distant skyline treatment 5. **Close:** Footer as case closing — mysterious-moody final note with city-urban settled architecture and enigmatic farewell ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.4rem-3.2rem, weight 700. Its authoritative, time-tested forms create the investigative-journalism quality of rational pursuit documented with typographic gravitas. - **Body Text:** "Source Sans 3" (Google Fonts) — clean sans at 0.95rem, weight 400, line height 1.7. - **Accent:** "EB Garamond" at 1.1rem, weight 400, italic for investigation notes and evidence annotations. - **Labels:** "Source Sans 3" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Duo Black:** #0c0c10 — deep duotone black for backgrounds - **Duo Surface:** #181820 — dark duotone for panels - **Duo Orange:** #e87830 — bold duotone orange for primary accent - **Duo Teal:** #30a8b0 — cool duotone teal for secondary accent - **Duo Light:** #e8e0d8 — warm light for text - **Shadow Duo:** #383038 — duotone shadow for secondary text - **Border Duo:** rgba(232,120,48,0.1) — orange tint border ## Imagery and Motifs **Mixed-Media Evidence Boards:** Investigation panels feature collage-style layering — overlapping rectangles at slight angles (transform: rotate(-1deg to 2deg)), paper-clip connectors (small SVG, 12px), and pin-dot markers (6px circles). In Duo Orange and Duo Teal at 0.08-0.12 opacity. The mixed-media creates the evidence-wall quality of an investigation connecting disparate clues. **Border-Animate Connection Reveals:** Quest connections feature animated borders — border-left width growing from 0 to 3px in Duo Orange over 400ms ease-out on scroll-into-view. The growing borders visualize rational connections forming as the investigator discovers them. **City-Urban Architectural Markers:** Architectural silhouette elements — simplified building profiles (SVG rectangles of varied heights, 20-40px tall) in Duo Teal at 0.06 opacity used as section skylines and quest-zone indicators. The city elements create the urban-investigation quality of rational pursuit through city streets. **Duotone Street Atmosphere:** Background uses strict two-color system — radial-gradient(at 40% 30%, rgba(232,120,48,0.02), transparent 35%), radial-gradient(at 60% 70%, rgba(48,168,176,0.015), transparent 30%). The duotone creates the screen-printed quality of street-style investigation posters. **String Connection Lines:** Thin diagonal lines (1px) in Duo Orange at 0.04 opacity connecting related quest elements across sections — the classic investigation-board string connecting evidence. ## Prompts for Implementation Build the page as a street-style rational investigation. Parallax: .quest-zone { min-height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; } .quest-content { max-width: 800px; margin: 0 auto; padding: 70px 24px; position: relative; z-index: 2; } Border-animate: .quest-lead { border-left: 0px solid #e87830; transition: border-left-width 400ms ease-out; } .quest-lead.visible { border-left-width: 3px; padding-left: 16px; } Mixed-media: .evidence-card { transform: rotate(var(--tilt, -1deg)); border: 1px solid rgba(232,120,48,0.08); padding: 20px; position: relative; } .pin-dot { width: 6px; height: 6px; border-radius: 50%; background: #e87830; position: absolute; top: -3px; left: 20px; } City skyline: .skyline { display: flex; align-items: flex-end; gap: 3px; opacity: 0.06; } .building { width: 8px; background: #30a8b0; height: var(--building-h, 30px); } String connection: .string-line { position: absolute; height: 1px; background: rgba(232,120,48,0.04); transform-origin: left center; transform: rotate(var(--angle, -15deg)); width: var(--length, 200px); } AVOID: Standard quest platforms, corporate investigation dashboards, and minimal puzzle interfaces. Let street-style rawness and mysterious-moody atmosphere create a rational quest where intellectual investigations carry the urgent energy of street-level truth-seeking. ## Uniqueness Notes 1. **Street-style for rational quest:** Urban creative energy makes intellectual investigation feel like street-level truth-seeking rather than academic exercise. 2. **Border-animate as connection discovery:** Growing borders visualize rational connections forming as the investigator discovers them. 3. **Mixed-media as evidence board:** Collage-style layering creates the investigation-wall quality of connecting disparate clues. 4. **String connections as investigation threads:** Diagonal lines between elements create the classic detective-board quality of evidence connected by string. 5. **Garamond-classic on urban surfaces:** Authoritative serif typography against street aesthetics creates the investigative-journalism quality of rational pursuit. **Seed/Style:** aesthetic: street-style, layout: parallax-sections, typography: garamond-classic, palette: duotone, patterns: border-animate, imagery: mixed-media, motifs: city-urban, tone: mysterious-moody **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses street-style aesthetic, parallax-sections layout, duotone palette, mixed-media imagery, and mysterious-moody tone.