# Design Language for judge.club ## Aesthetics and Tone judge.club is **The Tribunal at the Lighthouse** — a private adjudication society whose deliberation chamber sits on a chalk-white promontory overlooking a tide pool at the edge of a near-future coastline. The aesthetic is **evolved-minimal**: not the empty Helvetica-on-white school, but a *post-minimalism* in which every restrained surface conceals a dense, almost forensic instrumentation underneath — like a Dieter Rams desk lamp running an aerospace flight computer. The mood is **futuristic-cutting-edge** but coastal; reflective rather than aggressive. Imagine if a 2070 maritime court of appeals commissioned an interface from a studio that loved both Cassandre's 1930s ocean liner posters and the cockpit graphics of *Solaris (1972)*: the result is reverent, hushed, ceremonial — yet humming with diagnostic life. The site presents the viewer not as a customer but as a **summoned witness**. There is no onboarding funnel, no testimonial carousel, no "join now" pulse. Instead the viewer is granted standing. Panels open like sealed dossiers; verdict glyphs etch themselves onto the surface; tide-pool readings drift in the lower margin. The tone is judicial-elegant — the sober reverence of a maritime court, softened by the wash of cold-water light through tall north-facing windows. Nothing shouts. Everything has been weighed. The undercurrent: **judging as quiet craft**. The site treats deliberation the way a watchmaker treats escapement — small, precise, beautiful, and concealed. Animations are slow (800-1400ms eases), motion is intentional, and the only sounds (if optional audio is enabled) are the periodic tick of a brass tribunal bell muffled by sea fog. ## Layout Motifs and Structure **Primary layout: broken-grid with sci-fi-hud overlay** The page rests on a deliberately fractured 14-column grid in which roughly one-third of the columns have been "redacted" — left as blank chalk-paper margin — while the remaining columns are populated by **dossier cards** of unequal height, like court records pinned to a magnetic wall in arbitrary but considered order. Crucially, the breaks in the grid are not decorative: each silent column corresponds to a *rule of evidence* (e.g., "hearsay", "relevance", "privilege"), and the absence is the design. **The HUD Membrane (fixed overlay):** A persistent 1px hairline frame in Foamline (#cfe1da) traces the inner edge of the viewport at 32px inset, with bracket-style corner fiducials (└ ┘ ┌ ┐) drawn as 16px SVG strokes in Tribunal Brass (#b69a5e). At the top-left corner: a constantly-updating **DOCKET STAMP** reading `DOCKET // 2026.05.02 / SITTING ∎` in monospace at 10px. Top-right: a tide-clock readout (`HIGH 03:47 +1.82M`). Bottom-left: a quiet **QUORUM** indicator showing 5 dots, three lit. Bottom-right: a single-letter **VERDICT MODE** glyph (P for Pending). These never overlap content — they live in the safe margin created by the broken grid's redacted columns. **Section choreography:** 1. **The Summons (100vh):** A single Art-Deco-Display monogram **J※C** at 38vw, slowly emerging from chalk-white as if carved into stone by tide. To its right, in three justified mono lines: "BY ORDER OF THE BENCH / YOU ARE SUMMONED / TO STANDING." 2. **The Bench (broken-grid spread):** A 7-card cluster introducing the seven sitting judges as monogram-plates — each a vertical art-deco cartouche with the judge's initials, decade-of-practice as a Roman numeral, and a single icon-glyph indicating their domain (a small line-icon of an anchor, a tide, a star-rose, an oar, an hourglass, a fishhook, a gull). Hovering scales the plate by 1.06 with a soft Foamline rim-light. 3. **Rules of Evidence (sidebar dossier):** A left-margin scroll-locked sticky list of nine evidentiary rules. The right side scroll-translates dossiers per-rule. The break between rules 4 and 5 (the redacted column) is deliberately empty — labeled `// SEALED //`. 4. **The Tide-Pool Ledger (HUD instrumentation):** A horizontal SVG strip rendering the current "judgment tide" as an animated waveform — verdicts issued this week as small chevrons rising or falling above the line, reading like a sonar trace. 5. **Standing Rules (footer cartouche):** An art-deco panel with sunburst rays, framed by twin lighthouse keepers (line-icon), holding a ribbon that reads `EX MARI EX LEGE` ("from the sea, from the law"). There is **no hero with a CTA**, no pricing block, no stat grid. The composition reads top-to-bottom as a sealed envelope being opened, smoothed, and signed. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Cartouche / Monograms:** **"Limelight"** — a true art-deco-display face with vertically-stretched terminals and stencil-like geometric construction. Used for the J※C monogram, judge initials, and the footer cartouche. Sizes clamp(2.4rem, 7vw, 6.4rem). All-uppercase, letter-spacing 0.18em, color Tribunal Brass (#b69a5e) on chalk; never set in body. - **Secondary Display / Section Plates:** **"Poiret One"** — thin, elegant, geometric art-deco companion. Used for section titles such as "RULES OF EVIDENCE." clamp(1.4rem, 3vw, 2.6rem), weight 400, letter-spacing 0.32em, color Bench Indigo (#1f3247). - **Body Serif:** **"Cormorant Infant"** at weight 400 / italic 400 for dossier prose and judge biographies. Optical-size variant gives the right "hand-typeset court record" feel. Body size 17px, line-height 1.65. - **Instrumentation Mono:** **"JetBrains Mono"** at weight 400, size 10-12px, all-caps, letter-spacing 0.08em, color Foamline (#cfe1da) on indigo and Bench Indigo (#1f3247) on chalk. Reserved exclusively for the HUD overlay, fiducial labels, docket stamps, tide readings, and timestamps. Never used for paragraph text. **Palette (coastal-blend, 8 hues):** - `#f4ede2` — **Chalk Promontory** (page ground; the warm cream of weathered limestone above the tide line) - `#1f3247` — **Bench Indigo** (primary type, deep judicial blue with a granite undertone) - `#5e8a99` — **Cold Tide** (mid-tone for sub-rules, accent borders, secondary instrument labels) - `#cfe1da` — **Foamline** (HUD strokes, hairline frames, hover rim-lights) - `#b69a5e` — **Tribunal Brass** (display monograms, sunburst rays, ribbon, verdict glyph fills) - `#8c4a3a` — **Sealing Wax** (the rare imperative — closed verdicts, redacted bands, sealed-rule labels) - `#a8b8b0` — **Salt Mist** (background wash for the redacted columns, 6% opacity over chalk) - `#0e1a26` — **Lighthouse Beam Black** (used only inside the tide-pool ledger SVG and for scanline tracks) The blend is **coastal**: cream chalk and indigo bench are oceanside opposites, brass and wax act as the metal-and-stamp punctuation of a courtroom, foamline and salt-mist soften the geometry into sea atmosphere. The contrast ratio between Chalk Promontory and Bench Indigo is high enough to feel printed, never digital. ## Imagery and Motifs **Imagery posture: icon-heavy, photography-free.** There are zero photographs. Every visual element is a **commissioned-style line-icon** rendered as inline SVG with 1.25px strokes in Bench Indigo or Tribunal Brass. The iconography is the design's primary visual labor. Iconographic vocabulary (all custom-drawn line-icons, art-deco-flavored): - **Anchor in Cartouche** — used as the site's seal mark. Drawn within an art-deco shield outline with a sunburst halo above. - **Tide-Rose** — a 16-point compass rose where the eight cardinal points are replaced by tiny wave glyphs and the eight ordinals by small ledger-marks. Rotates 0.5° on scroll-tick. - **The Seven Domain Glyphs** (one per judge): anchor, tide, star-rose, oar, hourglass, fishhook, gull. Each glyph is roughly 64px, drawn with the same 1.25px stroke weight, framed in a vertical cartouche with art-deco bracket-corners. - **Verdict Glyphs:** five ceremonial sigils for AFFIRMED / REVERSED / REMANDED / SEALED / PENDING — each a single composed icon, e.g., REVERSED is an inverted anchor inside a hairline ring; SEALED is a wax-circle (the only place Sealing Wax #8c4a3a appears as a fill). - **Sunburst Cartouche** (footer): a classic art-deco rising-sun motif rendered with 13 alternating ray-thicknesses, framing the Latin motto. **HUD motifs (sci-fi-hud):** - **Bracket Fiducials** at every dossier corner — 12px L-brackets (└ ┘ ┌ ┐) in Foamline, indicating "this object is being observed." - **Hairline Crosshair** that follows cursor at 0.4 opacity, only visible when cursor enters a dossier card; a 24px crosshair with a small numeric coordinate readout (`x:0421 y:0312`) trailing it in mono-10. - **Scanline Drift:** a single 1px Foamline horizontal line that drifts top-to-bottom every 14 seconds across the entire viewport at 7% opacity. Brightens any icon-glyph it crosses by 12% for 200ms. - **Tide Waveform:** an SVG path animated with `path-draw-svg` representing the past 30 days of tribunal verdicts. The path is drawn in Bench Indigo with periodic Brass chevron markers above the line for "AFFIRMED" days and Sealing Wax chevrons below for "REVERSED." - **Quorum Pulse:** five small circles in the bottom-left HUD; three are filled (Foamline, breathing 2.5s ease-in-out), two are open rings — indicating the bench has quorum. **Pattern motifs:** - **Sunburst Rays** in the footer cartouche (art-deco mainstay). - **Stepped Chevrons** as section dividers — 3-step downward stairs in Tribunal Brass at 2px stroke (deco stairwell motif). - **Redacted Bands:** thin Salt Mist bands (8% opacity) running vertically in the empty grid columns, with occasional `█` block-glyphs in monospace as the "redaction" texture. ## Prompts for Implementation **Full-screen narrative as a sealed dossier opening.** The site is one continuous reading — a summons, a presentation of the bench, a recitation of evidentiary rules, a tide ledger, and a sealed motto — never broken by call-to-action language. There is no "Sign Up," no "Pricing," no testimonial slider, no stat grid. The viewer is **granted standing**, not sold a product. **Opening Sequence (The Summons, 0-2.4s on load):** 1. Page begins entirely Chalk Promontory (#f4ede2). No content visible. 2. 0.0-0.4s: HUD bracket fiducials draw at all four corners (└ ┘ ┌ ┐) using `path-draw-svg` in Foamline. 3. 0.4-0.6s: Top-left DOCKET STAMP types in via `typewriter-effect` at 60ms/char. 4. 0.6-1.4s: J※C monogram fades in (Limelight, Tribunal Brass, opacity 0→1 with a slow scale 0.96→1.00 ease-out-quint). 5. 1.4-2.0s: Three justified summons lines stagger-fade in, 200ms apart. 6. 2.0-2.4s: Tide-clock and quorum indicators activate; scanline drift begins its first 14-second cycle. After the summons, scrolling is permitted. Until then, scroll is gently dampened (transform: translateY locked) so the summons completes. **The Bench (scale-hover signature interaction):** Each of the seven judge cartouches sits in the broken grid at a deliberately unequal vertical offset. Idle state: opacity 1, scale 1, with bracket fiducials at corners drawn at 70% length. On hover (or focus): - Scale eases to 1.06 over 320ms (`cubic-bezier(0.16, 1, 0.3, 1)`). - Bracket fiducials extend to 100% length over 280ms. - A Foamline rim-light (1px outer-glow filter, 12px blur, 60% opacity) blooms. - The judge's domain-glyph (anchor, tide, star-rose, oar, hourglass, fishhook, gull) rotates 4° and grows from 64px → 72px. - A mono-10 caption types in below: `JUSTICE M. AVERY ∙ XII YR ∙ MARITIME` (60ms/char). - Adjacent judge plates dim to 0.65 opacity to focus attention. This is the entire interaction palette for the bench section — no clicks lead anywhere; the hover *is* the experience of meeting the judge. **Rules of Evidence (sidebar scroll narrative):** A `position: sticky` left rail in Bench Indigo lists the nine rules in Poiret One. The right column scroll-progresses through dossier prose set in Cormorant Infant. As each rule becomes the active anchor (IntersectionObserver), its index numeral (Roman: I-IX) scales 1.0 → 1.4 in Tribunal Brass, while previous rules dim to 0.4 opacity. The redacted rule (between IV and V) is presented as a black Salt Mist band stamped `// SEALED // EX OFFICIO` in mono-10 Sealing Wax. Scroll cannot bypass it; it occupies its full vertical space and the user *passes through* it. **The Tide-Pool Ledger (data-instrumentation):** A 100vw x 32vh SVG fixed in section 4. Bench Indigo waveform path of 30 control points representing the past 30 days. On scroll into view, the path draws left-to-right over 1800ms (`path-draw-svg`). Brass chevrons (▲) above the line and Sealing Wax chevrons (▼) below the line stagger-fade in over 1200ms after the path completes. A horizontal scanline (1px Foamline) sweeps left-to-right once per minute, brightening each chevron it touches. **Closing Cartouche (the motto):** An art-deco sunburst panel renders via SVG. Sunburst rays draw from center outward in 1100ms staggered (`path-draw-svg`, brass strokes). Two lighthouse keeper line-icons fade in left and right. The ribbon between them types `EX MARI EX LEGE` in Limelight with a 0.18em letter-spacing crescendo (letter-spacing 0.05em → 0.18em over 800ms). **Movement principles:** - All transitions ease with `cubic-bezier(0.16, 1, 0.3, 1)` ("court bow ease") at 320-1400ms. - Nothing snaps. Nothing flashes. The bell tower of the lighthouse, conceptually, governs cadence — no animation completes faster than 280ms. - Cursor is always accompanied by the hairline crosshair when over a dossier; otherwise it is the OS default. - Scroll is unhurried; smooth-scroll polyfill at 1.05x friction so the page feels heavy, dignified. - Reduced-motion: scanline freezes; path-draw becomes instant; scale-hover becomes a 1px brass underline draw. **Storytelling arc:** Page top is dawn; page bottom is dusk. Subtle gradient shift on the Chalk Promontory ground from cool-cream (#f4ede2) at top to warmer-cream (#f0e3d2) at bottom over the full scroll. The lighthouse beam (a faint radial gradient in Tribunal Brass at 4% opacity) sweeps once per scroll-quarter, marking progress through the dossier. ## Uniqueness Notes 1. **The Tribunal-at-the-Lighthouse metaphor:** No other design in this collection frames itself as a *coastal maritime tribunal*. While other sites use mission-control HUDs (concengine), seaside houses (bada.casa), or judicial-serif legal aesthetics, judge.club synthesizes those vocabularies into a single specific institution: a private appellate bench that sits at the edge of the sea. The verdicts are framed by tide, the rules by cartouche, and the chamber by lighthouse beam. This is a vocabulary none of the references reach. 2. **Art-deco-display as primary voice (1% rare):** The frequency report shows art-deco-display typography at only 1% adoption. judge.club commits to it fully — Limelight and Poiret One handle every display surface, and the cartouche/sunburst/stepped-chevron deco-vocabulary saturates the imagery layer. Most "legal" designs default to elegant-serif (24%) or scholarly Garamond; judge.club refuses, choosing instead the geometric optimism of 1930s ocean-liner graphics applied to judicial gravitas. 3. **Icon-heavy with zero photography:** The frequency report shows imagery dominated by photography (61%) and minimal (72%). judge.club commits to **icon-heavy** — every visual asset is a custom-drawn art-deco line-icon. This is the only design in the collection where the seven members of an institution are introduced not by photo or name-card but by a domain-glyph (anchor / tide / star-rose / oar / hourglass / fishhook / gull), turning identity into symbology. 4. **Coastal-blend with a brass-and-wax punctuation:** The coastal-blend palette (2% rare) is normally read as "spa" or "calming." Here it is reframed as **judicial-coastal** — Chalk Promontory and Bench Indigo are cold, sober, official; Tribunal Brass and Sealing Wax act as ceremonial metal that no spa palette would carry. The result is a coastal palette that reads as a courtroom, not a beach. 5. **The redacted column as designed absence:** The broken-grid (16% common) is used here in a uniquely literal way — the missing columns are *redacted evidentiary rules*. The user cannot scroll past Rule IV without passing through `// SEALED // EX OFFICIO`. The grid's break is not a stylistic asymmetry but a narrative stamp. No other broken-grid design in the collection treats the empty column as a sealed legal artifact. 6. **HUD without sci-fi cliché:** sci-fi-hud (2% rare) typically accompanies cyberpunk or terminal aesthetics. judge.club deploys it in Foamline and Brass over a chalk-cream ground — the result reads as **maritime instrumentation**, not as cyberpunk. Bracket fiducials, tide-clocks, quorum pulses, and scanlines are present, but they speak the language of a 2070 lighthouse keeper's logbook, not a hacker terminal. 7. **No CTA, no pricing, no testimonials, no stat-grid — only summons.** The site refuses every pattern flagged in the brief's avoid-list. There is no "Apply for Membership" button. The footer ends on a Latin motto in a sunburst cartouche. The reader is left having been *received*, not converted. **Documented seed:** aesthetic: evolved-minimal, layout: broken-grid, typography: art-deco-display, palette: coastal-blend, patterns: scale-hover, imagery: icon-heavy, motifs: sci-fi-hud, tone: futuristic-cutting-edge. **Avoided patterns from frequency analysis:** corporate aesthetic (92%, dominant — avoided), gradient palette (95%, dominant — avoided), warm palette (90%, dominant — avoided in favor of coastal-blend), counter-animate pattern (90%, dominant — avoided in favor of scale-hover), centered layout (91%, dominant — avoided in favor of broken-grid), mono typography (93%, dominant — relegated to instrumentation only, with art-deco-display handling all primary voice), photography imagery (61%, common — fully avoided in favor of icon-heavy), mysterious-moody tone (94%, dominant — avoided in favor of futuristic-cutting-edge).