# Design Language for judge.bar ## Aesthetics and Tone judge.bar is **the Night Tribunal** — a 1931 supreme courtroom that was wired for electricity, abandoned, and then re-energized by something that does not entirely respect the original blueprint. Picture the great hall of an Art Deco palace of justice: stepped ziggurat cornices, sunburst grilles over the bench, fluted brass uprights, a coffered ceiling of nested octagons — all of it rendered in gold leaf and lacquer black. Now imagine that every surface is faintly **misregistered**, as if the building is being broadcast rather than built: the gilded edges bleed cyan one frame and magenta the next, the inscriptions above the doors stutter and re-resolve, a horizontal tear of static occasionally walks down the columns and the building heals behind it. This is the collision the whole site lives inside — **art-deco** opulence (the underused 6% aesthetic, claimed here as the structural register) fractured by **glitch-art** (the 4% imagery register, used as the *finish* on every Deco surface rather than as a separate cyberpunk skin). The tone is **elegant-sophisticated** (the 3% tone in the corpus — deliberately rare). judge.bar does not shout VERDICT in distressed all-caps. It speaks like a presiding justice with a velvet voice and a glass of something amber: measured, exact, faintly amused by the gravity of its own setting. The copy is composed of *findings*, *opinions*, *dissents*, and *dicta* — the vocabulary of a high court — but delivered with the lounge-warm cadence the `.bar` TLD invites. It is a courtroom and a cocktail bar at the same hour: brass rail, green-glass lamps, a docket on the bench and a coupe beside it. Nothing here is "playful," nothing is "edgy-rebellious," nothing is "raw." It is poised. The glitch is not vandalism — it is the building *thinking*. Mood references: the lobby of the Chanin Building at 2 a.m. with the power half-failing; a Cartier-Bresson photograph of a marble hall run through a CRT; the title cards of a 1930s newsreel left running too long; the inlaid-brass terrazzo of a Wall Street tower lit only by a single buzzing neon sign that reads, in Deco capitals, IN RE. ## Layout Motifs and Structure The page is a **bento-box** composition (13% in the registry — chosen over the 88% card-grid and the 86% centered column it would normally default to). But this is not the rounded-rectangle SaaS bento of soft tiles and equal gutters. This is a **Deco marquetry bench**: an asymmetric inlay of nested rectangles with stepped, mitered corners — every cell edged in a 2px brass keyline, the cells sized in a strict 1 / φ / 2 / 3 modular ratio so the grid reads as *cabinetry*, not as a feed. The metaphor is the front face of the great judicial bench, divided into compartments: a tall narrow **gavel niche** at the left, a wide **docket panel** across the top, a square **seal medallion** dead-center, a row of small **exhibit drawers** along the bottom, one full-height **dissent column** at the right. Each compartment is an "exhibit" — a self-contained statement. Structurally there is **one viewport-tall hero bento** on first paint (the assembled bench), then the bench *un-inlays*: as you scroll, individual compartments detach, slide forward in **layered-depth** (9% in the registry), enlarge to near-full-bleed for the length of one statement, then re-seat themselves into the grid behind you. The site is therefore a single continuous bench that keeps opening different drawers — roughly 600–700vh, no router, no SPA, the scroll is the proceeding. Section count: **Convening** (the assembled bench), **The Charge** (docket panel opens), **In Camera** (seal medallion opens — the most intimate, smallest type), **The Findings** (the exhibit drawers open one by one), **The Dissent** (the right column opens, deliberately *off-grid*, tilted 3deg, the only thing in the building that refuses alignment), **Adjourned** (everything re-seats; the brass keylines draw themselves closed). No CTA strip. No pricing block. No stat-grid. The "exhibits" are propositions, not features. Navigation is a single fixed brass **docket rail** down the left edge — six small enameled studs, one per section, that fill with green lamp-light as you reach them; clicking morphs the rail into a vertical index and back. ## Typography and Palette **Type system — Google Fonts only, all confirmed available. The typography register is `eclectic-hybrid` (4% in the corpus): three faces from three different centuries, set together on purpose.** - **Poiret One** (400) — the **art-deco display** face and the title-bearing wall of the site. Used at `clamp(80px, 14vw, 280px)` for the wordmark `JUDGE` and the section headers (`IN RE`, `IN CAMERA`, `ADJOURNED`). Poiret One is geometric, hairline-thin, with circular bowls and the unmistakable elongated Deco proportions of a 1925 Exposition poster. Set in tracked, all-caps, gold. This is the brass on the building. - **Cormorant Garamond** (300, 400, 500, plus italic) — the **elegant-serif** body and the voice of the court. Used at 18–22px for all running prose: the findings, the opinions, the dicta. Cormorant is a high-contrast Garamond revival with long extenders and a literary, judicial gravity — it reads like an engraved opinion of the court. The italic carries every Latinism (*in camera*, *obiter dictum*, *sub judice*) and every dissent footnote. - **IBM Plex Mono** (400, 500) — the **tech-mono** counter-voice, used *only* for the glitch register: case numbers, the docket timestamps, the stuttering inscription overlays, the tiny "exhibit no." labels in the bento drawers. When a heading glitches, a ghost of it appears for ~120ms in Plex Mono before re-resolving into Poiret One. This is the wiring inside the walls — the building's machine-language, visible only when the broadcast tears. Pairing rule: Poiret One never sets body, Cormorant never sets a case number, Plex Mono never sets prose longer than one line. The friction between hairline Deco, contrast serif, and rigid mono *is* the eclectic-hybrid identity. **Palette — `dopamine-neon` (9% in the registry) laid over a `gold-black-luxury` Deco base. High contrast, electric, but disciplined: the neon is the glitch, the gold-and-black is the architecture.** - `#0B0A10` — **Bench Black**: the lacquered ground, the courtroom at night. Nearly all surface. - `#F4E6B8` — **Brass Leaf**: warm gilded keylines, the Poiret wordmark, the cornice ornament. The Deco metal. - `#FF2D95` — **Verdict Magenta**: the dopamine-neon primary — the left chromatic-aberration channel, the glow on the active docket stud, the "GUILTY/NOT" toggle, the dissent column's edge light. - `#00E5D4` — **Acquittal Cyan**: the dopamine-neon secondary — the right chromatic-aberration channel, hover states, the green-lamp glow on the bench (here pushed electric-teal), the scanline color. - `#FFE94A` — **Sodium Verdict**: a hot acid yellow used *sparingly* — the single buzzing neon "IN RE" sign, the seal medallion's inner ring, error/alert moments. - `#1C1A28` — **Recess Indigo**: the secondary panel fill for bento cells that sit "open," a half-step up from Bench Black so the cabinetry reads. - `#C9C4D6` — **Affidavit Grey**: the muted body-text grey for long Cormorant prose on Bench Black, so the eye isn't shouted at. - `#7A1140` — **Old Velvet**: a deep oxblood used only in the deepest layer of the layered-depth stack — the curtain behind the bench. Light is always *cast* — every neon hue carries a soft 24–40px bloom; the gold never glows, it only catches light. Magenta and cyan are never adjacent at full strength except across a chromatic-aberration split. ## Imagery and Motifs Zero photography (98% in the corpus — its absence is the deviation). Zero stock illustration. Zero icon library. Zero hand-drawn doodles. Every visual element is built from SVG, CSS gradients, and a small WebGL displacement pass. Four motif families: **1. Glitch-art as the surface finish (imagery: `glitch-art`, 4% — claimed as signature).** Not a separate aesthetic — the *patina* on every Deco object. Implemented as: (a) **chromatic aberration** — the wordmark, headings, and brass keylines are rendered in triplicate (magenta channel offset −2 to −6px, cyan channel +2 to +6px, the gold original between), the offset *breathing* on a slow irregular timeline; (b) **horizontal tear** — every 9–14s a 6–18px band of scanline static walks down one column or one bento edge and the geometry behind it is briefly displaced and re-healed; (c) **inscription stutter** — section headers, on entry, flicker through 2–3 garbled Plex Mono states before resolving into clean Poiret One; (d) a permanent, almost-invisible **CRT bloom + 3% scanline** wash over the whole page. The glitch is *quiet* — it never strobes, never blocks reading; it is the building's pulse. **2. Abstract-tech motif (motifs: `abstract-tech`, 3% in the registry — promoted to the ornamental language).** The Deco ornament — sunbursts, ziggurat steps, fluted columns, chevron friezes — is redrawn as **circuit-like geometry**: the sunburst grille over the bench is a radial PCB trace; the chevron frieze along the docket panel is a row of logic-gate glyphs; the fluted column shafts are bus lines with via-dots; the coffered ceiling is a nested-octagon die-shot. It must read as 1931 metalwork *and* as a chip layout simultaneously — gilded traces on black silicon. Animated with `path-draw-svg`: ornament draws itself in stroke-by-stroke when a section convenes. **3. The Seal of the Tribunal (motifs / generative).** Dead-center of the hero bento: a 360px circular **judicial seal** — concentric Deco rings of Poiret One micro-text (the court's "motto," looping), a central sunburst, a pair of stepped wings. It rotates ~0.3°/s. On the `morph` interaction (see below) the seal's sunburst rays *re-arrange themselves* — petals sliding into a different radial count — to spell the active section's name in negative space. This is the site's single hero ornament; no other site should duplicate the morphing-seal device. **4. The Bench itself (geometric-abstract).** The bento grid's brass keylines, when idle, are static gold hairlines. On scroll-in they don't fade — the corners *miter themselves shut*, drawing inward from the four corners of each cell like a cabinetmaker's joint closing. The "open" cell that detaches for a statement casts a Recess-Indigo shadow and a faint magenta/cyan rim of chromatic bleed. ## Prompts for Implementation Build judge.bar as **one statically-served HTML document, one CSS file, one ES module, one small WebGL fragment shader.** Asset budget: `seal.svg` (the morphing tribunal seal, layered, ~26kb), `deco-ornament.svg` (sunburst grille / chevron frieze / fluted columns as a sprite-sheet of abstract-tech traces, ~30kb), `noise.png` (256×256 tiling grain for the CRT wash, 6% opacity, ~4kb). No photographs. No web fonts beyond the three Google Fonts (Poiret One, Cormorant Garamond, IBM Plex Mono). No analytics, no third-party widgets. The page is ~650vh; the scroll *is* the proceeding. **Opening (Convening).** First paint: Bench Black fills the viewport; the bento grid's brass keylines draw their mitered corners shut over ~700ms in staggered order (left gavel niche first, dissent column last). At ~600ms the `JUDGE` wordmark (Poiret One, Brass Leaf, heavily tracked) resolves out of a 3-frame chromatic-aberration split — magenta and cyan channels rushing in from ±6px to ±2px and settling. At ~900ms the central seal fades up and begins its slow rotation. At ~1100ms a single Sodium-Verdict neon `IN RE —` sign buzzes on, lower-left, with a 40px bloom and one realistic flicker. The docket rail's six enameled studs sit dark; the first fills with Acquittal-Cyan lamp-light. No CTA. No "scroll" arrow — the building waits. **Scroll behavior — the `morph` pattern (11% in the registry, chosen over the corpus-default parallax/cursor-follow/spring stack as the *primary* interaction).** As each section convenes, the relevant bento compartment **detaches and morphs**: its rectangle eases-and-reshapes (width, height, corner-step count, position) from its seated grid slot to a near-full-bleed reading frame using a single FLIP-style transform, ~600ms, custom cubic-bezier with a faint settle. Simultaneously the **tribunal seal morphs** — its sunburst ray-count animates (e.g. 24 rays → 13 rays for "The Findings", arranged so negative space reads the section word). Headings morph from garbled Plex Mono to clean Poiret One. The whole site should feel like *reshaping*, not *sliding*. Parallax exists only as a whisper: the curtain layer (Old Velvet) drifts at most 8% slower than foreground. Cursor-follow is limited to a 1px Acquittal-Cyan crosshair reticle that the brass keylines lean toward by ≤3px when the pointer nears them (`magnetic`, used homeopathically). **The Charge (docket panel opens).** The wide top compartment morphs forward to ~92vw. Inside: a 1930s-newsreel docket — Cormorant Garamond running the "charge" as a numbered finding, Plex Mono case number stuttering in the corner, the chevron frieze (abstract-tech logic-gates) drawing itself across the top edge via `path-draw-svg`. One horizontal-tear glitch walks down it on entry, then it's calm. **In Camera (seal medallion opens — the quiet center).** The center compartment morphs to a small, intimate ~520px square — *smaller* than what surrounds it, deliberately. Type drops to Cormorant 300, Affidavit Grey, generous leading. The chromatic aberration here is almost zero — this is the one moment the building stops trembling. Italic Latinisms. One slow line of Plex Mono at the bottom like a court reporter's mark. **The Findings (the exhibit drawers open one by one).** The bottom row of small compartments — five of them — open *sequentially* as you scroll, each morphing up to a wide band, each holding one proposition in Cormorant, each edged in a brass keyline that miters shut behind you as the next opens. Subtle `counter-animate` only on any genuine ordinal (Finding I, II, III…), set in Poiret One. **The Dissent (the right column opens — off-grid on purpose).** The full-height right compartment morphs forward but lands **tilted 3deg** and slightly mis-aligned to the grid — the only element in the building that won't seat straight. Its rim glows Verdict Magenta. Type: Cormorant *italic* throughout, as if hand-set in protest. The chromatic aberration here is at its strongest — the dissent is the part of the building that trembles most. **Adjourned (re-seating).** Everything morphs home: the detached compartments ease back into their grid slots, the seal's rays return to 24, the brass keylines draw their mitered joints shut one last time across the whole bench, the `IN RE` neon buzzes off, the docket rail goes dark except the wordmark, which holds — Brass Leaf on Bench Black, perfectly still, the chromatic split finally collapsed to zero. A single line of Cormorant italic centered beneath: the closing of the opinion. No newsletter box, no socials, no footer links — the court has risen. Animation discipline: `prefers-reduced-motion` disables the glitch tear, the chromatic breathing, and the seal rotation, but keeps the morph reshapes (eased, no overshoot). Everything is `transform`/`opacity`. The CRT wash and scanlines are a single fixed pseudo-element. Sound: none. ## Uniqueness Notes Differentiators, chosen to avoid duplicating other CMassC sites and to lean into the underused patterns from the frequency report: 1. **Glitch reframed as a *finish on Deco metalwork*, not as a cyberpunk skin.** The 4% of the corpus that uses glitch-art (and the courthouse.app sibling, which uses *vintage* CRT glitch) treats it as distressed/hacked surface. judge.bar treats chromatic aberration, horizontal tear, and inscription-stutter as the *patina* on gold leaf and lacquer — opulence that trembles, not grunge. The glitch is quiet, never strobes, never blocks reading. 2. **A bento-box that is literal Deco cabinetry — the front face of a judicial bench — not a soft-tile SaaS feed.** Bento-box is 13% in the registry; this design uses it with stepped mitered corners, a 1/φ/2/3 modular ratio, 2px brass keylines that draw their joints shut, and compartments that detach-morph-reseat. The grid is furniture, and it opens. 3. **The morphing Tribunal Seal as the single hero device.** A 360px judicial seal whose sunburst ray-count re-arranges to spell each section's name in negative space, driven by the `morph` pattern (11%, used as the *primary* interaction in place of the corpus-default parallax/cursor-follow stack). No other site should duplicate the variable-ray morphing seal. 4. **An eclectic-hybrid type stack chosen as a *temporal collision*: 1925 (Poiret One, art-deco display), 1620-via-revival (Cormorant Garamond, elegant-serif court voice), and machine-age (IBM Plex Mono, the glitch's tech-mono substrate) — three centuries set on one bench, each with a hard role boundary.** Typography eclectic-hybrid is 4% in the corpus. 5. **An off-grid Dissent column tilted 3deg** — the one element in an otherwise obsessively-aligned Deco bento that refuses to seat straight, with the strongest chromatic aberration on the page. A structural argument made in layout. 6. **`elegant-sophisticated` tone (3%) inside a `dopamine-neon` palette (9%)** — electric magenta/cyan/acid-yellow disciplined by a gold-black-luxury Deco base, neon always carrying soft bloom, gold never glowing. Court-of-record gravity in copy, lounge-warm cadence from the `.bar` TLD. Avoided per frequency analysis: the 96–98% defaults — hand-drawn aesthetic, glassmorphism, photography, full-bleed/card-grid/centered layouts, warm/gradient palettes, mono-as-primary typography, and the parallax/cursor-follow/spring/magnetic/stagger animation quintet (each present here only homeopathically or not at all). Chosen seed: aesthetic: art-deco, layout: bento-box, typography: eclectic-hybrid, palette: dopamine-neon, patterns: morph, imagery: glitch-art, motifs: abstract-tech, tone: elegant-sophisticated.