# Design Language for courthouse.app ## Aesthetics and Tone courthouse.app is conceived as a **digital reconstruction of a 1932 American Federal Courthouse rotunda** -- specifically the kind of granite-and-bronze civic monument built during the Public Works Administration era, when American architects fused European Beaux-Arts gravitas with the streamlined optimism of Art Deco. The site is not a brochure for a legal tech product; it is a *building you walk through*. Every viewport is a chamber: the foyer, the rotunda, the gallery of judicial portraits, the law library, the bench. The user does not scroll a webpage; they ascend marble steps, pass beneath a bronze frieze, and stand at a lectern where the law speaks back to them. The tone is **opulent-grand** crossed with **scholarly-intellectual** -- a register that is almost entirely absent from the existing 70 designs (only 10% opulent-grand and never paired with this specific architectural conceit). The mood is solemn but not mournful, dignified but not stuffy, ornamented but not gaudy. Think of Cass Gilbert's Supreme Court Building (1935), the bronze elevator doors at the Chrysler Building (1930), the geometric inlays of the Chanin Building lobby, and the chamfered limestone reliefs of Paul Manship. These are the references -- not generic "law firm" tropes (no scales of justice rendered as flat icons, no gavel emoji, no stock photos of suited handshakes). The overall feeling should be that of stepping inside a building that was designed to outlast every administration that ever occupied it -- a building made of permanent materials, declaring permanent principles, in a font carved by hand. The site should feel *heavy*. Each interaction should have weight. Hover states should feel like leaning against bronze. Scroll should feel like ascending stairs. The user should leave the site with the slightly disquieting sensation of having been somewhere genuinely civic. ## Layout Motifs and Structure The layout is built on a **diagonal-sections** spine fused with **magazine-spread** typography -- two patterns currently underused (15% each) and never combined in the existing collection. The diagonal angle is fixed at exactly **3.6 degrees**, the same pitch as the entablature of a Doric column when viewed in three-quarter perspective. This single angle propagates through every divider, every frieze, every shadow. **The Building Plan (vertical narrative):** 1. **The Steps (viewport 1, 100vh).** A full-bleed lithographic illustration of marble steps rising toward a portico. The viewport is dominated by a single oversized roman numeral chiseled in shadow: **MMXXVI**. As the user scrolls, the steps recede in parallax and the camera ascends -- the user is climbing. 2. **The Pediment (viewport 2, 80vh).** A horizontal frieze runs across the entire viewport at 60% height, populated by an SVG bas-relief of allegorical figures (Justice blindfolded, Mercy with a dove, Wisdom with an owl, Industry with a hammer). Below the frieze, the wordmark **COURTHOUSE** is set in oversized engraved capitals with deep letter-press shadows. The frieze is hand-drawn line art animated with a path-draw-svg reveal -- one figure draws itself every 800ms in sequence as the user scrolls past. 3. **The Rotunda (viewport 3, 100vh).** A circular composition: content arranged in a ring around a central skylight. The skylight is a CSS conic-gradient simulating sunlight filtering through a coffered dome. Eight pilasters extend from the dome down to the floor, dividing the viewport into eight wedges. Each wedge holds a single piece of editorial content: a docket entry, a quote, a date in roman numerals. 4. **The Gallery of Precedent (viewport 4, horizontal scroll).** This breaks the vertical flow into a horizontal corridor of framed portraits -- each "portrait" is a passage of text typeset as if it were the inscription beneath an oil painting in a gilt frame. The horizontal scroll feels like walking down a hall of jurists. Each frame is set at the 3.6-degree pitch, alternating up and down so the corridor seems to subtly breathe. 5. **The Library (viewport 5, multi-column).** A four-column layout simulating the spines of legal volumes on a shelf. Each column is a different "book" -- spine color, embossed title, page-edge gilt. Hovering a spine slides the volume forward 20px and reveals a typeset passage on the facing page. 6. **The Bench (viewport 6, 100vh).** A wide split-screen with a deep mahogany backdrop on the left (textured CSS gradient simulating wood grain) and a single column of typeset text on the right -- the closing argument. There is no CTA, no "sign up," no pricing. The closing argument simply ends with the typographic equivalent of a gavel: a centered roman numeral **fin** in heavy serif, and a hairline bronze rule beneath it. The grid is a **9-column system** (not the conventional 12) because nine is the number of justices on the Supreme Court bench. The gutters are **24px** corresponding to the standard ashlar coursing. Margins respect the **golden ratio (1.618)** for vertical rhythm. ## Typography and Palette **Typography:** - **Display / Headings:** "Cinzel" (Google Fonts) -- a Roman capitals revival inspired by inscriptions on first-century stonework, used for the wordmark and section openers at extreme display sizes (clamp(4rem, 12vw, 14rem)). Letter-spacing: 0.18em for inscriptional breathing room. Cinzel Decorative is reserved for the rotunda's central glyph and section dingbats. Cinzel is currently used in fewer than 1% of designs in this collection. - **Editorial / Body:** "Cormorant Garamond" (Google Fonts) -- the same elegant high-contrast serif used in the Beaux-Arts revival of the 1920s, with sweeping italics for case citations and pull-quotes. Used at 1.125rem with line-height 1.65 for long-form passages, and at clamp(2rem, 5vw, 4rem) for declarative editorial statements. Italic small-caps for legal Latin (*sub judice*, *amicus curiae*, *de novo*). - **Inscriptions / Numerals:** "IM Fell English SC" (Google Fonts) -- a digitization of John Fell's seventeenth-century Oxford typeface, used exclusively for roman numerals (years, section numbers, page numbers) and small-caps inscriptions. The slightly irregular impression of metal type lends authentic weight. - **Marginalia / Tabular:** "JetBrains Mono" (Google Fonts) -- only for tabular figures in docket entries and case numbers, set at 0.875rem with deliberately loose tracking to evoke a typewriter ledger. No sans-serif. None. The absence of sans-serif is itself a stance -- a declaration that this site is not "modern" in the cheap sense, that it speaks the older language of permanent things. **Palette (8 colors):** - **#0c0a07 — Vellum Black:** the deep ink-black of Federal Reserve currency, used for primary type and the deepest shadows. - **#f4ecd8 — Aged Vellum:** the warm cream of unbleached parchment, the dominant background. It is *not* white. - **#1f1611 — Bench Mahogany:** the wood of a judge's bench, used for the Bench section background. - **#9d7c3a — Chamber Brass:** the patinated brass of a courthouse rail, used for accents, hover-state underlines, and the path-draw stroke of the frieze. - **#5a4a2e — Tobacco Leather:** the spine of a law book, used for borders of framed quotations and editorial dividers. - **#7a1f1f — Magisterial Crimson:** the red of a Supreme Court drape, used sparingly and only for emphatic editorial pull-quotes (one per viewport, never more). - **#2c3e3e — Bottle Verdigris:** the green-black of oxidized bronze, used for the rotunda's pilaster shadows and the bas-relief base color. - **#cdb88a — Gilded Sand:** a paler gold for fine inscriptional rules, monogram seals, and the gilded page-edges of the library volumes. This palette deliberately avoids the **gradient (98%)** and **warm (97%)** tropes of the existing collection by using *flat tonal blocks* rather than gradients, and by using "warm" only in the very specific sense of aged paper -- not in the saas-marketing sense of orange-to-pink hero gradients. The closest existing palette is **gold-black-luxury** at 1%, which is a strong differentiator. ## Imagery and Motifs **Core visual motif: The bas-relief.** Every decorative surface in the site is treated as if it were a low-relief carving in stone or a cast-bronze ornament. There are no photographs (avoiding the 95% photography saturation), no flat icons, no 3D renders. The visual content is entirely **hand-drawn line art** rendered as inline SVG, with stroke widths calibrated to the depth of an actual carving (0.5px for hairlines, 1.25px for primary contours, 2px for shadow lines). The line art is monochromatic Chamber Brass on Aged Vellum, with hatching for tonal variation -- the technique of a copper-plate engraver, not a digital illustrator. **Specific motifs:** - **The Pediment Frieze:** a horizontal procession of seven allegorical figures spanning the second viewport. Each figure is hand-drawn in approximately 200 SVG paths, animated to draw itself in 1.2 seconds. The figures are: Justice (blindfolded, scales), Mercy (dove released), Wisdom (owl perched), Truth (mirror raised), Liberty (broken chain), Industry (hammer at anvil), and Plenty (cornucopia). They are *not* clip-art Lady Justice; they are reinterpreted in the Manship Art Deco idiom -- elongated, geometric, faceted. - **The Coffered Dome:** the rotunda's ceiling, rendered in CSS as a radial array of trapezoidal coffers using clip-path polygons. Each coffer contains a single Cinzel Decorative dingbat (sun, eagle, fasces-replaced-with-laurel, scroll, key, lamp, gavel-shaped-as-mallet, balance-beam). The dome rotates at 0.05 rpm -- almost imperceptibly, but persistently. - **Acanthus Borders:** every editorial divider is an acanthus-leaf border drawn in SVG, derived from the carved capitals of Corinthian columns. The borders extend horizontally across the page in 240-character procedural sequences -- the same eight motifs repeating with subtle variation. - **Cartouche Seals:** key declarative statements are framed in oval cartouches with engraved guilloche patterns -- the same intaglio rosettes used on currency and bond certificates. Generated procedurally with `` and `` for organic irregularity. - **Gilt Page-Edges:** the library section uses CSS gradients to simulate the gilded edges of legal volumes -- thin metallic stripes at the spine and page-edge, with a faint vertical noise overlay to suggest hand-applied gold leaf. - **Inscribed Numerals:** all dates render in Roman numerals in IM Fell English SC, with deep letter-press shadow (`text-shadow: 0 -1px 0 rgba(0,0,0,0.4), 0 1px 0 rgba(255,250,235,0.6);`) to simulate carved inscription on stone. - **The Gavel-Beat Cursor:** the cursor leaves no trail and triggers no glow. On click, however, a single hairline ripple radiates from the click point -- the visual report of a gavel falling. The ripple is exactly 80px in radius, fading over 600ms, drawn in Chamber Brass. This is the only "modern" interaction in the entire site, and its understatement is the point. ## Prompts for Implementation **Narrative architecture:** The site is a single building rendered as a single continuous scroll-and-side-scroll experience. It opens with the climb, ascends through the pediment, enters the rotunda, walks the gallery, browses the library, and arrives at the bench. There is no homepage, no nav menu, no footer in the conventional sense -- the only navigation is a vertical wax-seal medallion fixed to the right margin that shows the current "chamber" name in IM Fell small-caps and silently animates as the user moves through the building. There is **no CTA, no pricing block, no stat-grid, no testimonial carousel**. The site does not exist to convert. It exists to be inhabited. **Implementation details:** 1. **The opening climb (viewport 1):** Render the marble steps as a stack of seven horizontal `
` slabs, each 14vh tall, each with a slightly different aged-vellum tone (subtle CSS variables stepping from #f4ecd8 to #ede2c6). Apply a single faint vertical noise SVG filter (``) at 6% opacity over the whole stack to simulate marble veining. The MMXXVI numeral is positioned at 60% of viewport height, set in Cinzel at clamp(8rem, 22vw, 18rem), color: rgba(12,10,7,0.18) -- nearly invisible, like a shadow cast on the next step. As the user scrolls, the slabs translate downward at decreasing rates (parallax), and the numeral fades from 0.18 to 0.92 opacity. 2. **The frieze reveal (viewport 2):** The seven allegorical figures are hand-drawn SVG with `pathLength="1"` and stroke-dasharray manipulation. As the user scrolls into this viewport, IntersectionObserver triggers the path-draw-svg sequence. Each figure draws over 1.2s with 600ms stagger between figures. The wordmark COURTHOUSE below the frieze is set in Cinzel at clamp(5rem, 14vw, 11rem), with a deep multi-layer text-shadow simulating engraved depth (six stacked shadows from -3px to +3px in 1px increments, each 0.08 opacity, alternating between Vellum Black and a highlight tone). 3. **The rotating dome (viewport 3):** The coffered dome is rendered as a `
` with conic-gradient ceiling, overlaid with eight clip-path trapezoidal coffer divs. The whole dome rotates with `animation: dome-rotate 1200s linear infinite;` -- a full revolution every 20 minutes. The eight wedges of content beneath are absolutely positioned around a central point, each rotated to face inward. Hovering a wedge causes its content to translate 12px toward the center and the corresponding pilaster shadow to deepen. 4. **The gallery corridor (viewport 4):** Implemented as a horizontal `overflow-x: auto` container with scroll-snap-type: x mandatory. Each "portrait frame" is approximately 80vw wide, separated by 8vw of corridor. The frames alternate between transform: rotate(3.6deg) and rotate(-3.6deg) so the corridor feels slightly canted. Each frame has a CSS box-shadow gradient simulating the rolled gilt-and-gesso of a real frame profile (eight stacked inset and outset shadows). Inside each frame is typeset text -- an excerpt, a citation, a maxim -- set in Cormorant Garamond italic at 1.5rem, with a hand-drawn flourish above and below. 5. **The law library (viewport 5):** Rendered as four CSS-grid columns, each column subdivided into 6 to 9 "book spines." Each spine is approximately 4vw wide, full-column tall, with a CSS gradient simulating leather binding (Tobacco Leather at center, darkening at edges). Embossed gold lettering on each spine using text-shadow for relief. Hovering a spine animates `transform: translateX(20px) translateZ(0)` and reveals an absolutely positioned excerpt on the right side of the row, typeset in Cormorant Garamond as if on the open page facing the volume. 6. **The bench (viewport 6):** A 50/50 split. The left half is Bench Mahogany with a CSS-noise wood-grain texture (vertical `` filter stretched into woodgrain). On the right half, Aged Vellum with a single column of typeset closing-argument text in Cormorant Garamond at 1.25rem, line-height 1.7, max-width 32em. The closing argument is ~600 words -- enough to feel like a real address, not a marketing tagline. It ends with a centered IM Fell **fin** at 4rem and a hairline bronze rule (1px Chamber Brass) below. 7. **The wax-seal sidekick:** Fixed to the viewport's right margin at 50% top, a 64px circular SVG wax seal with embossed initials **C·H** in Cinzel Decorative. Its inner ring animates to spell out the current chamber name as the user scrolls past each section ("THE STEPS" → "THE PEDIMENT" → "THE ROTUNDA" → "THE GALLERY" → "THE LIBRARY" → "THE BENCH"). The text rotates around the circumference using ``. The seal subtly tilts toward the cursor (3 degrees max) using a magnetic interaction. 8. **Audio (optional, opt-in):** A single ambient track may play if the user clicks a small Cinzel Decorative dingbat in the wax seal: the muted ambient sound of a courthouse interior -- distant footsteps on marble, the occasional creak of a heavy door, the faint murmur of voices many rooms away. Rendered as a 90-second loop. Disabled by default; opt-in only. 9. **Type loading:** Use `font-display: block` for the display fonts (Cinzel, Cinzel Decorative) -- the slight FOIT is acceptable here because we are emulating the deliberate slowness of stone. The body fonts (Cormorant Garamond, IM Fell English SC) use `font-display: swap`. 10. **Cursor:** The default cursor is preserved -- no custom cursor shape. But on hover over interactive elements, the cursor adopts a minimal Cinzel-like crosshair using a custom SVG data-URI cursor (1.5KB). The point: this site does not need a custom cursor; the typography already does the work. ## Uniqueness Notes **Differentiators from the other 70 designs in the collection:** 1. **Federal-courthouse architectural conceit as primary structure:** No other design in the collection treats the site as a *building you walk through*. The closest equivalents (the timeline-vertical structure of aei.st, the stratified descent of aiice.dev) treat the page as a journey but not as an architecture. courthouse.app's six chambers (Steps, Pediment, Rotunda, Gallery, Library, Bench) correspond to actual architectural elements of a real 1932 federal courthouse, and the user's scroll literally maps onto a floor plan. 2. **Total absence of sans-serif type:** Every other design in this collection includes at least one sans-serif (typically Inter, Space Grotesk, or a humanist sans for body). courthouse.app uses zero sans-serif. The four typefaces (Cinzel, Cormorant Garamond, IM Fell English SC, JetBrains Mono only for ledger numerals) all derive from the pre-industrial inscriptional and Garalde traditions. This is a typographic stance, not just a choice. 3. **Hand-drawn allegorical bas-relief frieze:** The seven-figure procession at the pediment, drawn in the Manship Art Deco idiom and animated with path-draw-svg, is a specific decorative gesture not present in any other design. The frieze is not stock clip-art Lady Justice; it is a reinterpreted iconographic program executed in inline SVG. 4. **Gold-black-luxury palette (1%) crossed with art-deco (5%):** Both individually rare, and never combined in the collection. The specific palette eschews gradients and high-saturation accents in favor of flat aged-vellum, vellum-black, mahogany, brass, and verdigris. The "warm" palette tag (97%) is technically present here only in the very specific historical sense of unbleached paper -- not in the contemporary saas sense. 5. **9-column grid (justices on the bench) at 3.6-degree pitch:** A grid system specifically derived from civic symbolism (9 = Supreme Court justices), with a fixed diagonal pitch derived from the perspective foreshortening of a Doric entablature. Both are specific architectural conceits without parallel in the existing designs. 6. **No CTA, no pricing, no stat-grid, no testimonials, no footer:** The site is a destination, not a funnel. The closing "argument" replaces the closing CTA. The wax-seal navigation replaces the conventional menu. This is a complete refusal of conversion-oriented patterns. 7. **The gavel-beat ripple as the *only* non-typographic interaction:** A single hairline radiating circle on click, evoking the report of a gavel. No glows, no parallax mouse trails, no glassmorphic hover panels. The interaction vocabulary is deliberately reduced to one civic gesture. 8. **Coffered-dome rotation at 1 revolution per 20 minutes:** A near-imperceptible animation that nonetheless creates the sense that something is *alive* in the building. Only one other design in the collection uses such a slow continuous rotation (the slow-aurora background of one other site), and never on an architectural element. **Chosen seed/style:** *art-deco ornate luxury* (seed line 23 from `seeds.json`), interpreted through the specific historical lens of American Federal Courthouse architecture circa 1925-1935 (Cass Gilbert, Paul Manship, the PWA building program). Aesthetic vocabulary: **art-deco** (5%), **opulent-grand** (10%), **scholarly-intellectual** (27%), **layout: diagonal-sections** (15%) and **magazine-spread** (15%), **typography: serif-classic** (30%) with **art-deco-display** (2%), **palette: gold-black-luxury** (1%), **motif: marble-classical** (2%) and **book-scholarly** (2%), **imagery: hand-drawn** (47%) with a specific bas-relief inflection, **patterns: path-draw-svg** (35%) restrained to a single hero frieze. **Reference avoided patterns from frequency analysis:** This design deliberately eschews the dominant patterns of the collection -- **corporate** (92%), **photography** (95%), **card-grid** (95%), **centered** (90%), **gradient** (98%), **warm** (97% in the saas sense), **mono** (91% in the tech sense), **scroll-triggered** (92% in the slap-an-IO-on-everything sense), **mysterious-moody** (51%), **parallax** (60%). It uses parallax only once (the climbing steps) and scroll-triggered animation only twice (the frieze path-draw and the dome rotation onset). It includes zero photographs, zero card grids, zero pricing blocks, zero conventional CTAs.