# Design Language for mores.quest ## Aesthetics and Tone mores.quest is a **subterranean archive of social contracts** — a place where unspoken rules, inherited customs, and the invisible grammar of civilization are excavated and displayed like mineral cross-sections. The word "mores" (Latin plural, meaning the customs and moral conventions binding a community) anchors the entire visual identity: this is a site that feels like entering a Roman bath-house repurposed as a data museum. The aesthetic is **dopamine-warm meets marble-classical**: the richness of ancient stone — travertine veining, ochre-tinted marble slabs, burnt sienna inlays — fused with the saturated warmth of dopamine color hits. Not clinical museum white, but the honeyed amber of candlelight in a stone crypt. Surfaces feel heavy, geological, *earned*. Against this weight, unexpected bursts of rich saffron (#E8A020), deep oxblood (#7A1A1A), and antique bronze (#A0742A) provide pulse-points of warmth. The tone is **mysterious-moody**: information is revealed slowly, like lifting a wax seal. Nothing is immediately legible — the visitor must pause, look closer, let their eyes adjust. Sections emerge from shadow like reliefs on a cave wall. The site does not explain itself upfront; it rewards sustained attention. Mood references: Piranesi's carceri d'invenzione, cross-sectional geological maps, wax tablet rubbings, Roman floor mosaics rendered as data visualizations, the amber glow of an oil lamp held over ancient text. ## Layout Motifs and Structure The layout uses **parallax-sections** as its primary structural logic: each "section" of the page is a distinct geological stratum — a horizontal band of marble-toned space that shifts at a different scroll velocity than the layers above and below it, creating a sense of excavating downward through civilization's strata. **Stratum Architecture:** - **Stratum 0 — Surface (100svh hero):** A full-bleed field of deep charcoal-veined marble texture (#1C1410 base with #2E2018 grain). The word `MORES` is rendered in variable-fluid Cormorant Garamond at ~18vw, tracking set to 0.35em, weight 300 — it feels incised into stone. Below it, the Latin subtitle "mores mortis vitaeque magistra" in 1.2rem Cormorant Italic, color #C4A882. A slow ripple animation — concentric golden rings expanding outward from cursor position — disturbs the marble surface like a drop in still water. - **Stratum I — The Mosaic (data-viz floor):** A full-width pseudo-mosaic: hundreds of small hexagonal cells, each containing a single "more" (e.g., "remove your shoes at the threshold", "speak softly in libraries", "bow to elders"). The hexagons render as a SVG data visualization — cells cluster by category (kinship, commerce, sacred, civic) using warm earthy color fills. On hover, a cell expands to reveal etymology and historical origin in Spectral 400. The mosaic scrolls at 0.7× the viewport rate (parallax layer). - **Stratum II — The Inscription Wall:** A diagonal-sections band where text runs at 7° from horizontal — columns of mores printed in a tight Cormorant Garamond condensed weight, overlaid on a warm stone-gray (#3A2E22) ground. The text is semi-transparent; legibility is intentionally partial. The ripple pattern appears here as an SVG wave that passes beneath the text columns. - **Stratum III — The Codex (deep archive):** A dark-mode inversion — charcoal ground (#0E0A08), with amber data-viz lines tracing the genealogical spread of specific customs across centuries. Rendered as animated SVG path-draw lines that appear as if being written in real time. Spectral 300 italic for labels; variable-weight Cormorant for numerals. - **Stratum IV — The Crypt Footer:** Returns to marble texture. A single large Roman numeral rendered in Cormorant at 30vw opacity 0.12, with the domain `mores.quest` in small-caps 1rem tracking 0.5em, centered. **Spatial logic:** - No navigation bar. A thin amber progress indicator on the right edge serves as the only wayfinding. - Sections are separated by 4px marble-vein dividers (CSS linear-gradient, not actual images). - Maximum content width: 1400px; generous padding 8vw horizontal. ## Typography and Palette **Typography — variable-fluid, all Google Fonts:** Three typefaces, each assigned a geological "depth level": - **Surface level — Cormorant Garamond** (Google Fonts): Variable font with wght 300–700 and optical-size axes. Used for all display headings, large numerals, and the primary logo incision. At large sizes (12vw+) the weight axis is animated via scroll — letters grow heavier as you scroll deeper, from 300 (surface) to 700 (crypt). Fluid sizing: `clamp(2rem, 8vw, 9rem)` for hero; `clamp(1.2rem, 3vw, 3.5rem)` for section heads. - **Body depth — Spectral** (Google Fonts): Variable serif designed for long-form reading. Used for all body copy, cell descriptions, and archive text. Weight 300 for ambient labels, 400 for readable body, 600 for emphasis. Fluid body size: `clamp(0.95rem, 1.5vw, 1.15rem)`. - **Data accent — Space Mono** (Google Fonts): Monospaced, used exclusively for data labels, numeric coordinates, date stamps, and classification codes (e.g., `[CIVIC:0412]`). Color always in amber #C88B2A. Size fixed at 0.75rem for data contexts. **Palette — warm-earthy, minimum 5 values:** | Role | Name | Hex | |------|------|-----| | Ground deep | Crypt Black | #0E0A08 | | Ground mid | Travertine Shadow | #1C1410 | | Ground surface | Stone Warm | #3A2E22 | | Text primary | Parchment | #E8DCC8 | | Text secondary | Aged Linen | #C4A882 | | Accent hot | Saffron Pulse | #E8A020 | | Accent warm | Oxblood | #7A1A1A | | Accent metal | Antique Bronze | #A0742A | | Data line | Amber Thread | #C88B2A | | Divider vein | Marble Vein | #2E2018 | All backgrounds use the warm-earthy palette. No cool grays, no whites, no blue tones. ## Imagery and Motifs **Imagery: data-viz rendered as classical artifacts.** The page's primary visual language treats data as carved relief. Every visualization looks like it was etched by a Roman engineer — precise, lapidary, unhurried. **Motifs:** 1. **Marble Veining:** CSS `background-image` using carefully crafted `linear-gradient` and `radial-gradient` stacks that simulate travertine veining. Not a photograph — a mathematically generated stone surface. Three distinct vein patterns used across strata (diagonal, swirl, straight-run). 2. **Ripple Interaction:** The signature animation. On cursor movement across the hero and Stratum II, concentric SVG rings expand from the pointer position at 0.4s intervals, amber color (#C88B2A), opacity fading from 0.6 to 0. Ring stroke-width: 1.5px. This is the "ripple" pattern from the seed — implemented as an interactive water-on-marble effect. On mobile, ripples originate from tap points. 3. **Hexagonal Mosaic Cells:** Each hex cell in Stratum I uses `clip-path: polygon()` with amber border `1px solid #A0742A33`. Category color fills: kinship=#7A3A2A, commerce=#4A3A1A, sacred=#2A2A1A, civic=#3A2A1A — all desaturated warm darks. The mosaic is the primary data-viz element; the color clustering is the visualization itself. 4. **Path-draw Genealogy Lines:** In Stratum III, SVG `` elements animate their `stroke-dashoffset` from 100% to 0% on scroll-trigger, drawing cultural transmission routes like illuminated manuscript marginalia coming alive. 5. **Wax Seal Decorative Element:** A single SVG wax seal (oxblood #7A1A1A, cracked-edge path) appears as a recurring micro-motif — in the progress indicator cap, as a section divider, and in the footer. 6. **Large Ghost Numerals:** Roman numerals (I, II, III, IV) positioned absolutely behind each stratum at 40vw size, opacity 0.04, color #E8DCC8 — they anchor the archaeological layer numbering visually without being legible text. ## Prompts for Implementation Build mores.quest as a **single-page archaeological descent** — the visitor is lowering themselves stratum by stratum into the geological record of human social behavior. There are no CTA buttons, no pricing, no testimonials, no stats grids. The experience is pure: atmosphere, data, narrative. **HTML/CSS/JS Implementation:** 1. **Parallax scroll engine:** Use `IntersectionObserver` + CSS `transform: translateY()` on each `.stratum` layer's background pseudo-element. Each stratum background moves at a different rate (Stratum 0: 0.3×, I: 0.5×, II: 0.7×, III: 0.85×, IV: 0×). This creates the layered geological descent sensation. Do NOT use a parallax library — pure CSS custom properties updated by a single `requestAnimationFrame` scroll listener. 2. **Variable font scroll animation (Cormorant wght axis):** A scroll listener maps `window.scrollY / document.body.scrollHeight` (0–1) to the CSS variable `--heading-weight` (300–700). Apply via `font-variation-settings: 'wght' var(--heading-weight)` on all `.display-heading` elements. The headings literally grow heavier as the visitor descends — a typographic metaphor for increasing historical weight. 3. **Ripple canvas overlay:** A transparent `` element covers the hero and Stratum II at `position: absolute; pointer-events: none`. On `mousemove`, push a ripple object `{x, y, r: 0, opacity: 0.6}` to an array. `requestAnimationFrame` loop increments `r` by 2px/frame, decrements opacity by 0.012/frame. Draw each as `ctx.arc()` stroke in `#C88B2A`. Remove when opacity ≤ 0. 4. **Hexagonal mosaic (Stratum I):** Generate 200–300 hex cells via JavaScript using SVG `` elements appended to an ``. Each cell gets a `data-category` attribute; on page load, animate cells in with a stagger: `setTimeout` cascade with 8ms delay per cell, scale from 0.3 to 1 + opacity 0 to 1. On hover: scale 1.4, add amber border glow `filter: drop-shadow(0 0 4px #C88B2A)`, reveal tooltip. 5. **Path-draw SVG lines (Stratum III):** Each `` element gets `stroke-dasharray: totalLength; stroke-dashoffset: totalLength`. `IntersectionObserver` triggers a CSS transition `stroke-dashoffset: 0` with `transition: stroke-dashoffset 2.5s ease-in-out` when the stratum enters the viewport. Lines are amber `#C88B2A`, stroke-width 1px, on a dark ground. 6. **Marble texture CSS:** Use layered CSS gradients, not images: ```css background: repeating-linear-gradient( 112deg, transparent, transparent 60px, rgba(200,139,42,0.04) 60px, rgba(200,139,42,0.04) 61px ), repeating-linear-gradient( 28deg, transparent, transparent 80px, rgba(228,220,200,0.03) 80px, rgba(228,220,200,0.03) 81px ), #1C1410; ``` 7. **Wax seal SVG micro-motif:** An inline SVG circle with `stroke-dasharray` giving a cracked wax edge, fill `#7A1A1A`. Used at 24px in progress indicator cap, 48px as a section terminus marker, 96px in footer center. 8. **No JavaScript frameworks.** Vanilla JS only. One CSS file, one JS file. The only external dependency is Google Fonts (Cormorant Garamond, Spectral, Space Mono) loaded via ``. 9. **Scroll storytelling arc:** The page tells a single story: *Human communities write their rules into the earth itself — layer by layer, age by age. To understand mores is to excavate.* Every stratum advances this narrative. The mosaic introduces plurality; the inscription wall shows compression; the codex reveals transmission; the crypt shows permanence. No section stands alone. 10. **Atmospheric audio hint (optional):** A subtle CSS `filter: blur(0px)` → `filter: blur(0.5px)` pulse on body at 4s intervals, almost imperceptible — gives the site a breathing, alive quality without actual animation. ## Uniqueness Notes **Differentiators from existing registry:** 1. **Parallax-sections as geological strata, not page sections.** Most parallax sites use the technique for depth-of-field decoration. mores.quest uses it as the primary *metaphor* and *narrative structure* — the visitor literally excavates downward through layers of civilization, with each stratum carrying distinct visual, typographic, and data-viz identity. The parallax IS the story. 2. **Variable font weight tied to scroll depth.** The Cormorant Garamond wght axis animates from 300 (featherlight, surface) to 700 (heavy, crypt) as the visitor scrolls. No other design in the registry uses the variable font's weight axis as a metaphorical device — type getting heavier as you go deeper is both technically novel and narratively coherent. 3. **Data visualization as ancient mosaic.** The hexagonal data-viz in Stratum I is rendered in the visual language of Roman floor mosaics — warm earthy fills, lapidary precision, no labels until hover. Most data-viz on the web is clinical and informational; this makes the data feel archaeological and material. 4. **Ripple interaction on marble surface.** The cursor-triggered ripple (water disturbing a stone surface) is the site's primary interactivity metaphor: the visitor disturbs the archive by looking at it. This ripple pattern is used in 3% of designs but never in this context — classical stone + water disturbance as a metaphor for inquiry. 5. **Dopamine-warm palette fused with classical dark ground.** The seed's dopamine aesthetic typically means neon/electric saturation. Here, dopamine warmth is achieved entirely within earthy warm tones — saffron, oxblood, antique bronze — against a crypt-dark ground. This is the dopamine of firelight, not electricity. **Chosen seed:** `aesthetic: dopamine, layout: parallax-sections, typography: variable-fluid, palette: warm-earthy, patterns: ripple, imagery: data-viz, motifs: marble-classical, tone: mysterious-moody` **Avoided patterns from frequency analysis (overused):** playful-rounded (5%), futura-geometric (5%), eclectic-hybrid (5%), sans-grotesk (5%), serif-classic (5%). This design uses variable-fluid typography (Cormorant Garamond variable) and warm-earthy palette — both underrepresented in the frequency report. The ripple pattern (3%) and data-viz imagery are also in the lower frequency range, making this design distinct in the registry context.