# Design Language for witch-trial.com ## Aesthetics and Tone witch-trial.com channels the hallucinatory collision of 17th-century Salem courtroom dread with the pastel-drenched, Roman-bust-and-palm-tree unreality of 1990s vaporwave. Imagine a VHS recording of a witch trial discovered in a thrift store in 1993, played on a CRT monitor smeared with condensation, the tracking lines warping the faces of accusers and accused alike into something between portraiture and digital corruption. The vaporwave aesthetic here is not nostalgic irony -- it is a genuine excavation of collective hysteria rendered through the visual grammar of consumer technology's dying breath. The tone is elegant-sophisticated: every element carries itself with the gravity of a legal proceeding, the measured cadence of a judge's pronouncement, but the surfaces shimmer and warp like overheated plastic. There is no camp. There is ceremony. The site treats its subject -- accusation, judgment, spectacle -- with the same ornate severity that a baroque altar treats the divine, but the materials are translucent frosted panels, burgundy gradients, and the ghost-echo of a Windows 95 desktop. The inspiration draws from three specific sources: the copperplate engravings of Matthaus Merian the Elder depicting European witch trials (their crosshatched density, their theatrical staging of horror), the album art of Macintosh Plus's "Floral Shoppe" (its Greek bust, its Japanese text, its uncanny digital pinkness), and the courtroom sketches of the Nuremberg Trials (their hurried authority, their charged emptiness). The result is a space that feels simultaneously like a museum exhibition, a corrupted archive, and a sentencing hearing conducted inside a dying shopping mall. ## Layout Motifs and Structure The layout follows a **magazine-spread** architecture -- not the flowing single-column river of most web pages, but a series of distinct two-page spreads that the user moves through like turning pages of a lavish court record. Each spread occupies the full viewport and is divided into sharp angular compositions rather than rectangular grids. The governing geometric principle is the **acute angle**: content panels are sliced along 15-degree and 75-degree diagonals, creating trapezoidal regions that suggest the tilted perspective of someone looking up from the accused's dock. **Spatial Architecture:** - **The Indictment (Spread 1):** A full-viewport opening that presents the domain name "witch-trial.com" in Playfair Display at 7vw, positioned not centered but along a 15-degree diagonal slash that cuts the viewport from upper-left to lower-right. Above the slash: deep burgundy (#4A0E2B). Below: frosted translucent glass over a barely-visible grid of faded copperplate imagery. No navigation. No menu. The slash itself is a 3px line in rose gold (#C9929A) that pulses with a slow breathing animation. - **The Testimony (Spreads 2-4):** Each spread divides the viewport into two acute-angled panels. The left panel (roughly 55% width, skewed by a CSS `clip-path: polygon()` creating a sharp right edge at 75 degrees) contains text content. The right panel holds glassmorphic card elements floating at different z-depths against a background that shifts between burgundy and deep black. The cards themselves are angled at -8 degrees, deliberately fighting the layout's dominant 15-degree slant. - **The Verdict (Final Spread):** The angular divisions collapse. All diagonal lines converge to a single vanishing point at viewport center. Content pulls inward like a vortex. The background transitions from deep burgundy to absolute black (#0A0208). A single glassmorphic card remains, centered and perfectly level -- the first horizontal element in the entire site -- containing the final statement. **Navigation:** A thin vertical strip (40px wide) on the right edge of the viewport contains small roman numerals (I, II, III, IV, V) in Playfair Display Italic at 0.7rem, each numeral rotated 90 degrees. Clicking advances to the next spread. There is no horizontal scrollbar, no hamburger menu, no header. The spread transitions use a page-turn effect: the current spread slides left with a slight rotational torque (2-degree rotation during the 600ms transition) while the next slides in from the right. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) at weight 700, both regular and italic. The high-contrast thick-thin strokes of Playfair carry the authority of legal documents and the decorative excess of baroque title pages. Used at sizes from 4vw to 9vw for primary headings. All headlines set in sentence case. Letter-spacing: -0.03em at display sizes for a tightly-set, engraved quality. Line-height: 0.92 for headlines (intentionally tight, creating overlapping ascender/descender collisions that echo the compressed anxiety of trial testimony). - **Body Text:** "Cormorant Garamond" (Google Fonts) at weight 400 and 500. An exceptionally refined serif with sharp, almost blade-like serifs and tall ascenders that give body text a vertical momentum. Used at 1.05rem to 1.2rem. Line-height: 1.65 for comfortable reading. Letter-spacing: 0.01em. The contrast between Cormorant Garamond's delicate sharpness and Playfair Display's muscular presence creates a hierarchy that mirrors the power dynamic of courtroom proceedings -- the judge's booming declaration versus the clerk's meticulous notation. - **Accent / Labels:** "IBM Plex Mono" (Google Fonts) at weight 300 and 400. Used exclusively for dates, reference numbers, exhibit labels, and small navigational elements. The monospace regularity suggests archival indexing, court docket numbers, evidence logs. Set at 0.75rem to 0.85rem in all-caps with letter-spacing: 0.18em. Color: always the muted rose (#C9929A) against dark backgrounds, or dark burgundy (#4A0E2B) against light panels. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Primary Dark | Execution Burgundy | #4A0E2B | Backgrounds, dominant panel fills, text on light surfaces | | Secondary Dark | Obsidian Blood | #1A0611 | Deep backgrounds, shadow zones, the final spread's void | | Accent Warm | Rose Verdict | #C9929A | Diagonal slash lines, accent borders, mono text, glassmorphic card borders | | Accent Metallic | Tarnished Gold | #B8976A | Numeral navigation, decorative rule lines, hover states | | Glass Tint | Frosted Accusation | #F2E4EA | Glassmorphic card backgrounds (at 12-18% opacity), overlay tints | | Highlight | Spectral Pink | #E8B4C8 | Vaporwave gradient endpoints, highlighted text, active states | | Text Light | Parchment Ash | #EDE3D9 | Primary body text on dark backgrounds | | Void | True Black | #0A0208 | Final spread background, extreme contrast moments | The palette deliberately avoids warm orange tones and the pastel-blue-pink gradient cliche of mainstream vaporwave. Instead it occupies the neglected register of vaporwave's darker sibling: the burgundy-rose-gold triangle that suggests wine stains on courtroom robes, the blush of an accused face, the tarnished brass of a judge's gavel. ## Imagery and Motifs **Glassmorphic Cards as Evidence Exhibits:** The primary visual element is the **glassmorphic card** -- translucent panels with a `backdrop-filter: blur(18px) saturate(140%)` treatment, a 1px border in Rose Verdict (#C9929A) at 40% opacity, and a background of Frosted Accusation (#F2E4EA) at 14% opacity. Each card is styled as a "court exhibit": a small IBM Plex Mono label in the upper-left corner reads "EXHIBIT I", "EXHIBIT II", etc. Cards are always rotated between -5 and -12 degrees via CSS `transform: rotate()`, as if carelessly placed on a desk. Their drop shadows are deep and warm: `box-shadow: 12px 18px 40px rgba(26,6,17,0.6)`. **Sharp-Angle Motifs:** Every decorative element uses the sharp-angles vocabulary. Background patterns consist of overlapping acute triangles rendered as SVG paths with 1px strokes in Tarnished Gold (#B8976A) at 8% opacity, creating a subtle lattice visible behind glassmorphic elements. Section dividers are not horizontal rules but diagonal slashes -- 2px lines at exactly 15 degrees, stretching from edge to edge of their container. The CSS `clip-path` on content panels creates hard angular edges rather than rounded or straight borders. Corner accents on cards use small chevron marks (two converging 15-degree lines) instead of rounded corners, suggesting the pointed finger of accusation. **Vaporwave Artifacts:** Scattered behind the glassmorphic cards, at very low opacity (6-10%), are decorative vaporwave elements rendered as CSS-only illustrations: a stylized column capital made from repeating linear gradients, a grid of perspective lines vanishing to a burgundy horizon (rendered via CSS `perspective` and `transform: rotateX(65deg)`), and CRT scanline overlays created with `repeating-linear-gradient(transparent, transparent 2px, rgba(74,14,43,0.04) 2px, rgba(74,14,43,0.04) 4px)`. These artifacts are never the focus -- they haunt the background like afterimages burned into a phosphor screen. **Engraved Line-Art:** Where illustrations appear, they use a crosshatch style rendered in SVG: thin parallel lines at varying densities to create tonal gradations, mimicking copperplate engraving. These illustrations depict abstract courtroom elements -- a gavel silhouette, a pair of scales, a pointed hand, a flame -- but reduced to geometric arrangements of sharp angles. The lines are always in Tarnished Gold (#B8976A) at 20-35% opacity on dark backgrounds. ## Prompts for Implementation **Full-Screen Narrative Spread Experience:** The site must function as a series of full-viewport "spreads" that the user navigates through one at a time. There is no vertical scrolling within a spread. The entire experience is a horizontal progression of fixed-viewport compositions, like a magazine laid flat. Implement using CSS `scroll-snap-type: x mandatory` on a horizontal scroll container, or alternatively using JavaScript-controlled viewport transitions with `transform: translateX()`. **Bounce-Enter Animation System:** Every glassmorphic card enters the viewport with a bounce-enter animation. The card starts scaled to 0.3 and translated 80px below its final position, then springs upward and scales to 1.0 with a single bounce overshoot (reaching scale 1.08 before settling to 1.0). The timing function: `cubic-bezier(0.34, 1.56, 0.64, 1)` over 700ms. Cards within a spread stagger their entrance by 180ms each. The bounce direction always follows the card's rotation angle -- a card rotated at -8 degrees bounces in from a -8 degree vector, not straight up. This creates a scattered, evidence-dropped-on-desk effect. **Diagonal Slash Transitions:** When transitioning between spreads, a diagonal line (the same 15-degree slash seen throughout the design) sweeps across the viewport from left to right. Behind the line, the new spread is revealed. In front of it, the old spread remains. The line takes 500ms to cross the viewport. Implement with a CSS `clip-path` animation on the incoming spread panel, transitioning from `polygon(0 0, 0 0, 0 100%, 0 100%)` to `polygon(0 0, 115% 0, 100% 100%, -15% 100%)` -- the non-rectangular polygon creates the angled wipe. **Glassmorphic Card Interaction:** On hover (desktop) or tap (mobile), glassmorphic cards respond: the blur intensity increases from 18px to 28px, the border opacity rises from 40% to 80%, and the card lifts (translateZ(20px) in a 3D context). A thin line extends from the card's chevron corner accent, drawing outward at the card's rotation angle, as if connecting the exhibit to some off-screen evidence board. This line animates via SVG `stroke-dashoffset` over 300ms. **CRT Scanline Overlay:** A permanent, full-viewport pseudo-element sits above all content at `pointer-events: none; z-index: 9999`. It renders the CRT scanline pattern globally, tying the entire experience together under a film of technological decay. The scanlines are extremely subtle -- barely visible on bright panels, slightly more apparent on dark ones. On spread transitions, the scanlines briefly intensify (opacity from 0.03 to 0.12 over 200ms, then back) to simulate the screen refresh artifact of an old monitor being asked to redraw. **AVOID:** CTA buttons and conversion-focused layouts. No pricing grids, no feature comparison tables, no "Sign Up Now" blocks. No stat-counter animations. No testimonial carousels. No hamburger menus. No sticky headers. The site is a self-contained narrative artifact, not a conversion funnel. ## Uniqueness Notes **Differentiators from other designs:** 1. **Vaporwave-Witch-Trial Collision:** No other design in the portfolio merges vaporwave aesthetics with historical courtroom gravity. Vaporwave appears at only 1% frequency across all designs, and its application here is deliberately un-ironic and un-nostalgic -- it serves as a visual metaphor for the distortion of truth and memory, not as retro pastiche. The deep-burgundy palette further departs from vaporwave's typical pastel-cyan-and-pink, pushing the aesthetic into an entirely unexplored register. 2. **Sharp-Angles as Primary Structural Language:** The sharp-angles motif appears at 0% frequency in the existing portfolio -- it has never been used as a dominant motif. Here, the 15-degree diagonal governs everything: layout divisions, content panel clip-paths, card rotations, transition wipes, decorative elements, and even the bounce-enter animation vectors. This consistent angular vocabulary creates a visual language of accusation and judgment entirely absent from other designs. 3. **Magazine-Spread Horizontal Navigation:** While magazine-spread layout appears at 7% frequency, it is never combined with a strict no-vertical-scroll horizontal progression. The spread-to-spread navigation via diagonal slash wipes, with no conventional scrolling, creates a reading experience closer to a physical court document than a website. Combined with the roman numeral navigation strip and the exhibit-labeled glassmorphic cards, the information architecture mimics a legal case file rather than a web page. 4. **Bounce-Enter Along Rotation Vectors:** The bounce-enter animation pattern (3% frequency) is typically applied as a simple vertical spring. Here, the bounce direction is coupled to each card's individual rotation angle, producing scattered directional entries that feel like documents being thrown onto a desk rather than elements sliding into a grid. This coupling of animation vector to element transform is technically distinctive and visually disorienting in a deliberate way. 5. **Anti-Warm, Anti-Pastel Vaporwave:** The deep-burgundy palette (2% frequency) explicitly rejects both the warm palette (100% frequency, dominant across the portfolio) and the expected vaporwave pastel-pink-and-cyan. By anchoring vaporwave in burgundy, rose gold, and obsidian, the design creates a variant that is cooler, heavier, and more confrontational than any existing palette application. **Chosen seed/style:** aesthetic: vaporwave, layout: magazine-spread, typography: playfair-elegant, palette: deep-burgundy, patterns: bounce-enter, imagery: glassmorphic-cards, motifs: sharp-angles, tone: elegant-sophisticated **Avoided overused patterns:** Deliberately avoided centered layout (99%), scroll-triggered animations (96%), warm palette (100%), mono typography (99%), minimal imagery (95%), vintage motifs (89%), friendly tone (99%), and playful aesthetic (96%). Every seed dimension was chosen from the underused tail of the frequency distribution.