# Design Language for judge.quest ## Aesthetics and Tone judge.quest is a **courtroom of lost causes and impossible verdicts** — a place where visitors submit themselves to judgment that is simultaneously absurd, ceremonial, and brutally honest. The aesthetic is **grainy-textured neorealism with an edgy-rebellious spirit**: think the illegible photocopied zines passed under desks in high school, the yellowed docket sheets pinned to a corkboard in a courthouse that stopped being maintained in 1987, the permanent marker scrawled across a manila folder that says VERDICT in all caps. The grain is not decorative nostalgia — it is texture that makes the eye work, that slows reading down, that makes everything feel *genuinely printed on something physical*. The tone is **edgy-rebellious without being nihilistic**. The site believes in judgment — it just refuses to be solemn about it. Every visual decision resists the expected: where a clean design would use white space, this uses noise; where a corporate design would use Helvetica, this uses handwritten ink that wavers and interrupts itself; where a portfolio design would use centered symmetry, this uses a strict sidebar that acts like a permanent dissenting opinion — always present, always slightly inconvenient, impossible to ignore. Inspiration draws from: Jenny Holzer truism posters, courtroom sketches inked in real-time under fluorescent light, Soviet-era legal stamps (APPROVED / DENIED in Cyrillic red), the physical texture of carbon-copy paper, zine culture circa 1993, and the brutal legibility of warning labels on industrial machinery. The mood at every scroll position: you are being evaluated and you cannot stop the evaluation. ## Layout Motifs and Structure The page uses a **persistent left sidebar** as its primary structural device — a layout the corpus uses at near-zero frequency, making it immediately distinctive. The sidebar is 280px wide on desktop, fixed (sticky), and behaves like the bench in a courtroom: it does not move regardless of what the defendant (the content) is doing. **The Sidebar (the Bench).** - Background: `#1c1008` — near-black with a brown undertone, the color of old judicial leather - Contains: the domain name in oversized handwritten display, a hand-drawn scale-of-justice icon in single ink line, a vertical list of "charges" (navigation items) written in scratchy handwritten font, and a small grain-animated box at the bottom showing current status: UNDER REVIEW - A vertical separator between sidebar and content is a **double ruled line** — one thick (3px, `#d4a843`), one thin (1px, `#d4a843`) — like the margin rule on an official docket sheet - On mobile: the sidebar collapses to a top bar, with the scales icon serving as a menu toggle, opening the navigation as a full-screen overlay with paper-texture background **The Main Content Area.** - Offset to the right of the sidebar, with a left padding of 48px and a right margin that keeps the text column at maximum 68ch for readability - Background: `#f0e8d4` — aged parchment, warm cream with yellow undertones, heavily grain-textured via CSS `filter: url(#grain)` SVG filter applied to a pseudo-element - The grain moves imperceptibly — the SVG feTurbulence baseFrequency animates from 0.65 to 0.68 over 8 seconds and back, giving the page a breathing, slightly unstable quality, as if the paper itself is anxious about the verdict - Each section of content is separated by **underline-draw animations**: a horizontal rule drawn by an SVG `stroke-dashoffset` animation that triggers when the rule enters the viewport — the line draws itself from left to right over 0.6s, like a judge underlining a sentence for emphasis **The Docket Stack.** - Primary content is arranged as a series of **docket cards**: slightly rotated (between -1.5deg and +2deg, alternating), each card bearing the look of an official filing — stamped, dog-eared, with a handwritten case number in the upper right corner - Each card sits on the parchment surface with a subtle drop shadow that suggests physical depth - Cards do not all align to the same baseline — they are staggered horizontally within ±12px, as if deposited rather than designed **Grid underneath everything:** - 12-column grid, but only used to define the outer content boundaries; the docket cards and type deliberately break the grid in controlled ways - The sidebar occupies columns 1–3; main content occupies columns 4–12 ## Typography and Palette **Typography — all Google Fonts, verified.** Three faces, each with a distinct judicial function: - **Display / Bench Title**: [`Caveat`](https://fonts.google.com/specimen/Caveat) — a genuine handwritten typeface with natural variation in letterforms, weight 700. Used for the domain name `judge.quest` at 4.5rem in the sidebar, for docket card headings at 2.2rem, and for the large "VERDICT" stamp text. Caveat has the quality of handwriting that was fast but not careless — the handwriting of someone who has written the same forms hundreds of times and has developed a personal shorthand for every letterform. - **Body / Evidence**: [`Courier Prime`](https://fonts.google.com/specimen/Courier+Prime) — a refined version of Courier, still monospaced and still carrying the authority of the typewriter, but with slightly better spacing for screen reading. Weight 400 for body copy, weight 700 for emphasis. Used at 0.95rem for all paragraph text, case descriptions, and the fine print at the bottom of each docket card. The monospace texture reinforces the idea that this was typed on a machine, recorded officially, and cannot be easily altered. - **Labels / Stamps / Charges**: [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — all-caps condensed display for bureaucratic stamps, category labels, status indicators (FILED, PENDING, DISMISSED), and navigation items in the sidebar. Used at 0.75rem letter-spaced at 0.12em for small labels, and at 1.8rem for large stamps. The combination of Bebas Neue in all-caps with grain texture creates the effect of a rubber stamp applied with slightly uneven pressure. **Palette — analogous warm-amber-to-rust:** | Role | Name | Hex | |------|------|-----| | Bench Dark | Deep Mahogany | `#1c1008` | | Parchment | Aged Document | `#f0e8d4` | | Primary Ink | Carbon Black | `#1a1209` | | Accent Gold | Docket Amber | `#d4a843` | | Warm Rust | Stamp Red | `#b84c1e` | | Mid Tone | Fox Brown | `#7a3d18` | | Grain Light | Cream Noise | `#ede3c8` | The palette is a tight analogous band moving from warm black through amber-gold to burnt sienna-rust — the colors of old paper, iron gall ink, wax seals, and inkpad stamps. There is no blue, no cool gray, no white — every surface has warmth baked into it. The single red-adjacent note (`#b84c1e`) is reserved exclusively for stamps and verdicts, making it feel urgent when it appears. ## Imagery and Motifs **Imagery is line-illustration only.** No photography. No stock icons. No gradients inside illustrations. Every visual is a single-weight or two-weight ink drawing in `Carbon Black` (`#1a1209`) against parchment, occasionally with a second pass in `Docket Amber` for selective emphasis. **The illustration lexicon:** - **Scales of Justice (organic variant)** — the canonical scales, but drawn with organic-blob arms: the chains are irregular thick strokes, the pans droop asymmetrically, the fulcrum leans 4 degrees. This is justice drawn from memory by someone who has seen too many trials. Lives in the sidebar, 72×72px, animated to slowly tip left then right over 6 seconds in a loop. - **Gavel with splatter** — a hand-drawn gavel, impact end down, with ink-splatter lines radiating from the strike point in all directions. Used as a section divider image between major docket groups. - **Organic blob seals** — amorphous blob shapes (not circles, not ellipses — genuinely amoebic outlines drawn with 8–12 bezier control points) that serve as the background for verdict stamps. The blobs are `Stamp Red` fill at 90% opacity, with a slight inner glow in `Docket Amber`. They appear only on final verdict cards — GUILTY / NOT GUILTY / HUNG JURY — and their irregular shape makes the verdict feel improvised, urgent, human. - **Fingerprint motif** — a minimalist single-loop fingerprint (3–4 concentric organic ovals, slightly off-center) used as a decorative bullet point within evidence lists. At 16px, just barely legible as what it is. - **Carbon-copy texture overlay** — a repeating SVG pattern of very faint horizontal lines at 3px spacing, opacity 6%, applied as a second pseudo-element layer over the parchment. This simulates the texture of duplicate typing paper without obscuring the content beneath. - **Underline-draw animations** — every `

