# Design Language for courthouse.app ## Aesthetics and Tone courthouse.app brings a cyberpunk aesthetic to the halls of justice -- imagine a neon-drenched courtroom of 2085 where holographic evidence floats in mid-air, digital gavels crack with electric arcs, and justice is rendered through augmented reality overlays on a rainy megacity skyline. The "courthouse" evokes authority, procedure, and institutional gravitas, while ".app" signals a digital tool or platform. The fusion creates a vision of future justice: technologically advanced but still rooted in the ritual theater of the courtroom. The visual language draws from Blade Runner's rain-soaked neon urbanism, Ghost in the Shell's data-overlay interfaces, and the brutalist concrete of Tadao Ando's architecture reimagined with holographic projections. Coastal blues and cyans cut through dark backgrounds like the glow of legal terminals in a dimly lit chamber. The tone is luxurious -- justice as a premium experience, the courthouse as a temple of consequence rendered in light and glass. ## Layout Motifs and Structure The layout uses a **centered** composition with a strong vertical axis, evoking the symmetry and formality of neoclassical courthouse architecture -- but rendered in cyberpunk materials. **Primary structure:** - **Atrium entrance (100vh):** A full-viewport section with a dark background pierced by a single central column of light (a narrow vertical gradient, 80px wide, from transparent through Neon Cyan to transparent). The title "courthouse.app" floats at center in geometric sans type. Below the title, a horizontal "beam" of light (2px height, Neon Cyan, full width) acts as a formal divider. The impression is of entering a dark, cavernous atrium lit by a single overhead strip. - **Evidence gallery (variable, ~200vh):** Centered content blocks (max-width: 640px) flanked by floating elements -- small holographic-style cards that appear to hover at different z-depths (box-shadow and slight scale to simulate depth). Each evidence block has a thin neon border on one side (alternating left/right) creating a rhythm of asymmetric accents on a centered column. - **Verdict chamber (100vh):** The visual centerpiece -- a dark section with a single large floating element at center: a custom CSS illustration of a digital gavel (geometric shapes composited). The gavel is rendered in Neon Cyan wireframe (border only, no fill), rotating slowly on the Y-axis (CSS 3D transform, perspective). - **Closing arguments (80vh):** A section where content is arranged in two opposing columns (prosecution vs. defense metaphor, each 280px wide, separated by a 40px illuminated divider), centered on the page. - **Adjournment footer (40vh):** A minimal dark footer with credits and links in muted type. A single thin neon line stretches across the top of the footer as a formal divider. **Spacing philosophy:** Strict centering with generous vertical margins (clamp(48px, 6vh, 80px)) between elements. The centered column never exceeds 640px. Floating flanking elements are positioned at 8-12vw from center. Symmetry is the organizing principle. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Orbitron" (Google Fonts) -- a geometric, futuristic display font that captures the cyberpunk-courthouse fusion. Its wide, squared letterforms suggest both authority and technology. Weight 700 for headlines. Size clamp(24px, 3.5vw, 48px). Letter-spacing: 0.06em for wide, commanding presence. All-caps treatment. - **Body text:** "Exo 2" (Google Fonts) -- a geometric sans-serif with a futuristic character that remains highly readable at body sizes. Weight 400 for body, 600 for emphasis. Size clamp(15px, 1.05vw, 17px). Line-height: 1.75. - **Legal annotations:** "Space Mono" (Google Fonts) -- a monospaced font for case numbers, legal citations, and system-message-style text. Weight 400, size 13px, letter-spacing: 0.04em. **Palette:** - **Chamber Dark** `#0A0E18` -- primary background, a near-black with deep blue undertone - **Justice White** `#E0E4EC` -- primary text, a cool grey-white - **Neon Cyan** `#00D4FF` -- primary accent, the signature cyberpunk glow for borders, highlights, and the atrium light - **Hologram Blue** `#2A6FDB` -- secondary accent for floating elements and depth layers - **Gavel Gold** `#D4A843` -- warm accent for emphasis, verdicts, and important UI moments - **Evidence Red** `#FF3366` -- cautionary accent used sparingly for warnings, objections, and critical highlights ## Imagery and Motifs **Core visual motifs:** - **Holographic floating elements:** Cards and decorative elements that appear to hover in 3D space. Achieved with layered box-shadows (multiple shadows at increasing blur/spread, tinted with Neon Cyan at low opacity), slight perspective transforms, and a subtle backdrop-filter: blur(2px) on their backgrounds. These "holograms" float beside the centered content column. - **Neon wireframe illustrations:** Key visual elements (the gavel, a scales-of-justice symbol, a courthouse facade) rendered as wireframe outlines using CSS borders, outlines, and strategically placed box-shadows in Neon Cyan. No fills -- only glowing edges, as if the objects are holographic projections. - **Custom courthouse illustration:** The verdict chamber features a CSS-constructed gavel -- a rectangular "head" (60px x 20px, border: 2px solid Neon Cyan, no fill) connected to a "handle" (a thin rectangle below). The entire construct rotates slowly via CSS animation (rotateY cycling 0 to 360deg over 12 seconds, with perspective: 800px on the parent). - **Light beam dividers:** Instead of traditional horizontal rules, sections are separated by "beams" of light -- thin horizontal lines (1-2px) with a gradient glow effect (box-shadow: 0 0 10px Neon Cyan at 30% opacity) and a subtle animation that pulses the glow intensity over 4 seconds. - **Card-flip evidence cards:** Certain content cards have a front-back dual-face treatment. On hover, they perform a card-flip animation (rotateY(180deg), backface-visibility: hidden), revealing additional information on the "back" -- a darker surface with Neon Cyan text. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like walking through a futuristic courthouse -- entering the dark atrium, examining evidence, witnessing the verdict, hearing closing arguments, and adjourning. Each section deepens the immersion in the cyberpunk-judicial world. **Opening animation sequence:** - Frame 0-300ms: Chamber Dark background. Total darkness. - Frame 300-800ms: The central light beam appears -- the narrow vertical gradient column fades in from top to bottom (translateY animation on a pseudo-element), casting a Neon Cyan glow. - Frame 800-1400ms: "courthouse" materializes in Orbitron, each letter card-flipping into existence from backface (individual span elements with rotateY(180deg) to rotateY(0), staggered 60ms per letter). - Frame 1400-1800ms: ".app" appears below with a simple fade-in and a brief glow pulse (text-shadow expanding from 0 to 10px and back). - Frame 1800-2400ms: The horizontal beam divider draws itself from center outward (width transitioning from 0 to 100vw). Floating holographic elements begin materializing at the viewport edges. **Scroll behavior:** Evidence gallery blocks enter with card-flip animations (each block starts at rotateY(90deg) and flips to rotateY(0) when 30% visible). Floating holographic flanking elements have a slight parallax movement (translateY shifts relative to scroll position at 0.3x rate). The gavel in the verdict chamber begins its rotation when the section enters the viewport. The closing arguments' two columns enter from opposing sides (translateX animations converging to center). **Interaction details:** - Evidence cards perform full card-flip on hover, revealing back-face content. - Holographic floating elements glow brighter on hover (box-shadow intensity increases from 30% to 60% opacity). - The horizontal beam dividers pulse brighter when the user's scroll passes them (IntersectionObserver triggering a CSS animation). - Neon wireframe illustrations respond to hover with a brief shake effect (translateX oscillating +-2px for 300ms). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Cyberpunk courtroom narrative fusion:** Merging the institutional gravitas of a courthouse with cyberpunk neon aesthetics creates a thematic space that no other design explores. The courtroom ritual (entrance, evidence, verdict, arguments, adjournment) provides a unique narrative structure. 2. **CSS wireframe gavel illustration:** A rotating 3D wireframe gavel constructed entirely from CSS borders and transforms is a distinctive centerpiece element. The combination of simple geometric construction with 3D rotation creates an arresting visual. 3. **Centered-axis light-column composition:** The single vertical beam of light that anchors the atrium section creates a unique spatial metaphor -- the "pillar of justice" as a literal light source around which all content organizes. This architectural-lighting approach to layout centering is distinct. 4. **Card-flip evidence reveal pattern:** Using the card-flip animation as a content-reveal mechanism (front: summary, back: detail) ties the interaction pattern to the courtroom metaphor of examining evidence, making the animation functional rather than decorative. **Chosen seed/style:** aesthetic: cyberpunk, layout: centered, typography: geometric-sans, palette: coastal-blend, patterns: card-flip, imagery: custom-illustration, motifs: floating-elements, tone: luxurious **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns as primary. Avoided card-grid (85%) layout. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used card-flip (7%) pattern and custom-illustration (2%) imagery -- both underused.