# Design Language for witch-trial.com ## Aesthetics and Tone witch-trial.com should feel like a forbidden graduate seminar held at midnight inside a vandalized marble courthouse: scholarly, blue-lit, botanical, and accusatory without becoming horror kitsch. The governing tension is **archival evidence versus public graffiti**. Witch-trial history is treated as a record of social panic, legal language, gendered suspicion, herb-lore, and ruined civic authority; the page should look like marginalia fighting back against a classical institution. The core aesthetic is **graffiti street style filtered through dark academic research**. Imagine an old tribunal transcript projected onto cold Carrara marble, then overdrawn with cyan spray paint, chalk arrows, and botanical diagrams of rue, belladonna, yarrow, mugwort, rosemary, and foxglove. The mood is not “spooky Halloween”; it is investigative, intellectual, and morally charged. The site should invite visitors to trace how accusation becomes procedure, how rumor becomes evidence, and how a public square becomes a machine for certainty. The tone is **scholarly-intellectual**, but with visual rebellion. Headings may read like exhibit labels, docket fragments, deposition titles, or chapter plates. Decorative marks should suggest protest on top of legal stone: sprayed circles around clauses, hand-scrawled cross-outs, witness-number tags, and delicate herb engravings growing through cracks in the marble. Ethereal blue light provides the supernatural atmosphere, but the intellectual center remains historical interpretation rather than fantasy. ## Layout Motifs and Structure Use a **centered layout** without falling into a generic centered landing page. The composition should behave like a vertical evidence plinth: a narrow central column of testimony, diagrams, and annotations suspended inside a full-screen courtroom void. The main axis stays centered, but every section is disturbed by offset graffiti tags, floating botanical plates, and marble fragments that lean into the reading path. The page should be a **full-screen narrative procession** rather than a stack of marketing modules. Suggested structure: 1. **The Summons** — a full viewport hero with the domain split as `WITCH / TRIAL` in monumental slab-serif type, centered over pale blue marble. SVG paths slowly draw a chalk pentacle-like evidence route, but avoid occult cliché by making it read as a legal diagram: witness, magistrate, rumor, confession, verdict. 2. **The Deposition Garden** — centered transcript fragments appear as marble plaques with botanical illustrations winding around them. The central text column remains stable while blue spray-painted annotations orbit the margins. 3. **The Machinery of Suspicion** — an immersive section where accusation steps are arranged on a courtroom floor plan: whisper, naming, search, examination, confession, sentence. SVG lines draw between steps as the user scrolls. 4. **Counter-Archive** — the final section dissolves the court into botanical growth and graffiti corrections, visually rewriting the record from below. Avoid card grids, bento boxes, dashboards, sidebars, pricing blocks, stat grids, and CTA-heavy endings. The layout should be centered, ritualistic, and document-like, but not static: the visitor should feel they are walking down the center aisle of a tribunal while the walls annotate themselves. ## Typography and Palette **Typography** - **Display / Tribunal Titles:** `Roboto Slab` from Google Fonts, weights 700 and 900. Use for massive centered title slabs, section numerals, and verdict-like words. Set in uppercase with tight line-height, mild negative letter-spacing, and occasional blue outline strokes to evoke carved stone plus street poster weight. - **Scholarly Body / Archive Notes:** `Source Serif 4` from Google Fonts, weights 400, 500, and 700. Use for transcript passages, historical commentary, and long-form interpretive text. Let it feel bookish and credible. - **Graffiti Marginalia / Tags:** `Rubik Spray Paint` from Google Fonts, weight 400. Use sparingly for sprayed annotations, crossed-out verdicts, evidence labels, and animated margin notes. Never use it for body copy; it is the insurgent voice. - **Metadata / Docket Labels:** `IBM Plex Mono` from Google Fonts, weights 400 and 600. Use for case numbers, dates, exhibit labels, coordinates, and small interface-like captions. **Palette — ethereal blue on marble and ink** - `#07111F` — deep ink-black blue for the page void and tribunal shadows. - `#DCEEFF` — cold parchment-blue for primary backgrounds and misted panels. - `#7DBBFF` — ethereal witness blue for path-drawn SVG lines, glows, and highlights. - `#F4F7FA` — Carrara marble white for plaques, title slabs, and carved surfaces. - `#8D98A7` — marble vein gray for borders, cracks, and quiet separators. - `#1E4B72` — scholarly indigo for body accents and legal headings. - `#D9467A` — restrained foxglove magenta for accusatory graffiti strikes and botanical poison details. - `#9EBEAA` — herbarium sage for leaves, stems, and counter-archive growth. Use gradients only as soft blue atmospheric washes, not corporate color ramps. Marble should be suggested through CSS background layers: thin gray-blue veins, translucent cloudy radial gradients, and faint noise. Keep contrast icy and intellectual. ## Imagery and Motifs The imagery should be entirely custom-feeling: no stock photos, no witch silhouettes, no broomsticks, no cauldrons, no Halloween moons. Build the visual system from **botanical illustration**, **marble-classical fragments**, and **spray-painted evidentiary marks**. Primary motifs: - **Botanical testimony:** fine line drawings of historically resonant plants — mugwort, rue, rosemary, foxglove, yarrow, belladonna — wrapping around transcript blocks. Use thin SVG strokes in `#9EBEAA` and `#7DBBFF`, with occasional poison berries in `#D9467A`. - **Path-drawn accusation lines:** animated SVG paths that connect legal concepts like rumor, witness, search, confession, and verdict. These should draw on scroll as though chalk or paint is being applied to glass above the archive. - **Classical marble evidence:** broken pediment shapes, columns cropped into abstract vertical bands, cracked tablets, engraved plinths, and judicial seals reduced to fragments. Marble is the authority being written over. - **Graffiti corrections:** sprayed circles, X marks, arrows, underlines, docket tags, and partially legible phrases such as “WHO BENEFITS?”, “HEARSAY”, “NO PROOF”, and “NAME ≠ GUILT”. Keep these intelligent and sparse, like annotations by an angry historian. - **Spectral blue dust:** small floating particles and low-opacity veils that give the page a haunted archive atmosphere without using ghosts. Decorative icons should feel like courtroom symbols reinterpreted: a scale with vines growing through it, a witness stand overrun by roots, a seal split by a blue paint stroke, a gavel reduced to an archaeological fragment. Use inline SVG and CSS shapes so the implementer can animate strokes and layers. ## Prompts for Implementation Build a single immersive `index.html` experience with embedded CSS and JS. Load Google Fonts for `Roboto Slab`, `Source Serif 4`, `Rubik Spray Paint`, and `IBM Plex Mono`. The page should feel authored, cinematic, and research-driven: a scrollable exhibit about accusation as a social technology. Implementation guidance: - Start with a **full-screen hero** centered like a marble indictment tablet. Animate the title in stages: first the slab-serif letters fade in like carved stone, then blue SVG accusation paths draw around them, then graffiti annotations appear as sprayed masks. - Use `IntersectionObserver` to trigger **path-draw-svg** animations: set SVG path lengths with `stroke-dasharray` and reveal them as sections enter view. Lines should feel hand-drawn but precise, like courtroom diagrams marked by a restless researcher. - Keep the main reading path centered with `max-width` around 760px, but layer full-viewport decorative elements behind and beside it: marble columns, botanical plates, and spray marks. The centered column is the record; the surrounding viewport is the argument. - Create marble using CSS gradients: `radial-gradient`, `linear-gradient`, and pseudo-elements with thin vein lines. Avoid image textures unless they are handcrafted SVG data or CSS-only. - Let botanical illustrations grow slowly along the scroll. Stems can draw with SVG paths; leaves can fade and rotate in after the stem line completes. - Use occasional horizontal “evidence seals” as section transitions: circular outlines, docket numbers in mono, and blue paint crossing through the seal. - Motion should be investigative, not playful: slow line-drawing, ink bleeding, plaque reveals, soft parallax of marble fragments, and graffiti stamps that appear with a dry aerosol burst effect. - Copy should read like exhibit narration: concise, intellectually sharp, and historically aware. Suggested phrases: “Rumor enters the record,” “The body becomes evidence,” “Confession is manufactured certainty,” “The archive remembers its violence.” - End without a sales CTA. Close with a quiet centered counter-archive tableau: botanical lines overtaking a cracked verdict tablet while the final SVG path redraws the word “evidence” into “memory.” AVOID: CTA-heavy layouts, pricing blocks, stat-grids, generic card grids, corporate gradients, stock photography, cartoon witch imagery, and decorative occult clichés. Prioritize full-screen narrative, scholar-protest energy, and animated visual evidence. ## Uniqueness Notes 1. **Graffiti as historiographic correction:** The graffiti is not an urban style pasted onto history; it functions as a dissenting layer that challenges court records, making the page feel like an annotated archive rather than a promo site. 2. **Centered layout as tribunal aisle:** The centered structure is used as a ritual evidence procession through a courthouse, not a conventional centered hero-and-sections page. 3. **Botanical illustration replaces witch clichés:** Plants carry the cultural memory of healing, suspicion, poison, and folk knowledge, avoiding broomstick/cauldron imagery while still feeling specific to witch-trial history. 4. **Marble-classical authority under attack:** Classical stone, seals, and plinths represent institutional law; blue spray, cracks, and vines visually expose the fragility of that authority. 5. **Path-drawn SVG as accusation mechanics:** Animated lines make the social process of accusation visible, connecting rumor to legal outcome as a diagram rather than a decorative flourish. Chosen seed/style: aesthetic: graffiti, layout: centered, typography: slab-serif, palette: ethereal-blue, patterns: path-draw-svg, imagery: botanical-illustration, motifs: marble-classical, tone: scholarly-intellectual. Frequency analysis notes: corporate aesthetics, card-grid layouts, centered layouts, warm/gradient palettes, parallax, scroll-triggered reveals, mono typography, photography, and minimal imagery are heavily overused. This design keeps the assigned centered structure but avoids generic centered landing conventions, card grids, corporate gradients, photography, dashboards, and stats. It leans into less common graffiti, slab-serif, ethereal-blue, botanical illustration, marble-classical, scholarly-intellectual tone, and SVG path drawing.