# Design Language for moral.quest

## Aesthetics and Tone

**moral.quest** is a philosophical playground dressed in the costume of a Victorian confectionery. The premise: what if the great moral questions of humanity — trolley problems, the veil of ignorance, the categorical imperative, virtue ethics — were printed on paper-wrapped bonbons and arranged on marble display shelves in a pastel apothecary? The site does not lecture. It does not preach. It offers moral dilemmas the way a shopkeeper offers sweets: here, try this one, it's quite rich, the aftertaste lingers for days.

The aesthetic is **light-academia meets candy-bright whimsy**. Think cream vellum pages left open in a dusty Oxford library, but someone has scattered sugar-glazed gumdrops across the text. The tension between the gravity of ethical inquiry and the levity of a confectionery is the entire point. Marble surfaces — cold, weighty, ancient — hold objects that are bright, soft, and fleeting: a pink macaroon, a lemony-yellow bonbon, a cornflower-blue hard candy wrapped in twist paper. The air smells of old books and spun sugar simultaneously.

Tone is **whimsical-scholarly**: never ironic, never dismissive. Treat Kant with the same delight as a particularly complex flavor combination. The visitor is always a curious guest, never a student being tested.

Mood references: Wes Anderson's pastel symmetry + the marginalia of a medieval illuminated manuscript + a confectionery shop's glass case on a rainy afternoon.

## Layout Motifs and Structure

The layout is built on **ma-negative-space** — Japanese negative space philosophy applied to moral philosophy. Each dilemma or thought fragment needs room to breathe, to float, to be considered. The page is never crowded.

**Macro Structure:**
- Full-height opening: a single marble shelf rendered in CSS, holding 3–5 floating candy objects, each labeled with a moral concept in ornate script. The shelf occupies 100vh with enormous whitespace above and below.
- Scrolling reveals a **floating archipelago** — isolated content islands drifting in a cream-to-ivory gradient sea. No grid boxes. No cards with borders. Each island is an asymmetrically placed typographic fragment with a floating decorative element nearby.
- The page is single-column in content, but objects drift into the left and right margins — a wrapped candy here, a quill pen there, a small marble fragment — placed at seemingly accidental but carefully considered positions using CSS `position: absolute` within scroll-locked containers.
- **Section rhythm:** massive gap → single thought → massive gap → illustration → massive gap → next thought. The ma is the content.
- Footer is a single centered line of small ornate text on marble texture, like the base of a museum plinth.

**Compositional rules:**
- No two adjacent content blocks share the same horizontal alignment (alternate: centered, 30% from left, 65% from left).
- Floating elements are positioned with `calc()` using viewport units to create drift that feels hand-placed.
- The marble shelf motif recurs as thin horizontal rules: a 4px rule with a marble-texture SVG pattern, preceded and followed by 12vh of vertical space.
- Scroll-linked parallax: floating candy objects move at 0.3× scroll speed. Text moves at 1× speed. Marble shelf fragments move at 0.6× speed. Three distinct depth layers.

## Typography and Palette

**Typography (all Google Fonts, verified):**

