# Design Language for judge.quest

## Aesthetics and Tone
judge.quest channels the atmosphere of a decommissioned federal courtroom that has been repurposed as a server room -- the wood paneling stripped away to reveal raw concrete walls, fluorescent tubes replaced by the pale blue glow of rack-mounted status LEDs, and the judge's bench replaced by a single terminal running a process that adjudicates without pause. The aesthetic is **minimalist** in the strictest architectural sense: not the friendly minimalism of a lifestyle brand, but the severe minimalism of Tadao Ando's Church of the Light -- where every element that remains has survived a ruthless culling, and the empty space itself becomes the dominant material. The visual language draws from the intersection of judicial formality and computational precision: the measured cadence of legal proceedings translated into the measured cadence of monospaced type marching across a screen. There is no decoration that does not serve the structure. There is no color that does not carry information. The **professional** tone is not the warmth of a handshake but the exactness of a court transcript -- every word weighted, every pixel accountable. This is a site that speaks in the declarative voice of a verdict: clear, final, and stripped of sentiment.

## Layout Motifs and Structure
The layout follows a **centered** axis with absolute symmetry -- not the casual centering of a marketing page, but the formal centering of a courtroom's bilateral symmetry, where the judge sits on the exact midline and all proceedings radiate outward from that central authority. The page is organized as a single vertical column, maximum width 680px, positioned on the precise horizontal center of the viewport. This is narrower than convention demands, deliberately so: the constraint mirrors the narrow column of a legal filing, where text is set in a measured measure (65-75 characters per line) for maximum readability under adversarial scrutiny.

**Structural System: The Docket**

The page is divided into discrete "entries" -- self-contained blocks separated by horizontal rules rendered as thin 1px lines in #4A4A5A. Each entry is a complete unit: a heading, a body, and a termination mark. This mirrors the structure of a court docket, where each case entry is a self-contained record. The entries do not flow into one another; they are separated by 120px of vertical space -- significant negative space that functions as the silence between pronouncements.

**The Grid Substrate:**
Behind all content, a faint **grid-lines** pattern is rendered as a CSS background -- a field of intersecting lines at 48px intervals, drawn in #2A2A35 at 0.3 opacity. This grid is not decorative; it is the coordinate system against which all content is aligned. The grid extends to the full viewport width and height, creating the impression that the centered content column is a narrow window into an infinite computational plane. On scroll, the grid remains fixed (background-attachment: fixed), while content moves over it -- a parallax separation that establishes the grid as the permanent substrate and the content as the ephemeral overlay.

**Vertical Rhythm:**
All spacing follows an 8px base unit. Heading-to-body gap: 16px. Body paragraph spacing: 24px. Entry separation: 120px. Horizontal rule margin: 56px top, 56px bottom. This mathematical consistency is never violated. The rhythm is the law.

## Typography and Palette
**Typography:**

- **Primary / Body / Headlines:** "IBM Plex Mono" (Google Fonts) -- weights 400 (body), 500 (emphasis), 700 (headlines). IBM Plex Mono is chosen with deliberate intent: it is a monospaced typeface designed by Mike Abbink for IBM, carrying the institutional weight of a corporation that once manufactured the machines that processed court records. Its letterforms are precise without being cold -- the rounded terminals of the lowercase 'a' and 'e' introduce just enough humanity to prevent the design from becoming hostile. All text on the site is set in IBM Plex Mono. There is no secondary typeface. This mono-stack constraint is the typographic equivalent of the site's minimalism: one voice, one cadence, one authority. Headlines are set at 2.4rem, weight 700, letter-spacing -0.02em (a subtle tightening that gives headlines the density of a stamp). Body text is set at 1rem (16px), weight 400, line-height 1.75 (generous leading that gives each line room to breathe, mimicking the double-spacing of legal filings). Emphasis is rendered in weight 500 with a subtle color shift to #B0B0C0 rather than italic -- italic is forbidden in this design language, as it introduces a gestural informality that contradicts the judicial tone.

