# Design Language for moot.ing ## Aesthetics and Tone **moot.ing** is a *debating hall carved from pale limestone*, a place where contested ideas are weighed against each other with the unhurried gravity of a Nordic thing-assembly — but rendered in the warm, earthbound palette of a Tuscan terracotta workshop. The aesthetic is **scandinavian-functional meeting classical warmth**: Scandinavian restraint (vast negative space, a single structural spine, no decoration for its own sake) collides deliberately with the sensory richness of sun-baked clay, Roman marble veining, and the ambient grain of old linen. The mood is **warm-inviting but intellectually serious** — the kind of room where people arrive with positions and leave having changed them. Every surface has the slight roughness of handmade ceramic; nothing is too perfect, too corporate, or too cold. The noise texture sits beneath all color fields like the tooth of watercolor paper, preventing any zone from feeling flat or synthetic. The domain itself leans into "moot" in its full etymological ambivalence: both *open to debate* and *a formal assembly for judgment*. The visual language honours both — structured enough to convene argument, open enough to leave no verdict final. --- ## Layout Motifs and Structure The page is built on an **asymmetric three-zone composition** with a pronounced off-axis spine: the primary reading column sits at x = 58% of viewport width on desktop (left-heavy), while a narrow vertical *pillar strip* at far left (72px wide) holds section indices, thread-line ornaments, and the running domain mark. A third ghost column at far right (never wider than 18vw) carries pull-quotes, marginal counterarguments, and decorative marble-vein SVG fragments — it bleeds off-screen on smaller viewports. **Macro structure (scroll narrative, top to bottom):** 1. **THE STELE** — full-viewport hero. No image. Wordmark `moot.ing` set at clamp(5rem, 12vw, 11rem), pushed to the lower-left quadrant, beneath a thin horizontal rule that divides the screen at 62vh. Above the rule: near-empty space occupied only by a slowly rotating marble disk (CSS 3D tilt-reactive to cursor). Below: the tagline set in tight italic Garamond at 1.1rem, in terracotta-dark. Noise grain overlay at 18% opacity covers the entire stele. 2. **THE ARGUMENT FIELD** — three full-width horizontal slabs, each one a "position paper." Each slab is 100vh tall. Left slab edge clips at 7% diagonal (CSS `clip-path: polygon`) so slabs feel like stacked stone tablets. Alternating warm-cream and pale-limestone backgrounds. Marble vein SVG path-draws in on scroll entry. 3. **THE COUNTER** — a narrow horizontal band (40vh) in deep terracotta-dark (`#3D1A0F`), full-bleed. White Cormorant Garamond italic at large scale. This is the "counterargument zone" — visually inverted from the rest of the page. 4. **THE ASSEMBLY** — a loosely packed set of floating argument cards, arranged in a gentle leftward diagonal cascade. Cards tilt in 3D on hover (tilt-3d pattern). Each card carries a marble-texture header strip, a body set in EB Garamond, and a terracotta accent thread. 5. **THE VERDICT** — a closing full-viewport slab that ends in deliberate ambiguity. The only interactive text element: a two-choice toggle ("settled / still moot") that flips between two typographic states with a spring animation. **Grid:** CSS Grid with `grid-template-columns: 72px 1fr 18vw`. On mobile: single column, pillar strip collapses into a top bar with horizontal section dots. --- ## Typography and Palette **Primary Display:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 300 (Light) and 600 (SemiBold italic). Used at clamp(3.6rem, 9vw, 8.8rem) for the hero wordmark. The italic 600 variant carries the "still moot" conceptual weight throughout. Letter-spacing at -0.018em for display sizes; reset to 0 for body. Cormorant Garamond's unusually high x-height and elegant swash alternates give the page its classical-scholarly voice without feeling antiquarian. **Secondary / Body:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond) — weight 400 regular and 500 medium, set at clamp(1rem, 1.4vw, 1.2rem) with line-height 1.72. EB Garamond's slightly darker ink-trap rendering on screen makes it feel typeset rather than printed — ideal for argument-body copy that needs to be read slowly. **UI / Labels / Indices:** [Inter](https://fonts.google.com/specimen/Inter) — weight 400 only, all-caps, letter-spacing 0.14em, font-size 0.72rem. Used exclusively for section numbers, pillar-strip marks, and the toggle switch label. Serves as the austere Nordic counterweight to Garamond's warmth. **Color Palette:** | Role | Name | Hex | |---|---|---| | Background primary | Limestone white | `#F2EDE4` | | Background alternate | Pale plaster | `#EAE3D6` | | Text primary | Carbon-ink | `#1C1410` | | Accent dominant | Terracotta | `#C2613A` | | Accent deep | Fired clay | `#8C3A1E` | | Accent warm | Dusty sienna | `#D4845A` | | Contrast zone | Kiln-dark | `#3D1A0F` | | Marble vein | Cool verite | `#B8AFA3` | | Ghost column | Silver-sage | `#CEC7BB` | | Highlight trace | Warm cream | `#F7F2EA` | All backgrounds carry a CSS `noise-texture` grain overlay generated via an SVG `feTurbulence` filter at baseFrequency 0.65, numOctaves 4, opacity 12–22% depending on zone. --- ## Imagery and Motifs **Noise texture is the foundational image system.** Every color field — hero, slabs, cards, the counter band — is overlaid with an SVG-generated grain that simulates the tooth of handmade limestone plaster or linen canvas. The grain is not decorative; it prevents any zone from reading as a flat digital rectangle. Different zones use different grain densities (hero at 18%, body slabs at 12%, the kiln-dark counter band at 28% — darker zones absorb more grain visually and need more to read as textured). **Marble classical motifs** are the primary decorative vocabulary: - **Marble disk** in the hero: a circular SVG element (~28vmin diameter) with procedurally-generated vein paths (thin `stroke` SVGs, bezier curves in `#B8AFA3` and `#CEC7BB` at 0.3–0.6px stroke-width) that slowly rotate at 0.4rpm and respond to cursor tilt via the tilt-3d interaction pattern. The disk has no fill — it is a pure vein-drawing floating above the limestone background. - **Marble vein fragments** in the argument slabs: path-draw SVG animations trigger on scroll entry. Each slab has 2–3 vein fragments (irregular horizontal strokes, 40–70% viewport width, weight 0.8px) that draw in from left-to-right over 1.4s when the slab enters viewport. These read as geological strata — evidence that the argument slab was cut from real stone. - **Stone tablet edge motifs**: the `clip-path: polygon` diagonal cuts on each argument slab expose a thin decorative edge `box-shadow` in fired clay (`#8C3A1E`) that simulates the carved stone shoulder of a stele. - **Card marble headers**: Each assembly card (in THE ASSEMBLY section) carries a 48px-tall header strip filled with the marble-texture grain overlay tinted in warm terracotta, distinguishing card heading from body. **No photography. No raster images. No stock assets.** All visual richness comes from CSS grain, SVG vein paths, and typographic weight. --- ## Prompts for Implementation Build moot.ing as a **single-page philosophical debate chamber** — a place that feels ancient but is clearly digital, warm but not domestic, structured but never resolved. **Do not implement:** navigation menus, pricing sections, CTA buttons, social proof blocks, testimonial carousels, sticky headers, modal popups, or any e-commerce pattern. The page has no "conversion goal" — it exists to be read and experienced. **The Stele (hero):** - `overflow: hidden` on the container; wordmark uses `mix-blend-mode: multiply` against the limestone background so the letterforms absorb the grain beneath them rather than sitting on top. - The marble disk SVG should be positioned with `position: absolute; top: 8vh; right: 14vw` on desktop. On scroll, it moves upward at 0.3× scroll velocity (mild parallax), fading out at 40vh scroll depth. - Cursor enters the stele → tilt-3d: the disk rotates ±8deg on both axes tracking cursor position, with a 180ms ease-out spring return. Use `perspective: 900px` on the container, `transform: rotateX() rotateY()` on the disk element. **Argument Slabs:** - Each slab is `height: 100vh; overflow: hidden`. The clip-path diagonal cut is applied as `clip-path: polygon(0 0, 100% 0, 100% 94%, 7% 100%)` alternating with `polygon(0 6%, 100% 0, 100% 100%, 0 100%)` for visual rhythm. - Marble vein SVG path-draw: use `stroke-dasharray` equal to total path length, `stroke-dashoffset` starting at full length, animated to 0 on scroll entry via IntersectionObserver with `animation: drawVein 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards`. - Each slab title is Cormorant Garamond 600 italic at clamp(2.4rem, 5vw, 4.8rem). Slab body is EB Garamond 400 at 1.1rem, max 65ch width. **The Assembly (card field):** - Cards are positioned with CSS Grid but offset with `translateY` stagger: odd cards at `translateY(-24px)`, even at `translateY(24px)`, creating a gentle diagonal river of argument. - tilt-3d on hover: `perspective: 600px; transform: rotateX(var(--rx)) rotateY(var(--ry))`. Mouse-position is tracked in JS; `--rx` and `--ry` are CSS custom properties updated on `mousemove`. Add `transition: transform 80ms linear` during tracking, `transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1)` on mouseleave (spring back). - Cards stagger-enter on scroll: `opacity: 0; transform: translateY(32px)` → `opacity: 1; transform: translateY(0)` with 80ms per-card delay using IntersectionObserver on the card container. **The Verdict Toggle:** - A single horizontal pair of words: `settled` / `still moot`. Default state: `settled` is dim (Inter 400, `#B8AFA3`), `still moot` is dominant (Cormorant Garamond 600 italic, `#C2613A`). Click toggles which is dominant. Spring animation on the transition: both words scale and opacity-cross-fade over 280ms with `cubic-bezier(0.34, 1.56, 0.64, 1)`. - No other interactivity at the bottom of the page. The final element before the footer is a marble vein SVG fragment that path-draws in 3s after the toggle renders — the slowest draw on the page. **Noise texture implementation:** ```html ``` Encode as a data URI and apply as `background-image` tiled over each zone, blended with `mix-blend-mode: overlay` or `multiply` depending on background lightness. **Scroll behavior:** `scroll-behavior: smooth` on `html`. The pillar strip section index dots update their `background-color` to terracotta as each slab enters viewport, providing the only navigational feedback on the page. --- ## Uniqueness Notes 1. **Terracotta-warm palette at only 2% frequency in the registry, combined with Scandinavian aesthetic at <5% frequency** — no other design in the registry pairs Nordic structural restraint with fired-clay Mediterranean warmth. Most terracotta uses are in maximalist or bohemian contexts; this one uses it as a disciplined accent against limestone neutrals, creating a genuinely original chromatic register. 2. **marble-classical motifs via pure SVG vein-drawing (no textures, no rasters)** — marble-classical appears at only 2% in the motifs frequency analysis. This design goes further by generating the marble visually through `stroke-dasharray` path-draw animations rather than any photographic marble texture. The marble exists as drawing, not image — a conceptual distinction that makes the effect feel designed rather than decorated. 3. **tilt-3d applied to a non-card, non-product element (a rotating marble disk)** — tilt-3d appears at 8% in the registry but is universally applied to cards or product mockups. Using it on a pure SVG disc in the hero is a registry first, turning a geological decorative element into a haptic interaction. 4. **The "settled / still moot" toggle as the sole CTA** — every other design in the registry ends with a call-to-action, sign-up form, or contact button. moot.ing ends with a philosophical toggle that has no downstream consequence. This is an anti-conversion-funnel design decision that is true to the domain's meaning and unprecedented in the registry. 5. **EB Garamond + Cormorant Garamond two-Garamond typographic system** — garamond-classic appears at only 5% in the typography frequency. Using two distinct Garamond-family fonts (Cormorant for display, EB for body) to create intra-family contrast — different optical sizes, different ink weights, different historical inspirations — is a nuanced typographic decision that creates warmth and coherence simultaneously, with no sans-serif at all except Inter for UI micro-labels. **Chosen seed:** aesthetic: scandinavian, layout: asymmetric, typography: garamond-classic, palette: terracotta-warm, patterns: tilt-3d, imagery: noise-texture, motifs: marble-classical, tone: warm-inviting **Avoided from overused patterns:** parallax (78% — avoided entirely), stagger (55% — used only for card entry, not as primary animation), photography (90% imagery — zero photography), warm gradient (89% palette — warm but no gradient), hand-drawn aesthetic (60% — not used), editorial aesthetic (52% — not used).