# Design Language for witch-trial.com ## Aesthetics and Tone witch-trial.com channels a flat-design aesthetic — the bold simplification, solid-color confidence, and illustration-forward visual language of flat design applied to a platform exploring witch trials — historical injustice, mass hysteria, and the mechanics of persecution through the ages. The site accuses — with the stark graphic clarity of protest posters, the simplified silhouette power of woodcut illustration, and the documentary precision of a platform that examines how societies have historically weaponized accusation against the vulnerable. Inspiration draws from the flat-design movement of early iOS 7, the simplified illustration style of Noma Bar's negative-space portraits, the historical documentation aesthetics of the Salem Witch Museum, and the social-justice design tradition of Shepard Fairey's graphic activism. The tone is dreamy-ethereal — soft, floating language that creates haunting contrast with the dark subject matter, as if the stories of the accused drift through time like half-remembered dreams. The flat-design treatment transforms historical persecution from dense academic text into starkly graphic narratives — trial records simplified to powerful flat illustrations, accusation patterns displayed as bold graphic diagrams, and the social mechanics of witch hunts rendered with the visual clarity that makes complex historical injustice immediately comprehensible. Each component carries flat design's bold simplification — solid color fills without gradients, clear silhouette forms, and illustration-forward content where visual storytelling replaces photographic documentation. The dreamy-ethereal tone floats through darkness — the voices of the accused speaking softly across centuries. ## Layout Motifs and Structure The layout uses a **sidebar** architecture — persistent sidebar creating the court-records quality of a trial document index always available alongside the currently-examined case. **Sidebar Trial Navigation:** - Sidebar: 240px fixed left with trial case navigation - Main content: fluid width right of sidebar, max-width: 740px - Content blocks: generous 56px vertical spacing for reflective reading - Mobile: sidebar collapses to drawer navigation - The sidebar creates the court-archive quality of systematic trial record access **Section Sequence:** 1. **Accusation:** Hero with tech-mono typography in stark flat-design composition, floral-botanical organic nature motifs, progressive-disclosure interactive evidence-unveiling reveals 2. **Trial Records:** Historical cases in sidebar-navigated archive — progressive-disclosure interactive expanding case summaries with floral-botanical simplified herbal decorations 3. **Evidence Chamber:** Detailed trial documentation with floral-botanical natural-world motifs and botanical-illustration scientific plant diagrams 4. **Pattern Analysis:** Persecution patterns in flat-design data visualizations with floral-botanical minimal organic accents 5. **Verdict:** Footer as trial conclusion — dreamy farewell with floral-botanical final organic dissolution **Spatial Philosophy:** - Sidebar creates the court-archive quality of legal records systematically indexed for examination - Generous spacing creates the reflective quality of reading that demands moral contemplation - The trial metaphor structures content as evidence to be examined and judged ## Typography and Palette **Typography:** - **Headlines:** "Share Tech Mono" (Google Fonts) — tech-mono at 1.8rem-2.6rem, weight 400. Its monospace precision creates the court-record quality of mechanically typed trial documents. - **Body Text:** "Libre Baskerville" (Google Fonts) — serif at 0.9rem, weight 400, line height 1.85. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for dates, case numbers, and historical citations. - **Labels:** "Share Tech Mono" at 0.6rem, weight 400, uppercase, letter-spacing 0.15em. **Color Palette:** - **Midnight Ink:** #0e0e1a — deep dark for primary background - **Court Panel:** #1a1a2a — slightly lighter for sidebar and cards - **Neon Violet:** #8a4ae8 — vivid violet for primary accent - **Electric Teal:** #2ae8c4 — bright teal for secondary accent - **Flame Orange:** #e88a2a — warm orange for alert accent - **Parchment White:** #e8e4dc — warm off-white for primary text - **Ash Gray:** #6a6a78 — medium gray for secondary text - **Trial Border:** rgba(138,74,232,0.1) — violet-tinted border for trial elements ## Imagery and Motifs **Botanical-Illustration Scientific Plants:** Nature documented through scientific-illustration style — SVG detailed plant drawings (herbs, flowers, roots historically associated with witchcraft) rendered with botanical precision (1.5px stroke, Electric Teal at primary, Neon Violet at accent) creating the herbalist quality of the natural knowledge that was often criminalized during witch trials. **Progressive-Disclosure Evidence Unveiling:** Trial evidence revealed through expanding content — collapsed summaries that expand on click with smooth max-height transition (400ms ease-out), creating the court-procedure quality of evidence being formally presented and entered into the record. **Floral-Botanical Nature Motifs:** Decorative elements combining wild flora with trial aesthetics — SVG wildflower silhouettes and vine patterns rendered in flat-design solid fills (single color, no gradients, 0.04 opacity) creating the natural-world quality of the herbal knowledge that intersected with persecution. **Flat-Design Silhouette Illustration:** Key concepts illustrated through bold silhouette forms — CSS clip-path and solid-color shapes creating stark figure illustrations without gradients or shadows, communicating the graphic power of simplified historical narrative. **Trial Document Treatment:** Content blocks styled as formal documents — border-left: 2px solid rgba(138,74,232,0.15); padding-left: 24px; creating the court-filing quality of formally entered trial records. ## Prompts for Implementation Build the page as a flat-design witch trial documentary platform. Sidebar: .court-sidebar { position: fixed; left: 0; top: 0; width: 240px; height: 100vh; background: #1a1a2a; border-right: 1px solid rgba(138,74,232,0.08); padding: 32px 20px; overflow-y: auto; } .trial-content { margin-left: 240px; max-width: 740px; padding: 48px 40px; } Progressive disclosure: .evidence { max-height: 48px; overflow: hidden; transition: max-height 400ms ease-out; cursor: pointer; } .evidence.revealed { max-height: 800px; } Trial document: .court-record { border-left: 2px solid rgba(138,74,232,0.15); padding-left: 24px; margin-bottom: 56px; } AVOID: Sensationalized horror-themed witch platforms, corporate legal databases, and standard historical documentation sites. Let flat-design graphic clarity and dreamy-ethereal language create a witch trial platform where historical persecution is documented with stark visual honesty and haunting, time-crossing empathy. ## Uniqueness Notes 1. **Flat-design for witch trials:** Bold graphic simplification makes historical persecution immediately visually comprehensible. 2. **Sidebar as court-record index:** Persistent navigation creates the archive quality of systematic trial documentation. 3. **Dreamy-ethereal tone as time-crossing empathy:** Floating language makes the voices of the accused feel like they drift through centuries. 4. **Botanical-illustration as criminalized knowledge:** Scientific plant drawings connect to the herbal knowledge weaponized in persecution. 5. **Progressive-disclosure as evidence presentation:** Expanding content creates the courtroom quality of formal evidence submission. **Seed/Style:** aesthetic: flat-design, layout: sidebar, typography: tech-mono, palette: neon-electric, patterns: progressive-disclosure, imagery: botanical-illustration, motifs: floral-botanical, tone: dreamy-ethereal **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses flat-design aesthetic, sidebar layout, tech-mono typography, neon-electric palette, progressive-disclosure patterns, botanical-illustration imagery, and dreamy-ethereal tone.