# Design Language for slave.quest ## Aesthetics and Tone Neubrutalism softened by Frutiger's humanist clarity and warmed by Saharan sand-honey light — a brutalist roadside cafeteria where the chairs are concrete blocks but the napkins are warm and the soup tastes like home. The page reads like a hand-printed broadside taped to a sun-bleached cinderblock wall: bold flat slabs of warm sandstone, raw rules, but soft hand-drawn blob shapes peeking out, and rounded humanist body type making the whole thing feel like a tour-guide pamphlet, not a manifesto. Inspiration: Adrian Frutiger's signage masterworks for Charles de Gaulle airport, the desert-warm posters of Saul Bass for late-period travel campaigns, naive line-illustration travel zines, and the organic blob-shapes of Olafur Eliasson's wall paintings. The tone is playful — generous, hand-warm, with a touch of road-trip silliness. The visitor should feel like they're being handed a hand-stapled travel zine by a friend. ## Layout Motifs and Structure A single-column reading channel: 640px max width on desktop, generously centered, with everything stacked vertically as a hand-folded zine. No multi-column tricks, no grid systems, no asymmetric flair — just one tall, calm column from masthead to footer. Within the column, each section is wrapped in a neubrutalist hand-cut block: a 3px sandstone-rust border with a 6px solid drop-shadow (zero blur, lower-right offset). Sections progress with stagger pattern: when a section enters view, its contained elements (heading, paragraph, illustration, blob) fade-up with 80ms inter-element delay, settling within 600ms total. Between sections, large hand-drawn organic blob shapes overflow horizontally beyond the 640px column, breaking the strict format — they're the page's permission to be playful. Section icons sit in the gutter to the left of each block in a contrasting circle, like miniature route-markers. ## Typography and Palette - **Display:** "Work Sans" (Google Fonts) — for section titles, weight 700, set at 48–64px, the Frutiger-clean stand-in - **Body:** "Lato" (Google Fonts) — frutiger-humanist for body, weight 400 at 18px, line-height 1.7 - **Caption / route-mark:** "Inter" (Google Fonts) — at 12px small-caps for section codes and route-tags - **Accent / handwritten:** "Caveat" (Google Fonts) — for hand-margin notes and route-stickers Palette — Warm sandstone-honey desert: - `#FFF6E7` Sun-Bleached Linen — main background - `#1F1812` Asphalt Ink — body text - `#D7813A` Sandstone Rust — primary accent, borders, route-circles - `#F0C36C` Honey Tan — secondary accent, blob fills - `#7BAE9C` Roadside Cactus — single cool accent for line-illustrations - `#2E2418` Worn Leather — drop-shadow color and footer mast ## Imagery and Motifs - **Line-illustration**: naive hand-drawn line illustrations of road-trip ephemera — folded maps, thermos flasks, road signs with mileage stickers, palm silhouettes, suitcase stickers, gas-station awnings. Each illustration uses a 2px Asphalt Ink stroke with Roadside Cactus highlight accent - **Organic-blob motifs**: large hand-drawn blob shapes (300–520px) in Honey Tan, overflowing the single column rightward and leftward at section transitions. Blobs are not perfect ovals — they're irregular, hand-pencilled silhouettes - Neubrutalist ornaments: 3px hand-cut borders, 6px hard shadows, raw section codes ("ROUTE 04 // STAGE A") - Recurring route-stamp: a Honey-Tan circular hand-stamp appears at each section opening containing a 2-digit chapter code in Work Sans - Hand-stickers (Caveat font): small handwritten margin notes attached to the column edge with a faint masking-tape strip ## Prompts for Implementation - The page is one centered 640px column from masthead to footer; nav is a sticky thin top mast with just the wordmark and current route-code - Each section is wrapped in a `
` with 3px Sandstone-Rust solid border, 6px solid Worn-Leather drop-shadow (offset 6px 6px, no blur) - Stagger pattern: on IntersectionObserver intersection, child elements (h2, p, img, blob) fade-up with 80ms staggered delay, total ≤ 600ms, cubic-bezier(.25,.46,.45,.94) - Organic blobs: SVG paths drawn with cubic Bezier curves of intentionally uneven control points; positioned absolute, allowed to overflow the column boundary by ±120px. Each blob carries a slow 12s "breathe" via `transform: scale(0.98–1.02)` - Line-illustrations: inline SVG with a single Asphalt Ink stroke (2px round caps/joins), highlighted with Roadside Cactus 1.5px secondary detail - AVOID: pricing blocks, CTA bars, stat-grids, testimonial carousels. Each block holds a story-passage or route-description, not a sales feature - Route-stamps: 64px circle in Honey Tan with 3px Sandstone-Rust border, displaying the route code in Work Sans 700, positioned in the left gutter aligned to section heading baseline - The page's tone must read as a hand-stapled zine: occasional handwritten margin notes in Caveat poking out from the column edges ## Uniqueness Notes - Differentiator 1: neubrutalism warmed by Frutiger humanist body — most neubrutalism is cold; this one is hand-stapled and friendly - Differentiator 2: single-column layout used as a zine-spine, not as a marketing landing flow - Differentiator 3: organic-blob motifs in warm honey overflow the rigid column, providing the page's playful tension - Differentiator 4: line-illustration imagery rendered with naive 2px hand-line — a register absent from the corpus's 90% photography dominance - Differentiator 5: warm palette executed in sandstone-rust rather than the corpus's generic "warm" register - Chosen seed: aesthetic: neubrutalism, layout: single-column, typography: frutiger-clean, palette: warm, patterns: stagger, imagery: line-illustration, motifs: organic-blobs, tone: playful - Avoids overused patterns: parallax (94%), card-grid (90%), centered (94%) — single column is intentionally narrow, not generic-centered; photography (90%); mysterious-moody (70%); mono typography (81%)