# Design Language for moot.ing ## Aesthetics and Tone moot.ing is a **moot hill at dusk — a typographic court of contested points**. The domain hides three words inside one: the Anglo-Saxon *moot* (a folk-assembly held outdoors on a raised mound — the *witenagemot*, the *folkmoot*, the *moot hill* where the shire gathered to argue, judge and decide); the lawyer's *moot court* (a staged argument with no real stakes — practice for the real thing); and the modern *moot point* (a question rendered irrelevant, dissolved, retired from the debate). The site treats this triple meaning as load-bearing. Every screen is a **clearing on the mound**: two sides face each other across a worn grass circle, a question is raised, voices stack, and — at the end — the point goes *moot*: the type loosens its grip, the argument is filed, and the hill returns to wind. The mood is **deliberative, slightly weathered, quietly theatrical** — the gravitas of an old assembly without the dust of a museum. Think of the long shadow a standing stone throws at 6pm; the smell of trodden turf; the hush before someone speaks; the small comedy of two people who have been arguing so long they have forgotten the question. It is *not* a debate-club app, not a forum, not a "discourse platform" with upvote arrows. It is a **printed-and-staged thing**: part broadsheet of motions, part open-air theatre-in-the-round, part ledger of points that no longer matter. Tone words: **mysterious-moody** crossed with **scholarly-intellectual** and a thread of **whimsical-creative** (the "moot" pun is allowed to wink). Avoid: friendly-startup brightness, dopamine neon, glassmorphism frost, hand-drawn doodles. This is ink, turf, stone, and a single low sun. ## Layout Motifs and Structure The spine is a **diagonal-sections** descent — explicitly rare in the corpus (`diagonal-sections` ≈ 5%, against the dominant `full-bleed` 89% / `centered` 85% / `card-grid` 89%). The page is built as **seven motions**, and each *motion* is a full-viewport panel whose internal content is divided by a **single raked baseline** — a line that tilts 4°–7° off horizontal, the angle of the hill's slope. Left of the rake: the **affirmative bench**. Right of the rake: the **negative bench**. The rake itself is the **moot line** — where the two sides meet, where the contested sentence physically sits, set across the seam so half its glyphs lean uphill and half downhill. Structure of the descent (no nav bar; a thin vertical **gnomon** — a sundial-shadow rule — runs down the left edge and lengthens as you scroll, marking the hour): 1. **THE SUMMONS** — full-bleed turf-green void; the wordmark `moot·ing` rises from the lower third like a stone being set; one line: *"a hill where points are raised, argued, and — at last — made moot."* 2. **THE MOTION** — the contested sentence appears alone, enormous, straddling a 5° rake. It is the only text on screen. It will reappear, smaller and more battered, at the foot of every later motion. 3. **THE AFFIRMATIVE** — the left bench fills: stacked speech-blocks, each prefixed with a hairline bracket `⟨` and a Roman numeral, rising from the rake upward. The right side stays empty grass — *waiting*. 4. **THE NEGATIVE** — mirror: the right bench fills downward toward the rake; the left side's blocks dim to ghost-grey but stay legible, a transcript already spoken. 5. **THE CROSS** — both benches present at once; the rake steepens to 7°; thin connecting **arc-of-reply** strokes (SVG quarter-ellipses) link a left block to the right block that answers it. This is the only "busy" screen and it earns it. 6. **THE WEIGHING** — a single **balance-beam** rule pivots at center; as you scroll it tips — but never settles. Caption: *"the hill does not announce a winner. it announces an ending."* 7. **MOOT** — the resolution. The contested sentence returns one final time, then its letters **detach and drift uphill into wind** (each glyph a span, animated on a slow stagger); below, a quiet **ledger of moot points** — a numbered list of past motions, set small, in the manner of a court docket marked *DISPOSED*. The gnomon's shadow reaches its full length. End. Composition rules: generous *ma* — at least 22% top/bottom padding per motion; no card grid anywhere; benches are columns of unboxed text separated only by the rake and by hairline rules; everything aligned to the tilt, never to the window. The page must read as a **single broadsheet folded along a diagonal crease**, not a stack of components. ## Typography and Palette **Typefaces — Google Fonts only:** - **Spectral** (serif, weights 200/300/400/500/600, with italics) — the **voice of the assembly**. A legal-feeling, screen-tuned serif with crisp wedge serifs and tall x-height. Used for: the contested motion (Spectral 300, up to 8.5vw, optical tracking tightened), all speech-blocks on both benches (Spectral 400, 18px, 1.72 leading), the ledger of moot points (Spectral 400 italic, 14px). Italic Spectral carries every *aside*, every parenthetical, every "(this is now moot)". `serif-revival` registers ≈ 8% in the corpus — underused — and almost nobody uses *Spectral* specifically. - **IBM Plex Mono** (weights 300/400/500) — the **clerk's hand**: motion numbers (`MOTION IV`), Roman numerals on speech-brackets, the gnomon's hour marks, the `DISPOSED` / `MOOT` stamps, and the footer. `mono` is common (94%) but here it is deliberately demoted to *furniture* — labels and stamps only, never body — which inverts the usual hierarchy. - **Fraunces** (variable, soft optical axis, weights 300–600, italic) — used **once**, for the wordmark `moot·ing` and the seven motion titles (THE SUMMONS, THE MOTION…), at large sizes with the *soft* axis pushed warm. Fraunces' wobble gives the standing-stone letters a hand-cut, slightly eroded edge against Spectral's precision. **Palette — `warm-earthy` leaning toward dusk; muted, low-key, never bright:** - `--turf` `#2E3A2C` — deep trodden-grass green; the dominant ground of THE SUMMONS, THE WEIGHING, MOOT. - `--vellum` `#EDE6D6` — aged paper; the broadsheet surface for the argument motions; primary text-bearing field. - `--ink` `#23211C` — near-black warm ink; body type on vellum. - `--ochre` `#C98A3C` — low-sun ochre; the rake/moot line, the gnomon shadow, active brackets, the balance beam. The single accent — used sparingly, like the last light. - `--stone` `#9B9486` — weathered standing-stone grey; ghosted/already-spoken speech-blocks, hairline rules. - `--heather` `#7A6E83` — bruised heather purple; reserved exclusively for the *moot* state — the colour the contested sentence turns just before its letters drift off. - `--moss` `#5C6B4E` — mid-moss; secondary rules, the negative bench's numeral chips. Contrast pairings: `--ink` on `--vellum` for all argument text; `--vellum` on `--turf` for the void screens; `--ochre` is never used for body text — only lines, stamps, and the moot line's straddling glyphs. Background gradients are forbidden except one: a single 280%-tall vertical `--turf → #1B241A` dusk-fall behind the whole page, so scrolling down literally *darkens toward evening*. ## Imagery and Motifs **No photography.** (`photography` is at 98% — abstaining is itself the move.) Imagery is built entirely from **type, rules, SVG strokes, and one stone**: - **The moot hill** — never drawn literally. Implied by the 4°–7° rake on every panel and by the lengthening **gnomon shadow** down the left margin. The hill is a *slope you read along*, not a picture. - **The standing stone** — a single tall vellum-coloured rounded rectangle with a faint chiselled noise-texture (CSS `box-shadow` inset + a 3%-opacity SVG fractal-noise filter), on which the wordmark is "cut". Appears in THE SUMMONS and, fallen on its side, half-buried in turf, in MOOT. - **Speech-brackets** — every utterance opens with a thin `⟨` and a Roman numeral chip; long arguments get a matching `⟩` only when *answered* in THE CROSS. Unanswered points stay open-bracketed forever — a small visual ache. - **Arc-of-reply** — quarter-ellipse SVG strokes (1px, `--ochre`, `stroke-dasharray` drawn on scroll via `path-draw-svg`, ≈ 35% in corpus) that leap from a left block to its rebuttal on the right. The only "network" graphic on the site; it never becomes a node-graph. - **The balance beam** — a single horizontal `--ochre` rule with a triangular pivot; CSS-transform `rotate()` driven by scroll, oscillating ±9° and *damping toward, but never reaching, 0°*. - **The wind** — in MOOT, the contested sentence's glyphs each become a `` and translate up-and-leftward along the rake angle on a long stagger (1.4s spread), fading to `--heather` then to transparent. The only "particle" effect, and it is made of the argument's own letters. - **The docket stamp** — `MOOT` and `DISPOSED` rendered as IBM Plex Mono 500, letter-spaced wide, inside a thin double-rule rectangle, rotated −7° to match a hand-pressed stamp. Texture: a global **paper grain** at ≤4% opacity (SVG `feTurbulence`), warmer over vellum, cooler over turf. No bevels, no glass, no blobs. ## Prompts for Implementation Build as a **single static HTML page, scroll-only, no framework, no build step** — vanilla HTML, CSS custom properties + container queries, one small (~7KB) vanilla JS file for: scroll-progress (gnomon length, dusk gradient position, balance-beam angle), `IntersectionObserver` reveals (staggered speech-blocks), `path-draw-svg` on the arcs, and the final glyph-drift in MOOT. Target under 95KB before fonts. It must run smoothly on a decade-old laptop. **Narrative spine — "raise it, argue it, let it go":** the visitor climbs the mound at THE SUMMONS, hears the motion read out (THE MOTION), listens to the affirmative fill the hill, then the negative, watches them cross, sees the beam refuse to settle, and finally watches the question dissolve into wind at MOOT. The emotional arc is *conviction → contradiction → exhaustion → release*. The contested sentence is the protagonist; track its visual degradation: pristine Spectral 300 in THE MOTION → smaller and stone-grey at the foot of motions III–V → battered and italic in THE WEIGHING → heather, then airborne, in MOOT. **Motion-by-motion notes:** - *THE SUMMONS*: full `--turf`. Wordmark `moot·ing` in Fraunces (soft axis warm), rising via a 1.2s ease-out translate from +18px with a slow letter-stagger. The middle dot is `--ochre`. One Spectral-italic line beneath. A faint `IBM Plex Mono` label top-left: `THE MOOT · est. on a hill`. - *THE MOTION*: `--vellum` field. The contested sentence alone, ~8vw Spectral 300, set across a 5° rake (achieved by rotating a flex container, with the panel cropped via `overflow:hidden`). Nothing else but `MOTION I` in mono, top-right. - *THE AFFIRMATIVE / THE NEGATIVE*: speech-blocks are unboxed Spectral 400 paragraphs, max-width ~46ch, each preceded by `⟨ I`, `⟨ II`… in mono `--moss`. New blocks reveal bottom-up (affirmative) / top-down (negative) on `IntersectionObserver`, 90ms stagger, 12px rise, no bounce. The opposing bench, when present, sits at 38% opacity in `--stone` — readable, not erased. - *THE CROSS*: both benches at full strength; rake to 7°; arcs draw on as the section enters; on hover of any block, its connected arc and partner block lift to `--ochre`/full-ink while the rest dims to `--stone` — a quiet `blur-focus`/scale-hover micro-interaction, no jump. - *THE WEIGHING*: mostly empty `--turf`; the beam centered; one Spectral-italic caption; the beam's rotation is `scrollProgressWithinSection` mapped through a damped sine. It must *visibly never settle*. - *MOOT*: fade to deeper turf. Contested sentence returns once at ~3vw, holds 600ms, turns `--heather`, then glyph-by-glyph drifts up-left along the rake and fades. Below: the **ledger** — an ordered list `01 … 02 …` of past motions in Spectral 400 italic 14px, each ending with a rotated `MOOT` stamp. The gnomon shadow now spans the full viewport height. Final mono line, centered, small: `the hill keeps no minutes.` **Motion language:** everything tracks the slope. Reveals translate *along* the rake vector, not straight up. Easing is slow and weighted (`cubic-bezier(.2,.7,.2,1)`), 600–1200ms — the pace of someone choosing words. Honour `prefers-reduced-motion`: drop the glyph-drift to a simple fade, freeze the beam mid-tilt, draw arcs instantly. Respect — but do not foreground — accessibility; the brief is visual. **AVOID:** CTA buttons, "Join the debate" banners, pricing tiers, stat-grids, testimonial carousels, hero-with-signup, sticky nav bars, card grids, glassmorphism, dopamine gradients, mega-footers. There is exactly one "interactive" affordance — scrolling — and one hover behaviour (THE CROSS). The page persuades by *staging an argument and then letting it go*, not by converting. ## Uniqueness Notes Differentiators this design commits to — no other site in the corpus should duplicate them: 1. **The diagonal "moot line" as a structural spine.** Every panel is split by a 4°–7° raked baseline that the contested sentence physically straddles; content aligns to the slope, never to the window. `diagonal-sections` is ≈ 5% in the corpus against `full-bleed` 89% / `centered` 85% / `card-grid` 89% — and no one uses a *single tilting argument-seam* as the page's organising logic. 2. **Mono demoted to furniture; Spectral serif carries the body.** The corpus runs `mono` at 94% (almost always as a tone-setter). Here mono is restricted to labels, numerals and stamps, while `serif-revival` (≈ 8%, underused) — specifically **Spectral** — does all the talking. The hierarchy is deliberately inverted. 3. **The protagonist is a sentence that decays into wind.** The contested motion is tracked as a character through pristine → stone-grey → battered-italic → heather → airborne-glyphs. Type degradation *is* the story; the climax is the argument's own letters drifting uphill in MOOT. 4. **A balance beam that never settles, and a refusal to declare a winner.** No vote arrows, no score, no "resolution: TRUE/FALSE". THE WEIGHING tips forever; the ending is a *docket of disposed points*, not a verdict. 5. **No photography, no glassmorphism, no hand-drawn — and only one accent colour, used as "last light."** Against `photography` 98% and `hand-drawn` 96% and `glassmorphism` 76%, this is built from turf, vellum, ink, type, hairline rules and exactly one ochre. The whole page darkens toward dusk as you scroll — one permitted gradient, doing narrative work. Avoided overused patterns, per frequency analysis: `photography` imagery (98%), `hand-drawn` aesthetic (96%), `glassmorphism` (76%), `card-grid`/`full-bleed`/`centered` layouts (89/89/85%), `cursor-follow` (89%), `magnetic` (79%), `parallax` reduced to a single honest dusk-gradient. Leaned into underused: `diagonal-sections` layout (≈5%), `serif-revival` typography (≈8%), `mysterious-moody` + `scholarly-intellectual` tone, `path-draw-svg` arcs used sparingly, `warm-earthy` muted palette without neon. Chosen seed / style: **"experimental type layout"** — typography is the architecture; the page is a broadsheet folded along a diagonal crease, and the argument is staged, weighed, and released entirely through type, rules, and one low sun.