# Design Language for courthouse.stream ## Aesthetics and Tone courthouse.stream channels the atmosphere of a decommissioned federal courthouse at 2 AM, its corridors lit by the blue-green phosphor glow of abandoned CRT terminals still cycling through case docket numbers that no one will ever read. The aesthetic is **brutalist** -- not in the trendy, rounded-corner neubrutalist sense, but in the original architectural meaning: raw concrete, exposed structural logic, the refusal to apologize for the bones of the building. Every element on the page announces its function with the blunt honesty of a poured concrete beam. The tone is **nostalgic-retro**, but the nostalgia is specific: it is the nostalgia of early 1990s government computing systems, of green-on-black terminal emulators running LEXIS searches at 2400 baud, of dot-matrix printers chattering out case summaries on continuous-feed paper with tractor-hole edges. There is something wistful about these systems -- they were ugly and efficient and honest in a way that modern interfaces, with their rounded corners and friendly animations, have abandoned. courthouse.stream mourns this loss without sentimentality. The visual mood draws from three reference points: (1) the Barbican Centre in London -- raw concrete surfaces with unexpected pockets of warmth; (2) the control rooms of Cold War-era NORAD installations, with their glowing cathode-ray displays showing information grids overlaid on dark maps; (3) the physical texture of legal documents from the 1970s -- carbon-copy smudges, faded typewriter ink on yellowing bond paper, the embossed seals of courts and notaries. These three references create a collision between architectural brutalism, military-industrial information display, and the tactile decay of paper bureaucracy. ## Layout Motifs and Structure The layout follows an **editorial-flow** architecture that borrows its logic from the physical structure of a legal brief: numbered sections, indented subsections, margin annotations, and a strict hierarchy of information that descends the page with the inevitability of a court ruling. **The Docket Grid:** The page is divided into a primary content column occupying 62% of the viewport width (left-aligned, never centered) and a persistent annotation margin on the right (28% width), with 10% reserved for structural gutters. The annotation margin mimics the margin notes of legal documents -- it contains supplementary metadata, cross-references, timestamps, and status indicators that relate to the adjacent content but exist in a parallel information layer. On viewports below 900px, the annotation margin collapses into inline expandable blocks marked with a paragraph symbol. **Vertical Rhythm:** Content blocks are separated by 4rem of dead space, punctuated by thin horizontal rules (1px, #3A3A3A) that span only the content column, never the full viewport. These rules evoke the printed lines on legal pads. Every fourth rule is slightly heavier (2px) and extends into the annotation margin, marking a "section break" equivalent to a new heading in a legal filing. **The Evidence Shelf:** At key narrative moments, the editorial flow interrupts itself with full-width "evidence shelf" blocks -- horizontal bands that break the two-column structure and present content edge-to-edge. These shelves have a darker background (#1A1A1A) and use a HUD-style overlay grid to present data, diagrams, or featured text. They function like exhibits entered into evidence -- interruptions to the flow that demand full attention before the narrative resumes. **No Hero Section:** The page begins not with a hero banner but with a sparse "case header" block: the domain name set in monospace type, a docket number (generated procedurally), a date stamp, and a one-line description, all formatted exactly like the header of a federal court filing. The first scroll reveals the editorial content below, already in progress, as if the reader has opened a document mid-reading. ## Typography and Palette **Typography:** - **Primary / Body / System Voice:** "IBM Plex Mono" (Google Fonts) -- weight 400 for body text, weight 600 for emphasis. This typeface was designed by Mike Abbink for IBM and carries the precise, institutional quality of mainframe-era computing. Its monospaced rhythm enforces a mechanical cadence that perfectly suits the courthouse terminal aesthetic. Body text is set at 0.95rem with line-height 1.75, providing generous vertical spacing that echoes the double-spaced formatting of legal filings. Letter-spacing: 0.01em. - **Headlines / Section Markers:** "Space Mono" (Google Fonts) -- weight 700, used exclusively for section headings and navigation labels. Set in ALL CAPS with letter-spacing: 0.15em, creating the blocky, institutional feel of government building signage. Sizes range from 1.4rem (subsection) to 3.2rem (primary headings). Headlines are always left-aligned, never centered. - **Annotation / Margin Notes:** "Courier Prime" (Google Fonts) -- weight 400 and 400 italic. This is the typeface of the annotation margin, the timestamps, the cross-references. Set at 0.8rem with line-height 1.5. Its direct connection to typewriter culture reinforces the paper-document metaphor. Italic variant used for editorial asides and parenthetical commentary. - **Display / Impact Moments:** "Major Mono Display" (Google Fonts) -- used sparingly for the case header docket numbers, for pull-quote callouts within evidence shelves, and for the loading screen text. This ultra-geometric monospace face has an industrial severity that borders on brutalist typography. Used at 2.5rem-5rem, always uppercase. **Palette:** The palette is **muted** -- deliberately desaturated, as if every color has been photocopied three generations deep, losing vibrancy with each pass through the machine. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Terminal Dark | #111111 | Near-black with warm undertone, the color of a powered-off CRT | | Background Secondary | Concrete Slab | #1E1E1E | Slightly lighter, used for content areas and card surfaces | | Background Tertiary | Filing Cabinet | #2A2A2A | The darkest "light" surface, for evidence shelves | | Text Primary | Bond Paper | #C8C0B0 | Warm off-white with a yellowish cast, like aged paper | | Text Secondary | Carbon Copy | #8A8478 | Muted warm gray, the color of a second-pass carbon duplicate | | Accent Primary | Phosphor Green | #4A7A5C | Desaturated green, the ghost of a CRT phosphor afterimage | | Accent Secondary | Docket Stamp | #8B6B4A | Muted amber-brown, the color of a faded rubber stamp impression | | Accent Tertiary | Microfilm Blue | #4A5A7A | Dusty slate blue, the tint of microfilm reader screens | | Rule Lines | Graphite | #3A3A3A | The color of pencil marks on legal pads | | Alert / Active | Exhibit Red | #7A4A4A | Muted brick red, for active states and important markers | ## Imagery and Motifs **Paper-Aged Texture System:** All imagery employs the **paper-aged** treatment -- a multi-layered CSS approach that transforms clean digital content into something that looks like it was printed decades ago and has been sitting in a courthouse archive ever since. The system uses: - A noise texture overlay (generated via SVG `` filter with `baseFrequency="0.65"` and `numOctaves="3"`) at 8% opacity, applied to all content areas - Subtle vignetting on content blocks using `box-shadow: inset 0 0 80px rgba(0,0,0,0.3)` to darken edges as if the paper has oxidized at its margins - A faint grid pattern (1px lines at 24px intervals, color #2A2A2A) visible beneath text areas, evoking the ruled lines of legal paper - On images and featured content blocks: `filter: contrast(1.1) saturate(0.6) sepia(0.15)` to push everything toward the yellow-brown spectrum of aged paper **Sci-Fi HUD Motifs:** The **sci-fi-hud** motif system creates a deliberate tension with the paper-aged imagery -- as if someone has projected a futuristic heads-up display onto the surface of decaying legal documents. Specific elements include: 1. **Targeting Brackets:** Thin L-shaped corner brackets (2px, #4A7A5C) that frame important content blocks. These brackets animate on scroll-entry, drawing themselves from the corners inward over 400ms with an ease-out-cubic timing. They evoke military targeting reticles or document registration marks. 2. **Status Bar Indicators:** Thin horizontal bars (4px height) positioned at the top of evidence shelf sections, colored in Phosphor Green (#4A7A5C) and animated with a left-to-right fill that suggests a loading or processing state. These bars use the **skeleton-loading** pattern -- they pulse with a subtle opacity oscillation (0.6 to 1.0, 2s cycle) to indicate ongoing system activity. 3. **Crosshair Grid Points:** At the intersection of major structural grid lines, small crosshair marks (+) appear in Microfilm Blue (#4A5A7A) at 40% opacity. These are purely decorative but reinforce the HUD overlay metaphor, suggesting that the content is being scanned or catalogued by an automated system. 4. **Data Readout Strips:** Narrow bands (20px height) of monospaced text that scroll horizontally at a slow, constant speed (CSS animation, 30s per cycle), displaying mock data strings: timestamps, hexadecimal sequences, docket reference numbers. These strips appear between major content sections, separating them like the ticker tape between segments on a news broadcast. Text color: Carbon Copy (#8A8478). 5. **Seal Watermarks:** Faint circular emblems (SVG, 200px diameter, 6% opacity) positioned behind content blocks at irregular intervals. These are geometric, mandala-like patterns composed of concentric circles, radiating lines, and small text fragments arranged in circular paths -- evoking both government seals and sci-fi interface elements. Generated purely in CSS/SVG using `transform: rotate()` on repeated line elements. **Decorative Motifs:** - **Tractor-Feed Holes:** A column of small circles (8px diameter, #1E1E1E fill with #2A2A2A stroke) running along the far-left edge of the viewport on desktop, spaced at 24px intervals, mimicking the perforated edges of continuous-feed printer paper. - **Redaction Bars:** Solid black rectangles (#111111) overlaid on decorative elements (never on real content), suggesting classified or redacted text. These appear randomly in the annotation margin and can be hovered to "declassify" (fade to reveal hidden text beneath). - **Carbon Copy Ghosts:** Selected paragraphs in the annotation margin appear with a slight horizontal offset (1px) and reduced opacity duplicate beneath them, as if they were printed via carbon paper. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport screen of Terminal Dark (#111111). After a 600ms pause, a skeleton-loading animation begins: thin lines of Phosphor Green (#4A7A5C) pulse into existence across the screen in the pattern of a legal document -- header lines, body text placeholders, margin rules -- as if a printer is warming up. Over 2 seconds, these skeleton lines resolve into the actual case header content: the domain name "courthouse.stream" in Major Mono Display at 4rem, a procedurally formatted docket number, today's date, and a terse one-line description. The effect should feel like a terminal boot sequence loading a document retrieval system. **Scroll-Driven Narrative Arc:** The editorial-flow layout tells a story as the user scrolls. The first viewport is the "cold open" -- sparse, institutional, all metadata and no content. The second viewport introduces the editorial body text, establishing the reading rhythm. By the third viewport, the first evidence shelf interrupts with its full-width darkness and HUD overlay, presenting a featured element. The narrative alternates between intimate editorial reading (two-column, quiet, paper-textured) and dramatic evidence presentation (full-width, dark, HUD-overlaid), creating a rhythm of tension and release. **Skeleton-Loading as Design Element:** The **skeleton-loading** pattern is not merely a loading state but a recurring visual motif. Throughout the page, certain content blocks periodically enter a brief skeleton state -- their content fading to placeholder lines that pulse in Phosphor Green for 1.5 seconds before resolving back to content. This effect triggers on scroll-entry for each section, as if the document retrieval system is loading each section on demand from a remote archive. The skeleton pulse uses a CSS keyframe animation: ``` @keyframes skeletonPulse { 0%, 100% { opacity: 0.4; background-position: -200% 0; } 50% { opacity: 0.8; background-position: 200% 0; } } ``` Background: `linear-gradient(90deg, transparent 25%, rgba(74,122,92,0.15) 50%, transparent 75%)` with `background-size: 200% 100%`. **HUD Overlay Activation:** When the user scrolls into an evidence shelf section, the HUD elements activate in sequence: first the targeting brackets draw themselves (400ms), then the status bar fills left-to-right (600ms), then the crosshair grid points fade in (300ms), and finally the data readout strip begins its horizontal scroll. This staggered activation creates the impression of a system initializing, analyzing the evidence before presenting it. **Annotation Margin Interactions:** On desktop, hovering over an annotation in the right margin causes it to shift 4px leftward and increase from 80% to 100% opacity, with a subtle green underline drawing itself (underline-draw pattern, 200ms). Clicking an annotation scrolls the main content to the referenced section with a smooth 400ms ease. On mobile, annotations appear as inline expandable blocks triggered by tapping the paragraph symbol. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero banners with background images, testimonial carousels, cookie consent overlays that break immersion, any centered layout structure, any warm/friendly color treatment, parallax scrolling on background images, rounded corners on any element (use sharp 0px border-radius exclusively). **BIAS TOWARD:** Full-screen narrative reading experiences, monospaced typography as the primary voice, horizontal data tickers, staggered HUD activation sequences, paper-texture overlays, the tension between aged-paper warmth and cold-terminal precision. ## Uniqueness Notes **Differentiators from other designs:** 1. **Dual-Layer Temporal Collision:** No other design in the portfolio juxtaposes two distinct time periods as its primary visual tension. courthouse.stream simultaneously inhabits the 1970s paper-bureaucracy era (aged paper textures, typewriter fonts, carbon copies, tractor-feed perforations) and a speculative-future surveillance aesthetic (HUD overlays, targeting brackets, data readout tickers, skeleton-loading as system initialization). This temporal collision -- old paper + future interface -- is structurally unique and creates a visual language that belongs to neither era. 2. **Annotation Margin as Parallel Information Layer:** While sidebars appear in 27% of designs, no other design uses the sidebar as a true annotation margin in the legal-document sense -- a parallel commentary track that runs alongside the primary content with cross-references, timestamps, and editorial asides in a distinct typeface (Courier Prime). This is not a navigation sidebar or a widget area; it is a typographic device borrowed from scholarly and legal publishing. 3. **Skeleton-Loading as Recurring Narrative Device:** The skeleton-loading pattern appears in only 5% of designs, and in those cases it functions as a utilitarian loading state. courthouse.stream repurposes skeleton-loading as a deliberate aesthetic motif -- content sections periodically dissolve into pulsing placeholder lines and reform, as if the courthouse's ancient document retrieval system is continuously fetching records from a remote archive. This transforms a UI pattern into a storytelling device. 4. **Tech-Mono Typography as Sole Voice:** While monospace fonts appear in 98% of designs, they are almost always secondary or accent typefaces. courthouse.stream uses tech-mono as its entire typographic system -- IBM Plex Mono for body, Space Mono for headlines, Courier Prime for annotations, Major Mono Display for impact moments. There is no sans-serif or serif typeface anywhere on the page. This all-monospace approach at 1% frequency (tech-mono) is effectively unique. 5. **Brutalist Refusal of Visual Comfort:** The design deliberately avoids every comfort-signaling pattern that dominates the portfolio: no rounded corners, no warm color palette, no friendly tone, no centered layout, no hero images, no gradient backgrounds. Every element is sharp-cornered, left-aligned, and muted. The brutalism is not decorative (as in neubrutalism) but structural -- every visual choice serves the courthouse-terminal metaphor. **Chosen seed/style:** aesthetic: brutalist, layout: editorial-flow, typography: tech-mono, palette: muted, patterns: skeleton-loading, imagery: paper-aged, motifs: sci-fi-hud, tone: nostalgic-retro **Avoided overused patterns:** Avoided playful aesthetic (97%), centered layout (98%), warm palette (100%), scroll-triggered parallax as primary animation (97%/81%), friendly tone (96%), minimal/photography imagery (96%/62%), vintage motifs (66%), gradient palette (92%). The design deliberately steers away from every pattern above 50% frequency, except where explicitly mandated by the assigned seed (muted palette at 71% is the only exception, and it is implemented in a specifically desaturated-institutional way rather than the generic "muted earth tones" that dominate other designs).