# Design Language for witch-trial.com ## Aesthetics and Tone witch-trial.com is **a confiscated court ledger left open on a windowsill, foxed by three centuries of damp Massachusetts air, with the candle still guttering beside it**. The site is not a museum's marketing page and not a horror-movie title sequence — it is the *primary document itself*, presented with the cold scholarly restraint of an archivist who has read these depositions so many times they no longer flinch, and with the quiet moral weight of someone who knows every name on the page belonged to a person. The chosen seed is **sepia toned history** — but pushed past the postcard-nostalgia version of sepia into something more forensic. Think iron-gall ink that has bled brown and acid-burned the paper around each stroke; think rag-paper rag-white gone the colour of weak tea and tobacco; think the single warm pool of a tallow candle against an otherwise unlit room. The mood is **mysterious-moody crossed with scholarly-intellectual** — hushed, deliberate, evidentiary. No jump scares, no dripping fonts, no cackling. The horror here is bureaucratic: the spectral evidence accepted, the warrant signed, the recognizance bond entered into the margin. The site lets the calm typography do the haunting. Tonal rules: - **Never decorative-spooky.** No bats, no cauldrons, no pointy hats, no Halloween orange. - **Reverent, not exploitative.** Real people were hanged. The design carries that. - **Archival authority.** Everything looks catalogued, foliated, cross-referenced — as if you are reading a finding aid that happens to be devastating. - **One candle of warmth in a cold room.** The palette is brown and bone, lit by exactly one source. ## Layout Motifs and Structure The page is built as a **single continuous foliated ledger** — `editorial-flow` rather than card-grid (card-grid sits at 93%; this site refuses it entirely), scrolled vertically like turning the leaves of a bound volume. There are no "cards," no bento boxes, no stat tiles. Each section is a **recto leaf** of the ledger, and the divisions between them are not horizontal rules but **the slight shadow and curl of a turned page**. - **The two-column court hand.** The body sits in an asymmetric two-column measure echoing how depositions were actually written: a **narrow left rail (≈22%) for marginalia** — folio numbers, dates in old-style (e.g. "1.mo. 1692"), the clerk's abbreviations, cross-reference symbols — and a **wide right column (≈58%) for the testimony text**, with the remaining ≈20% as raw vellum margin on the right edge, never filled. The margin is sacred negative space (`ma-negative-space`, 16%): it is where the air and the dread live. - **Foliation, not pagination.** Sections are numbered as folios — *fol. 1ʳ, fol. 2ʳ, fol. 3ʳ* — in the left rail, in a tiny smudged hand. Scroll progress is shown as a **foliation tab** that fills from "fol. 1ʳ" to the last folio, like a ribbon bookmark sliding down the fore-edge. - **The seven leaves.** The narrative is seven leaves: (1) *The Frontispiece* — domain wordmark struck like a title page with the year 1692 in roman numerals; (2) *The Complaint* — how an accusation began; (3) *The Examination* — the interrogation, set as a verbatim Q/A transcript; (4) *Spectral Evidence* — the doctrine itself, the single most chilling idea, given a full bleaf of near-empty vellum; (5) *The Warrant* — the apparatus of arrest, set in dense legal hand; (6) *The Recognizance* — bonds, jailing, the slow grind; (7) *The Colophon* — the names, plainly listed, and the eventual reversals of attainder, set quiet and last. - **Gutter shadow.** Down the centre seam of every leaf runs a soft vertical gradient — the shadow a thick book casts into its own gutter. It anchors the two columns to a physical spine. - **No navigation chrome.** No top nav bar. A single thin **fore-edge index** floats at the right viewport edge: seven tick marks, each a folio, each labelled on hover with a smudged folio number. That is the entire navigation. ## Typography and Palette **Fonts — Google Fonts only. Three hands, as a real legal document has three: the engrossing hand, the clerk's hand, and the printed apparatus.** - **Display / engrossing hand — *IM Fell English* (and *IM Fell English SC* for small caps)**: a digitization of a real 17th-century English typeface cut from worn metal — uneven baselines, ink-spread, the genuine artifact. Used for the frontispiece wordmark, folio leaf titles, and the doctrine of "Spectral Evidence." Set large (clamp ~3rem → ~6.5rem), letter-spacing near zero, never bolded (the face has no clean bold — its weight comes from ink, not algorithm). - **Body / testimony hand — *Cormorant Garamond*** (weights 400, 500; italics essential): a refined old-style serif with high stroke contrast for the deposition text and all running prose. Generous leading (1.75), measure capped at ~62ch, with **liberal use of italic** for the accusers' reported speech ("she did pinch and choak me") so the page reads like a transcript with quoted matter set apart. - **Apparatus / clerk's hand — *JetBrains Mono*** (the corpus's near-universal `mono` at 93% — but used here against type: not for code, but as the *clerk's mechanical annotation hand*, the rubber-stamp register): folio numbers, dates, archival shelf-marks ("Essex Co. Court Records, vol. 2, fol. 117"), cross-reference glyphs, the colophon's list of names. Tiny (~0.7rem), uppercase, wide tracking, low-opacity brown — it looks *catalogued*. **Palette — sepia by candlelight. Eight values; warm and `muted` (warm at 98%, muted at 37% — but rendered as iron-gall brown, which the corpus barely touches), `monochrome` within the brown family except for the single candle.** - `#211A12` — **iron-gall black-brown**, the ink at full strength; primary text, never pure black. - `#3D2F1E` — **aged-leather brown**, the binding; deep backgrounds, the gutter shadow's core. - `#6B5536` — **dried-ink brown**, mid-tone; secondary text, the clerk's annotations. - `#9C7B4E` — **foxing**, the brown spots that bloom on old paper; rules, dividers, hover states. - `#C8B48C` — **weak-tea vellum**, the page in shadow; section backgrounds away from the candle. - `#E7DAB9` — **rag paper**, the page near the light; the dominant surface colour. - `#F4ECD6` — **candle-bleached parchment**, the brightest paper, only in the candle's pool. - `#D98A3D` — **tallow flame**, the *one* warm accent — used with extreme rarity: the candle's glow, the active folio tick, the underline that draws beneath the word "spectral." Never used for buttons, never used at large area; it is a light source, not a brand colour. Background is `#E7DAB9` rag paper; ink is `#211A12`; everything else modulates between. A faint repeating paper-fibre noise and irregular foxing stains sit under everything at low opacity. ## Imagery and Motifs **No photography. No stock illustration. No 3D. Every visual is SVG, hand-drawn in the iron-gall palette, or a CSS-generated paper/light effect.** (Photography is at 98% in the corpus — this site has zero.) - **Iron-gall flourishes.** Hand-drawn SVG penwork — the looping paraph marks, the long descending flourish a 1692 clerk used to fill a line, the bracket-and-brace that groups a list of accused. These animate via `path-draw-svg` (50% — common, but here it is literally *the clerk writing*, ink appearing stroke by stroke as you scroll into a leaf). - **The candle.** A single SVG candle flame, lower-left, rendered as layered translucent ovals in tallow tones, with a slow irregular flicker (CSS keyframes with non-uniform timing so it never looks looped). It casts a soft radial light — a `radial-gradient` overlay in `mix-blend-mode: soft-light` — that brightens whatever leaf is currently in viewport and leaves the rest in `#C8B48C` shadow. Scroll moves the leaves; the candle stays. - **Foxing & damp stains.** Procedurally placed SVG blotches — soft-edged brown ellipses with feTurbulence displacement — bloom in the margins. A faint tide-line of water damage runs along the bottom edge of leaf 6 (The Recognizance), as if the volume sat in a flooded courthouse cellar. - **Marginalia hands.** Small SVG **manicules** (the pointing-hand "☞" symbol, hand-drawn, not the emoji) appear in the left rail beside the most damning lines, drawn in by a later reader. A few struck-through and re-inked words in the testimony, to show emendation. - **The seal.** On the frontispiece and colophon only: a hand-drawn SVG impression of a wax court seal — cracked, partial, the lettering "ESSEX" half-legible around the rim — pressed in the foxing-brown, slightly embossed via filter. - **Foliation rule.** A thin double-rule (one solid `#9C7B4E` line, one foxing-stippled line beneath it) tops every leaf, with the folio number set into a gap in the rule, as in a real bound register. ## Prompts for Implementation Build witch-trial.com as **one HTML file, one CSS file, one JS module** — a single-route, vertically scrolled foliated ledger of seven leaves. Treat the whole experience as **leafing slowly through a bound court record by candlelight** — roughly a 90-second read, unhurried, the page itself the only thing on screen. **No CTA buttons, no pricing block, no stat-grid, no testimonial row, no email signup, no contact form, no top nav.** There is only the ledger and the candle. **Narrative structure (seven leaves, vertical scroll, page-turn transitions):** 1. **Frontispiece (fol. 1ʳ).** Near-black `#211A12` field. The domain renders in *IM Fell English* as an engrossed title page — "WITCH-TRIAL" stacked, with "in the Province of the Massachusetts-Bay · M·DC·XCII" beneath in IM Fell English SC. The wax seal SVG presses in, cracked. The candle ignites in the lower-left as the page loads — flame drawn on with `path-draw-svg`, then flicker begins. One line of Cormorant italic at the foot: *"What follows is taken from the record. The names are real."* 2. **The Complaint (fol. 2ʳ).** Page-turn reveals rag-paper `#E7DAB9`. Two-column court hand begins: left rail shows "fol. 2ʳ · 29.1.mo.1692" in the clerk's mono; right column sets, in Cormorant, how a complaint was sworn — short paragraphs, the accusers' words in italic. A hand-drawn paraph flourish draws itself beneath the heading as it enters. 3. **The Examination (fol. 3ʳ).** Set as a *verbatim transcript*: alternating lines — magistrate's question in upright Cormorant, accused's answer in italic, each prefixed in the left rail by "Q." / "A." in clerk's mono. Lines `fade-reveal` in sequence (`stagger`) at a slow, deliberate cadence — like dialogue being read aloud in a cold room. A manicule SVG draws itself in the margin beside the line where spectral evidence is first invoked. 4. **Spectral Evidence (fol. 4ʳ).** The pivotal leaf. **Almost entirely empty vellum.** Centred, in large IM Fell English, the single phrase set over three lines; beneath it, one Cormorant paragraph (max 50ch) defining the doctrine plainly — that the court accepted the testimony of the afflicted that they saw the accused's *spectre* tormenting them, evidence no defendant could refute. The word **"spectral"** gets a slow `underline-draw` in `#D98A3D` tallow — the only flame-coloured mark on the leaf. The candle's glow is at its warmest here; everything else recedes to shadow. Hold the reader in this leaf — generous vertical space before and after. 5. **The Warrant (fol. 5ʳ).** Dense leaf — the apparatus of arrest. A reproduction-style block of legal hand in Cormorant, justified, with archaic spelling, the marshal's name, the date of return. Left rail thick with cross-references and shelf-marks in clerk's mono. A double-rule with the folio number set in a gap tops it. Subtle ink-spread on first-letter capitals via SVG filter. 6. **The Recognizance (fol. 6ʳ).** The slow grind — bonds posted, the jail, the months. Set quieter, the paper in deeper `#C8B48C` shadow. A faint SVG water tide-line runs along the bottom edge. A list of confiscated goods or jail fees set as a clerk's-mono itemization in the left rail, brown and small. The flourish here is a long descending line-filler — the clerk running out of page. 7. **The Colophon (fol. 7ʳ).** Last leaf, plain and grave. A simple Cormorant-set list of names — accused, executed, died in jail — set without ornament, one per line, generous leading. Beneath, in clerk's mono, the note of the **1711 reversals of attainder** and the 1957/2001 legislative acknowledgments — the record correcting itself, centuries late. The wax seal presses in once more, fully cracked now. The candle gutters — flicker amplitude grows — and on the final scroll the radial glow fades to near-darkness, leaving only `#211A12` and the bone-white list. No footer links. The page simply ends, like a volume closing. **Motion guidance:** everything slow and weighted — `spring` (83%) but heavily damped, no bounce; page-turns are a 600ms ease with a brief paper-curl shadow; `parallax` only on the candle's glow layer (it lags scroll slightly, so light "pours" across leaves); `path-draw-svg` for every flourish, manicule, and the candle flame; `underline-draw` exactly once, on "spectral," in tallow. `cursor-follow` (89%): only the candle's glow has a faint additional offset toward the cursor — as if you could tilt the candle. Respect `prefers-reduced-motion`: flame stops flickering, page-turns become instant fades, glow stays static and warm. **Texture guidance:** layer (1) a base `#E7DAB9` fill, (2) a fine paper-fibre noise via SVG `feTurbulence` at ~3% opacity, (3) three or four large soft foxing ellipses per leaf at ~8% opacity in `#9C7B4E`, (4) the candle's radial `soft-light` glow on top, (5) a `0.5px` `#3D2F1E` gutter shadow gradient down the spine. Text never sits on pure colour — always on this stack. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Iron-gall brown, not postcard sepia.** The corpus's `sepia-nostalgic` (3%) and `vintage` motif (16%) lean warm-and-cosy. This site renders sepia as *forensic decay* — acid-burned ink, foxing stains, water damage — in service of moral weight, not nostalgia. The single `#D98A3D` accent is a candle flame, not a brand colour, and appears on perhaps three elements site-wide. 2. **A foliated ledger, not a card-grid.** Card-grid is at 93%, full-bleed at 84%, hero-dominant at 15% — this design uses none of them. It is `editorial-flow` as a literal bound volume: recto leaves, foliation instead of pagination, a fore-edge index instead of a nav bar, a gutter shadow down the spine. Asymmetric two-column court-hand measure with a permanently empty right margin. 3. **Mono as the clerk's hand, against type.** `mono` is at 93% in the corpus, almost always for "code/terminal/tech." Here JetBrains Mono is recast as the *mechanical annotation hand of a court clerk* — shelf-marks, folio numbers, the list of names, the reversal-of-attainder note — which inverts the convention's meaning entirely. 4. **The candle as a real light source.** Not decoration: a single SVG flame casting a `mix-blend-mode: soft-light` radial gradient that physically brightens the in-viewport leaf and leaves the rest in `#C8B48C` shadow, lagging the scroll so light "pours" between leaves, with a small cursor-tilt offset. The whole palette is built around there being exactly one light. 5. **Reverence over spectacle.** Zero photography (vs. 98%), zero horror clichés, no jump scares. The "Spectral Evidence" leaf is almost entirely empty vellum holding one phrase — restraint as the source of dread. The colophon ends on the names and the centuries-late reversals, plainly set: the document correcting itself. Chosen seed/style: **sepia toned history** — *aesthetic: editorial / dark-academia-adjacent, layout: editorial-flow, typography: serif-revival + tech-mono (recontextualized), palette: sepia-nostalgic rendered as iron-gall brown + muted + monochrome-within-brown, patterns: path-draw-svg + underline-draw + fade-reveal/stagger, imagery: paper-aged + line-illustration (hand-drawn SVG), motifs: candle-atmospheric + book-scholarly + vintage, tone: mysterious-moody + scholarly-intellectual.* Avoided patterns from frequency analysis: card-grid (93%), full-bleed (84%), photography (98%), glassmorphism (85%), hand-drawn-as-cartoon-aesthetic (94% — this is hand-drawn *penwork*, not whimsical doodle), tilt-3d (32%), magnetic (77%) — used only on the candle glow, not UI elements; no stat-grids, pricing blocks, CTA rows, or testimonial sections.