# Design Language for courthouse.app ## Aesthetics and Tone - Style: Memphis-Milano remixed for legal-tech. Geometric primitives (squiggles, grids, half-circles, confetti tiles) collide with the cool precision a courthouse-records app requires. Visual direction is a "dreamlike civics manual" - imagine a 1986 Italian wallpaper sample-book describing the United States court system through the haze of a Fruitiger metro panel. Inspirations: Nathalie Du Pasquier textile prints, Otl Aicher's Munich 1972 pictograms, Frutiger's Charles de Gaulle airport signage, Apple Macintosh System 1 desktop patterns, late-1990s Tibor Kalman magazine spreads, plus the soft chromatic glow of a Tron-Light-Cycle replay played in pastel. - Tone: Dreamy, ethereal, slightly hypnotic. The product (a court-docket / public-records app) is treated like a friendly cosmic library - serious institutional content rendered with floating neon dust and weightless geometric memorabilia. Voice is composed and curious, never adversarial; copy should feel like a museum docent explaining how due process works while a kaleidoscope spins behind them. - Differentiators: (1) Memphis-Milano language applied to a category that almost universally defaults to navy-blue-government UI; (2) typography pairs Frutiger-clean humanist sans with hand-drawn squiggle annotations - signage clarity meets sketchbook warmth; (3) ambient particle ecosystems where dust motes are tiny gavels, scales, paragraph-pilcrows and pastel triangles rather than generic dots. ## Layout Motifs and Structure - Master grid: a 12-column portfolio-grid where every "tile" is a court-records artifact (case, docket, filing, district overview). Tiles are not equal - the grid is asymmetric on purpose: one large 6x6 hero tile per row, surrounded by 2x2 and 3x4 satellite tiles, mimicking a Memphis dot-and-block composition. Gutters are a generous 32px so the negative space feels like a gallery wall, not a dashboard. - Hero zone: full-viewport (100vh) "entrance hall." A horizon line of pastel mint at 62% height; above it floats a counter-animation showing court statistics that scroll backward toward zero on first paint, then settle at the live number ("4,912,338 public dockets indexed"). Behind the counter, three large Memphis primitives (a soft-coral half-disc, an electric-cyan zigzag, a buttercream-yellow confetti scatter) drift on parallax tracks. - Section rhythm: alternating "Quiet Tile" and "Loud Tile" rows. Quiet rows are wide horizontal portfolio strips of 3 cards with thin 1px hairline borders in #F2F2EC. Loud rows break the grid entirely - a single oversized geometric shape (e.g. a 70vw squiggle) holds the section title in its negative space, with body copy wrapping the curve via CSS shape-outside. - Navigation: top-anchored thin strip (52px) that turns into a floating Memphis "name plate" on scroll - a coral parallelogram that gently rotates 4 degrees and contains the logo + 5 nav items in Frutiger small-caps. No mega-menu, no sticky CTA bar, no pricing block, no stat-grid trio. Footer is a single Memphis "carpet" - a tiled SVG pattern of confetti dots, with three text columns floating above it like balloons. - Mobile: same portfolio-grid collapses to a vertical "stacked-postcard" stream where each tile rotates 1-2 degrees alternating left/right, preserving the scrapbook feel. ## Typography and Palette - Primary display: "Frutiger" not on Google Fonts, so we use the closest Google Fonts equivalent: **Hanken Grotesk** (variable, weights 300-900) - it inherits Frutiger's open apertures and humanist warmth. Used for H1-H3, nav, counter digits. - Secondary text: **Inter Tight** (Google Fonts) for long-form body copy and dense legal-listing tables - keeps reading clean at 15px. - Annotation / accent: **Caveat** (Google Fonts) for hand-scrawled marginalia on Memphis tiles ("filed 04-12", "see also", arrows pointing to numbers). Used sparingly, max 2 phrases per viewport. - Monospace (court-citation strings only): **JetBrains Mono** (Google Fonts) at 13px in #2B2A33. - Type scale: 88 / 56 / 36 / 24 / 18 / 15 / 13. Tight tracking on display (-0.02em), normal on body, wide tracking (+0.06em) on small-caps nav. - Palette - "Neon Electric Pastel" - 7 hues calibrated so the neon never burns and the pastels never go cute: - Background canvas: **#F7F4EC** (warm bone, never pure white) - Ink / primary text: **#1B1B2E** (near-midnight indigo, not black) - Electric Cyan (primary accent, links, active states): **#00E5FF** - Hot Magenta (highlights, particle bursts): **#FF2D87** - Acid Lime (success, counter-animate finish state): **#C6F432** - Pastel Coral (Memphis half-discs, hover surfaces): **#FFB39C** - Buttercream Yellow (confetti scatter, marginalia underline): **#FFE66B** - Mint Horizon (hero horizon line, dividers): **#C7EFE0** - Contrast pairs guaranteed: ink #1B1B2E on canvas #F7F4EC = 14.8:1; cyan #00E5FF only used as accent against ink. ## Imagery and Motifs - Mixed-media collage as the hero treatment: each large tile combines (a) a clipped black-and-white archival photograph of a courthouse facade or marble columns, (b) a flat-vector Memphis primitive overlapping it, (c) a hand-drawn Caveat-font annotation, (d) a half-tone halftone dot mask for texture. Photographs are desaturated to 0% then re-tinted with a 12% mint or coral gel. - Particle-effect motif (the assignment-named pattern): an ambient field of ~80 floating glyphs - tiny gavels, sigma marks, pilcrow paragraphs, scale-of-justice silhouettes, three-dot ellipses, and Memphis confetti triangles. They drift on lazy sine waves at 0.4-1.2 px/frame, with parallax bound to scroll position. On hovering a tile, nearby particles are repelled outward 80px in 600ms ease-out, then drift back. No mouse-trail, no cursor-follow - particles ignore the cursor; they only react to scroll and tile-hover. - Counter-animate motif: every numeric statistic on the page (case counts, district totals, filing-age averages) animates from a randomized higher value DOWN to its real value over 1.4s with a cubic-bezier(0.22, 1, 0.36, 1) ease, while its color crossfades from #FF2D87 to #1B1B2E. Numbers >1000 use thin-space thousands separators (U+2009). - Decorative pattern library: 6 reusable SVG primitives - "squiggle wave," "stacked half-discs," "confetti scatter," "checkerboard slant," "polka clusters," "zigzag bolt." Each available in all 7 palette colors. Used as section dividers, tile backgrounds, and footer carpet. - Iconography: custom 1.5px-stroke Frutiger-style line icons for navigation and tile categories (Dockets, Filings, Districts, Judges, Calendars). All icons sit inside a 32px Memphis primitive (circle, parallelogram, or rounded square) tinted from the palette. ## Prompts for Implementation - Treat the home page as a single full-screen narrative scroll with seven acts: (1) Entrance Hall counter; (2) "What is courthouse.app" mixed-media manifesto tile; (3) Live Dockets portfolio grid; (4) The Carpet of Districts (giant SVG pattern of all 94 federal districts as colored tiles); (5) A Day in Court (timeline that scrolls horizontally inside a vertical scroll, with particles flowing along the timeline); (6) Citation Engine demo (interactive Caveat-font annotation that auto-completes a Bluebook citation); (7) Sign-up "name plate" - a single rotated Memphis parallelogram form, no pricing tier table. - Animation guidance: prefer slow, dreamlike easing (cubic-bezier(0.22, 1, 0.36, 1), durations 800-1400ms). Counter-animations are the only "fast" element (1400ms). Particle field uses requestAnimationFrame at 60fps, capped to 80 entities, with prefers-reduced-motion fallback that freezes them and reduces opacity to 35%. - Interactions: hovering any tile lifts it 6px on Y, rotates it -1deg, casts a soft 0-12px-32px rgba(27,27,46,0.12) shadow, and repels nearby particles. Clicking expands the tile inline (FLIP technique) into a half-screen reading panel with the rest of the grid blurring to 4px and dimming to 65% opacity. - AVOID: CTA-heavy layouts, pricing blocks, stat-grid trios, generic hero gradients, isometric SaaS illustrations, dark-mode toggle, testimonial carousel, mega-menus, sticky bottom bars, cookie-banner-style modals, "trusted by" logo wall. - Accessibility: every Memphis primitive is `aria-hidden`. Counter-animate values are written to the DOM as their final value first, then progressively replaced - screen readers always read the true number. Particle field respects prefers-reduced-motion. All interactive tiles have visible 2px focus rings in #00E5FF offset 4px. - Performance: SVG primitives inlined and reused via ``; particle glyphs as a single sprite-sheet; total initial CSS budget under 24KB; one custom font subset (Latin) per family; no third-party scripts on first paint. ## Uniqueness Notes - Differentiator 1: Memphis-Milano + legal-tech is, to our knowledge, an unused intersection in this dataset - 72 prior DESIGN.md files lean cyber, glass, brutalist, or editorial-serif; none use 1980s Italian postmodern geometric language for a court-records product. - Differentiator 2: Counter-animations run BACKWARD (high-to-low) instead of the standard count-up, reframing statistics as "settling into truth" rather than "growing impressively." Pairs with the dreamy-ethereal tone. - Differentiator 3: Particles are semantic glyphs (gavels, pilcrows, sigma) drawn from the product domain, not abstract dots or stars - the ambient field literally describes the subject matter. - Differentiator 4: Portfolio-grid layout used for civic data instead of creative portfolios; dockets are treated as gallery objects, each district a curated room. - Differentiator 5: Frutiger-clean humanist sans (Hanken Grotesk) with Caveat hand-scrawl annotations - signage clarity married to scrapbook intimacy, a pairing absent from the indexed designs. - Chosen seed/style: aesthetic: memphis, layout: portfolio-grid, typography: frutiger-clean, palette: neon-electric, patterns: counter-animate, imagery: mixed-media, motifs: particle-effects, tone: dreamy-ethereal. - Avoided patterns from frequency analysis: no mono-only typography (97% saturation in corpus), no humanist-only stack (43%), no handwritten-as-primary (29%), no garamond-classic body (15%), no stat-grid block, no CTA-heavy sectioning, no trusted-by row, no pricing-tier table, no testimonial carousel, no glassmorphism panels, no dark-mode landing, no isometric illustration, no generic hero gradient. - Underused patterns prioritized: kinetic-animated typography (1%), playfair-elegant - intentionally avoided in favor of variable-fluid display weight shifts on Hanken Grotesk; collage / mixed-media imagery (6%); generative-art particle field (4%); neon-glow used only as 1-2px outer-glow on focus rings (2% in corpus); marble-texture appears once via the courthouse-facade photo collage (2%). - Similarity reference: zero close neighbors in the 72-design corpus - closest analog would be a Memphis-influenced editorial site, but none in the index combine legal-tech subject matter with Memphis postmodernism, counter-down statistics, semantic particle ecosystems, and Frutiger-Caveat type pairing simultaneously.