- **Monospaced Accent:** "Space Mono" (Google Fonts) -- weight 400 only. Used exclusively for metadata annotations: timestamps, version numbers, status indicators, and the small labels that precede each docket entry (e.g., "ENTRY 001", "FILED 2026.03.09"). Set at 0.75rem, weight 400, letter-spacing 0.12em (wide tracking that gives these small labels the authority of a rubber stamp). Color: #6B6B80. Space Mono's more geometric construction (compared to IBM Plex Mono's humanist curves) creates a clear hierarchy within the monospaced family: IBM Plex Mono speaks in the voice of the judge, Space Mono speaks in the voice of the clerk.

**Palette:**

The palette is **cool-grays** -- a narrow band of blue-gray values that spans from near-black to pale silver, with no warm hues. The absence of warmth is a deliberate design decision: warm colors imply welcome, and this site does not welcome -- it presides.

| Role | Hex | Description |
|------|-----|-------------|
| Background (Deep) | #121218 | The near-black of a powered-down screen -- not true black (#000), which is harsh and artificial, but a blue-black that carries the residual glow of a CRT that has just been switched off. |
| Background (Surface) | #1A1A24 | A barely-perceptible lift from the deep background, used for docket entry containers. The 12-unit difference from #121218 is subtle enough that it registers as depth rather than color. |
| Grid Lines | #2A2A35 | The coordinate substrate. Visible only as a whisper against the background. |
| Divider / Rule | #4A4A5A | Horizontal rules and structural separators. The brightest structural element, yet still subdued. |
| Body Text | #C8C8D8 | The primary reading color. A silver with blue undertone, chosen for comfortable reading against dark backgrounds at extended durations -- the color of text on a terminal that someone stares at for 12-hour shifts. |
| Emphasis Text | #B0B0C0 | A slightly muted variant of body text, used for weight-500 emphasis. The subtle dimming, paradoxically, draws attention through difference. |
| Metadata / Label | #6B6B80 | The clerk's voice. Clearly secondary, clearly functional. |
| Accent (Verdict) | #7B9FCC | A single blue -- the only chromatically distinct color in the entire palette. Cool, authoritative, and used with extreme restraint: only for the initial letter of each docket entry heading, for active link states, and for the singular interactive element on the page. This blue is the gavel strike. |

## Imagery and Motifs
**Minimal Imagery:**

The site uses **minimal** imagery in the most literal sense: there are no photographs, no illustrations, no icons, no SVGs with complex paths. The only visual elements are typographic and geometric.

**Grid-Lines as Primary Motif:**

The dominant visual element is the **grid-lines** pattern that covers the entire viewport. This grid is constructed purely in CSS using repeating-linear-gradient: two sets of 1px lines (horizontal and vertical) at 48px intervals, rendered in #2A2A35 at 0.3 opacity on the #121218 background. The grid creates a coordinate plane -- the visual language of graph paper, of architectural blueprints, of the ruled paper on which legal briefs were once drafted by hand. At intersection points, the overlapping gradients create slightly brighter nodes (0.6 effective opacity), producing a subtle dot-grid effect that emerges only at close viewing distance.

**The Cursor Line:**

A single horizontal line, 1px tall, spans the full viewport width at the vertical position of the user's cursor. This line is rendered in #7B9FCC at 0.15 opacity and follows the cursor with a 200ms CSS transition (ease-out), creating a slow, deliberate tracking motion. This is the "reading line" -- the invisible ruler that a careful reader holds beneath each line of text. It references the cursor of a text terminal, the scan line of a CRT, and the physical straightedge used when reading dense legal documents. The line does not snap to text lines; it floats freely, bound only to the cursor's vertical position.

**Entry Numbering:**

Each docket entry is preceded by a three-digit number set in Space Mono at 0.75rem, letter-spacing 0.12em, color #6B6B80. These numbers are positioned 24px above the entry heading, left-aligned with the content column. The numbers increment sequentially (001, 002, 003...) and serve as the only navigational reference points. They are not links, not interactive -- they are record identifiers, permanent and authoritative.

