# Design Language for witch-trial.com ## Aesthetics and Tone witch-trial.com is a generative-art experience that transforms the historical horror of witch trials into a contemplative, dreamlike digital memorial. The visual identity layers computational generative patterns over aged, terracotta-warm surfaces, creating the impression of ancient court documents coming alive with algorithmic visions. The tone is dreamy and ethereal -- not horrific but hauntingly beautiful, like a requiem rendered in code. Think of a processing sketch projected onto 17th-century parchment in a candlelit church. The generative elements represent the chaos of accusation -- random, unpredictable, yet governed by invisible rules. Inspiration from Salem memorial designs, generative art by Casey Reas, medieval woodcut illustrations, and the amber warmth of candlelight on old paper. ## Layout Motifs and Structure A **layered-depth** layout where historical narrative exists beneath layers of generative visual elements, creating the sensation of looking through time itself. **Primary structure:** - **Vigil opening (100vh):** A deep terracotta-dark background (#2a1a10) with a generative particle system filling the viewport -- hundreds of small amber dots (#d4a060 at varying opacities) drifting slowly downward like embers or fireflies. Through this particle curtain, the title "WITCH TRIAL" fades in slowly (3s) in classic serif type, as if emerging from smoke. - **Testimony layers:** Content sections rendered as aged parchment panels (CSS noise texture in terracotta tones) floating at different depth levels. Foreground panels contain narrative text; background layers show generative patterns (Perlin noise visualizations, flow fields) in muted amber. - **Book-scholarly navigation:** A vertical sidebar of chapter markers styled as book page tabs -- small rectangles protruding from the right edge, each labeled with a Roman numeral. Active tab glows with amber warmth. - **Memorial footer:** Names drift slowly upward through the footer space -- a scrolling memorial of historical witch trial victims, each name fading in and out, rendered in the generative particle system. **Spatial relationships:** Layered panels use position: relative/absolute with z-index depth. Content panels: max-width: 680px, centered. Generative canvas sits behind all content (z-index: 0). Panel spacing: 120px vertical. ## Typography and Palette **Fonts:** - **Display/Chapter titles:** "Playfair Display" (Google Fonts) -- a high-contrast transitional serif with dramatic thick-thin strokes, used at clamp(36px, 6vw, 72px). Weight 700. The letterforms carry historical weight appropriate to trial documents. - **Body/Testimony text:** "Cormorant" (Google Fonts) -- a delicate, refined Garamond-style serif at 18px/1.85 line-height. Weight 400 for body, 600 for emphasis. The elegant thinness of the strokes creates a fragile, vulnerable reading experience. - **Evidence labels:** "Courier Prime" (Google Fonts) -- a refined monospace at 13px for dates, case numbers, and archival metadata. Weight 400. The monospace evokes typewritten court records. **Color Palette:** - **Background dark:** #2a1a10 (deep burnt umber) - **Parchment:** #d8c8a8 (aged paper tone for content panels) - **Parchment dark:** #c0a880 (darker parchment for shadows) - **Ember amber:** #d4a060 (warm amber for generative particles, highlights) - **Ember glow:** #e8c080 (lighter amber for active states) - **Text dark:** #2a1810 (near-black brown for text on parchment) - **Text light:** #d0c0a0 (pale amber for text on dark backgrounds) - **Blood accent:** #8a3020 (deep red, used extremely sparingly for emphasis) ## Imagery and Motifs **Core visual motifs:** - **Glitch-art as historical distortion:** Brief, subtle glitch effects (horizontal line displacement, color channel separation) applied to content sections at random intervals (every 15-30s). The glitch represents historical unreliability -- records that cannot be fully trusted, testimony that shifts. - **Generative particle embers:** A canvas-rendered particle system with 200-300 small circles (1-3px) in amber tones, drifting with Perlin-noise-influenced movement. Particles fade in and out (lifespan: 5-15s), creating a perpetual ember-fall effect. - **Book-scholarly chapter navigation:** Roman-numeral chapter tabs along the right edge (position: fixed) styled as protruding bookmarks -- small rectangles (8px x 40px) with parchment fill and 1px borders. On hover: extend to 60px revealing chapter title. - **Fade-reveal testimony sections:** Content panels use a slow fade-reveal (opacity 0 to 1 over 1.5s, triggered by Intersection Observer) combined with a subtle upward drift (translateY: 30px to 0). The slowness is deliberate -- testimonies should not appear instantly. ## Prompts for Implementation **Generative memorial experience:** The site should feel like visiting a digital memorial at twilight. Everything moves slowly, everything glows faintly, and the passage of time is palpable. No fast animations. No sharp transitions. Everything fades. **Generative particle system:** - HTML5 canvas element, position: fixed, z-index: 0, pointer-events: none. - Particle class: x, y, size (1-3px), opacity (0.1-0.6), velocity (slow, influenced by Perlin noise). - Update loop: move particles downward with slight horizontal drift. Respawn at top when below viewport. - Draw: fillStyle with amber color at particle's current opacity. arc() for circles. **Parchment texture CSS:** - background: #d8c8a8; - Apply SVG noise filter: - Combined with a subtle box-shadow: inset 0 0 40px rgba(42,26,16,0.2) for aged-paper edges. **Glitch implementation:** - Randomly trigger (setInterval with random delay 15-30s) a CSS class that applies: - clip-path: inset(random_y% 0 random_y% 0) on a duplicated pseudo-element with translateX offset. - Duration: 100-200ms, then remove class. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, bright colors, fast animations. This is a memorial, not a product. ## Uniqueness Notes **Differentiators from other designs:** 1. **Generative ember particle system as memorial act:** Using computational generative art (Perlin-noise-driven particles) as a digital memorial for historical victims creates a unique intersection of code and commemoration. 2. **Glitch effects as metaphor for historical unreliability:** Random, infrequent glitch disruptions in content represent the instability of historical records -- a conceptually motivated use of glitch art that goes beyond mere decoration. 3. **Scrolling name memorial in footer:** Names of historical witch trial victims drifting upward through the particle system in the footer creates a solemn, perpetual remembrance unique among all designs. **Chosen seed/style:** aesthetic: generative, layout: layered-depth, typography: serif-classic, palette: terracotta-warm, patterns: fade-reveal, imagery: glitch-art, motifs: book-scholarly, tone: dreamy-ethereal **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94% -- terracotta-warm is specific, not generic), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).