# Design Language for courthouse.app ## Aesthetics and Tone courthouse.app is staged as **a friendly, half-broken municipal information kiosk from 1978 that has been rebooting on a CRT in the courthouse lobby for forty-seven years and has, in the process, become genuinely fond of the public**. The aesthetic core is **glitch** — but not the angry hacker-green glitch of cyberpunk landings, and not the chrome-shred glitch of vaporwave. This is *vintage glitch*: warm chromatic-aberration bleeding off the edges of mustard-and-ochre signage, scanlines drifting across hand-painted county-fair lettering, magnetic-tape jitter on the vowels of "WELCOME, NEIGHBOR." The kiosk wants to help you. It is doing its best. The CRT inside it is dying with great affection. The tone is unambiguously **friendly** — first-person plural, contractions, gentle humor at the kiosk's own expense ("we know that one's been broken since '03 — sorry"), no legalese, no cold civic-tech sterility. courthouse.app is the *antidote* to the ten thousand legal-blue gradient-saas court portals that already exist. It is the courthouse rendered as a small-town public-radio station that happens to handle docket lookups: warm, slightly funny, weirdly specific, deeply patient. The friendliness is structural — it shows up in the copy register, in the kiosk-attendant illustrations who lean into the frame to introduce each section, and in the way the glitch effects pause politely whenever you actually need to read something. Inspiration sources, in declining order of weight: the typographic signage of mid-century U.S. county courthouses (carved limestone serifs, hand-cut wood-type docket boards, brass directory plates with stamped lettering); the BBC Computer Literacy Project broadcasts of 1982; the Eames-era Ames Brothers civic illustrations; National Park Service interpretive signage 1965–1979; analog video corruption captured by Nam June Paik; the pause-jitter of a VHS tape just before tracking auto-corrects; Saul Bass's title cards for *Anatomy of a Murder*. The site never lapses into pure retro pastiche — the glitch motif is always the contemporary fingerprint, the layer that lets you know this kiosk has been *running* in 2026 for a long time, not just *imitating* 1978. The mood is **competently melancholic**: the courthouse is a sad place in the sense that people do not usually arrive there on their best day — courthouse.app acknowledges this by being a little gentler, a little slower, a little funnier, and never bright-eyed-startup peppy. There is exactly zero excitement in the copy. There is exactly enough warmth. ## Layout Motifs and Structure The page is one continuous vertical document of **diagonal-sections** — eight numbered "windows" stacked top-to-bottom, each one sheared at a different angle along a `clip-path` polygon that runs **−6deg / +9deg / −4deg / +12deg / −7deg / +5deg / −9deg / 0deg** down the page. The first window is mildly tilted; the slope deepens through the middle of the document and resolves to perfectly horizontal at the final ground-floor section, as if the whole building has been settling into level over the course of the scroll. This is **diagonal-sections promoted to the spine of the page** — not a styling tic on a single hero, not a decorative wedge on a CTA strip, but the *only* sectioning grammar the site uses. Borders, dividers, image masks, even individual paragraph backgrounds inherit the same shear angle as their parent window. There is no header chrome and no footer chrome. There is no navigation bar. There is, instead, a **brass directory plate** fixed to the upper-left of the viewport at all times (84px square, slightly tarnished SVG with stamped serial-number "BLDG-1924-W") that, on click, deals out the eight section names as a small stamped-card spread. This replaces the entire conventional nav apparatus. Within each diagonal window the grid is asymmetric: a 12-column underlying grid where columns 1–7 carry the primary block of content and columns 8–12 carry a *narrow vertical strip* of supporting material — never a sidebar in the SaaS sense, but a strip used like the right-hand column of a 1970s mimeographed bulletin. The supporting strip holds: a single large numeral (the section number, set 280–360px tall, in oversized display type, glitch-fractured along its baseline); a stamped date; one Lottie loop; and one short hand-set caption. The primary content block holds prose, oversized display headlines, and one data-viz module per section. Section sequence (ground plan): 1. **THE LOBBY** (−6deg) — first impression, brass plate animates in, oversized display title `COURT—HOUSE` set in two slabs across the diagonal. 2. **WHAT THIS BUILDING DOES** (+9deg) — the project's plain-language manifesto, one paragraph, no bullets. 3. **DOCKET WALL** (−4deg) — a vintage data-viz: a horizontal woodcut-style "docket board" rendered in CSS where each row is a different category of public-court-data lookup, glitch-flickering letters that spell out case-types one at a time. 4. **THE CLERK'S WINDOW** (+12deg) — interactive lookup demo, shown as an actual brass-grilled window with a Lottie of a clerk's hand sliding a ticket forward. 5. **HOW IT WORKS, SLOWLY** (−7deg) — a four-step diagram drawn as a courthouse floor-plan with you-are-here pins, glitching as steps activate. 6. **THE FILE ROOM** (+5deg) — data-viz on volume: how many records, decades covered, jurisdictions, rendered as stacked banker's boxes with subtle scanline noise. 7. **WHO BUILT THIS** (−9deg) — the team / about, written as the cast list of a small civic theater program. 8. **HOURS & GROUND FLOOR** (0deg) — the page settles flat, contact / footer stuff written as the painted hours-of-operation strip on a courthouse front door. There is **no card grid** anywhere on this site. There is **no centered hero**. There is **no full-bleed photographic hero**. There is **no pricing block, no testimonial carousel, no logo wall, no CTA strip.** The page reads top to bottom like a one-act play with eight scenes; each scene is a tilted window; the tilts settle as you arrive. ## Typography and Palette **Type system — Google Fonts only.** - **Bowlby One** (single weight, 400) — the *oversized-display* face. Used at clamp(120px, 18vw, 360px) for the section numerals (1 through 8) and the lobby title `COURT—HOUSE`. Bowlby One is a heavy, slightly compressed slab built for civic signage; it has the inscriptional weight of a courthouse pediment and the warmth of a county-fair banner. This is the typographic load-bearing wall of the whole site. - **DM Serif Display** (regular + italic) — secondary display, used for section titles like `THE CLERK'S WINDOW` at 64–96px. DM Serif Display reads as the stamped brass directory plate's face — narrow, classical, no-nonsense without being stiff. - **Lora** (variable, weight 400–700, italic) — body text, set 19px / line-height 1.55, slightly looser tracking (+0.005em) on long passages. Lora is the public-radio-essay voice of the site: literate, warm, unhurried, friendly without being soft. - **Special Elite** (single weight, 400) — typewriter face, used *exclusively* for stamped dates, docket numbers, footnote numerals, and the brass-plate serial number. Set small (11–13px), tracked +0.04em, often rotated 1–2 degrees off-axis to look genuinely stamped rather than placed. No monospace. No grotesque sans. No handwritten. No display script. The four-face system is final. **Palette — earth-tones, eight values, no gradient.** - `#1B1410` Ink Brown — primary text, brass-plate engraving, woodtype headline shadow. - `#3A2A1A` Walnut — secondary text, section borders, oversized-display fill. - `#7A5A3A` Tobacco — subdued accents, chart axes, dotted leaders. - `#A8753E` Brass Patina — the brass directory plate, the docket-board frames, the kiosk's metal furniture. - `#C49A5A` Mustard Field — the dominant background field for odd-numbered sections, a warm courthouse-wall ochre. - `#E6D2A8` Lobby Cream — background for even-numbered sections, the color of sun-bleached interior plaster. - `#8C3A2A` Sealing Wax Red — the single accent for *attention* (active brass-plate item, current docket-row, error glitch glyphs). Used sparingly: maybe 8 instances site-wide. - `#3F4F3A` Verdigris Green — the secondary accent for *resolution* (completed steps, "office is open" indicator, the level-flat final section's signage paint). No black. No pure white. No gradients anywhere on the page. The palette is a flat earth-tones system in the literal sense — dirt, brass, wood, plaster, dye-stamp ink. Chromatic-aberration glitch effects pull sealing-wax-red and verdigris-green out of the headline edges; these are the only places the two accent colors ever appear bright. ## Imagery and Motifs The visual world is built from three non-photographic image registers, mixed in carefully controlled proportions: **1. Lottie animation** (the underused 2% pattern, promoted to *signature*) — six purpose-drawn Lottie loops, each one short (1.6s–4s), each one used exactly once, each one playing only when its section is in view (`IntersectionObserver`, not autoplay). They are the kiosk's tiny attendants: - *The Brass Plate Polish* (Lobby) — a hand with a rag wipes one slow circle across the brass directory plate; tarnish lifts; a glitch-blink reveals the serial number. - *The Stamp* (What This Building Does) — a rubber-stamp descends, presses, lifts, leaves a slightly crooked `RECEIVED` mark on the page edge. - *The Docket Flip* (Docket Wall) — a row of wooden docket-letters flips through case-types, like a Solari split-flap board, before settling. - *The Clerk's Hand* (Clerk's Window) — a hand slides a stamped ticket across a brass counter, pauses, taps it twice, leaves. - *The Floor-Plan Walk* (How It Works, Slowly) — a small tracked footprint walks the courthouse floor-plan from door to office, leaving a dotted line. - *The Closing Door* (Hours & Ground Floor) — a courthouse front door swings closed on the painted hours strip, latches with a soft brass click. These six Lotties are the entire animation budget for "characters" on the page. The site has no other illustrated characters, no mascot, no avatar, no team-photo grid. **2. Data-viz, vintage register** — three custom data visualizations, all rendered in CSS + inline SVG (no Chart.js, no D3 default chrome), all styled as if they were lithographed for a 1971 county annual report: - *The Docket Board* — a horizontal 16-row split-flap board where each row's character cells are individual SVG elements with a per-cell jitter animation. Renders public-court-data taxonomy (e.g., `CIVIL — SMALL CLAIMS`, `PROBATE — UNCONTESTED`, `TRAFFIC — INFRACTION`). - *The File Room Stack* — stacked-bar chart drawn as physical banker's boxes seen in three-quarter perspective, each box labeled `1957–1962`, `1963–1968`, etc., with subtle scanline noise overlaid by a `mix-blend-mode: multiply` PNG. - *The Floor-Plan Process Diagram* — an isometric-ish architectural floor-plan of the courthouse interior, with the four user-flow steps placed at actual rooms (Front Door, Records Counter, Clerk's Window, Issued-Documents Pickup), connected by a dotted footprint trail that draws as you scroll. **3. Hand-set vintage ornament** — five recurring vintage motifs, placed sparingly: - The **brass directory plate** (always upper-left, fixed). - **Wood-type docket letters** that briefly appear in the gutter strip of each section displaying that section's number in carved-wood-block style. - **Date stamps** (Special Elite type, off-axis, sealing-wax-red ink) used to mark when each piece of UI was "received." - **Dotted leaders** running between the gutter numeral and the section title, like a 1962 phone-directory listing. - **A single courthouse-pediment SVG** — a flat-illustrated triangular pediment with the words `EQUAL — UNDER — KIND` (a friendly pun on `EQUAL JUSTICE UNDER LAW`) — appearing once, at the very top of the page, behind the Lobby section's title. There is **no photography** anywhere on the site. There is **no gradient mesh, no organic blob, no glassmorphic card, no neon glow, no bokeh, no lens flare, no isometric tech-stack icon set.** The visual world is flat, woodtype-warm, occasionally split by chromatic glitch, occasionally animated by a quiet Lottie attendant. **Glitch motif specifics** — because glitch is the seed aesthetic and must read as the page's contemporary signature: - All oversized-display numerals (1–8) carry a 2px sealing-wax-red horizontal slice that drifts ±4px every 1800ms, a `clip-path` step rather than a continuous animation. - Every section's title has a 3-frame chromatic-aberration entrance: red ghost +6px / green ghost −4px / final settle. Title settles within 240ms, then sits perfectly still. - Three "stuck" UI moments per page: a Lottie that pauses, glitch-flickers, and resumes — telegraphing the kiosk's age affectionately. - A single, persistent CRT scanline overlay (1px lines, 4% opacity, 100vh tall, drifting downward at 1px/180ms) sits above everything except modal interactives. ## Prompts for Implementation Build courthouse.app as a **single, statically-served HTML document**: one long scroll, no SPA, no router, no client-side framework. The narrative is the scroll. The visitor arrives at the lobby, is greeted, and walks through eight tilted rooms in order. The page is roughly 800vh tall. **Opening (Lobby, −6deg).** The viewport is Lobby Cream (`#E6D2A8`) on first paint. The brass directory plate fades in upper-left at 200ms. At 400ms the *Brass Plate Polish* Lottie plays once. At 1000ms the title `COURT—HOUSE` types into place — 12 characters in Bowlby One at clamp(120px, 18vw, 360px), set across the diagonal of the section, each character entering with a 3-frame chromatic-aberration ghost (sealing-wax-red +6px / verdigris-green −4px / settle). At 2200ms the friendly subtitle in Lora italic — *we're the public-court-data kiosk, and we're glad you came in.* — fades up under the title. The CRT scanline overlay starts drifting at this moment and never stops. **Scroll choreography.** Each diagonal section enters via its leading clip-path edge; as the leading edge crosses 80% of the viewport, that section's oversized-display numeral (set 280–360px in the gutter strip, in Bowlby One filled Walnut `#3A2A1A`) glitch-resolves through three frames: red-ghost / green-ghost / settle. As the trailing edge crosses 20%, the section's Lottie plays once and stops. Lotties never loop more than twice; idleness is part of the friendliness. **No conventional CTAs.** There is no "Get Started" button. The single interactive element on the page is the *Clerk's Window* in section 4: a stylized brass-grilled window where the visitor can type a (mock) docket number into a Special Elite typewriter input; pressing Return triggers the *Clerk's Hand* Lottie to slide a stamped ticket back, with the ticket containing a friendly fake response ("we found 3 records — but this is a demo, so they're imaginary"). No email capture. No sign-up. No pricing tile. The visitor leaves the page having read it, not having converted. **Diagonal sectioning technique.** Use `clip-path: polygon()` at the section level to produce the shear, with the inverse polygon applied to a `::before` background that carries the section's earth-tone fill color. Inner content uses `transform: skewY()` to counter-skew so that text remains horizontal while the section walls remain tilted. Borders between sections are 2px dotted Walnut, rendered as repeating-linear-gradient on the polygon edge. Each section's tilt angle is a CSS custom property (`--tilt: -6deg;`). **Glitch effects, taste discipline.** Every glitch effect must *resolve to stillness*. Nothing glitches continuously. The CRT scanline drifts (calm). Section numerals carry a 2px slice that re-positions every 1800ms (a heartbeat, not a seizure). Title entrances chromatic-aberrate for 240ms then sit motionless. The kiosk is *aging*, not panicking. If a glitch effect would impede legibility for more than 80ms, cut it. **Data-viz implementation notes.** - The *Docket Board* is 16 `
` elements; each row contains 22 `` chars; cell character changes are CSS keyframe steps with `animation-delay` calculated per-row in CSS custom properties. No JS framework — vanilla DOM + CSS. - The *File Room Stack* uses inline `` with hand-tuned `` boxes; scanline noise is a tiled PNG overlay (1024×1024, 8% opacity, `mix-blend-mode: multiply`). - The *Floor-Plan* SVG paths use `stroke-dasharray` + `stroke-dashoffset` transitions tied to scroll progress (use `IntersectionObserver` thresholds at 0.1 / 0.4 / 0.7 / 1.0, not a continuous scroll handler). **Friendly-tone copy directives.** - Address the visitor in second-person plural-of-warmth: "you," "we," never "users," never "customers." - Apologize for things the kiosk cannot do, gently and only once. - Use specific small details (years, room numbers, sealing-wax stamps) instead of abstract benefit-claims. - The longest single sentence on the site should not exceed 28 words. - No exclamation points. None. The kiosk is calm. **Bias toward storytelling.** Every section earns its place by advancing the conceit that the visitor is walking through a courthouse. If a section cannot be named after a room or an architectural feature, it does not belong on this page. **Avoid (frequency report).** - No card-grid (77% of corpus). The diagonal-sections layout entirely replaces card grids. - No full-bleed photographic hero (91% of corpus, 98% photography). - No gradient backgrounds (97% of corpus). All fills are flat earth-tones. - No mono typography (96% of corpus). Special Elite is typewriter, not mono coding face. - No parallax / spring / cursor-follow / magnetic effects (the four most-overused interaction patterns). The site's only interaction patterns are Lottie playback on intersection and a single scroll-tied SVG path-draw. - No glassmorphism, no neon-glow, no warm gradient palettes. ## Uniqueness Notes This design's differentiators, none of which other CMassC sites should duplicate: 1. **Diagonal-sections promoted from a 4%-frequency styling tic to the entire page's structural skeleton.** Most uses of diagonal-sections in the corpus apply a single tilted hero or a single sheared CTA strip; courthouse.app makes *eight* sequential diagonal sections that progressively re-level the page over the course of a scroll. The tilt is the spine, not the ornament. From the frequency report, no other site has built its layout grammar on this pattern. 2. **Lottie-animation promoted from 2% to the site's entire character-animation language.** The corpus has no other site that anchors its identity to a hand-curated set of exactly six purpose-drawn Lottie loops, each used exactly once, each acting as a kiosk-attendant rather than a generic loader. This is the load-bearing motif of the page's friendliness. 3. **Glitch + earth-tones + vintage simultaneously, in a friendly tone.** Glitch (12% of corpus) almost always pairs with cyberpunk aesthetics, monospace type, neon palettes, and bold/edgy tones. Earth-tones (3%) almost always pairs with botanical or pastoral aesthetics. courthouse.app's glitch is *kindly and aged*, not cyberpunk; its earth-tones are *municipal-civic*, not pastoral; the two combine into "vintage glitch" — chromatic-aberration on woodtype, scanlines on plaster ochre. The frequency report shows zero overlap of glitch + earth-tones + friendly elsewhere in the corpus. 4. **Oversized-display (2%) used as section numerals 1–8 rather than as hero titles.** The Bowlby One numerals at 280–360px in each gutter are the typographic anchor of every section, replacing the conventional centered hero headline. This is structurally distinct from every oversized-display use in the corpus, which all deploy oversized type at the top of a hero. 5. **No CTAs at all.** The page has zero email-capture, zero pricing-tile, zero "Get Started," zero testimonial-carousel, zero stat-grid. The only interaction is a single mock docket-number input that the kiosk responds to in-character. This is a courthouse, not a funnel. 6. **A persistent brass directory plate as the entire navigation system.** No top nav, no hamburger, no sticky header. The 84px brass-plate SVG in the upper-left corner *is* the menu. Click it, eight stamped cards deal out. The corpus has no equivalent navigation pattern. 7. **The eight-tilt floor-plan conceit.** Each section is named after a courthouse room (Lobby, Docket Wall, Clerk's Window, File Room, Hours & Ground Floor). The visitor is literally walking through a building. No other CMassC site uses architectural rooms as section semantics. 8. **Friendly-civic register of copy.** The corpus's `friendly` tone (14%) leans toward bright/optimistic startup pep. courthouse.app's friendliness is *quietly competent municipal* — apologetic, specific, no exclamation points, calm humor. This tonal register has no twin in the corpus. **Chosen seed (from assignment):** *aesthetic: glitch, layout: diagonal-sections, typography: oversized-display, palette: earth-tones, patterns: lottie-animation, imagery: data-viz, motifs: vintage, tone: friendly.* **Frequency-driven avoidances (from `tools/design/frequency.sh` analysis):** No hand-drawn aesthetic (96%), no glassmorphism (68%), no card-grid layout (77%), no full-bleed photographic hero (91%), no gradient palette (97%), no warm-stock gradients (96%), no parallax (95%), no spring/magnetic/cursor-follow interaction patterns (78%/68%/78%), no mono typography (96%), no photography imagery (98%). The site is positioned in the deliberately-sparse quadrant of the design space the corpus has under-explored.