# Design Language for dilemma.quest

## Aesthetics and Tone

dilemma.quest is a **Nordic philosophy archive** — the imagined anteroom of a Copenhagen reading institution where moral philosophers have gathered since 1847 to argue the hard cases. The aesthetic is Scandinavian functionalism stretched until it touches something older: the restraint of Alvar Aalto's whitewash, the weight of a marble plinth, the silence between two conflicting arguments. Nothing is decoration for decoration's sake; every visual choice enacts the site's premise that clarity is not simplicity, and that a well-framed dilemma is already halfway to insight.

The mood is **elegant-sophisticated** without ever curdling into opulence. Restraint is the house style. The color temperature reads slightly cool — winter-window light on bleached linen, on veined Carrara marble, on the cream pages of a well-thumbed ethics anthology. There is no triumphalism here, no resolution: the palette and composition hold the two horns of every dilemma in perpetual, beautiful tension.

Specific visual references:
- The **typography specimen pages** of Berthold type foundry catalogues, 1920s–1950s: oversized display numerals floated beside dense scholarly body text
- **Thorvald Bindesbøll's** decorative restraint — the swirling organic line contained within a strict formal boundary
- The **whitewashed reading rooms** of the Bibliothèque Sainte-Geneviève in Paris as interpreted through a Danish eye: stone floors, tall clerestory windows, the hush of concentrated thought
- **Carl Larsson's** domestic palette transposed to intellectual space: chalky white, muted sage, bone, iron-grey

The site is **not** a debate platform, not a quiz app, not a product. It is a curated archive of moral dilemmas presented as primary texts — the trolley problem, Sophie's choice, the veil of ignorance — with each dilemma given the full weight of a scholarly monograph entry. Visitors do not click through a funnel; they **read, linger, and are changed**.

## Layout Motifs and Structure

The structural metaphor is the **library catalogue drawer opened at eye level** — a flat horizontal slice of ordered knowledge becoming vertical scroll. The page reads in distinct **depth layers**, each one set at a different visual plane, creating a parallax-aware three-dimensional reading space without any flashy WebGL:

**Depth layer system (layered-depth):**
- Layer 0 — Background field: full-bleed marble texture panel, near-static, scrolling at 0.15× speed relative to content. Carries the site's warmth and textural richness.
- Layer 1 — Structural grid: a hairline 12-column grid (2px, `#C8C0B0` at 18% opacity) drawn as an SVG overlay, always visible. Inspired by the printed grid visible through thin Scandinavian paper stock.
- Layer 2 — Content blocks: the primary reading plane. White (`#F5F2EC`) card-panels that sit 8px above the texture field with a soft `box-shadow: 0 2px 24px rgba(40,36,32,0.09)`. No hard borders; the shadow does all the separation work.
- Layer 3 — Typographic foreground: pull-quotes, dilemma titles, and section numerals that break out of the card boundary and overlap both the card and the texture field behind — the classic scholarly-book trick of the full-bleed chapter head overprinting the page margin.

**Grid and spacing:**
- Desktop: 1280px max-width, 12 columns, 24px gutters, 64px outer margins
- The reading column is always **680px wide** (65–68 characters per line, the scholarly optimum)
- A persistent **30px left margin strip** on desktop carries Roman numerals (I, II, III…) for each dilemma, set in the display face at 11px, rotated 90° — an index strip like a dictionary thumb-index
- Mobile: single column, 20px margins, no margin strip

**Stagger pattern (used with restraint given 69% frequency):**
Stagger appears only in the **dilemma index** section: alternating cards are offset 32px vertically on a 2-column layout, creating a brickwork stagger. This is contained to one section rather than applied site-wide, making it a punctuation mark rather than a wallpaper pattern.

**No carousels, no sticky nav, no hero CTA.** The site opens on a full-height title panel, then immediately drops into the first dilemma as body text. The "navigation" is a fixed left-rail table of contents, 200px wide on desktop, that renders as Roman-numeraled anchors — like a bound volume's running heads.

