# Design Language for dilemma.quest ## Aesthetics and Tone A gothic-romantic labyrinth where every corridor forces a choice -- dilemma.quest renders as a dark, atmospheric narrative environment where stone-textured surfaces, candlelight amber accents, and deep shadow create the tension of an ethical dungeon crawl. The gothic aesthetic channels the moral weight of classical dilemmas: trolley problems become torchlit corridors, prisoner's dilemmas become locked chambers, and every philosophical question becomes a door that must be opened. The tone is narrative-provocative: the site speaks as a dungeon master posing moral questions. Second person is used deliberately: "You stand before two doors..." The quest framing transforms abstract philosophy into embodied experience. Visual references: the torch-lit corridors of Dark Souls; a medieval manuscript illuminated by a single candle; the branching paths of a Choose Your Own Adventure book; Piranesi's impossible prisons rendered in CSS. ## Layout Motifs and Structure The layout uses a **corridor** architecture -- a narrow, tall content column that creates a sense of passage through confined space. **Corridor System:** - A single content column, max-width 560px, centered, creating deliberate narrowness - Tall vertical sections (min-height 100vh) with heavy top/bottom padding (160px) - "Doorway" transitions between sections: a narrowing container (max-width shrinks to 400px then back to 560px) creating a threshold effect - Stone-texture background via CSS noise pattern **Section Flow:** 1. **The Gate:** Hero section -- dark, atmospheric, with the title emerging from shadow (low opacity to full). 2. **The Corridors:** Dilemma presentations, each as a narrative passage leading to a choice point. 3. **The Chamber:** A wider section (max-width 720px) breaking the corridor constraint for the climactic dilemma. 4. **The Reflection:** A return to narrow corridor with quiet, contemplative closing content. ## Typography and Palette **Typography:** - **Headlines:** "Cinzel" (Google Fonts) -- a Roman-inscriptional serif with classical authority. Used at 2rem-4.5rem, weight 700, letter-spacing: 0.05em, line-height 1.2. - **Body/Narrative:** "Lora" (Google Fonts) -- an elegant text serif with calligraphic curves. Used at 1.05rem, weight 400, line-height 1.8. Italic for narrative voice. - **System:** "Fira Code" (Google Fonts) -- for game-like system messages. Used at 0.8rem, weight 400. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Shadow Black | Background | #0a0808 | Primary background | | Stone Dark | Secondary | #1a1614 | Section backgrounds | | Stone Mid | Texture | #2a2420 | Borders, card surfaces | | Candle Amber | Primary accent | #e8a830 | Headlines, accents, links | | Flame Orange | Active | #ff7830 | Hover states, emphasis | | Parchment | Text | #e0d8c8 | Body text | | Dim Stone | Muted | #6a5e50 | Secondary text, borders | | Blood Red | Choice accent | #8a2020 | Danger/stakes emphasis | ## Imagery and Motifs **Stone Texture Background:** A CSS noise pattern (SVG filter: feTurbulence) in stone-dark tones at 5% opacity creates rough stone-wall surface across all backgrounds. **Candlelight Glow:** Key elements have a warm amber glow: box-shadow: 0 0 30px #e8a83020. Headlines use text-shadow: 0 0 20px #e8a83040 for candle-lit effect. **Doorway Transitions:** Between sections, the max-width narrows then widens, and a horizontal gradient (dark-to-darker-to-dark) creates a threshold shadow effect. **Choice Markers:** Dilemma choice points use two bordered options side by side, each with a 2px border that changes from Dim Stone to Candle Amber on hover, signifying selection. ## Prompts for Implementation Build as a narrative dungeon the user traverses. The Gate hero loads in complete darkness, then the title fades in slowly (3s) as if eyes adjusting to torchlight, with a growing amber glow around the text. Scrolling through corridors, the narrow column creates claustrophobia. Doorway transitions between sections use the width-narrowing effect (max-width animating from 560px to 400px to 560px over the transition zone). The Chamber section expanding to 720px provides relief. Choice markers in dilemma sections glow amber on hover, creating the feeling of reaching toward a door handle. The stone texture is always present, grounding everything in physicality. The closing Reflection section dims further, as if the torch is burning low. No commercial elements, no bright colors, no playfulness. This is serious, atmospheric, and morally charged. ## Uniqueness Notes 1. **Gothic corridor as layout constraint:** Using extreme narrowness (560px max-width) to create physical-feeling passage through content is unique. 2. **Doorway width transitions:** The max-width narrowing and widening between sections creates literal threshold experiences in CSS. 3. **Candlelight as interaction feedback:** Amber glow expanding on hover mimics torchlight approaching a surface. 4. **Second-person narrative tone:** "You stand before..." creates an immersive quest framing rare in web design. Document chosen seed/style: aesthetic: gothic-romantic, layout: corridor, typography: roman-serif, palette: candle-amber, patterns: stone-texture, imagery: glow-shadow, motifs: doorway-transition, tone: narrative-provocative Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)