**The Blinking Period:**

At the very bottom of the page, after all docket entries, a single period character (".") is rendered in IBM Plex Mono at 1rem, color #7B9FCC, centered on the content column. This period blinks with a 2-second cycle (1s visible, 1s invisible) using a CSS animation with step-end timing -- the abrupt on/off of a terminal cursor, not the smooth fade of a modern UI. This blinking period is the site's only animation loop, its only concession to the dynamic. It signals that the docket is still open, that proceedings continue, that the system awaits the next entry.

## Prompts for Implementation
**Full-Screen Narrative Opening:**

The site opens to a 100vh viewport. The background is #121218 with the grid-lines pattern rendered via CSS repeating-linear-gradient (two gradients: one for vertical lines, one for horizontal, both 1px #2A2A35 at 48px intervals, opacity 0.3). The grid is applied with background-attachment: fixed so it remains stationary during scroll.

On load, the viewport is entirely empty for 800ms. Then the domain name "judge.quest" fades in over 1.2s (opacity 0 to 1, CSS transition), set in IBM Plex Mono at weight 700, size 2.4rem, color #C8C8D8, centered horizontally and positioned at 42% from the top of the viewport. The text is rendered with letter-spacing -0.02em. Below the domain name (32px gap), a single line of metadata appears after a 400ms delay: "DOCKET OPEN" in Space Mono at 0.75rem, letter-spacing 0.12em, color #6B6B80. This metadata line also fades in over 800ms.

After the full opening animation has settled (total elapsed: ~2.8s), a thin 1px horizontal rule in #4A4A5A fades in across the full width of the content column (max-width 680px, centered). This rule signals the boundary between the title panel and the docket entries below.

**Scroll Behavior:**

The docket entries are below the fold. The user must scroll to reach them -- there is no arrow, no "scroll down" indicator, no bouncing chevron. The absence of scroll affordance is intentional: the user must choose to proceed, as one chooses to enter a courtroom.

Each docket entry uses **fade-reveal** animation: as the entry scrolls into the viewport (triggered at 15% visibility via IntersectionObserver), it transitions from opacity 0, transform translateY(20px) to opacity 1, transform translateY(0) over 600ms with an ease-out curve. The entries stagger by 100ms -- the first element of the entry (the number) appears first, then the heading, then the body. This three-part stagger creates a measured revelation, like a clerk reading charges: count, title, substance.

**The Reading Line (Cursor Tracker):**

Implemented as a fixed-position div, width 100vw, height 1px, background #7B9FCC, opacity 0.15, top position bound to clientY via a mousemove event listener. The position updates are throttled to 60fps via requestAnimationFrame and smoothed with a CSS transition: top 200ms ease-out. On mobile/touch devices, the reading line is hidden entirely (display: none via media query: hover: none). This element is positioned behind the content (z-index: 1, content at z-index: 2) so it passes beneath text and rules without visual interference.

**Content Sections (Docket Entries):**

Each entry follows this structure:
1. Entry number: Space Mono, 0.75rem, #6B6B80, letter-spacing 0.12em, margin-bottom 24px
2. Entry heading: IBM Plex Mono, 2.4rem, weight 700, #C8C8D8, letter-spacing -0.02em. The first letter of the heading is colored #7B9FCC -- the accent blue -- using a CSS ::first-letter pseudo-element
3. Entry body: IBM Plex Mono, 1rem, weight 400, #C8C8D8, line-height 1.75, max-width 680px

Content should explore themes related to the domain: adjudication in digital systems, the concept of algorithmic judgment, the intersection of human discretion and computational determinism. The content is not marketing copy; it is exposition. There are no calls to action, no pricing blocks, no testimonials, no stat-grids. Each entry reads as a self-contained meditation.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero images, gradient backgrounds, card carousels, testimonial sliders, hamburger menus, footer link forests. This site has no navigation, no header, no footer. It is a single continuous document.

