# Design Language for courthouse.stream ## Aesthetics and Tone `courthouse.stream` is a **retro legal archive rendered as a living tide pool** — as if someone discovered a crate of 1960s courtroom transcripts at the bottom of a coral reef and decided to stream them. The aesthetic is the productive collision of two deeply incompatible worlds: the hushed authority of American mid-century jurisprudence (oak-panel courtrooms, cream linen briefs, brass witness nameplates, heavy official seals) and the patient, unhurried observation of a marine naturalist watching tropical fish navigate coral columns. The tone is **zen-contemplative**: this is not urgent legal news. It is a slow, meditative stream — a long scroll through archived proceedings observed the way you observe a reef through glass. Every case is a specimen. Every ruling is a specimen card. The viewer is a naturalist-archivist, not a consumer. Mood: the inside of a 1962 federal courthouse that flooded overnight and became a reef. The water is crystal-clear. The brass fixtures are still there. The docket boards are still legible. Tropical fish swim past the bailiff's bench. --- ## Layout Motifs and Structure The page is a **portfolio-grid of specimen cards** — twelve to sixteen cards arranged in a 3- or 4-column masonry grid, with deliberate asymmetric vertical offsets (not random stagger — the offsets follow a fixed sine-wave rhythm: column 1 baseline, column 2 +80px, column 3 +40px, column 4 +120px). The grid is the dominant structure: there is no hero. There is no above-the-fold banner. The page opens directly onto the grid. **Specimen card anatomy:** Each card is a courtroom exhibit card — a framed rectangle (2px rule, #1B2C5A navy border on aged #F5F0E8 cream stock) with: - A hand-rendered botanical-illustration inset (top 40% of card, full-width, no padding), depicting a tropical fish navigating stylized legal iconography (a gavel rendered as coral, a scales-of-justice rendered as a sea fan, a witness box rendered as a reef arch). - A case header in serif-revival type: small-caps case name, docket number in mono below. - A two-line excerpt or ruling summary. - A taxonomic tag line at the bottom — jurisdiction, year, disposition — set in condensed serif at 9px, like a museum specimen label. **Navigation:** A single left sidebar — slim, 160px, fixed — styled as a brass index tab rack. The tabs are engraved-look: small-caps serif category names on #C0A35A metallic grounds. The sidebar does not scroll. It remains fixed while the grid scrolls right. **Header:** Minimal. The wordmark `COURTHOUSE.STREAM` is set in a 24px serif, letterspaced +0.12em, in navy, pinned top-left of the sidebar. Below it, a thin #C0A35A rule. That is the entire header. **Footer:** Absent. The grid terminates in a soft fade-to-cream as cards run out. No footer copy, no link forest. **Spatial logic:** The grid uses `16px` gutters. Cards are `320px` wide at desktop (1280px viewport), `260px` at tablet. The cream page background (#F5F0E8) creates a linen-stock feel — no hard white, no dark mode. --- ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display / case name headings — `Cormorant Garamond`** (weight 600, small-caps variant). Set at 17px on specimen cards, 28px on detail view. Cormorant Garamond's high-contrast strokes invoke 19th-century legal printing without pastiche. Used for case names, section headers in detail view, and the wordmark. - **Body / ruling text — `EB Garamond`** (weight 400, 15px/24px). Long-form excerpt text in cards and in detail views. EB Garamond reads with the authority of a printed brief and the warmth of aged paper. Italic weight (400i) used for dissent excerpts and quoted testimony. - **Taxonomy labels / docket numbers — `Courier Prime`** (weight 400, 9–11px). Typewriter-exact mono for all specimen-label data: docket numbers, jurisdictions, years, disposition tags. Courier Prime is the authentic voice of the clerk's typewriter. - **Sidebar navigation — `Cormorant Garamond`** small-caps, 12px, letterspaced +0.15em. The sidebar tabs are engraved, not typed. **Palette:** | Token | Hex | Role | |-------|-----|------| | Navy Anchor | `#1B2C5A` | Primary text, borders, sidebar background | | Aged Cream | `#F5F0E8` | Page background, card stock | | Brass Accent | `#C0A35A` | Sidebar tabs, card rule ornaments, fish highlights | | Deep Teal | `#2A6B6B` | Botanical illustration mid-tones, link states | | Coral Warm | `#C05A3A` | Shake-error state, overruled case badges, emphasis | | Silver Fog | `#9BAAB8` | Secondary text, taxonomic labels, card ghost states | | Ink Black | `#0D1A2E` | Primary typeset headings in detail view | --- ## Imagery and Motifs All imagery is **hand-rendered botanical illustration** in the tradition of 19th-century natural history plates — but the specimens are tropical fish navigating courtroom architecture rendered as reef structures. **Per-card illustration system:** Each specimen card contains one botanical-style illustration. These are vector/SVG drawings at 320×160px: - **The Gavel Coral:** A staghorn-coral formation whose terminal branches terminate in gavel-heads. A flame angelfish (Centropyge loricula) hovers mid-frame, its orange-and-black banding echoing the alternating arguments of counsel. Fine cross-hatching on the coral in ink #1B2C5A over cream wash #F5F0E8. - **The Scales Sea Fan:** A red sea fan (Gorgonia flabellum) whose bilateral symmetry mimics a scales-of-justice balance. A moorish idol (Zanclus cornutus) swims through the near arm. Its dorsal fin, dramatically elongated, pierces the fan like a lawyer's pointed finger. - **The Witness Reef Arch:** A natural limestone arch — the classic reef formation — that echoes the carved arch of a federal courthouse entrance. A pair of mandarinfish (Synchiropus splendidus) float through the arch, their psychedelic blue-and-orange patterns jarring beautifully against the architectural gravity of the arch. - **The Docket Kelp:** A kelp forest rendered in the vertical rhythms of a docketed case list. Each frond is a filing. A yellow tang (Zebrasoma flavescens) reads across the fronds horizontally, its motion suggesting a judge scanning a docket. - **The Bench Anemone:** A sea anemone whose central column mimics the judge's bench. Clownfish (Amphiprion ocellaris) tend the anemone/bench, perpetually in motion, like clerks. **Ornamental motifs:** - Thin brass-inked double-rule borders (0.5px outer, 1.5px inner, 3px gap) frame each card — the classic legal-document border. - An official-seal watermark motif (a stylized coral reef inscribed in a circle, replacing the eagle) prints at 8% opacity on the cream card background. - Error states use the **shake-error** pattern: when a case record is unavailable or a search yields nothing, the card physically shakes (CSS translateX keyframe, 3 oscillations over 400ms) and its border flashes `#C05A3A` Coral Warm. The illustration inside the card inverts briefly — navy becomes cream, cream becomes navy — for exactly two frames, like a photographic negative, before resolving. This is the only kinetic element in the grid. --- ## Prompts for Implementation Build this as **a naturalist's streaming archive** — a museum of legal specimens observed underwater. The entire page is the grid. There is no marketing. There is no call to action. The site exists to be browsed the way you browse a natural history cabinet: slowly, with attention, picking up cards and setting them down. **Vow 1 — The grid is a tide pool, not a product catalog.** The masonry grid must use real asymmetric vertical offsets (not CSS `masonry` auto-layout, which randomizes). Hard-code the sine-wave column offset rhythm: column 1 at baseline, column 2 at +80px, column 3 at +40px, column 4 at +120px. Cards scroll naturally within this rhythm. No hover reordering, no drag-drop, no filter animation other than a gentle 200ms opacity fade when category filters are toggled. **Vow 2 — Cards are exhibits, not links.** Each card uses a `
` element with a `
` — the most semantically appropriate museum-exhibit markup. The figure contains the botanical SVG illustration. The figcaption contains the case metadata. Card hover state: a 2px inset shadow appears (navy, 8% opacity), the brass border rule brightens from `#C0A35A` to `#D4B86A`, and the illustration shifts +2px up and -1px right (CSS transform, no JS needed). There is no scale transform — cards do not grow. They simply clarify, the way a specimen clarifies when you tilt the case glass. **Vow 3 — The shake-error is the only animation the grid performs unprompted.** All other animations are interaction-triggered (hover, filter toggle, scroll-reveal on initial load). The shake-error fires only on: empty search results, 404 case lookup, or network error. It must be implemented as a CSS `@keyframes shake` applied via a JavaScript class toggle, never on a loop, never decorative. The coral-warm border flash and the two-frame illustration inversion are mandatory — they make the error feel like a disturbed reef, not a broken UI. **Vow 4 — The sidebar is a brass index, not a nav menu.** The left sidebar uses `position: fixed`, `width: 160px`, with a navy background (`#1B2C5A`) and brass tab items. Each tab item is a `