**Composition rhythm:**
- Title panel: 100vh, centered type, marble texture at 40% opacity behind
- Dilemma entries: asymmetric layout, body left, marginalia right (220px column for citations, counterarguments, philosopher attributions)
- Index: 2-column stagger grid
- Footer: single centered column, 60% width

## Typography and Palette

**Display face — the defining choice:**
[Playfair Display](https://fonts.google.com/specimen/Playfair+Display) — variable, weights 400–900, italic. Used exclusively for dilemma titles, the site wordmark, and oversized pull-quotes. At the largest scale (clamp(4rem, 8vw, 7.2rem)), Playfair's high-contrast strokes — the hairline serifs against swelling stems — enact the dilemma metaphor literally: two forces in tension within a single letterform. Set in small-caps for the wordmark at 0.22em tracking.

**Retro-display numerals:**
[DM Serif Display](https://fonts.google.com/specimen/DM+Serif+Display) — used solely for the large Roman numeral indices (I, II, III…) in the margin strip and for the typographic ornaments (the § and ¶ glyphs used as section dividers). At 48–72px, the ink-trap cuts in DM Serif read as faint wounds — appropriate for a site about moral injury.

**Body and scholarly apparatus:**
[EB Garamond](https://fonts.google.com/specimen/EB+Garamond) — the workhorse. All body text at 18px/1.75 line-height, all marginalia at 13px/1.6. EB Garamond's optical sizing means it reads as a genuine book face at the scholarly measure, not a screen approximation. Italic weight carries all philosopher attributions and Latin phrases (sub specie aeternitatis, et cetera). Bold 700 weight is used only for the first sentence of each dilemma — the framing statement — set at the same size but carrying twice the visual gravity.

**Monospaced accent:**
[Space Mono](https://fonts.google.com/specimen/Space+Mono) — 400 only, used for two things: the URL slug beneath each dilemma title (dilemma.quest/trolley) and the timestamp/version numbers in the footer. The contrast between Space Mono's stark regularity and Playfair's baroque stress is the site's internal typographic argument made visible.

**Palette — muted, cool-Nordic:**
- `#F5F2EC` — **Bone White** — primary content background. Warm white with a grain of yellow, like sized paper. Used for all card panels.
- `#1C1C1E` — **Ink Black** — primary text. Near-black with a blue undertone (Apple's system black), matching the cool-light reading room feeling.
- `#8C8178` — **Stone Dust** — secondary text, marginalia, captions. Mid-tone warm grey, the color of aged marble powder.
- `#D4CFC7` — **Nordic Linen** — borders, the 2px structural grid, horizontal rules between sections.
- `#4A5568` — **Slate** — active link state, the Roman numeral index rail, hover states. A blue-grey that reads as "considered authority" rather than hyperlink blue.
- `#E8E0D0` — **Chalk** — alternate row background in the stagger index section, 2% tonal shift from Bone White.
- `#2D2A26` — **Charcoal Deep** — used only in the title panel behind Playfair Display wordmark and for the footer. Provides a dark bookend without going fully black.

No accent color. No primary brand hue. The palette refuses to resolve the dilemma.

## Imagery and Motifs

**Marble texture as sole decorative imagery:**
A single seamless Carrara marble texture (`marble-texture`) tiles the full-page background and the title panel. This is not hero photography. It is used like endpaper in a bound book — richly textured but clearly a surface, not a scene. The marble is desaturated 40% from its natural color, then shifted slightly cool (`hue-rotate(-8deg)`) so its warm veining reads as a grey-green rather than full cream, placing it within the Nordic palette.

The marble texture appears at three different scales and opacities:
1. **Full-page background:** 800px tile, 22% opacity — barely visible, adds paper grain to the body field
2. **Title panel:** 600px tile, 55% opacity, with a radial gradient overlay fading to `#2D2A26` at edges — the marble reads as an illuminated page held up to a window
3. **Section divider bands:** 20px-tall full-width horizontal strips at 35% opacity between major sections — a thin vein of stone surfacing between white panels

**Book-scholarly motifs:**
- **Section ornaments:** a single SVG device — two hairline rules flanking a centered em-dash — used between body paragraphs within a dilemma entry. Drawn at 1px, `#D4CFC7`.
- **Drop capitals:** the first letter of each dilemma's body text rendered as a 3-line drop cap in Playfair Display italic, at approximately 64px, colored `#4A5568` (Slate) to distinguish it from body black.
- **Marginal annotations:** in the 220px right column, short philosophical counterarguments are typeset as if handwritten marginal notes — in EB Garamond Italic 13px, slightly rotated (-0.5deg), with a left 3px border in `#D4CFC7`.
- **The Scales ornament:** a single SVG of a balance scale (⚖) used exactly once — in the site wordmark lockup below "dilemma.quest" — at 20px, rendered in `#8C8178` Stone Dust. Not used elsewhere.
- **Running Roman numerals:** I through however many dilemmas the archive holds, set in DM Serif Display 11px in the fixed left index rail.

**No photography. No illustration. No icons beyond the ornaments described.**

## Prompts for Implementation

Build dilemma.quest as a **single long-scroll scholarly archive** structured as a bound volume. The visitor opens the cover (title panel), turns to the table of contents (left-rail index), then reads dilemma entries one after another as if turning chapters. There is no route out to another page; everything is on this one continuous scroll.

**Title panel (100vh):**
Full-height panel. Background: `#2D2A26` Charcoal Deep with the Carrara marble texture at 55% opacity overlaid. Centered content: the wordmark "dilemma.quest" in Playfair Display small-caps, 5.5rem, tracked at 0.22em, color `#F5F2EC`. Below it, at 1.4rem EB Garamond Italic in `#8C8178`: "A curated archive of the hardest questions." Below that, the ⚖ ornament at 24px in `#8C8178`. No scroll-cue animation; let the typographic gravity do the inviting. The panel sits at `z-index: 10` above the marble background layer.

**Fixed left index rail (desktop only):**
200px wide, fixed position, scrolls independently. Contains Roman numeral anchors for each dilemma: "I", "II", "III" etc. in DM Serif Display 11px, color `#8C8178`, rotated 90° clockwise so they read bottom-to-top. On hover, they rotate back to horizontal and expand to show the dilemma's short title in EB Garamond 12px. Transition: 240ms ease. Active anchor (in-view dilemma): color shifts to `#4A5568` Slate.

**Dilemma entry layout (repeating unit):**
Each entry is a `<article>` with a max-width of 900px (body 680px + 220px marginalia), centered in the content area minus the 200px left rail. Structure:
- Entry header: large dilemma number in DM Serif Display 72px `#D4CFC7` (decorative, background-adjacent tone) + Playfair Display title at clamp(2.4rem, 4vw, 3.6rem) in `#1C1C1E`
- Framing statement: first sentence of body in EB Garamond Bold 18px `#1C1C1E`
- Body: EB Garamond 18px/1.75, `#1C1C1E`
- Right marginalia column (220px, only on desktop ≥1200px): counterarguments, philosopher attributions in EB Garamond Italic 13px `#8C8178` with 3px left border `#D4CFC7`
- Section ornament (—) before the next entry

**Depth layering (CSS implementation):**
```
body { background: #1C1C1E; }
.marble-bg { position: fixed; inset: 0; background-image: url(marble.jpg); background-size: 800px; opacity: 0.22; z-index: 0; transform: translateY(var(--scroll-parallax-slow)); }
.content-wrapper { position: relative; z-index: 2; }
.card-panel { background: #F5F2EC; box-shadow: 0 2px 24px rgba(40,36,32,0.09); }
.grid-overlay { position: fixed; inset: 0; background-image: repeating-linear-gradient(90deg, #C8C0B0 0 2px, transparent 2px calc(100%/12)); opacity: 0.18; z-index: 1; pointer-events: none; }
```

**Stagger index section:**
Between the title panel and the first dilemma entry, a 2-column stagger grid shows all dilemmas as card-previews. Left column cards sit at baseline; right column cards are offset 32px downward. Each card: `#F5F2EC` background, Playfair Display title 1.4rem, EB Garamond body preview 2 lines 13px `#8C8178`. No hover animation — on hover, the card border shifts from `transparent` to `2px solid #D4CFC7`. The stagger is accomplished with `margin-top: 32px` on `.col-right .card` — no JavaScript, no scroll animation. This is the only stagger in the design.

**Scrolling behavior:**
- The marble background parallax: CSS `transform: translateY()` driven by a 10-line vanilla JS scroll listener (no libraries). Coefficient: 0.15 (background moves 15px per 100px of scroll).
- No scroll-snap, no smooth-scroll override, no GSAP. Let the browser scroll naturally at reading pace.
- The left index rail highlights the active dilemma anchor via a 4-line IntersectionObserver.

**Typography fluid scale:**
```css
:root {
  --type-display: clamp(2.4rem, 5vw, 5.5rem);   /* Playfair Display */
  --type-numeral: clamp(2rem, 4vw, 4.5rem);       /* DM Serif Display */
  --type-body: 1.125rem;                           /* EB Garamond, fixed */
  --type-marginalia: 0.8125rem;                    /* EB Garamond small */
  --type-mono: 0.8125rem;                          /* Space Mono */
}
```

**AVOID:**
- CTA buttons of any kind
- Pricing or feature comparison blocks
- Testimonial grids or stat counters
- Sticky header with logo and hamburger menu
- Any animation above `prefers-reduced-motion: no-preference`
- Color outside the defined seven-swatch palette

## Uniqueness Notes

1. **The "dilemma as book" structural conceit is registry-unique.** No existing design treats the site itself as a bound scholarly volume with running heads, marginalia columns, and Roman-numeral chapter indices. The closest neighbors use "editorial-flow" or "magazine-spread" metaphors — dilemma.quest goes further by adopting the paratextual apparatus of a university press monograph (DM Serif numerals, section ornaments, drop caps, right-rail marginalia) rather than magazine conventions.

2. **Palette refuses resolution by design.** At 2% frequency, elegant-sophisticated is among the rarest tones in the registry. The palette enacts the site's subject: no single accent color wins, no call-to-action red resolves the tension. The seven swatches are all muted mid-tones or near-neutrals — the visual equivalent of holding two conclusions simultaneously. This is different from the 32% of designs using `muted` as a general style preference; here, `muted` is an argument about epistemology.

3. **Marble as endpaper, not hero photography.** The imagery frequency shows marble-texture at 3% and photography at 92%. dilemma.quest inverts the convention: no photography appears anywhere on the page. The marble is used exclusively as a repeating surface texture (like book endpaper or a reading room's stone floor) at three different opacities and scales — never as a centerpiece image. This is the first design in the corpus to use marble-texture as ambient field rather than featured visual.

4. **Stagger contained to a single section.** At 69% frequency, stagger is the most overused pattern in the registry. dilemma.quest uses stagger in exactly one place — the dilemma preview index grid — and achieves it with a single CSS `margin-top` declaration rather than JavaScript animation. The restraint is intentional: stagger as punctuation, not wallpaper.

5. **Scandinavian functionalism applied to ethics, not lifestyle.** The 5% frequency of scandinavian aesthetic in the registry suggests it is used primarily for clean, minimal product or portfolio sites. dilemma.quest applies Scandinavian restraint — the whitewash, the hairline grid, the bone-and-stone palette — to an intellectual subject (moral philosophy), creating a category disjunction that makes the aesthetic feel earned rather than chosen from a mood board.

Chosen seed: aesthetic: scandinavian, layout: layered-depth, typography: retro-display, palette: muted, patterns: stagger, imagery: marble-texture, motifs: book-scholarly, tone: elegant-sophisticated
<!-- DESIGN STAMP
  timestamp: 2026-05-07T11:46:22
  domain: dilemma.quest
  seed: preference
  aesthetic: dilemma.quest is a **Nordic philosophy archive** — the imagined anteroom of a Co...
  content_hash: e098418f28ef
-->