# Design Language for judge.club

## Aesthetics and Tone

`judge.club` is a **verdict chamber built from static electricity and spilled ink** — the kind of place where aesthetic opinion is rendered with the gravity of law. Imagine a federal courtroom whose walls have been quietly replaced by vast, floor-to-ceiling data visualizations: case outcomes mapped as arc diagrams, taste hierarchies charted as neural dendrograms, preference vectors drawn as interference-pattern waveforms. The marble is real but the fluorescence has been replaced by cool navy bioluminescence, and every surface shows the faint ghost of circuit traces pressed into the stone like fossilized logic.

The tone is **approachable-casual** — this is not a stuffy bench, it is an opinionated friend in a good blazer. The typography speaks in declarative sentences. The animations respond to you like a live audience that already knows the verdict. It invites you in, then reveals — through layers of beautiful data — that taste is a system you can inhabit and explore.

Visual mood board: ENIAC operator panels + Noma tasting menu cards + Yelp star data rendered as plasma + a judge's notebook left on a subway seat. The grain — pervasive, heavy, photographic-film grain overlaying everything — makes the whole interface feel like a found artifact rather than a product page, aged and authoritative.

## Layout Motifs and Structure

**Single-column narrative spine with lateral data bleeds.** The core reading column is 680px wide, centered, with generous padding. To its left and right at fixed offsets, decorative data-viz panels bleed out of bounds — these are not interactive, they are set dressing: partial arc-diagrams, half-visible ranking bars, cropped waveforms. They appear at 12% opacity on desktop, invisible on mobile.

The page reads vertically in acts, like a formal judgment:

- **Act I — Docket**: full-viewport intro with oversized display type. Domain name set at 8–12vw, left-aligned to the column edge, slightly rotated -1.5deg. Behind it, a slow panning circuit-trace SVG at 6% opacity.
- **Act II — The Record**: scrolling panels where each panel introduces a facet of the club's mission. Each panel has a small data-viz inset — a rating distribution curve, a taste percentile chart — rendered in canvas or SVG, always monochromatic navy or steel.
- **Act III — The Bench**: a roster section with oversized initials (8vw, Clash Display) and brief bios set in a narrow editorial column.
- **Act IV — The Verdict**: the call-to-action is framed as a ruling, typeset in formal decree style but with casual language — no pricing block, no stat grid.

Whitespace is used like negative evidence: deliberate absences of content create tension that the next element resolves. No hero image. No grid of feature cards. The only decoration is data.

## Typography and Palette

**Type system (all Google Fonts, verified):**

- **Display — `Clash Display`** — Not available on Google Fonts. Substitute: **`Syne`** (variable, wght 400–800). Used at 8–14vw for Act I docket heading. Weight 800. Letter-spacing: -0.03em. Color: #E8EAF0. The massive letterforms anchor the entire scroll.
- **Subheadings & act labels — `Space Grotesk`** (wght 500–700). Used at 1.4–2.2rem. Uppercase, letter-spacing +0.12em. A mono-adjacent grotesque that reads like a filing label.
- **Body copy — `Inter`** (wght 300–400). 17px / 1.7 line-height. Maximum 62ch line length. Color: #B8BED4. Never bold inside paragraphs — emphasis is conveyed through pull-quotes in larger Space Grotesk.
- **Data labels / micro-captions — `JetBrains Mono`** (wght 400). 11px, tracking +0.08em. Used exclusively for axis labels, data annotations, timestamps. Color: #7A8FAD.
- **Accent numerals — `Syne`** wght 700 at 5–7vw, used for large verdict scores and rankings. Color: #C9A84C (the metallic gold accent).

**Palette — navy-metallic:**

- `#0B0F1A` — deep navy void (page background)
- `#111827` — surface dark (card/panel background)
- `#1E2D45` — elevated surface (hover states, inset panels)
- `#2C3E5A` — border / circuit-trace stroke
- `#4A6FA5` — medium navy (secondary text, inactive states)
- `#7A9CC6` — sky steel (highlighted links, active circuit nodes)
- `#B8BED4` — cool silver (body text)
- `#E8EAF0` — near-white (primary display headings)
- `#C9A84C` — tarnished gold (accent, verdict stars, circuit pads)
- `#3D2B0A` — deep amber shadow (used only behind gold elements, adds depth)

