# Design Language for moral.quest ## Aesthetics and Tone moral.quest is **a pilgrim's notebook left open on a reading-room table at the hour the lamps are lit** — the visual register of a *light-academia* manuscript that has been carried up a mountain, annotated in the margins, and pressed flat by the weight of better questions than it can answer. The site is not a course, not a quiz, not a "discover your ethical type" funnel. It is a **slow walk through a single moral dilemma**, rendered as a vertical pilgrimage: you descend the page the way you'd descend a switchback trail, and at each landing a new consideration is laid in your hands like a stone to weigh. The mood is **scholarly-intellectual but warm** — honeyed paper, sepia ink, the hush of a library that smells of beeswax and old glue. Nothing is neon. Nothing pulses. The animation vocabulary is the **slow ink-bleed of a fountain pen** and the **patient draw of a hand sketching a diagram** — never bounce, never elastic, never magnetic cursor-chase. The emotional arc moves from *certainty* (the dilemma stated plainly, almost smugly) through *complication* (each turn of the trail adds a weight to the other side of the scale) to *humility* (the page ends not with an answer but with the scale trembling, and a blank ruled line inviting the reader's own marginalia). Think: Iris Murdoch's prose, Bernard Williams's footnotes, the diagrammatic clarity of a Tufte plate, the paper-grain of a Penguin Classics interior — fused into one scrolling artifact. The tone of voice in copy is the patient lecturer who refuses to let you off the hook: second person, present tense, never hectoring, frequently turning the question back on you. "You said you'd pull the lever. You're sure. Now turn the page." ## Layout Motifs and Structure The spine of the site is a **timeline-vertical** composition — a literal **trail line** drawn down the center-left of the page in sepia ink, with a faint dotted shadow as if the ink soaked through. The trail is not decorative chrome; it is the **scroll-progress indicator**, the **table of contents**, and the **narrative armature** all at once. Along it sit **waypoint nodes** — small filled circles, each one a milestone in the moral argument — and from each node the content unfurls to the right in a single, generous reading column (max ~62ch, the width of a well-set book page). `timeline-vertical` sits at only ~3% in the frequency analysis and `book-scholarly` motifs at ~4% — moral.quest claims that quiet shelf. There is **no card-grid, no bento-box, no dashboard, no hero-dominant splash, no stat-grid, no pricing table, no testimonial carousel.** The page is one continuous scroll, no internal routes. Structural elements: - **The Trail (the central rule).** A 2px sepia line, dotted-shadowed, running the full document height down the center-left gutter. It "draws itself" via SVG path-draw as you scroll — ink appearing to flow downhill ahead of your reading. - **Waypoint Nodes.** ~7 of them. Each is a sketched circle (rough, hand-compass-drawn, not a perfect `border-radius:50%`). Reaching one in the viewport triggers a soft ink-bleed reveal of its content block. - **The Reading Column.** Right of the trail, ragged-right body text in a serif face, with **true marginalia** floating in the wider left/right margins — short pencilled glosses, dates, contrary citations, set smaller and tilted ~1.5°, in a handwritten face. - **The Scale (the recurring instrument).** A small inline SVG balance-scale, hand-drawn, that re-renders at several waypoints. Each new consideration visibly tips it. It is the page's emotional dial. It begins level, ends quivering. - **The Margin Ledger (footer-as-blank-page).** The page ends not with links and a newsletter box but with a **ruled blank half-page** — faint horizontal rules, a heading like "Your verdict, and why" — pure invitation, no form submission required. - **Asymmetry by design.** Content hangs off the left-of-center trail, so the page is deliberately weighted left, with airy right margins for breathing — `ma-negative-space` (~13%) used as silence between considerations. ## Typography and Palette **Fonts — all Google Fonts only:** - **Body / Reading Column — *EB Garamond*** (`wght` 400/500, with its true italic).** The interior-of-a-philosophy-paperback voice. Generous x-height for a Garamond, beautiful old-style figures, set at ~21px / 1.7 line-height, ragged-right, with drop-cap-free but small-caps lead-ins on each waypoint ("CONSIDER —"). - **Display / Waypoint Headings — *Cormorant Garamond*** (`wght` 600, large optical feel).** Used for the dilemma title and each of the ~7 waypoint headings, set large (clamp ~2.4rem → 4.2rem), tight tracking, almost calligraphic. The contrast between Cormorant's high-contrast blade-thin serifs and EB Garamond's sturdier body gives the page its "frontispiece vs. text-block" feel. - **Marginalia / Glosses — *Caveat*** (`wght` 500).** A real fountain-pen-ish handwriting face for the floating margin notes, dates, and the reader-prompt at the foot. Tilted ~1.5°, sepia, ~15px. Handwritten faces sit at ~29% but almost never paired *with* a Garamond academic body in this corpus — that pairing is the signature. - **Folios & Trail Labels — *IBM Plex Mono*** (`wght` 400), used sparingly.** Tiny waypoint indices ("i.", "ii.", "iii."), the running scroll-percentage, and the date-stamp in the header — a single thread of mono to mark the "this is a documented inquiry" register. Mono is near-ubiquitous (94%) so it is deliberately *minimized* here — present only as fine print, never as a body or display voice. **Palette — honeyed-neutral, sepia-ink, lamp-glow (warm but emphatically muted, no gradients-as-spectacle):** - `#F6EFE2` — **Aged Page.** The dominant background. Warm cream, the colour of rag paper held near a lamp. - `#EBE0CB` — **Deckle Edge.** Slightly deeper cream for the marginalia bands and the blank-page footer rules. - `#3A2E22` — **Walnut Ink.** Near-black brown for body text — never pure `#000`. - `#7A5C3E` — **Sepia.** The trail line, waypoint nodes, small-caps lead-ins, and most rule-lines. - `#A6743A` — **Lamp Brass.** Warm accent for the balance-scale's beam, active waypoint node fill, and link underlines. - `#5C6E4E` — **Sage Marginalia.** Muted olive-green for *contrary* citations in the margins — the colour of a second, dissenting hand. The only non-brown hue, used like a single drop of green ink. - `#9A2E2E` — **Errata Red.** Reserved, scarce — used *once or twice*, for the moment a consideration "overturns" the reader's earlier confident answer (a struck-through line, a "but —" in the margin). Its rarity is the point. A faint **paper-grain texture overlay** (SVG turbulence, very low opacity) sits over everything; a soft radial **lamp-glow** vignette warms the top-center, brightest where you're reading. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No icon sets.** Every visual is a **hand-drawn-feeling SVG line illustration**, sepia-inked, slightly imperfect — the diagrams a careful lecturer would chalk while thinking aloud. (`line-illustration` ~8%, `photography` ~98% — this is a deliberate refusal.) The recurring visual vocabulary: - **The Balance Scale** — the hero motif. A two-pan apothecary's balance, drawn in a few confident strokes, that *re-renders tipped* at each waypoint as weights accumulate. Animated by morphing the beam's rotation and the chains' hang. - **Trail & Waypoints** — the central sepia rule with its soaked-through dotted shadow; rough compass-circle nodes; faint hatched "elevation" marks beside the deeper waypoints, as if the trail is climbing. - **Marginal Hands** — tiny **manicules** (☞ pointing-hand glyphs, hand-drawn, not the Unicode char) pointing from the margin into key sentences, the way a medieval reader flagged a passage. - **Weighing-Stones** — small pebble shapes, each labelled with a consideration ("the five lives," "the one you'd be killing," "the difference between doing and allowing"), that visually "drop" onto a pan when their waypoint is reached. - **Diagram Plates** — 1–2 spare Tufte-clean inline diagrams (e.g. a forking trolley track, a decision-tree of "do vs. allow"), pure line, labelled in EB Garamond italic. - **Pressed Specimen** — at the very end, a single pressed-flower-style line drawing of a laurel or olive sprig laid across the blank ledger, faint, as if the notebook closed on it. A quiet emblem of "judgment attempted, in good faith." - **The Underline-Draw** — links and emphasized phrases gain a hand-inked underline that *draws on* under the cursor, like underlining a sentence you'll return to. ## Prompts for Implementation Build moral.quest as **one HTML file, one CSS file, one JS module — a single vertical pilgrimage, ~90 seconds of unhurried scroll.** No router, no CTA bar, no pricing, no stat-grid, no testimonial row, no signup modal. The page *is* the argument. **Narrative structure (the trail, top to bottom):** 1. **Frontispiece.** Aged-page background, lamp-glow warming the top-center, a date-stamp in Plex Mono ("An inquiry, in seven turns"). The dilemma stated in Cormorant Garamond, large and plain — the famous lever; five down the track, one on the spur. A single line in EB Garamond: "You already know what you'd do. Good. Walk with it." The trail line begins to draw downward. 2–7. **Seven Waypoints**, each: a sketched node on the trail; a Cormorant heading ("i. The arithmetic", "ii. The hand on the lever", "iii. Doing and allowing", "iv. The man you'd be using", "v. The promise no one made you", "vi. What you'd become", "vii. The trembling scale"); a generous EB Garamond reading column; a fresh weighing-stone dropping onto the balance; marginalia in Caveat (a date, a contrary citation in Sage, occasionally an Errata-Red "but —" striking through the reader's earlier confidence). The balance visibly tips a little more each time, never settling. 8. **The Margin Ledger.** The trail line ends in a small ink-blot. Below: a ruled blank half-page, "Your verdict, and why —", a pressed-laurel line drawing laid across it. No form. Just the invitation. The lamp-glow dims as if someone is leaving the reading room. **Animation & interaction direction:** - **Ink-bleed reveals.** Content blocks fade *and* "wet-edge" in — a subtle blur-to-sharp plus a 1–2px feathered alpha on first letters, like ink finding the page. Slow easing (cubic-bezier ~.22,.61,.36,1), 600–900ms. Never bounce, never overshoot. - **SVG path-draw** for the trail line and for each diagram plate (trolley track forking, the do/allow tree) — strokes draw on as their waypoint enters view. - **The Scale as scroll-instrument.** Bind the balance beam's rotation to *which waypoint is active*, with a slow spring-free tween between states. Add tiny secondary sway when a stone "lands." - **Underline-draw on hover** for links and key phrases; manicules in the margin gently nudge ~3px toward the sentence they flag on hover. - **Marginalia parallax — gentle only.** Margin glosses drift at ~0.96× scroll speed, no more — a whisper of depth, not a theme-park ride. - **Respect stillness.** If `prefers-reduced-motion`, render everything in final state — the trail fully drawn, the scale at rest near level, all reveals shown — and let the reader simply scroll a beautifully typeset essay. The page must be wonderful with zero motion. - **Type the dilemma, once.** The frontispiece dilemma may use a slow, deliberate typewriter-reveal (mono cursor) — the only typewriter moment, ~12s, skippable on first scroll. **Bias toward narrative immersion over conversion.** There is nothing to buy and nothing to sign up for. The only "success metric" is that the reader reaches the blank ledger less sure than they started — and the design's job is to make that descent feel like a privilege, not a lecture. ## Uniqueness Notes Differentiators from the rest of the corpus: 1. **The scroll progress bar *is* a hiking trail *is* the table of contents *is* the argument's spine** — one sepia-ink line doing four jobs at once. `timeline-vertical` is at ~3%, and even those uses are conventional event-lists; nobody here uses the timeline as a *moral switchback*. 2. **A live, scroll-bound balance scale as the page's emotional dial.** Not a stat-counter, not a progress ring — an apothecary's balance that re-renders tipped at every waypoint and ends *quivering, unresolved*. Refuses the genre's habit of ending on certainty/CTA. 3. **EB Garamond body + Caveat handwritten marginalia + a single thread of IBM Plex Mono fine-print** — a "philosophy-paperback-with-a-reader's-pencil-in-it" pairing. Handwritten faces are common (~29%) but almost never paired *with* a sober Garamond academic body and *minimized* mono; the combination is the signature. 4. **Errata Red used once or twice, on purpose** — a colour whose entire job is scarcity, marking the instant the reader's earlier confident answer gets struck through. Anti-dopamine: the corpus is 96% gradient, 7% dopamine-neon; this palette is honeyed-neutral muted with one drop of green and one drop of red. 5. **The footer is a blank ruled half-page, not a link farm or newsletter trap** — `ma-negative-space` deployed as the literal last word: an invitation to write your own verdict. 6. **No photography, no card-grid, no bento, no hero-splash, no pricing/stat/testimonial blocks** — explicitly avoiding `card-grid` (89%), `full-bleed` hero-dominant splashes, `photography` (98%), `cursor-follow`/`magnetic` (~89%/79%), `glassmorphism` (76%), `bounce`/`elastic`. The motion vocabulary is ink-bleed and patient path-draw only. Chosen seed/style: **classic serif revival book** — realized as a *light-academia* pilgrim's notebook (aesthetic: light-academia ~3%; layout: timeline-vertical ~3%; typography: baskerville/garamond-classic serif revival; palette: honeyed-neutral; patterns: path-draw-svg + underline-draw; imagery: line-illustration; motifs: book-scholarly; tone: scholarly-intellectual). Avoided per frequency analysis: card-grid, bento-box, hero-dominant, photography, gradient-as-spectacle, dopamine-neon, glassmorphism, cursor-follow/magnetic, spring/elastic/bounce.