**The Terminal Period:**

After the final docket entry, 120px of space, then a centered period in IBM Plex Mono 1rem, #7B9FCC, animated with:
```css
@keyframes blink {
  0%, 49.9% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
animation: blink 2s step-end infinite;
```

**Responsive Behavior:**

The 680px content column gracefully collapses: below 768px, the column becomes width: calc(100% - 48px) with 24px horizontal padding. Below 480px, headline size reduces to 1.8rem. The grid-lines background remains at 48px intervals regardless of viewport -- on small screens, fewer grid cells are visible, which reinforces the "window into larger system" metaphor. The reading line is disabled on touch devices.

## Uniqueness Notes
**Differentiators from other designs:**

1. **Single-Typeface Monospaced System:** While 99% of designs in the corpus use mono typography as one element in a mixed type stack, judge.quest uses monospaced type exclusively -- IBM Plex Mono for all primary content and Space Mono for metadata. There is no sans-serif or serif anywhere. This total commitment to monospace creates a visual uniformity that no other design achieves, transforming the page into something that reads more like a terminal output or legal transcript than a website.

2. **Cursor-Tracking Reading Line:** No other design in the corpus implements a viewport-width line that follows the user's cursor position. This element -- a 1px horizontal rule in the accent blue at 0.15 opacity -- creates a unique interaction model that references both the scan line of CRT monitors and the physical straightedge used for reading dense text. It is simultaneously a functional reading aid and a conceptual statement about surveillance and observation.

3. **Fixed Grid Substrate with Parallax Content:** While grid-lines motifs appear in ~9% of designs, judge.quest uses the grid as a fixed background layer that content scrolls over, creating a depth separation not found in other grid-based designs. The grid functions not as decoration but as a coordinate system -- the permanent mathematical plane against which ephemeral content is plotted and measured.

4. **Absence as Design Language:** The site has no navigation, no header, no footer, no images, no icons, no interactive UI elements beyond the reading line. This radical reduction goes further than any other minimalist design in the corpus, where minimalism typically still includes standard web furniture (nav bars, CTAs, footers). judge.quest treats absence itself as content -- the empty space between docket entries is as deliberate as the text within them.

5. **Blinking Terminal Period as Sole Animation Loop:** The only repeating animation on the entire site is a single period character blinking at the bottom of the page. In a corpus where 96% of designs use scroll-triggered animations and 80% use parallax, this singular, primitive animation (a CSS step-end blink) is a stark contrast -- a deliberate anachronism that references the earliest computer terminals.

**Chosen Seed:** aesthetic: minimalist, layout: centered, typography: tech-mono, palette: cool-grays, patterns: fade-reveal, imagery: minimal, motifs: grid-lines, tone: professional

**Frequency-Informed Decisions:**
- **minimalist** aesthetic at 7% frequency -- strongly underused, chosen to counterbalance the 95% dominance of playful
- **cool-grays** palette at 7% frequency -- strongly underused, chosen to counterbalance the 100% dominance of warm palettes
- **tech-mono** typography at 6% frequency -- underused, chosen over the dominant mono (99%) to establish a more specific typographic identity
- **professional** tone at 13% frequency -- underused, chosen to counterbalance the 97% dominance of friendly
- **grid-lines** motifs at 9% frequency -- underused, chosen over vintage (80%) and nature (32%)
- **fade-reveal** patterns at 10% frequency -- underused, chosen to avoid the dominant scroll-triggered (96%) and parallax (80%)
- **AVOIDED:** playful aesthetic, warm palette, friendly tone, vintage motifs, scroll-triggered patterns as primary animation, parallax as primary depth technique -- all overrepresented in the corpus
<!-- DESIGN STAMP
  timestamp: 2026-03-09T15:35:31
  domain: judge.quest
  seed: seed:
  aesthetic: judge.quest channels the atmosphere of a decommissioned federal courtroom that h...
  content_hash: 871de48b8e7f
-->