# Design Language for courthouse.app ## Aesthetics and Tone A retro-futuristic legal interface from a timeline where courthouses were designed by Googie architects and Saul Bass -- courthouse.app renders justice as a streamlined, optimistic system encased in navy blue, chrome trim, and playful typography that makes the law feel approachable rather than intimidating. The retro-futuristic aesthetic draws from 1960s visions of automated government: curved consoles, illuminated panel displays, atomic-age optimism applied to civic infrastructure. Everything suggests that the future of law is not dystopian surveillance but a well-designed public service. The tone is playful-informative: the site explains serious legal concepts with the warmth and clarity of a well-designed museum exhibit. Humor is gentle and structural (in layout choices, not in jokes). Complex ideas are broken into digestible panels. The overall mood says: the law belongs to everyone, and understanding it should be as easy as reading a well-illustrated guidebook. Visual references: the title sequences of 1960s courtroom dramas designed by Saul Bass; the control panels of Star Trek's original series; a mid-century modern civic building's wayfinding signage; the playful instructional diagrams of Isotype by Otto Neurath. ## Layout Motifs and Structure The layout uses a **scroll** architecture -- a continuous, curated vertical experience where sections flow into each other with deliberate pacing and visual transitions. **Scroll System:** - Content is organized as a single scrolling sequence with full-viewport section breaks - Each section has a distinct background treatment (alternating between navy, cream, and accent colors) creating a "panel" effect as you scroll - Section transitions use horizontal wipe reveals (content slides in from right as previous section scrolls away) - Content within sections uses a 2-column layout at max-width 960px: left column (40%) for labels/navigation, right column (60%) for content **Section Flow:** 1. **The Lobby:** Full-viewport hero with "COURTHOUSE.APP" in playful display type, a retro-futuristic badge/crest (CSS-drawn shield with geometric elements), and a pulsing "ENTER" prompt styled as a illuminated panel button 2. **The Directory:** A wayfinding-style section listing what the app does/contains, styled as a building directory sign with navy background and cream text, each item with a retro arrow indicator 3. **The Chambers:** Main content sections, each occupying near-full viewport, with illustrated (CSS) diagrams explaining legal concepts. Each chamber has a number displayed large (retro-style) in the left column 4. **The Record:** A scrolling ticker-style section showing data/updates in a retro LED display format (monospace text, character-by-character reveal) 5. **The Steps:** Closing section styled as descending courthouse steps -- content blocks stacked with increasing left-margin, creating a visual staircase effect ## Typography and Palette **Typography:** - **Headlines/Display:** "Baloo 2" (Google Fonts) -- a rounded, friendly display face with playful curves that soften the institutional context of a courthouse. Used at 2.5rem-5rem, weight 700, letter-spacing: 0.01em, line-height 1.2. The rounded forms echo the retro-futuristic aesthetic's optimistic curves while making legal content feel approachable. - **Body:** "Nunito" (Google Fonts) -- a warm, rounded sans-serif for comfortable reading that maintains the friendly quality. Used at 1.05rem, weight 400, line-height 1.7. - **System/Data:** "Space Mono" (Google Fonts) -- for any data displays, ticker text, and technical/legal reference numbers. Used at 0.85rem, weight 400, with slight letter-spacing (0.02em). **Palette (Navy-focused):** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Navy | Primary dark | #0a1628 | Primary background, header | | Navy Mid | Medium dark | #152238 | Section backgrounds, cards | | Bright Navy | Accent dark | #1e3a5f | Interactive backgrounds | | Cream | Light base | #faf5eb | Text on dark, light section backgrounds | | Warm White | Clean light | #fffdf8 | Card interiors | | Retro Orange | Primary accent | #ff8c42 | CTAs, badges, highlights | | Retro Teal | Secondary accent | #2ec4b6 | Secondary actions, data display | | Chrome Silver | Trim | #c8d0d8 | Borders, dividers, decorative lines | | Soft Gold | Warm accent | #e8c547 | Stars, special indicators, badge elements | The navy foundation establishes authority and trust (courthouse), while the retro orange and teal accents inject the playful optimism of the retro-futuristic aesthetic. Chrome silver provides the space-age trim. ## Imagery and Motifs **Retro-Futuristic Badge/Crest:** The hero features a CSS-drawn courthouse badge: a shield shape (clip-path) in Deep Navy with Chrome Silver border, containing geometric elements (a balance scale simplified to circles and lines, a star, horizontal stripes). This badge is purely CSS -- clip-path for the shield, pseudo-elements for internal geometry. **Illuminated Panel Buttons:** Interactive elements are styled as retro panel controls: rounded rectangles (border-radius: 24px) with a subtle inset shadow (simulating a recessed panel), background in Retro Orange or Teal, and a glow effect (box-shadow: 0 0 12px color at 30% opacity) that brightens on hover as if a backlight is intensifying. **Wayfinding Arrows:** Navigation elements and list items use retro-style directional indicators: CSS triangles (border-trick) or arrow shapes pointing right, in Chrome Silver or Retro Orange, before each item. These echo mid-century civic signage systems. **Retro Number Display:** Section numbers in the Chambers section display in a large retro-digital style: oversized (6rem), weight 800, with a subtle outline effect (text-stroke: 1px #c8d0d8) and slight perspective transform, evoking illuminated building floor numbers. **Ticker/LED Text:** The Record section uses a character-by-character text reveal animation with a slight green glow on each character (text-shadow: 0 0 4px #2ec4b6), simulating an LED display board. Characters appear at 40ms intervals. ## Prompts for Implementation Build this site as a retro-futuristic government building the user walks through. The Lobby hero loads with the badge drawing itself (SVG path animation, 2s), then the title typing in (character by character, 60ms), then the ENTER button illuminating with a warm glow (opacity 0 to 1 over 800ms with box-shadow growing). Scrolling into the Directory section triggers a horizontal wipe from right: content slides in as a panel. Each Chamber section loads its large retro number first (scale from 2x to 1x, 400ms) then content fades in from the right column. The Record ticker section begins its character-by-character animation when scrolled into view, creating continuous motion. The Steps closing section uses staggered entry: each step-block appears with a slight delay (100ms) and slides in from the left with increasing margin, creating the visual descent. Chrome Silver borders and dividers throughout create the space-age institutional framework. Everything should feel optimistic, well-organized, and welcoming. Avoid dark/dystopian legal imagery, corporate coldness, aggressive CTAs, or intimidating legal jargon in the UI. This courthouse is for everyone. ## Uniqueness Notes 1. **Retro-futuristic civic optimism:** No other design applies 1960s space-age optimism to legal/courthouse theming, creating a uniquely welcoming institutional aesthetic. 2. **Illuminated panel button interactions:** Styling interactive elements as backlit retro control panels provides distinctive tactile feedback not found in flat or material design systems. 3. **Courthouse staircase closing layout:** The descending-margin "steps" section creates a visual metaphor (walking down courthouse steps) through pure CSS layout, unique in the collection. 4. **Wayfinding arrow navigation system:** The mid-century civic signage navigation language brings physical building wayfinding to web interaction, creating an intuitive spatial metaphor. Document chosen seed/style: aesthetic: retro-futurism, layout: scroll, typography: playful, palette: navy, patterns: panel-glow, imagery: badge-css, motifs: wayfinding, tone: playful-informative 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%)