` and section separator triggers an SVG underline that draws from left to right on scroll-enter. The underlines are NOT perfectly straight: they are cubic bezier paths with a 2–4px vertical wobble across their length, drawn in `Docket Amber` at 2.5px stroke weight. The wobble makes them feel hand-ruled. ## Prompts for Implementation Build judge.quest as a **single immersive docket experience** — a visitor arrives and is immediately in the middle of a proceeding that was already underway. There are no hero CTAs. There is no pricing. There are no testimonials. There is a bench and there are cases and there are verdicts already recorded. **Macro structure:** 1. **Opening (first viewport).** The sidebar is immediately visible on the left. The main content area shows a single oversized docket header — `CASE NO. 0001-∞` — in Caveat at 3.5rem, with the handwritten subtitle "The People v. Everyone". Below it, the gavel illustration, and a single line of Courier Prime: "Court is in session." No button. No CTA. Just the declaration. 2. **The Docket Roll (main scrollable content).** A sequence of docket cards, each representing a different "case" — the cases are creative writing prompts, artistic provocations, or absurdist charges. Examples: "Charged with owning too many tabs", "The State v. Unfinished Projects", "In re: Algorithmic Certainty". Each card contains: a Caveat case title, a Courier Prime description paragraph of 40–80 words, an organic-blob verdict stamp (PENDING / GUILTY / DISMISSED), and a Bebas Neue case number. Cards alternate slight left/right rotation to break the grid's authority. 3. **The Verdict Ledger (deep scroll).** A dense monospace list — rendered in Courier Prime at 0.85rem — of all verdicts ever issued, scrollable on its own within its container, like a court transcript being typed in real time. New items prepend at the top. The list is inside a card with a hard border in `Fox Brown` and a slightly darker parchment background to distinguish it from the main docket cards. 4. **The Colophon (bottom).** No footer nav, no social links. Just a single line in Bebas Neue: `COURT ADJOURNED UNTIL FURTHER NOTICE` — followed by a Caveat signature line "The Honorable judge.quest" and a date stamp in `Stamp Red`. **Animation directives:** - The SVG grain feTurbulence animation runs continuously on the page background — imperceptibly slow, never distracting - Docket cards enter the viewport with a `transform: rotate(var(--card-tilt)) translateY(20px)` → `translateY(0)` transition over 0.4s, staggered 80ms between cards - Underline-draw animations fire once per element on first scroll-entry (Intersection Observer) - The scales icon in the sidebar tips left and right in a 6s infinite CSS animation: `@keyframes tip { 0%, 100% { rotate: -4deg } 50% { rotate: 4deg } }` - Organic blob seals pulse very slightly — `scale(1)` → `scale(1.015)` over 2.5s ease-in-out infinite — giving them a breathing quality - NO parallax. NO scroll-jacking. All motion is decorative and non-blocking. **Implementation notes:** - The grain texture: `` + `` + `` — applied as an SVG filter on a full-viewport `
` with `pointer-events: none` - The parchment background uses: `background-color: #f0e8d4` + the grain filter + a radial gradient vignette darkening the corners by ~8% - All docket card rotations are set via CSS custom properties: `--card-tilt: Ndeg` with N alternating between -1.5, +0.8, -2.1, +1.3 etc., set inline - Sidebar navigation items use Bebas Neue, are separated by a single hand-ruled SVG line in `Docket Amber`, and highlight on hover by changing their Bebas Neue label color to `Stamp Red` with no transition — instant, like a stamp applied ## Uniqueness Notes 1. **Sidebar-primary layout at near-zero corpus frequency.** The frequency report shows sidebar layouts used at under 3% in the corpus, with the overwhelming majority of designs using centered or full-bleed structures. judge.quest makes the sidebar the *bench* — the structural authority of the page — rather than a navigation accessory. The sidebar does not collapse gracefully; it dominates. 2. **Organic blob verdict stamps as the primary accent element.** The corpus uses organic blobs at very low frequency, almost always as background decoration. Here, blobs are the *verdict delivery mechanism* — they are the most important visual element on each docket card, the only place where `Stamp Red` appears, and their amoebic irregularity is intentional as a metaphor: verdicts are never perfectly round. 3. **Handwritten + monospace combination as the typographic spine.** Most designs that use Caveat or similar handwritten faces pair them with a humanist sans. This design pairs Caveat with Courier Prime — the most explicitly *typewritten* face available — creating a collision between the personal and the bureaucratic that is the core tension of "judgment". The monospace grid of Courier Prime fights against Caveat's organic flow on every card. 4. **Animated underline-draw on wobbly SVG paths, not straight lines.** The underline-draw pattern is used across designs but almost always with perfectly straight `` elements. The cubic bezier wobble in judge.quest's underlines — 2–4px vertical deviation across the full width — gives them the feel of a real hand moving a ruler across a page and losing focus halfway through. A small thing; completely distinctive in motion. 5. **Grain as structural texture, not atmospheric overlay.** Most designs that use grain apply it as a static CSS noise overlay at low opacity. Here the grain is an animated SVG filter breathing at 8-second intervals, applied to the entire page body — grain as living material, not decoration. Chosen seed: `aesthetic: grainy-textured, layout: sidebar, typography: handwritten, palette: analogous, patterns: underline-draw, imagery: line-illustration, motifs: organic-blobs, tone: edgy-rebellious` Avoided patterns (overused per frequency analysis): hand-drawn aesthetic (61%), editorial aesthetic (49%), centered layout (89%), full-bleed layout (76%), photography imagery.