# Design Language for judge.quest ## Aesthetics and Tone judge.quest is staged as **a holographic codex of verdicts — an illuminated manuscript that was pressed, centuries later, onto a sheet of chrome foil and left to catch the light**. The TLD `.quest` is read in its oldest sense: not a points-and-loot questline, but the medieval *queste* — a long, formal pilgrimage toward judgment, the kind of journey that ends with a hand on a balance-beam and a single word spoken aloud. The site is the record of that pilgrimage: a hall of trial-cards, each one a vintage engraving of justice (the scales, the gavel, the blindfolded figure, the laurel, the seal of wax) that has been re-issued as a **holographic** trading-relic — matte ink in the recessed lines, mirror-chrome in the raised ones, a thin oil-slick of spectral colour wherever the surface turns toward you. The mood is **bold-confident** without being loud. This is the confidence of an institution that has been right enough times to no longer need to shout — gilt edges, deep ink, the slow authority of a struck seal. The holographic treatment keeps it from tipping into stuffy heraldry: the chrome breathes, the spectral film drifts, and the whole hall feels less like a museum case and more like a deck of fate-cards held under a moving lamp. Inspiration sits at the intersection of **18th-century legal frontispiece engravings (Blackstone's *Commentaries*, the *Encyclopédie*'s "Jurisprudence" plate), the foil-stamped covers of vintage tarot decks, anodised-titanium watch dials, and the dichroic-glass sculptures of Larry Bell** — antique authority delivered on a surface that refuses to hold still. The tone of voice is declarative and unhurried: short verdict-sentences set in a stately serif, the way a bench hands down a finding. Never breathless, never gamified, never a leaderboard. The visitor is not a player racking up wins — they are a witness walking the length of a chrome-and-ink hall, reading judgment after judgment. ## Layout Motifs and Structure The structural commitment is **card-grid** — but pulled hard away from the SaaS-feature-tile cliché that dominates the corpus. Here the grid is **a hung gallery of trial-cards in a vaulted hall**, and the page is the slow walk down its centre aisle. The site is one long vertical scroll, roughly 700vh, divided into seven *judgment chambers* stacked top to bottom, each chamber a different arrangement of the same card module. The card module is fixed and load-bearing: a **3:4 portrait "verdict card"** with a 2px chrome bevel, a debossed serial number in the upper corner (Roman numeral, e.g. `IV·VII`), an engraved central illustration, a hand-ruled hairline frame inset 14px from the edge, and a wax-seal motif anchoring the lower-right corner. Every card in the hall is built from this module; chambers differ only in how the modules are laid. - **Chamber I — The Threshold.** A single card, centred, occupying ~70vh: the title plate. `JUDGE` set enormous in elegant serif across the card face, `.quest` debossed small beneath it, the wax seal at the foot still glistening as if just pressed. Behind the card, the hall recedes — a chrome vault ceiling drawn in faint perspective lines. - **Chamber II — The Long Bench.** Five cards in a single horizontal row that the visitor scrolls past vertically while the row itself drifts slightly on a **parallax** plane (claimed, rationed to this one chamber only). Each card a different vintage figure of justice: Themis, the laurel, the open codex, the gavel, the balance. - **Chamber III — The Deliberation.** A staggered 3-column **card-grid** where cards sit at slightly different vertical offsets (a 0 / +48px / +96px stair), as if pinned to a board mid-argument. This is the densest chamber — eight to nine cards. - **Chamber IV — The Single Finding.** One card again, but oversized (~85vh), turned 4° off-true, with the chrome catching a hard diagonal highlight. The hinge-point of the whole page: the chamber where the verdict lands. - **Chamber V — The Appellate Wall.** A 4-column tighter grid, smaller cards, more of them — the archive. Cards here are dimmer, more ink than chrome, the holographic film almost spent, as if these are the older rulings. - **Chamber VI — The Marginalia.** A broken two-column flow where text columns of verdict-prose run alongside small "annotation cards" half their size, the way an illuminated manuscript carries commentary in the margin. Vintage botanical-and-heraldic flourishes (oak leaf, acanthus, laurel) twist down the gutter between columns. - **Chamber VII — The Seal.** A final single card, centred, smaller, holding only a wax seal that fills its face — the document closed. Below it, a thin chrome rule and the colophon. The aisle metaphor is enforced by a **persistent centre line**: a 1px chrome thread running the full height of the page behind everything, occasionally catching a spectral glint, the way the polished floor of a long hall throws back the ceiling lights. No conventional nav bar — a slim left-margin "register" lists the seven chambers as Roman numerals; the active one is the only one rendered in chrome, the rest in flat ink. Generous negative space framed in deep ink keeps the chrome from becoming gaudy: each card floats in a dark vault with real air around it. Nothing is cramped; the hall is meant to feel vaulted, not packed. ## Typography and Palette **Typography — Google Fonts only, all confirmed available.** The mandate is **playfair-elegant**, honoured at the centre of the system. - **`Playfair Display`** (regular, medium, bold, black; roman + italic) — the principal voice and the typographic load-bearing wall. High-contrast Didone with dramatic thick/thin modulation and small, sharp bracketed serifs — the face of legal frontispieces, opera programmes, and engraved certificates. Used at `clamp(56px, 9vw, 168px)` for card titles and verdict words (`JUDGE`, `FINDING`, `SEAL`), in italic for the hand-down sentences ("It is so found."), and in `Playfair Display SC` (small caps) for the chamber registers and the debossed serial labels. Letter-spacing is tight on the giant settings, slightly open on the small caps. - **`Spectral`** (regular + italic, 300/400/500) — secondary, the body and marginalia face. A subtly slabbed transitional serif with a calm screen-grade colour; carries the verdict-prose paragraphs in Chamber VI and any running text. Chosen because it sits beside Playfair Display the way a printed law-report sits beside its engraved title page — same family of seriousness, lower temperature. - **`Cormorant SC`** (small caps, 500) — tertiary accent only, reserved for the colophon, copyright line, and the wax-seal lettering ("SIGILLVM·IVDICII"). Delicate, high-contrast, faintly antique — used at small sizes where Playfair would feel too heavy. No sans-serif anywhere on the page. No monospace. The entire typographic register is serif, by intent — this is a document, not a dashboard. **Palette — `chrome-metallic`, the underused vocabulary term, claimed wholesale (registry: 6%).** The page lives in deep ink and polished metal, lit by a thin spectral oil-slick. - `#0B0C10` — **Vault Ink.** The dominant ground. Near-black with a faint blue undertone, the colour of the hall between the cards. - `#15171C` — **Bench Shadow.** A half-step lighter ink for chamber backgrounds and card recesses, so the dark has depth rather than flatness. - `#C9CCD1` — **Brushed Chrome.** The base metal: card bevels, the centre thread, active register numerals, hairline frames. A cool neutral grey that reads as polished steel, not silver paint. - `#EEF1F4` — **Mirror Highlight.** The hot edge of chrome where it catches light — used as the bright stop in every metal gradient and for the verdict words at full lift. - `#7E8590` — **Ink Plate.** The mid grey of the engraved illustration linework and the inactive register numerals — the "matte ink in the recessed lines." - `#B98A2E` — **Struck Gilt.** A single restrained gold, reserved for the wax-seal rims, the colophon rule, and the gilt edge of Chamber IV's oversized card. Used sparingly enough that it never competes with the chrome. - The **holographic film** is a moving 4-stop spectral gradient — `#7CF5D8 → #9BB8FF → #E6A6FF → #F7D98C` — rendered at low opacity (8–16%) as a `background-blend: overlay` only on chrome surfaces, drifting on cursor proximity. It is the *only* saturated colour in the design and it is never solid; it is always a sheen over metal. ## Imagery and Motifs **Zero photography.** The 98% of corpus sites that lean on stock photography are explicitly opted out — photography would be a category error in a hall of engravings. **Zero icon libraries** — no Lucide, no Phosphor, no Heroicons. **Zero 3D renders, zero gradient-mesh blobs, zero generic illustration packs.** The imagery mandate is **custom-illustration** (registry: 2% — underused, claimed), and it is interpreted literally: every visual element is a **purpose-drawn engraving in the manner of an 18th-century copperplate**, rendered as hand-authored SVG, then given the holographic-chrome surface treatment in CSS. The drawing register is consistent throughout — fine cross-hatched linework, no flat fills, the light always raking from upper-left. The custom engravings (one per major card, ~12–14 unique drawings total): 1. **Themis at the Threshold** — the blindfolded figure with the balance, drawn frontally, robe in hatched folds, the scales' chains rendered as individual links. 2. **The Naked Balance** — just the scales, empty, perfectly level — the central image of Chamber IV's single finding. 3. **The Gavel and Block** — a wooden mallet mid-strike above a sound-block, with three small radiating impact lines (the only "motion" in any engraving). 4. **The Open Codex** — a law-book lying open, pages drawn with ruled lines and a single drop-cap visible. 5. **The Laurel Crown** — a closed wreath, every leaf individually hatched, the binding ribbon trailing. 6. **The Sand-Glass** — an hourglass, the upper bulb half-empty, sand drawn as stippled grains. 7. **The Seal-Press** — a screw-press with a wax disc beneath it, the matrix lowered. 8. **The Quill and Inkwell** — a sharpened quill resting across an open well, a single drop poised at the nib. 9–14. Smaller marginalia engravings for Chamber VI — an oak-leaf flourish, an acanthus scroll, a heraldic shield (blank), a key, a knotted cord, a lit taper — drawn at half the linework density, used as drop-cap companions and gutter ornament. **The chrome-foil treatment** (applied to every engraving): the SVG is duplicated into three stacked layers — a *matte ink layer* (the `#7E8590` linework on transparent), a *chrome layer* (the same paths offset 1px, stroked in a `#C9CCD1 → #EEF1F4` linear gradient that re-angles based on cursor position), and a *holographic layer* (the spectral 4-stop gradient, `mix-blend-mode: overlay`, masked to the chrome paths only, with its `background-position` lerping toward the cursor). The result: the recessed lines stay matte ink, the raised lines flash mirror-chrome, and a faint rainbow film slides across the metal as the visitor moves — a real foil card under a real moving lamp, built entirely in CSS and a few lines of JS. **Vintage motifs** (registry: 23% — moderate, claimed for texture not novelty) thread through everything: Roman-numeral serials, wax-seal medallions, engraved hairline frames, acanthus-and-oak gutter flourishes, a faint *guilloché* (engine-turned) line pattern behind Chamber I's title card — the kind of intaglio rosette you find on banknotes and stock certificates, drawn once as a tiling SVG at 6% opacity. There is **one** subtle paper-grain overlay (256×256 tiling noise, 4% opacity, screen blend) so the deep ink isn't a dead digital black — but it stays whisper-quiet; this is foil-on-vellum, not a distressed-paper craft site. ## Prompts for Implementation Build judge.quest as **one statically-served HTML document, one CSS file, one small ES module, and one SVG asset bundle** — no SPA, no router, no framework, no analytics, no cookies, no service worker. Files: `index.html` (~13kb), `styles.css` (~14kb), `quest.mjs` (~5kb), `engravings.svg` (a single `` sheet, ≤ 44kb), `guilloche.svg` (one tiling rosette, ≤ 8kb), `grain.png` (256×256 noise, ≤ 6kb). Web fonts limited to the three named Google Fonts (`Playfair Display`, `Spectral`, `Cormorant SC`) — nothing else. **The narrative is the scroll, and the scroll is a walk down a chrome-and-ink hall.** No CTA stacks, no pricing tables, no stat-grids, no "trusted by" logo strips, no signup forms. The page is a 700vh document of seven judgment chambers; the visitor walks it once, top to bottom, and reads verdict after verdict. **Opening (Chamber I — The Threshold).** First paint is Vault Ink (`#0B0C10`), with the faint guilloché rosette pattern already ghosting behind centre-screen. At 200ms the title card fades up — a 3:4 chrome-beveled plate, `JUDGE` set in `Playfair Display Black` at the clamp max across its face, `.quest` debossed in small caps beneath. At 600ms the wax seal at the card's foot does a single 240ms "press-and-settle" (scale 1.04 → 1.0 with a soft drop-shadow bloom), then glistens — a slow 4s spectral shimmer loop confined to the seal. The chrome bevel of the card holds a static highlight until the cursor moves; on first `mousemove`, the highlight angle and the holographic film begin tracking the pointer. Behind the card, faint chrome perspective lines suggest a vault ceiling receding. **The magnetic spine (registry: 81% — claimed, but redefined away from the "everything jiggles toward the cursor" default).** `magnetic` here means exactly one thing: **the verdict cards are lightly magnetic, the way a real foil card tilts when you pass your hand near it.** As the cursor approaches a card (within ~180px), the card eases a few pixels toward the pointer and tilts ≤ 3° on a 3D plane (`transform: perspective(900px) rotateX/rotateY`), and — critically — the chrome gradient re-angles and the holographic overlay's `background-position` lerps so the *metal itself* responds. The motion is slow and weighty (a `cubic-bezier(.2,.8,.2,1)`, ~420ms settle), never springy or bouncy — these are heavy plates, not balloons. Nothing else on the page is magnetic: not the text, not the register, not the seals. One mechanic, applied once, applied well. Honour `prefers-reduced-motion`: with it set, cards stay still, the holographic film becomes a static gentle sheen, the seal shimmer stops, and the page is simply a beautiful still hall. **Chambers II–V (the walk).** Each chamber's cards enter with a restrained stagger as they cross into view (`IntersectionObserver`, not scroll-jacking): a 16px rise + opacity 0→1, 90ms apart, easing on the same heavy curve. Chamber II's five-card row drifts on a single rationed parallax plane (translateY at ~0.85× scroll) — the *only* parallax in the build. Chamber IV is the hinge: its oversized card sits 4° off-true with a hard diagonal chrome highlight and the single gilt edge; when it reaches centre-viewport, the holographic film across it does one slow full sweep left-to-right over ~1.2s, then returns to cursor-tracking — "the verdict landing." Chamber V's appellate wall fades its cards in dimmer (chrome at ~40% strength, more `#7E8590` ink showing) so the eye reads them as older rulings. **Chamber VI (The Marginalia).** Verdict-prose set in `Spectral`, columns 58ch wide, with `Playfair Display` drop-caps each paired with a tiny marginalia engraving in the gutter. The acanthus-and-oak flourish runs vertically down the column gutter as a `path-draw` SVG that strokes itself in over ~1.6s when the chamber enters view, then sits static. Annotation cards (half-size verdict cards) float in the outer margin, lightly magnetic like all the rest. **Chamber VII (The Seal) + colophon.** A final small centred card holding only the wax seal, filling its face. On entry the seal does one last press-and-settle, then a single spectral shimmer, then goes still. Below: a 1px Struck Gilt rule, and the colophon in `Cormorant SC` small caps — "SET IN PLAYFAIR DISPLAY · ENGRAVED IN SVG · SEALED MMXXVI". The centre chrome thread that has run the whole page terminates here in a tiny chrome diamond. **Performance/animation notes for the engravings:** the three-layer foil effect (matte ink / chrome gradient / holographic overlay) should be composited with `mix-blend-mode` and CSS gradients only — no canvas, no WebGL. The cursor-tracking is a single `requestAnimationFrame` loop that lerps two custom properties (`--mx`, `--my`) toward the pointer at ~0.12 ease; every card reads those properties via `calc()` for its tilt, gradient angle, and holographic offset. That one loop drives the entire interactive surface. Keep total JS under ~5kb. ## Uniqueness Notes Differentiators this design commits to against the 280-design CMassC1 corpus: 1. **Card-grid reframed as a hung gallery of engraved foil "verdict cards," not feature tiles.** Card-grid is one of the most saturated layouts in the corpus (88%), and almost every use is the SaaS three-or-four-feature-box pattern. judge.quest keeps the literal grid but makes every cell a 3:4 portrait intaglio-engraving relic with a chrome bevel, Roman serial, and wax seal — a museum hall, not a pricing comparison. The grid is the spine of a 700vh walk through seven chambers, each a different arrangement of the *same* card module. 2. **A genuine three-layer holographic-chrome-foil treatment built in pure CSS — matte ink in the recessed lines, mirror-chrome in the raised ones, a cursor-tracked spectral oil-slick over the metal only.** Holographic sits at 11% in the registry and chrome-metallic at just 6%; combining them as a *physical foil-card simulation* (the metal itself re-angles and rainbows under the moving cursor, not a flat gradient overlay slapped on a hero) is, per the frequency report, not done elsewhere in the corpus. No canvas, no WebGL — `mix-blend-mode`, CSS gradients, and a single rAF lerp loop. 3. **An all-serif typographic register anchored by Playfair Display at frontispiece scale — zero sans-serif, zero monospace.** `mono` (94%) and `humanist` (54%) dominate the corpus; `playfair-elegant` is at 2%. This design refuses both defaults: Playfair Display Black at `clamp(56px, 9vw, 168px)` for verdict words, Playfair italic for hand-down sentences, Playfair SC for chamber registers, with Spectral and Cormorant SC as the only supporting faces. The page reads as an engraved legal document, not a terminal or a startup landing. 4. **`magnetic` deliberately narrowed from the corpus default.** Magnetic appears in 81% of corpus sites, almost always as "everything drifts toward the cursor." Here it means exactly one heavy, slow mechanic — foil cards tilting ≤ 3° toward the pointer while their chrome re-angles — applied to nothing else on the page, with a weighty `cubic-bezier(.2,.8,.2,1)` rather than spring/bounce. 5. **Zero photography, zero icon libraries, zero stock illustration — every visual is a purpose-drawn 18th-century-style copperplate engraving in hand-authored SVG.** Against a corpus that is 98% photography and heavily icon-driven, the entire image set here is ~12–14 unique custom engravings (Themis, the empty balance, the gavel, the codex, the laurel, the sand-glass, the seal-press, the quill, plus marginalia flourishes), each given the foil treatment. `custom-illustration` is a 2%-registry term, claimed wholesale. 6. **Parallax rationed to a single chamber.** Parallax is at 96% in the corpus; judge.quest uses it on exactly one row of cards in Chamber II and nowhere else — claimed in the manifest, not refused, but scoped so tightly it functions as a single grace note rather than a page-wide gimmick. **Chosen seed (honoured in full, no substitutions):** aesthetic: holographic, layout: card-grid, typography: playfair-elegant, palette: chrome-metallic, patterns: magnetic, imagery: custom-illustration, motifs: vintage, tone: bold-confident. Parallax is claimed alongside magnetic but rationed to one chamber; every other seed term is the structural core of the design as written. **Avoided patterns from the frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (70%), photography imagery (98%), full-bleed/centered defaults as the *only* structure, mono + humanist type (94% / 54%), warm + gradient palette (98% / 97%), cursor-follow as a page-wide effect (88%), spring/stagger as the dominant motion language (86% / 80%), pastoral-romantic / warm-inviting tone (35% / 27%).