# Design Language for witch-trial.com ## Aesthetics and Tone **witch-trial.com** occupies a singular cultural gap: the intersection of early-2000s Y2K bling aesthetics and the genuinely unsettling history of witch persecution. McBling — that era of rhinestones, holographic foil, von Dutch trucker hats, and Motorola Razr wallpapers — is used here not ironically, but as a sincere reclamation narrative. The trials condemned women for extraordinary power; the bling era was also a moment of female excess and spectacle punished by cultural ridicule. The site fuses these two histories into a single aesthetic language: **muted vintage base coat with sparkling accents clawing through from below**, the way light catches a crushed velvet dress in a dim room. The tone is **dreamy-ethereal** with an undercurrent of historical weight. Nothing is grim. Nothing is camp. The site floats — diffuse, slightly out of focus around the edges, hand-drawn marks in ink appearing and disappearing like marginalia in a 17th-century court ledger that someone has decorated with stars. Counters animate with the slow certainty of water dripping. Cards drift into the viewport as though carried by a tide. Mood board: a Sarah Salem witch illustration printed on a cassette tape inlay card, photographed through a prism lens, left on a windowsill in diffuse winter light. Primary inspiration: fairycore meets archival document meets 2003 girl-aesthetic. NO camp. NO horror film tropes. NO pentagram-heavy occult maximalism. ## Layout Motifs and Structure The layout is a **card-grid** — but not a SaaS feature-comparison card-grid. These are archival cards: the proportions of index cards, of tarot cards, of court evidence slips. The grid breathes. Column gaps are wider than expected (48–64px). Cards do not share borders; they float isolated in their gutters, each slightly distinct in drop shadow depth. **Macro structure:** - **Hero (full-width):** a single floating hand-drawn illustration of a courthouse silhouette against a warm fog. No photography. The domain name appears below it in a display sans at 7–10vw, letter-spaced. A single animated counter (number of recorded trials) ticks up over 2.4 seconds on load. - **Card-grid section:** 3-column on desktop, 1-column on mobile. Each card is an archival case: name, date, location, one-line charge, one-line outcome. Cards appear sequentially with a staggered 80ms delay using `IntersectionObserver`. Inner text is typeset in small-caps for labels, normal-weight body for content. - **Detail drawer (off-canvas):** clicking a card opens a right-side panel that slides in at 320px width. No modals. No page navigation. - **Footer-colophon:** a single centered paragraph in 12px italic citing the archival sources, beneath a fine horizontal rule and a small hand-drawn candle motif. No hero CTA buttons. No sticky navigation. No pricing or stat blocks. The closest to a "stat" is the animated trial counter on hero entry — and it is contextual, not promotional. **Spatial logic:** `clamp(16px, 2vw, 32px)` global padding. Cards use `padding: 24px 28px`. Body max-width: 1180px, centered. Card grid: `repeat(3, 1fr)` with `gap: clamp(32px, 4vw, 64px)`. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Wordmark:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — weight 700, tracked +0.04em. The display face is geometric-grotesque with slightly irregular letterforms that recall hand-stenciling. Used for the domain name and section headings. Set at `clamp(3.5rem, 9vw, 9rem)` for the hero wordmark. - **Body / Card text:** [Nunito](https://fonts.google.com/specimen/Nunito) — weight 400 for body, 600 for card labels. Nunito's rounded terminals introduce softness; it reads cleanly at 14px on card content without feeling clinical. Used at 14–16px in cards, 16–18px in detail drawer. - **Accent / Counter numerals:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) weight 300, tracking +0.1em. The counter number displayed in the hero uses this — lightweight, wide, almost spectral. - **Small-caps labels / metadata:** CSS `font-variant: small-caps` applied to Nunito 600. Charge type, date, county displayed this way. **Palette (muted-vintage, dreamy accents):** | Name | Hex | Use | |------|-----|-----| | Parchment | `#f0e8d8` | Page background, card fill | | Faded Ink | `#2c2820` | Primary text | | Ash Mauve | `#a0909e` | Secondary text, metadata, rules | | Dusty Rose | `#c4a0a8` | Card border on hover, accent | | Aged Gold | `#c8a86a` | Counter numerals, small decorative marks | | Silver Mist | `#d0cdd8` | Card shadow base, disabled states | | Deep Indigo | `#3a3050` | Detail drawer background | | Shimmer White | `#f8f5ff` | Highlight on bling accents, star SVG fills | The bling/mcbling element enters exclusively through **Aged Gold** (`#c8a86a`) and **Shimmer White** (`#f8f5ff`) — used as micro-sparkle SVG shapes (4-point stars, 2–6px) that are scattered on cards at low opacity (0.6–0.8) and animate with a `scale(0)→scale(1)→scale(0)` pulse at irregular intervals (different `animation-delay` per star, ranges from 0ms to 3200ms). These sparkles do not appear on desktop hover states — they animate autonomously, creating a slow living shimmer effect without requiring interaction. ## Imagery and Motifs All imagery is **hand-drawn inline SVG**. No photography. No raster illustration. No icon fonts. **Core illustration vocabulary:** - **Courthouse silhouette (hero):** a single-ink-line drawing of a colonial American wooden courthouse with a bell tower, drawn with thin strokes (1.5px), no fill. The structure is slight and lonely, centered at 280×200px against the parchment background. A fog effect is achieved by a radial gradient overlay in `Ash Mauve` at 0%→40% opacity, centered at horizon line. - **Candle motif (footer, detail drawer header):** a single candle with a teardrop flame. Stroked 1.5px in `Faded Ink`. The flame has a subtle `flickerY` CSS animation (translateY 0→-2px, scale(1)→scale(1.04), 1.8s ease-in-out infinite alternate). No gradient. No glow. - **Sparkle/bling stars (card decoration):** 4-point star SVGs at 4px and 6px sizes. Filled `#c8a86a` (Aged Gold) with opacity 0.65. Placed at fixed positions within card padding areas. Between 2–4 stars per card, varied positions. Animate with `sparkle` keyframe. - **Quill feather (detail drawer):** a small inline feather quill (≈40px tall) drawn in `Ash Mauve` strokes, placed as a decorative element at the top-right of each detail drawer panel. - **Abstract-tech motif:** circuit-board branch lines in `Silver Mist` appear as background texture on the hero — but rendered to look like root systems or vein patterns, not literal circuits. The ambiguity between botanical and technological is intentional. Drawn as thin `` elements, opacity 0.12, creating the faintest visible texture without competing with the illustration. **Motif principles:** - Every decorative mark is SVG, not CSS shadow or gradient tricks - No drop shadows on illustrations (only on cards via CSS `box-shadow`) - Hand-drawn marks have deliberate irregularity: the courthouse walls are not perfectly vertical; the candle is not perfectly centered ## Prompts for Implementation **The narrative to build.** A visitor arrives at witch-trial.com and finds themselves inside a quiet archive room. The walls are old parchment. There is no menu, no hamburger, no hero banner with a value proposition. There is only the courthouse in ink, a slow counter, and below it, row after row of archival case cards. Each card is a woman's name, a year, a place, a charge. The visitor can read through them. When they click a name, a panel slides in from the right with more detail. No page loads. No noise. **Implementation guidance:** 1. **Counter animation on hero load:** Use `requestAnimationFrame` to count from 0 to 304 (historical estimate of Salem/broader colonial trials) over 2.4 seconds with an ease-out curve. Display in Space Grotesk weight 300. Label in Nunito small-caps: `recorded trials`. The counter is the only "live" element above the fold on first load. 2. **Card entry animation:** On `IntersectionObserver` trigger with `threshold: 0.15`, apply a class that transitions cards from `opacity: 0; transform: translateY(16px)` to `opacity: 1; transform: translateY(0)`. Duration 480ms, ease `cubic-bezier(0.22, 1, 0.36, 1)`. Stagger with 80ms per card using `transition-delay`. 3. **Sparkle keyframe:** ```css @keyframes sparkle { 0%, 100% { transform: scale(0); opacity: 0; } 50% { transform: scale(1); opacity: 0.65; } } ``` Apply to each `.sparkle-star` with unique `animation-delay` values (e.g., `0.3s`, `1.1s`, `2.4s`, `3.2s`). Duration: `4s`. Timing: `ease-in-out`. This creates the living bling shimmer without hover dependency. 4. **Candle flicker:** ```css @keyframes flickerY { from { transform: translateY(0) scale(1); } to { transform: translateY(-2px) scale(1.04); } } ``` Apply to the flame ``, 1.8s, `ease-in-out`, infinite, alternate. 5. **Detail drawer:** Position `fixed`, right edge, full viewport height. `transform: translateX(100%)` collapsed; `translateX(0)` open. Transition 320ms `cubic-bezier(0.4, 0, 0.2, 1)`. Background `Deep Indigo` (#3a3050). Text in Parchment for heading, Ash Mauve for body. Close on overlay click or Escape key. 6. **Fog effect (hero):** Apply a `` in Ash Mauve from the horizon line. In CSS: `background: radial-gradient(ellipse 80% 40% at 50% 55%, rgba(160,144,158,0.38) 0%, transparent 70%)` overlaid on the hero section. 7. **Abstract-tech root texture:** In the hero ``, add a `` group with branching `` elements using `M` and `L` commands with slight irregular angles. Paths use `stroke="#d0cdd8"` (Silver Mist), `stroke-width="0.8"`, `fill="none"`. Paths branch 3–4 levels deep from 2 origin points in the upper corners of the SVG, angling downward like roots or veins toward the courthouse. The pattern suggests circuitry only from a distance. 8. **No JavaScript frameworks.** Vanilla JS only. No bundler. No build step. `IntersectionObserver`, `requestAnimationFrame`, CSS custom properties, and CSS animations are sufficient. 9. **Google Fonts loading:** ```html ``` 10. **AVOID:** hero CTA buttons, sticky header/nav, hamburger menu, pricing sections, testimonials, photography, gradient hero backgrounds, loud color splashes, skull/pentagram iconography, horror-film UI conventions (blood drips, distressed textures), any modal dialog. ## Uniqueness Notes **Differentiators from registry:** 1. **McBling applied to historical archive content is unprecedented.** The frequency report shows `mcbling` at 1% — a near-zero prior use. Every other mcbling entry in web design applies it to fashion, beauty, or Y2K nostalgia in an ironic or celebratory framing. This design uses bling (gold sparkles, shimmer-white star motifs) as a reclamation aesthetic layered over 17th-century trial records — the juxtaposition is the concept, not the decoration. No other registry design places a bling-era visual language inside an archival/documentary context. 2. **Counter-animate as the *only* interactive hero element (no CTA, no scroll prompt).** The frequency report shows `counter-animate` at 4%, but in every usage it accompanies stat-grids, conversion sections, or social-proof rails. Here the counter is the only above-fold motion — a single number counting up, representing human lives. It functions as a memorial gesture, not a marketing metric. This is the first design in the registry where counter animation carries ethical weight rather than promotional weight. 3. **Dreamy-ethereal tone (4% in registry) achieved through restraint, not saturation.** The typical dreamy-ethereal execution uses soft gradient blooms, pearlescent overlays, and pastel oversaturation. This design achieves the same tonal quality through *absence*: no gradient backgrounds, sparse palette, generous whitespace, slow animations, and deliberate fog via radial overlay on ink-line illustration. The ethereal quality comes from what is withheld rather than added. 4. **Abstract-tech root-vein texture that reads as both botanical and circuitry.** The frequency report shows `abstract-tech` not as a leading pattern. Fusing circuit-branch geometry with botanical root-system silhouettes means the hero texture is undecidable — visitors from different backgrounds read it differently. This ambiguity reinforces the site's central historical theme: women condemned for knowledge that later became science. 5. Seed: aesthetic: mcbling, layout: card-grid, typography: sans-grotesk, palette: muted-vintage, patterns: counter-animate, imagery: hand-drawn, motifs: abstract-tech, tone: dreamy-ethereal