# Design Language for courthouse.stream ## Aesthetics and Tone A mid-century modern broadcast studio where justice is streamed live -- courthouse.stream renders as a 1950s television control room updated for the streaming era: wood-paneled warmth, concrete structural honesty, and the bold geometric confidence of Bebas Neue headlines create a space that treats legal proceedings as public theater worth broadcasting. The mid-century aesthetic draws from the era when courtroom dramas were prime-time television: clean lines, functional beauty, and the belief that democratic institutions deserve design excellence. The monochromatic palette enforces focus: every element exists in the spectrum between pure white and absolute black, with the architecture of grey values creating depth, hierarchy, and drama without any chromatic distraction. This is justice in high-contrast broadcast -- no color to editorialize, only the clarity of black and white. The tone is broadcast-professional: authoritative yet accessible, the voice of a trusted news anchor who respects both the institution and the audience. Sentences are clear and purposeful. Jargon is avoided. The stream is for everyone. Visual references: the CBS Eye designed by William Golden; Eero Saarinen's TWA Terminal reinterpreted as a broadcast studio; the title cards of 12 Angry Men; a mid-century Braun radio tuned to a courthouse frequency. ## Layout Motifs and Structure The layout uses a **stacked** architecture -- horizontal bands of content that span the full viewport width, stacking vertically like the frames of a film strip or the layers of a broadcast signal. **Stacked System:** - Content is organized in full-width horizontal bands, each 50vh-100vh tall - Alternating bands use contrasting values: dark (#1a1a1a) then light (#f0f0f0) then dark, creating a strong visual rhythm - Within each band, content is constrained to a 720px max-width column, but decorative elements (rules, borders) extend to full width - Band transitions are sharp -- no gradients between sections, just clean cuts like broadcast switching **Section Flow:** 1. **The Signal:** Opening band (100vh), dark background. "COURTHOUSE.STREAM" in massive Bebas Neue, centered. Below it, a single horizontal line spans the full viewport width (1px, white, 40% opacity). Below that: "LIVE" indicator -- a small circle that pulses. 2. **The Broadcast:** Alternating dark/light bands presenting content. Dark bands hold primary content; light bands hold supporting information, quotes, or data displays. 3. **The Control Room:** A band styled as a broadcast mixing console: a row of "monitors" (bordered rectangles) showing different content streams, arranged horizontally with even spacing. 4. **The Transmission:** A narrow dark band with scrolling text (CSS marquee-style animation) showing a stream of legal terms/concepts, like a news ticker. 5. **The Sign-Off:** Final band. The domain name, smaller. A horizontal rule. "END OF TRANSMISSION" in Bebas Neue, tracked wide. Fade to black (literal: a gradient from content to pure black over the final 200px). ## Typography and Palette **Typography:** - **Headlines/Display:** "Bebas Neue" (Google Fonts) -- the definitive condensed sans-serif for impact headlines, with its tall, narrow proportions creating maximum vertical impact in the stacked layout. Used at 4rem-10rem, weight 400 (the only weight), letter-spacing: 0.05em-0.15em, line-height 0.95. The extreme verticality of Bebas echoes broadcast title cards and mid-century poster design. - **Body:** "Inter" (Google Fonts) -- a clean, modern sans-serif for body text that provides excellent readability against both dark and light backgrounds. Used at 1rem, weight 400, line-height 1.7. - **System/Metadata:** "IBM Plex Mono" (Google Fonts) -- for timestamps, technical metadata, and broadcast-style indicators. Used at 0.8rem, weight 400. **Palette (Monochromatic):** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Pure Black | Absolute | #000000 | Deepest background, text on light | | Near Black | Primary dark | #1a1a1a | Dark band backgrounds | | Dark Grey | Secondary dark | #2a2a2a | Card/monitor backgrounds on dark | | Mid Grey | Neutral | #666666 | Borders, secondary text on light | | Light Grey | Muted | #aaaaaa | Muted text on dark | | Pale Grey | Light surface | #e8e8e8 | Light band secondary | | Off White | Light band BG | #f0f0f0 | Light band backgrounds | | Pure White | Absolute | #ffffff | Text on dark, highlights | | Broadcast Red | Sole color | #cc0000 | Only for "LIVE" indicator | The palette is strictly monochromatic with a single exception: Broadcast Red (#cc0000) appears only on the "LIVE" indicator dot, making it the most visually powerful element on the page through chromatic isolation. ## Imagery and Motifs **Broadcast Bars:** Full-width horizontal rules (1px, white or black depending on band) serve as the primary structural element, evoking both broadcast test patterns and the horizontal scanning lines of CRT monitors. Rules appear above and below each content band, creating clean delineation. **The Live Indicator:** A small circle (12px) in Broadcast Red (#cc0000) with an animated pulse: the circle has a box-shadow that expands from 0 0 4px to 0 0 16px #cc0000 and back over 2 seconds. This is the only color on the entire page, making it impossible to ignore -- a single red dot broadcasting that this stream is alive. **Monitor Frames:** The Control Room section contains "monitors": rectangles (aspect-ratio: 16/9) with 2px white borders on dark background, or 2px black borders on light background. Each monitor contains content with a subtle scanline overlay (repeating-linear-gradient, 1px transparent/1px rgba(0,0,0,0.05)). **Condensed Typography as Pattern:** Bebas Neue headlines at extreme sizes (8-10rem) fill the width of content columns, creating typographic walls where the letterforms themselves become visual texture. The condensed proportions mean more characters per line, increasing the density-as-pattern effect. **Film-Strip Stacking:** The dark/light alternation of bands, combined with the full-width rules between them, creates a film-strip visual rhythm. Each band is a frame, the rules are the sprocket holes. The user scrolls through footage. ## Prompts for Implementation Build this site as a live broadcast the user tunes into. The Signal (hero) loads with the horizontal rule drawing from center outward (width: 0 to 100vw, 1.5s), then the title appearing one word at a time ("COURTHOUSE" then ".STREAM", 300ms gap), then the LIVE indicator fading in with its first pulse. The stacked band layout creates a strong scroll rhythm: each band transition is a clean cut, no cross-fades or overlaps. Dark-to-light transitions should feel like switching cameras. The Control Room monitors load with their borders drawing themselves (border-width from 0 to 2px, staggered 100ms per monitor). The Transmission ticker scrolls continuously at a reading pace. The Sign-Off section uses a literal fade to black: a CSS gradient overlay on the final 200px transitions to pure black, creating a broadcast ending effect. Throughout, the monochromatic palette creates the gravitas of documentary photography applied to web design. The single Broadcast Red dot should remain visible (position: fixed, top-right corner, z-index: 999) throughout the scroll, a constant reminder the stream is live. Avoid color, decoration, illustrations, cards with shadows, rounded corners, and any playful elements. This is serious public broadcasting. ## Uniqueness Notes 1. **Monochromatic broadcast aesthetic:** No other design commits to a fully monochromatic palette with a single red accent, creating a uniquely austere, documentary-grade visual language. 2. **Stacked film-strip rhythm:** The dark/light band alternation with full-width rules between them creates a film-strip scroll experience distinct from standard section-based layouts. 3. **Persistent LIVE indicator as sole color:** The fixed-position red dot, the only chromatic element in the entire design, creates a broadcasting metaphor that persists throughout the user's experience. 4. **Condensed typography as architectural wall:** Bebas Neue at extreme sizes filling content widths creates typographic structures that function as visual landmarks in the scroll. Document chosen seed/style: aesthetic: mid-century, layout: stacked, typography: bebas, palette: monochromatic, patterns: broadcast-bars, imagery: scanline-overlay, motifs: live-indicator, tone: broadcast-professional Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)