# Design Language for courthouse.stream ## Aesthetics and Tone courthouse.stream is staged as **the dream-journal of a small-town courthouse the morning after a long pollen-soaked summer hearing** — a building that has been listening to civic testimony for a hundred and forty years and has begun, in its quieter hours, to *bloom*. The visual core is **swiss** discipline (a strict 12-column type-grid, ruler-thin hairlines, ALL-CAPS section ledgers, immaculate left-aligned setting) but the discipline has been *invaded by the garden* — wisteria, foxglove, and dog-rose drift across the gridlines, dust motes catch a low sunset through tall windows, and the whole composition reads like a Müller-Brockmann poster that has been left on the courthouse lawn overnight and gently reclaimed by botanical-illustration plates from a 19th-century herbarium. The tone is firmly **dreamy-ethereal** (a tone tag used in only ~1% of the corpus and therefore claimed here as the site's defining mood) — but anchored by Swiss rigor so the dreaminess never softens into cottagecore mush. Imagine an oral-history archive of court testimony rendered as a slow-loading magazine spread: every margin justified to a baseline grid, every paragraph fully measured in 11pt setting, every block of text introduced by a thin botanical icon (one icon per section, never reused) that has been pressed into the page like a flower in a casebook. The page should feel **listening**, not selling. There are no calls to action, no pricing, no statistics, no testimonials — only quiet rooms, hearing transcripts read like prose poems, and the very slow opening of petals along the gutter. Inspirational lineage: Josef Müller-Brockmann's *Tonhalle* posters, Hannah Höch's herbarium-collage notebooks, Karl Blossfeldt's *Urformen der Kunst* botanical photogravures, Tomás Saraceno's spider-web architectures, the closing chapter of W. G. Sebald's *The Rings of Saturn*, late-afternoon light on unvarnished oak benches. The whole site is one sustained inhalation; the visitor never reaches a CTA, only a fade. ## Layout Motifs and Structure The page is a **vertical masonry magazine** — *not* a card-grid, *not* a bento-box, but a true CSS-grid masonry (`grid-template-rows: masonry`) of irregularly-tall editorial blocks pinned to a single Swiss baseline grid. Masonry is used in only ~9% of corpus designs and never (in those instances) as the entire page skeleton; here it *is* the skeleton. **Spatial system.** - **12 columns**, 72px each at desktop, 24px gutters, 96px outer margins. Visible as a faint warm-white hairline overlay (`#E8DCC9`, 1px, 0.4 opacity) that is *always on* — the grid is decoration, not a debug tool. The visitor reads through the gridlines as through a windowpane. - **8px baseline grid**, also faintly visible as horizontal hairlines, every line of body text snapped exactly to it. Headings sit on multiples of 24px. - **Masonry tracks** of varying intrinsic height: the page is 9 columns of content + 3 columns of "marginalia" (a left-hand sidebar of botanical line-cuts, dates, and case-numbers that scrolls at 0.85x via parallax and never dominates). **Section rhythm (top to bottom).** 1. **Plate I — *The Bench at First Light*** (full-bleed, single masonry cell spanning 12 columns × ~120vh). A wash of Sunset Cream `#F4E2C4` with one botanical line-engraving of foxglove drifting upward through the type. The wordmark `courthouse · stream` is set in Playfair Display Italic at clamp(96px, 11vw, 220px), letter-spacing −0.02em, anchored to column 2, baseline 6 (96px from top). Beneath it, a 14-word epigraph in 14px Inter, set in 11 columns with deliberate ragged-right. 2. **Plate II — *Cases Heard, in Whispers*** (masonry, ~60% of width). Six tall narrow cells of varying heights (700px, 540px, 880px, 460px, 720px, 600px) holding fragments of fictional case-summaries — *In re Honeysuckle, 1927*; *Ex parte Bee*; *State v. Long Afternoon* — each opened by a different pressed-flower icon. 3. **Plate III — *The Stenographer's Garden*** (masonry, asymmetric, 8/12 columns). Four cells of varying height showing transcript-prose, with the right 4 columns left as `ma`-style negative space holding a single watercolor-tinted dog-rose. 4. **Plate IV — *Recess*** (full-bleed band, 9 columns of negative space + 3 columns of marginalia only). 320px tall. Pure breath. A single hairline runs across at the baseline. 5. **Plate V — *The Long Hearing*** (masonry, ~12 cells of *very* unequal height: 240/980/320/440/680/220/520/740/300/560/480/360). The longest passage of the site. A single column of testimony reads downward; surrounding cells hold botanical etchings, page-numbers in Playfair small-caps, and the names of months (set vertically). 6. **Plate VI — *Closing, with Pollen*** (full-bleed, 100vh). The grid dissolves: the hairline overlay fades from 0.4 to 0.0 opacity over the last viewport, and the petals (which have been hover-lifting throughout) finally drift loose and settle to the foot of the page in a gentle particle field. **Crucial layout rule:** the masonry never re-sorts on resize. Each cell has a *fixed* intrinsic height in vh, so the page's irregular silhouette is *authored*, not algorithmic. This is what separates editorial masonry from Pinterest masonry. The reader can return and find the same cliff and the same ledge. ## Typography and Palette **Type system — Google Fonts only.** - **Playfair Display** (regular 400, italic 400, bold 700) — the *playfair-elegant* face (1% corpus frequency, claimed as signature). Used for the wordmark, all plate titles, all case-numbers, and all running-head marginalia. Sized at clamp(96px, 11vw, 220px) for the wordmark, 56–72px for plate titles, 14px small-caps with +0.18em tracking for marginalia. The italic is the workhorse — Playfair's italic has the sharp brackets and high-contrast strokes of a 19th-century law-report title page, and it carries the *dreamy-ethereal* quality without ever tipping into wedding-invitation territory. Letter-spacing on display sizes is set tight (−0.02em) so the elegance reads as confident rather than precious. - **Inter** (regular 400, medium 500) — the *swiss* body face. All paragraph text is Inter 16/24 (16px size, 24px leading, exactly 3 baseline units). All UI labels are Inter 11/16 in tracked uppercase (+0.14em). Inter is chosen over Helvetica/Neue Haas because it has a true small-caps cut and the optical metrics needed to sit cleanly against Playfair's high contrast — the pairing should feel like a Swiss caption beneath a botanical plate. - **EB Garamond** (italic 400, used *sparingly*) — quoted testimony only. When the page renders a fragment of in-character courtroom dialogue, it shifts into EB Garamond italic at 17/26, indented 1 column, with no quotation marks. This third face appears in fewer than 8% of total characters; it is the dream-voice within the document. **Palette — `sunset-warm` (2% corpus frequency, claimed as signature).** | Role | Token | Hex | Use | |---|---|---|---| | Page (light) | `--paper` | `#F4E2C4` | Default background — warm cream like aged courtroom paper at 5pm | | Page (deeper) | `--vellum` | `#EBD0AC` | Recessed cells, marginalia gutter | | Ink | `--ink` | `#2A1E16` | Body text, hairlines | | Ink (soft) | `--ink-soft` | `#5C3F2A` | Marginalia, captions | | Sunset (rose) | `--rose` | `#E48A6E` | Petal motifs, link underlines | | Sunset (apricot) | `--apricot` | `#F4A66A` | Section dividers, low-glow | | Sunset (amber) | `--amber` | `#D67A3C` | Bookmark indices, page numbers | | Botanical (sage) | `--sage` | `#7E8E63` | Foxglove leaves, foliage line-cuts | | Botanical (deep) | `--moss` | `#3D4A2E` | Stem strokes, anchor accents | | Grid hairline | `--rule` | `#E8DCC9` | The visible 12-col / 8-baseline overlay | | Pollen | `--pollen` | `#F7D67A` | Particle drift in Plate VI | The palette has *no pure black and no pure white*. Even the highest-contrast text (`--ink` on `--paper`) reads at 8.7:1 — sufficient for clarity, but warm enough that the page never feels like a screen. ## Imagery and Motifs The imagery system is a deliberate, near-singular commitment to **icon-heavy** (1% corpus frequency, claimed as signature) crossed with **floral-botanical** (3% corpus frequency, claimed as signature) — a combination that, per the frequency report, no other site in the corpus carries. The page contains **zero photography**. Zero. This alone differentiates it from 98% of the corpus. **The Botanical Icon Set (custom, drawn-in-SVG).** Twenty-four hand-drawn line-engraving icons, each ~64×96px, each used exactly once. They are styled after Karl Blossfeldt's photogravures and Pierre-Joseph Redouté's etchings: 0.75px stroke in `--moss`, no fill, with one micro-detail picked out in `--rose` or `--amber`. The set: - **Plate I** — Foxglove (full stem, three blossoms) - **Plate II** — Honeysuckle, Bee (in flight), Wisteria cluster, Dog-rose, Hawthorn berry, Iris bud - **Plate III** — Wild dog-rose (with single watercolor wash, the only watercolor on the page) - **Plate V** — Twelve monthly herbs, one per page-cell: Snowdrop, Crocus, Daffodil, Bluebell, Lily-of-the-Valley, Foxglove, Honeysuckle, Sunflower, Aster, Chrysanthemum, Witch-hazel, Hellebore. - **Plate VI** — Pollen drift (loose particle SVG, ~80 small dots). Each icon is the *opening flourish* of its section — it sits in the leftmost column at the cap-height of the title, never as a hero, never centered, never decorative-only. Functionally, the icons are **section sigils** the way 19th-century herbarium plates are page-sigils. **The Hairline Overlay.** A persistent decorative element: the 12-column + 8-baseline grid is rendered as visible cream-on-cream hairlines (`--rule`, 1px, opacity 0.4). This is not a debug grid — it is the *patterned wallpaper* of the courthouse. It animates only once: at site load it draws itself in via SVG path-stroke (1200ms, ease-out, staggered column-by-column 60ms apart), then sits permanently. **Marginalia.** The left-hand 3 columns hold a slow vertical run of: dates set in Playfair small-caps (1887, 1903, 1924, 1948, 1971…), case numbers (`№ 14-7331`), pressed-flower icons rotated −7deg, and short prose annotations in 11px Inter. The marginalia scrolls at 0.85x of the main column — slight parallax, used not for spectacle but for the gentle vertigo of opening an old book whose deckle-edges are not perfectly aligned. **The Petal Layer.** Above all content, beneath the cursor, drifts a layer of ~14 individual SVG petals (rose, foxglove, wisteria) at 0.04 opacity, each floating on its own slow loop of 38–62 seconds with a Y translation and a 0.2deg rotation. They are **never** more visible than the text. They are the *dust* of the dream. **Cursor halo.** A single 320px radial gradient (`--pollen` at 12% → transparent) follows the cursor with 240ms spring-lag. Within 80px of the cursor, the petal-layer brightens from 0.04 to 0.18 opacity. This is the only "cursor-follow" effect on the site, and it is so soft as to be nearly subliminal. ## Prompts for Implementation Build courthouse.stream as a **single statically-served HTML document** — no SPA, no router, no client framework. Total page height is approximately 720vh. The narrative is the scroll. There are exactly **six plates**, six headings, six sigils, and six baseline-snapped sections. There is **no navigation menu** anywhere on the page — there is one anchor list in the footer (Plates I–VI), set in 11px Inter small-caps tracked to +0.14em, and that is all. **Opening sequence (0–2400ms).** - 0ms — paint `--paper`. The page is silent. - 200ms — the 12-column + 8-baseline hairline overlay begins drawing itself in. SVG `stroke-dasharray` animation, columns first (left→right, 60ms stagger, 600ms each), baselines second (top→bottom, 30ms stagger, 400ms each). Total draw: 1600ms. - 1000ms — the Foxglove sigil begins its `path-draw-svg` animation in column 1, line-by-line over 1400ms (the underused `path-draw-svg` pattern, used purposefully here as the site's *opening gesture* — the herbarium plate is being inked in front of the visitor). - 1400ms — the wordmark `courthouse · stream` fades in (Playfair Display Italic 220px, opacity 0→1 over 1000ms, no translate). - 2000ms — the epigraph paragraph staggers in, word-by-word, 24ms per word. - 2400ms — the page exhales. Petal-layer fades from 0 to 0.04 opacity over 1200ms. Scrolling is now permitted. **Storytelling spine.** Each plate is a tiny narrative — a hearing, a recess, a season — and the visitor moves through them as through chapters of an annual record. The text content is *fictional courtroom poetry*, never marketing. Sample (Plate II, third cell): > *In re Honeysuckle, 1927.* The petitioner, a southern white honeysuckle (Lonicera japonica), came before the bench in late June, scenting the gallery so heavily that the stenographer's ink ran into the margins. The petition was for a continuance until first frost. The court, listening, granted it without further argument. **Animations — restrained and editorial, never performative.** - **hover-lift** (15% corpus frequency — used here as the *primary* interaction). On hover, each masonry cell rises by exactly 8px (one baseline unit) over 320ms with a soft cubic ease, and its hairline border deepens from `--rule` to `--ink-soft`. The entire page interaction model is built on this single gesture. No hover-flips, no scale, no glow. Eight pixels, one baseline, every time. - **fade-reveal** on scroll (7% corpus frequency, underused). Each masonry cell fades in from 0.0 → 1.0 opacity and translates from +12px → 0 over 800ms when its top edge crosses 75% of the viewport. `IntersectionObserver`, threshold 0.0, rootMargin "-25% 0px". - **path-draw-svg** for every botanical sigil. Each sigil draws itself in only when its section enters view, and only the first time. Once drawn, it stays. The sigils are the page's heartbeat. - **Parallax** for marginalia at 0.85x scroll-rate (gentle, not 0.5x — that would feel like a CD-ROM). - **No** spring physics, **no** magnetic cursor, **no** cursor-trail, **no** elastic, **no** ripple, **no** tilt-3d. The page is meditative; it does not need to flirt. **Reading rhythm.** Body text in Plate V (the longest plate) is set as a single 6-column-wide column of Inter 16/24 with the surrounding cells visually *quieter* — they shrink in opacity from 1.0 to 0.62 when the reader's scroll position has them out of the central viewport band. This is the only attention mechanic on the page; it is gentle and respectful. **Responsive.** Below 960px the 12 columns collapse to 6, the masonry becomes 2-column (with the same authored irregular heights, scaled), the marginalia drops below the main column as a footnote band, and the hairline overlay reduces to baseline-only (the column lines hide). Below 560px, single-column, sigils centered above titles, marginalia hidden entirely, petal layer reduced to 6 particles. **Footer.** A 64vh quiet band of `--vellum`. A single line in Playfair Italic 14px: > *The court is always in session, and the garden is always listening.* Beneath it, the six plate-anchors in tracked Inter small-caps. Nothing else. No social icons, no copyright, no email signup. **AVOID:** CTA buttons, pricing tiers, stat-grids, testimonials, hero "get-started" panels, dashboard previews, social proof, photography of any kind, glassmorphism, gradient meshes, neon glow, parallax that travels more than 18% of viewport height, any animation longer than 1600ms, any third color outside the documented palette, autoplay video, modals, popups, "trusted by" logo bars. None of those belong in this courthouse. ## Uniqueness Notes This design's differentiators, none of which other CMassC sites should duplicate: 1. **True masonry as the entire page skeleton, not a component.** Masonry sits at 9% corpus frequency and is, in those instances, used for a single gallery section. Here masonry *is* the site — six full-page plates, each a masonry composition, each cell of authored intrinsic height. No card-grid, no bento, no full-bleed hero. The page silhouette is irregular by design. 2. **The triple-rare seed lock.** Three signature axes are each at ≤3% corpus frequency: `playfair-elegant` (1%), `sunset-warm` (2%), `dreamy-ethereal` tone (1%). The intersection of these three (Playfair Display elegant serif on sunset-cream warmth in a dreamy mood) is unprecedented in the corpus. The frequency report shows zero overlap. 3. **Zero photography.** Photography sits at 98% corpus saturation. courthouse.stream is one of the ~2% of sites with none, and goes further by replacing it with a custom 24-icon botanical-illustration set (`icon-heavy` at 1%, `floral-botanical` at 3% — the intersection is unique). 4. **The visible Swiss grid as decorative wallpaper.** Swiss aesthetic (7%) is usually expressed *through* the grid (alignment, hierarchy). Here the grid is *literally drawn in* — 12 columns and an 8-baseline grid as cream hairlines that sit permanently on the page, animated in over 1.6 seconds at first paint. The grid is the chrome of the building. 5. **`hover-lift` as the *only* interaction.** Hover-lift is at 15% corpus frequency but is almost always one of *several* hover effects on a page. courthouse.stream commits to it as the singular interaction model — exactly 8px (one baseline unit), exactly 320ms, every cell, every time, no exceptions. The discipline is the design. 6. **Storytelling without selling.** The corpus is dominated by CTA-led, pricing-led, dashboard-led, stat-grid-led layouts. courthouse.stream has *none*. Six plates, fictional courtroom poetry, a dissolving grid, drifting pollen. The visitor leaves having read a small magazine, not having clicked a button. 7. **Path-draw SVG as opening ritual.** `path-draw-svg` is at 25% corpus frequency but is usually used as a hover ornament. Here, every botanical sigil draws itself in once (`IntersectionObserver`), and the first sigil's draw-in is the *primary* opening gesture of the entire site — replacing the hero typography reveal that 91% of full-bleed designs lead with. 8. **Authored masonry, not algorithmic.** The cell heights are hard-coded in vh, not driven by content length. The reader can revisit and find the same cliff, the same ledge — the page is a *place*, not a feed. **Chosen seed (from assignment):** aesthetic: **swiss**, layout: **masonry**, typography: **playfair-elegant**, palette: **sunset-warm**, patterns: **hover-lift**, imagery: **icon-heavy**, motifs: **floral-botanical**, tone: **dreamy-ethereal**. **Avoided patterns (from frequency analysis, deliberately not present):** photography (98%, absent), gradient palette (97%, absent — the warmth here is flat sunset wash), parallax-as-spectacle (95%, reduced to 0.85x marginalia only), spring physics (78%, absent), cursor-follow (78%, reduced to a single 240ms pollen halo), stagger-everything (75%, absent — only the wordmark and the grid stagger), magnetic (68%, absent), glassmorphism (68%, absent), full-bleed hero (91% of layouts, absent — every plate is masonry), card-grid (77%, absent), centered layout (82%, absent — every block is column-anchored). The page is a quiet rebellion against the corpus's defaults.