Grain texture: a 200×200px PNG noise tile at `mix-blend-mode: overlay`, `opacity: 0.18`, `position: fixed`, `pointer-events: none`. Covers the entire viewport. Gives every element a photographic-film quality.

## Imagery and Motifs

**No photography.** All visual content is generated or drawn.

**Circuit motif — revised for judge.club:**
The circuit traces are not random PCB topology. They represent a **judgment graph**: nodes are verdict categories (taste, design, food, culture), edges are relationships between them (influenced-by, contradicts, refines). Each node is a circular pad with a 4px gold ring. Traces are 0.8px strokes at `#2C3E5A`, running in 45/90-degree paths. This SVG lives in `position: fixed` behind the content, extremely subtle (5% opacity), and performs a very slow pan (0.008deg/frame rotation via CSS `@keyframes`, total period ~2 minutes). It never distracts — it anchors.

**Data-viz imagery:**
- **Arc diagrams** (SVG): each "record panel" in Act II has a small arc diagram showing a simulated distribution of verdicts. Arcs are drawn from a baseline, varying in height proportional to frequency. Colors: `#4A6FA5` base, `#C9A84C` highlighted arc for "the winner."
- **Waveform / taste curve**: a gaussian-ish SVG path drawn as a filled area chart at 30% opacity. Used as section dividers — the "taste distribution curve" separates Act I from Act II.
- **Blur-focus depth rings**: concentric ellipses at decreasing opacity radiate from key text elements on hover. Implemented via CSS `box-shadow` layers (4 nested rings, opacity decaying from 0.3 to 0.02). This is the **blur-focus pattern** from the seed — it suggests the photographer's focus rack, giving depth to flat text.

**Iconography:**
- Gavel silhouette in SVG, used only once in Act IV, extremely small (24px), tarnished gold, no fill — outline only.
- Star rating rendered as 5 SVG pentagons with partial fill using `stroke-dasharray`. Never emoji stars.

## Prompts for Implementation

Build this page as **a single long-scroll verdict** — the reader is an observer in a courtroom where the subject being judged is taste itself. The narrative must unfold in four acts, each with a distinct visual register:

**Act I implementation (full-viewport, scroll-triggered):**
Set `min-height: 100svh`. The domain name (`judge.club`) is typeset in `Syne` 800, at `clamp(5rem, 12vw, 11rem)`, left-aligned to the column's left edge. Below it, a single line in Space Grotesk 500 uppercase — the "charge" (what this club judges). Behind the type, the circuit-trace SVG rotates at 0.008deg/frame, starting immediately on page load, no interaction needed. On scroll, `opacity` of the Act I section fades from 1 to 0 over the first 30% of its height (`IntersectionObserver` + CSS custom property for progress). The text does NOT parallax — only opacity.

**Act II implementation (scrolling record panels):**
Each panel is `min-height: 60svh`. The panel background alternates between `#0B0F1A` and `#111827`. On the dominant side (left for even panels, right for odd), position an SVG data-viz inset: an arc diagram or waveform curve, clipped to a `100px × 240px` viewport, absolutely positioned and slightly overlapping the column edge by 40px. These SVGs are drawn with `stroke-dasharray` animation — they draw themselves in as the panel enters the viewport (triggered by `IntersectionObserver`, 800ms ease-out). Body copy fades in from `translateY(20px)` simultaneously.

**Blur-focus depth rings on headings:**
Every `<h2>` in Act II has a data attribute `data-depth="1"`. On hover, add a CSS class `.focused` that animates four concentric `box-shadow` layers outward: `0 0 8px 2px #7A9CC640`, `0 0 24px 8px #7A9CC620`, `0 0 48px 20px #7A9CC610`, `0 0 80px 40px #7A9CC608`. Transition: 200ms ease-out. This makes the heading look like it is being pulled into focus by a camera lens.