- **Display / Philosophical Headers**: [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 400 italic for dilemma titles. Set large — clamp(3.5rem, 8vw, 9rem) — with wide letter-spacing at 0.02em. The hairline serifs carry the scholarly weight. Variable axes: use `font-variation-settings` to animate `wght` from 400→700 on hover-lift.
- **Body / Meditation Text**: [`Lora`](https://fonts.google.com/specimen/Lora), weight 400, size clamp(1.05rem, 1.5vw, 1.25rem), line-height 1.85. Long-form philosophical fragments read like handwritten commonplace book entries.
- **Confectionery Labels / Candy Tags**: [`Dancing Script`](https://fonts.google.com/specimen/Dancing+Script), weight 600, size 0.85rem–1.1rem. Used for the small curling labels on floating candy objects. These labels contain the moral concept name (e.g., "Utilitarianism," "The Veil," "Categorical Imp.").
- **Metadata / Attribution**: [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond), weight 400 italic, size 0.8rem. For philosopher attributions, footnote-style asides in the margins.

**Expressive variable typography technique:** `Playfair Display` uses its `wght` variable axis. On scroll entry, headers animate from `font-weight: 300` (hairline, ghostly) to `font-weight: 700` (bold, present) over 800ms with `cubic-bezier(0.16, 1, 0.3, 1)` easing. This mirrors the moral experience of a question becoming heavier as you consider it.

**Palette — Candy-Bright on Ivory:**

| Role | Name | Hex |
|---|---|---|
| Background (deep) | Vellum | `#faf6ef` |
| Background (surface) | Cream | `#f5ede0` |
| Marble vein | Ash | `#d6cfc8` |
| Text (primary) | Ink | `#2c2418` |
| Text (secondary) | Sepia | `#6b5740` |
| Accent 1 | Candy Pink | `#f472b6` |
| Accent 2 | Lemon Drop | `#fbbf24` |
| Accent 3 | Cornflower | `#60a5fa` |
| Accent 4 | Pistachio | `#86efac` |
| Accent 5 | Lavender | `#c4b5fd` |
| Marble dark | Veined | `#9e9087` |

The candy accents are used exclusively on the floating confectionery objects and their labels. The main text field is strictly Ink/Sepia on Vellum/Cream. The contrast between the warm scholarly neutrals and the saturated candy pops creates the whimsy-gravity tension.

## Imagery and Motifs

**Marble Texture** — the foundational material of the site. Implemented as an SVG filter using `feTurbulence` + `feDisplacementMap` to generate a procedural marble vein pattern in Vellum/Ash tones. Applied as a CSS `background` on the shelf elements and thin horizontal rules. No photographs. The marble is always synthetic, always slightly unreal.

**Floating Candy Objects** — 6–8 unique SVG illustrations, hand-crafted as inline SVG:
1. **Twist-wrapped bonbon** (Candy Pink): classic hard candy shape with two twisted ends, rendered in 3 concentric ellipses + two spiral twist marks.
2. **Macaroon stack** (Lavender + Pistachio): two interlocking circles with a cream filling gap, subtle shadow line.
3. **Lemon drop** (Lemon Drop): faceted oval with 8 highlight lines radiating from center.
4. **Cornflower ribbon candy** (Cornflower): sinusoidal wave ribbon, 3 parallel strokes.
5. **Sugar cube** (Ash): isometric cube wireframe with tiny Ink dots suggesting sugar crystal texture.
6. **Wrapped toffee** (Candy Pink + Lemon Drop gradient): foil-twist toffee, parallel diagonal hatch lines.
7. **Hard candy disc** (Pistachio): flat circle with spiral groove, like a mint.
8. **Pen nib / quill tip** (Sepia): a single floating quill nib, fine-line ink illustration, reminder that these are thoughts being written.

Each object has a **Dancing Script label** curling beneath or beside it in a `<text>` SVG element with `textPath` following a gentle arc — the moral concept name written like a confectionery flavor tag.

**Floating Elements Animation** — objects use CSS custom properties + `@keyframes` for:
- Gentle vertical oscillation: `translateY(0px) → translateY(-12px) → translateY(0px)`, duration 4–7s (varied per object), infinite, `ease-in-out`. Each object has a different `animation-delay` (0s–3s) creating organic, non-synchronized drift.
- On **hover-lift**: `transform: translateY(-20px) scale(1.08) rotate(var(--tilt, 3deg))` over 350ms with `cubic-bezier(0.34, 1.56, 0.64, 1)` (spring bounce). The candy label fades from 0.6 to 1.0 opacity.

**Marginal Decorations** — tiny inline SVGs placed absolutely in the text column margins:
- Open book icon (Sepia, 24px) — appears beside philosophical quotations
- Asterism ⁂ (Ink, 16px) — section separators
- Wax seal ring (Candy Pink, 20px) — beside the site wordmark
- Infinity loop (Lavender, 18px) — beside questions that have no answer

## Prompts for Implementation

**The story to tell.** A visitor arrives at an establishment called moral.quest. The door is a marble arch. Inside, on a long marble shelf, sit 6–8 confectioneries, each a different shape, each labeled with a branch of moral philosophy or a famous dilemma. The shopkeeper (the site) does not speak — there is only the shelf, the objects, and below them, mounted on cream vellum cards propped against the marble, brief inscriptions: a dilemma, a paradox, a thought experiment. The visitor scrolls down as if walking slowly along the shelf, reading each card. The candies drift softly upward and downward. Occasionally a candy rises slightly, as if the visitor's gaze has lifted it. At the bottom of the shelf, a colophon card reads: "All questions are open. None are sold."

**HTML/CSS/JS Implementation Guidance:**

1. **Opening viewport:** `position: relative; height: 100vh; overflow: hidden;`. A CSS marble shelf — a `div` with `height: 8px; background: linear-gradient(to right, #d6cfc8, #faf6ef 30%, #9e9087 60%, #faf6ef);` — positioned at 60vh. Above it, the wordmark in Playfair Display 400 italic, massive, centered. Below it, 3–4 candy SVGs positioned with `position: absolute; bottom: calc(8px + 2rem);`.

2. **Scroll narrative:** Use `IntersectionObserver` with `threshold: [0, 0.3, 0.7, 1.0]` to trigger the variable-weight Playfair animation on each philosophical fragment as it enters view. No JavaScript scroll listeners — observers only.

3. **Parallax depth layers:** CSS `--scroll-y` custom property updated by a single passive scroll listener. Three layers: candy objects use `transform: translateY(calc(var(--scroll-y) * -0.3px))`, text uses no transform, marble shelf fragments use `transform: translateY(calc(var(--scroll-y) * -0.6px))`.

4. **Hover-lift on candy objects:** Each SVG candy is wrapped in a `<button role="button" aria-label="...">` with `cursor: pointer`. On `:hover`, the spring-bounce transform. On `:focus-visible`, a Lavender outline. Clicking a candy reveals its philosophical text via a smooth `max-height: 0 → max-height: 300px` expand beneath the shelf, using CSS transition only (no JS toggle needed beyond a class).

5. **Marble texture SVG filter (procedural):**
```
<filter id="marble">
  <feTurbulence type="turbulence" baseFrequency="0.015 0.05" numOctaves="4" seed="12" result="turb"/>
  <feDisplacementMap in="SourceGraphic" in2="turb" scale="18" xChannelSelector="R" yChannelSelector="G"/>
</filter>
```
Apply to shelf `div` as `filter: url(#marble)` via inline SVG `<defs>` in the document. Tint with `background: #d6cfc8`.

6. **Variable font weight animation:**
```css
@keyframes weightIn {
  from { font-variation-settings: 'wght' 300; opacity: 0.3; }
  to   { font-variation-settings: 'wght' 700; opacity: 1; }
}
.dilemma-title.is-visible {
  animation: weightIn 800ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
```

7. **Floating drift keyframes (staggered):**
```css
@keyframes drift {
  0%, 100% { transform: translateY(0px) rotate(var(--base-rotate, 0deg)); }
  50% { transform: translateY(-14px) rotate(calc(var(--base-rotate, 0deg) + 1.5deg)); }
}
.candy { animation: drift var(--drift-duration, 5s) ease-in-out infinite; }
```
Each candy instance has `style="--drift-duration: 5.3s; --base-rotate: -2deg; animation-delay: 1.2s;"` etc.

8. **Content islands:** Each philosophical fragment occupies a `<section>` with `max-width: 55ch`, positioned left/center/right alternately via margin. No outer wrappers. Enormous `padding-block: 14vh` between sections. The section contains only 2–4 sentences. No headers inside sections — the weight comes from isolation and scale.

9. **Do NOT include:** Navigation bars, hamburger menus, pricing blocks, CTA buttons ("Start now", "Sign up"), statistics blocks, feature grids, testimonial carousels. The only interactive elements are the candy objects and perhaps a single small "about this place" link in 10px EB Garamond italic at the very bottom.

10. **Ending:** The page terminates with a marble plinth effect — a `div` with `height: 4px` marble gradient rule, then below it centered in large Playfair Display 300 italic: *"All questions are open."* Beneath that in EB Garamond 400 italic 0.75rem: *moral.quest*. Massive bottom padding: 20vh.

## Uniqueness Notes

**Differentiators from other designs in the registry:**

1. **Candy-as-philosophy metaphor sustaining the entire experience.** No other registry entry uses confectionery as the primary conceptual metaphor for abstract intellectual content. The dilemma taxonomy (utilitarianism, deontology, virtue ethics) is served as a sweet shop assortment, creating a unique tension between the weighty and the delightful that is entirely native to this domain's name.

2. **Procedural SVG marble texture via `feTurbulence` filter — no raster images whatsoever.** The marble is computed at render time, always subtly different, never a photograph or imported texture. Combined with the light-academia palette, this creates a material richness that is entirely code-native. The corpus uses photography at 85%; this site uses zero photography, zero raster imports.

3. **Variable-font weight animation as philosophical metaphor.** The `wght` axis animating from hairline (300) to bold (700) on scroll entry is not decoration — it enacts the experience of a moral question becoming heavier and more present as you give it attention. This is the only design in the registry known to use variable font weight as narrative device rather than as UI affordance.

4. **Ma negative space as content.** The `14vh` padding between isolated 2–4 sentence fragments is itself the message: moral questions deserve silence around them. The whitespace is not emptiness but considered pause. Most registry designs treat negative space as visual breathing room; this site treats it as the primary carrier of meaning.

5. **Chosen seed:** `aesthetic: light-academia, layout: ma-negative-space, typography: expressive-variable, palette: candy-bright, patterns: hover-lift, imagery: marble-texture, motifs: floating-elements, tone: whimsical-creative`

6. **Avoided patterns (from frequency analysis):** art-deco (6%, overused), vaporwave (6%, overused), ethereal (6%, overused), holographic (6%, overused). This design uses candy-bright instead of holographic/ethereal glow palettes; uses scholarly marble instead of art-deco ornament; uses procedural SVG instead of vaporwave gradients. The whimsy here is grounded in the physical (candy, marble, ink) rather than the spectral.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:03:34
  domain: moral.quest
  seed: seed:
  aesthetic: moral.quest** is a philosophical playground dressed in the costume of a Victoria...
  content_hash: 81bab110e80c
-->