# Design Language for courthouse.stream ## Aesthetics and Tone courthouse.stream embodies a Swiss design aesthetic -- the methodical precision of the International Typographic Style applied to the streaming of courthouse proceedings. Imagine a public broadcasting control room in Zurich: clean monitors displaying live trial feeds, each framed in precise Helvetica labels with grid-aligned information panels. The "stream" suffix signals live, flowing content -- court proceedings as continuous broadcast. The visual language draws from Josef Muller-Brockmann's grid systems, Karl Gerstner's Programme Design, and the clean informational graphics of Swiss railway timetables. The sidebar layout creates a permanent navigational anchor (the "broadcast schedule") while the main area is a flowing content stream. The palette is warm sepia and nostalgic, evoking the wood-paneled courtrooms of a bygone era captured through the lens of Swiss modern design. The tone is dreamy-ethereal -- the stream is not a cold broadcast but a meditative observation, watching justice unfold as one watches a river. ## Layout Motifs and Structure The layout uses a **sidebar** structure -- a persistent left sidebar (280px fixed width) serves as the broadcast channel guide, while the main content area streams proceedings in a vertical flow. **Primary structure:** - **Broadcast header (80px fixed):** A thin top bar spanning the full viewport with the "courthouse.stream" logotype at left and a minimal clock/date display at right, separated by a single hairline rule. This header is position: fixed, creating a permanent broadcast frame. - **Sidebar (280px, full height):** A persistent left panel with a sepia-toned background, containing a vertically stacked list of "channels" or sections. Each channel is a small text block with a thin top border, styled like a broadcast schedule. The active channel is highlighted with a warm kinetic animation -- the text subtly oscillates in letter-spacing (breathing effect, 3s cycle). - **Main stream (calc(100vw - 280px)):** The primary content area, a continuous vertical scroll of "broadcast segments." Each segment is a full-width content block (max-width: 800px, centered within the available space) with generous top/bottom padding (clamp(40px, 5vh, 72px)). Segments are separated by thin grid-lines (1px horizontal rules in muted grey). - **Leather texture overlay:** The entire site has a barely perceptible leather texture overlay (SVG noise pattern at 2% opacity with warm toning) that adds the tactile quality of a courtroom bench. - **Closing credits strip (60vh):** A final segment styled as broadcast closing credits -- text scrolling upward in a slow CSS animation (translateY from 100% to -100% over 30 seconds). **Spacing philosophy:** The Swiss grid governs all spacing. A 12px baseline grid controls vertical rhythm. Margins are multiples of 12px. The sidebar's internal spacing is 24px between channel blocks. The main stream uses 48px between segment separators. Everything aligns. ## Typography and Palette **Fonts:** - **Headlines/Display:** "DM Sans" (Google Fonts) -- a geometrically precise sans-serif with slightly rounded terminals, capturing the Swiss modernist spirit while maintaining warmth. Used with kinetic-animated treatment (letter-spacing oscillating via CSS animation). Weight 700 for headlines. Size clamp(24px, 3vw, 44px). Letter-spacing: 0em base, animated to 0.04em and back. - **Body text:** "Libre Baskerville" (Google Fonts) -- a refined serif that brings classical courtroom gravitas to the modern Swiss layout. Weight 400 for body, 700 for emphasis. Size clamp(15px, 1vw, 18px). Line-height: 1.8. - **Sidebar/Labels:** "IBM Plex Sans Condensed" (Google Fonts) -- a condensed sans-serif for the sidebar channel listings and small labels, maximizing information density in the narrow panel. Weight 400, size 13px, letter-spacing: 0.02em. **Palette:** - **Courtroom Sepia** `#F5E8D0` -- primary background for the main stream, warm aged-paper tone - **Bench Wood** `#3A2818` -- primary text color, dark warm brown - **Sidebar Parchment** `#E8D8C0` -- sidebar background, slightly darker than the main area - **Grid Rule** `#C8B8A0` -- the color of hairline rules and grid lines - **Stream Blue** `#4A7BA0` -- accent for active states, links, and the broadcast header clock - **Gavel Accent** `#B85C30` -- warm rust accent for highlights and important markers ## Imagery and Motifs **Core visual motifs:** - **Grid-line system:** The Swiss grid is made partially visible through thin 1px rules (Grid Rule color) that separate content segments. These are not decorative but structural, emphasizing the precision of the broadcast layout. Horizontal rules appear at exact 48px intervals in the main stream. - **Kinetic-animated sidebar:** The active channel in the sidebar has a subtle kinetic animation -- its letter-spacing breathes between 0 and 0.04em over a 3-second ease-in-out cycle, creating the impression of a live, active broadcast. This is the only animated element in the sidebar, making it immediately identifiable. - **Leather texture background:** A full-page SVG feTurbulence noise pattern (baseFrequency: 0.4, numOctaves: 3, opacity: 0.025) tinted warm, creating a barely perceptible leather-grain texture across all surfaces. This adds the courtroom material quality without distracting from the Swiss typographic clarity. - **Broadcast control elements:** Small, functional-looking UI elements scattered through the sidebar -- thin progress bars (4px height, Stream Blue fill on Grid Rule background), small circular "live" indicators (6px diameter, Gavel Accent with a pulse animation), and timestamp labels in condensed type. - **Credits scroll:** The closing section features a slow upward text scroll (CSS translateY animation) that mimics broadcast end-credits, listing conceptual "credits" for the courthouse stream in centered type against a darkened background. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like tuning into a public broadcast of courthouse proceedings. The persistent sidebar is the channel guide, the main stream is the live feed, and the credits roll signals the session's end. The experience should be calm, methodical, and continuous -- a stream one can watch indefinitely. **Opening animation sequence:** - Frame 0-200ms: Courtroom Sepia background. Nothing visible. - Frame 200-600ms: The broadcast header slides down from above (translateY(-80px) to 0) and locks into position: fixed. The logotype and clock appear simultaneously. - Frame 600-1200ms: The sidebar slides in from the left (translateX(-280px) to 0). Channel listings appear one by one with a 100ms stagger, each bouncing slightly (bounce-enter easing). - Frame 1200-1800ms: The first channel becomes "active" -- its kinetic letter-spacing animation begins. The "live" indicator dot appears with a pulse. - Frame 1800-2400ms: The main stream's first segment fades in (opacity 0 to 1, translateY(20px) to 0). **Scroll behavior:** Main stream segments enter with bounce-enter animations (scale 0.98 to 1 with slight overshoot, combined with fade-in). Grid-line rules appear exactly at the transition between segments. The sidebar remains fixed throughout scrolling. When the user scrolls to a new section that corresponds to a different sidebar channel, the active channel smoothly transitions (the kinetic animation transfers to the new channel over 300ms). **Interaction details:** - Sidebar channels respond to hover with Stream Blue text color and a left border accent (3px solid Stream Blue, transitioning from 0 to 3px width). - Content segment links are underlined with Grid Rule color, transitioning to Stream Blue on hover. - The broadcast header clock shows a live-updating time (or a simulated time for static sites). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Swiss design applied to court broadcasting:** The combination of International Typographic Style precision with the concept of live courthouse streaming creates a unique thematic intersection. The grid becomes both a design system and a broadcast schedule structure. 2. **Kinetic-animated sidebar channel indicator:** The breathing letter-spacing animation on the active sidebar channel is a subtle but distinctive interaction that conveys "live" status through typography alone, without relying on color changes or icons. 3. **Broadcast-credits closing section:** The upward-scrolling credits animation that closes the site is a direct reference to television broadcast end-credits, extending the "stream" metaphor into the site's conclusion in a way no other design employs. 4. **Sidebar-as-channel-guide metaphor:** Recontextualizing the sidebar layout pattern as a broadcast channel guide (rather than a typical navigation menu) gives the familiar pattern a new meaning and ties it directly to the "stream" concept. **Chosen seed/style:** aesthetic: swiss, layout: sidebar, typography: kinetic-animated, palette: sepia-nostalgic, patterns: bounce-enter, imagery: leather-texture, motifs: grid-lines, tone: dreamy-ethereal **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns as primary. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used sidebar (15%) layout, bounce-enter (10%) pattern, and leather-texture (4%) imagery -- less common choices.