**Act III (bench/roster):**
Each roster member starts as a massive initial letter (`Syne` 800, 8vw, `#1E2D45`). On hover, the full name resolves out of the initial — the initial `color` transitions from `#1E2D45` to `#E8EAF0` and the full name fades in beside it over 300ms. The bio text remains at 13px, `#4A6FA5`, understated.

**Act IV (verdict/ruling):**
Frame the call-to-action as a formal decree:
- A thin 1px rule at `#2C3E5A` spans the full column width
- Beneath it: "IN THE MATTER OF TASTE" in Space Grotesk 700 uppercase at 0.8rem, `#C9A84C`
- Then the primary verdict text in Syne 800 at `clamp(2.5rem, 5vw, 4rem)`: "Join the bench."
- Below that, one sentence of body copy in Inter 300.
- No price. No feature list. No stats. Just the ruling and a single inline text link styled as `color: #C9A84C; text-decoration: underline wavy`.

**Grain overlay (CSS only, no JS):**
```
.grain-overlay {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  background-image: url('/grain.png'); /* 200x200px noise tile */
  background-size: 200px 200px;
  mix-blend-mode: overlay;
  opacity: 0.18;
}
```

**Overall scroll behavior:** `scroll-behavior: smooth` on `html`. No snap scrolling — let the acts flow naturally. The only scroll-driven effect is Act I's opacity fade.

**Avoid:** hero images, feature-card grids, pricing tables, testimonial carousels, sticky navigation with logo, modal overlays, any animation loop faster than 3s.

## Uniqueness Notes

1. **The judgment graph as circuit topology.** Unlike the a6c.dev circuit (which mirrors the site's IA), judge.club's circuit is a *relationship graph between taste categories*. The topology has semantic meaning — if you trace a path on the SVG, you are tracing a chain of aesthetic influence. No other design in this registry treats decorative circuitry as a semantic data structure.

2. **Blur-focus depth rings as the primary interaction language.** The blur-focus seed pattern is implemented not as a blur filter on imagery (which would be clichéd) but as expanding box-shadow halos that simulate camera focus racks on flat text. This produces a cinematographic depth effect with zero DOM complexity and zero imagery.

3. **Single-column with lateral data bleeds at fixed opacity.** The page is rigorously single-column for reading — but decorative data visualizations overflow the column edge and bleed into the margins at 12% opacity. The content and the decoration inhabit different opacity planes, so they never compete. This is rare in the registry: most multi-element layouts use z-index stacking; this uses opacity stratification.

4. **The "verdict" framing as narrative constraint.** Every piece of copy on the page is constrained to the language of formal judgment (docket, record, bench, ruling) but written in casual, warm language. This tonal friction — formal structure, casual voice — is designed to feel like a clever friend who happens to be a judge. No other site in the registry uses institutional narrative structure as its primary content architecture.

5. **Grain-over-everything as material authenticity.** The photographic film grain at `mix-blend-mode: overlay` is applied at the viewport level, not per-section. This means the grain integrates all elements — text, SVG, background — into a single visual material. It erases the digital flatness that makes most sites look like screenshots.

**Chosen seed (per assignment):** aesthetic = **grainy-textured**, layout = **single-column**, typography = **oversized-display**, palette = **navy-metallic**, patterns = **blur-focus**, imagery = **data-viz**, motifs = **circuit**, tone = **approachable-casual**.

**Avoided patterns (overused per frequency analysis):** full-bleed layouts, photography-heavy imagery, feature-card grids, stat grids, CTA-heavy layouts, sticky-nav with logo. Underused patterns leveraged: oversized-display typography (3% frequency), circuit motifs with semantic meaning, opacity-stratified lateral bleeds.
<!-- DESIGN STAMP
  timestamp: 2026-05-08T11:13:04
  seed: pattern is implemented not as a blur filter on imagery
  aesthetic: `judge.club` is a **verdict chamber built from static electricity and spilled in...
  content_hash: 02836eef687c
-->