# Design Language for mores.quest ## Aesthetics and Tone mores.quest (Mores Quest — exploring the customs, norms, and unwritten rules that govern societies) channels a surreal aesthetic — dreamlike compositions where reality bends, perspectives shift, and the familiar becomes strange, applied to an interactive platform for exploring social customs across cultures. The site treats cultural norms as surreal landscapes where the everyday rules of behavior are simultaneously obvious and bizarre when examined closely. Inspiration draws from Salvador Dali's melting landscapes, Rene Magritte's impossible objects, the surreal photography of Man Ray, and the disorienting beauty of M.C. Escher's impossible geometries. The tone is authoritative — confident, expert analysis that grounds surreal presentation in rigorous anthropological scholarship. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — content divided between two vertical halves that create dialogue, contrast, and comparison appropriate for examining cultural norms from multiple perspectives. **Split-Screen Architecture:** - Two-column layout: display: grid, grid-template-columns: 1fr 1fr - Left column: primary content (articles, explanations) - Right column: contextual content (examples, counterpoints, visuals) - Columns can merge for full-width feature sections - On mobile: columns stack vertically - Gap: 0 (columns touch, creating tension) **Section Sequence:** 1. **Threshold:** Hero spanning both columns with commissioner-versatile title on warm-earthy gradient, glassmorphic-cards floating over sharp-angles background composition, stagger-animated entrance 2. **Norms:** Cultural norms explored in split-screen — left column presents the custom, right column provides the surreal visual counterpoint with glassmorphic overlays 3. **Contrast:** Cross-cultural comparisons using split-screen juxtaposition with sharp-angles geometric frameworks and stagger-animated reveals 4. **Depths:** Deep analysis in merged full-width sections with glassmorphic-card pullout insights and surreal decorative elements 5. **Passage:** Footer as cultural crossing — authoritative closing that spans both columns with sharp-angles border frame ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile serif at 2.5rem-3.5rem, weight 700. Its broad design range creates the authoritative flexibility needed for a platform spanning many cultural contexts. - **Body Text:** "Commissioner" at 0.95rem, weight 400, line height 1.75. - **Contrast Text:** "Commissioner" at 1.1rem, weight 300, italic for right-column contextual text. - **Labels:** "Commissioner" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Earth Deep:** #1a1410 — deep warm earth for primary backgrounds - **Clay Mid:** #2a2018 — warm clay for secondary backgrounds - **Terracotta Bold:** #c06030 — strong terracotta for primary accents - **Ochre Warm:** #c0a040 — warm ochre for secondary accents - **Sage Earth:** #607848 — earthy sage for tertiary accents - **Sand Light:** #e8dcc8 — warm sand for light sections - **Text Cream:** #dcd0c0 — warm cream for text on dark - **Border Earth:** #403020 — warm dark brown for borders ## Imagery and Motifs **Glassmorphic-Cards Cultural Insights:** Key cultural insights presented in glassmorphic cards — background: rgba(232,220,200,0.08), backdrop-filter: blur(12px), border: 1px solid rgba(232,220,200,0.12), border-radius: 12px. Cards float over content at varying positions, creating the surreal sensation of thoughts materializing and hovering in space between cultural perspectives. **Stagger-Animated Cultural Reveals:** Content blocks enter with staggered timing — each element in a group delayed by 80ms from the previous, creating a cascade effect. Transform: translateY(24px) opacity(0) to translateY(0) opacity(1) over 400ms with ease-out. The stagger creates the surreal sensation of reality assembling itself piece by piece. **Sharp-Angles Geometric Framework:** Section backgrounds and decorative elements use aggressive angular geometry — SVG polygons and CSS clip-path with acute angles (15-30 degree cuts). Borders use angled segments rather than straight lines. The sharp angles create visual tension that mirrors the discomfort of examining one's own cultural assumptions. **Surreal Perspective Shifts:** Images and feature elements use subtle CSS perspective transforms — transform: perspective(800px) rotateY(2deg) or rotateX(1deg) — creating a slightly off-kilter view that communicates the surreal quality of familiar customs seen from an outside perspective. Different elements tilted in different directions. **Warm-Earthy Depth Gradients:** Backgrounds use warm earth-tone gradients — linear-gradient(135deg, #1a1410, #2a2018) with radial highlights in Terracotta Bold (rgba(192,96,48,0.04)) and Ochre Warm (rgba(192,160,64,0.03)). The warm earthiness grounds the surreal visual treatment in physical, tangible cultural reality. ## Prompts for Implementation Build the page as a surreal cultural exploration platform. Grid: display: grid, grid-template-columns: 1fr 1fr, gap: 0. Mobile: grid-template-columns: 1fr. Glassmorphic cards: .insight-card { background: rgba(232,220,200,0.08); backdrop-filter: blur(12px); border: 1px solid rgba(232,220,200,0.12); border-radius: 12px; padding: 24px; position: absolute; } Stagger: .stagger-group > * { opacity: 0; transform: translateY(24px); transition: all 400ms ease-out; } .stagger-group.visible > *:nth-child(1) { transition-delay: 0ms; } .stagger-group.visible > *:nth-child(2) { transition-delay: 80ms; } .stagger-group.visible > *:nth-child(3) { transition-delay: 160ms; } .stagger-group.visible > * { opacity: 1; transform: translateY(0); } Sharp angles: .angular-bg { clip-path: polygon(0 0, 100% 4%, 100% 96%, 0 100%); } .angular-border { border-bottom: 2px solid #c06030; transform: rotate(-1deg); } Perspective shifts: .surreal-tilt { transform: perspective(800px) rotateY(2deg); transition: transform 400ms ease; } .surreal-tilt:hover { transform: perspective(800px) rotateY(0); } AVOID: Clean anthropology documentation, academic journal layouts, and neutral cultural reference design. Let the surreal visual language and authoritative scholarship create a platform where examining customs feels as strange and fascinating as the customs themselves. ## Uniqueness Notes 1. **Surreal aesthetic for cultural exploration:** Dreamlike presentation makes the familiar customs of society feel appropriately strange when examined closely. 2. **Split-screen as cultural dialogue:** Two-column layout creates the juxtaposition necessary for comparing cultural perspectives and challenging assumptions. 3. **Glassmorphic-cards as floating insights:** Translucent hovering cards create the surreal sensation of cultural knowledge materializing between perspectives. 4. **Sharp-angles as cultural tension:** Aggressive geometric cuts embody the discomfort of questioning deeply held social norms. 5. **Authoritative tone within surreal presentation:** Expert confidence grounds dreamlike visuals in rigorous anthropological analysis. **Seed/Style:** aesthetic: surreal, layout: split-screen, typography: commissioner-versatile, palette: warm-earthy, patterns: stagger, imagery: glassmorphic-cards, motifs: sharp-angles, tone: authoritative **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses surreal aesthetic, split-screen layout, warm-earthy palette, glassmorphic-cards imagery, and authoritative tone.