# Design Language for dilemma.quest

## Aesthetics and Tone

dilemma.quest is an overwhelming, visceral digital environment that embodies the psychological weight of impossible choices. The aesthetic is **maximalist** in every dimension -- a site that fills every viewport with competing visual demands, mirroring the cognitive overload of facing a true dilemma. Think of the visual density of a Hieronymus Bosch painting colliding with the speculative render portfolios of Beeple: every surface is saturated, every element vies for dominance, and the viewer is forced to choose where to direct their attention.

The tone is **bold-confident** -- not whispering suggestions but making declarative, unapologetic visual statements. The site speaks with the authority of someone who has already made the hard choice and is daring you to do the same. There is no hedging, no soft gradients fading into nothingness. Surfaces are thick, textures are tangible, and every typographic element occupies space with territorial confidence.

The mood oscillates between the tactile warmth of fired clay and the digital anxiety of corrupted data. Earth pigments -- ochre, sienna, umber, terracotta -- are rendered with the precision of 3D software, creating an uncanny valley between the ancient and the synthetic. This is a site that feels like holding a piece of pottery that has been 3D-printed from scanned archaeological fragments: simultaneously primal and computational.

Visual inspiration: the terracotta armies of Xi'an rendered as glitched voxel landscapes; the cracked earth of drought plains viewed through a corrupted satellite feed; Robert Smithson's "Spiral Jetty" if it were modeled in Blender and then run through a datamoshing algorithm.

## Layout Motifs and Structure

The layout operates on a **full-bleed** principle where every section consumes the entire viewport edge-to-edge with zero margin, zero padding against the browser chrome. Content does not float in white space -- it presses against the boundaries of the screen like something trying to escape containment.

**Primary Structure: The Fork**
The central layout metaphor is the fork -- a branching path that appears repeatedly at different scales. The hero section presents two massive panels that split the viewport diagonally from the top-left corner to the bottom-right, each panel containing competing visual narratives. This diagonal split (achieved with `clip-path: polygon()` on overlapping full-viewport divs) is the site's signature compositional device.

**Section Rhythm:**
- **Fork Sections (60% of content):** Two competing panels split diagonally, each occupying roughly 55% of the viewport width (the overlap creates visual tension in the center). The diagonal angle varies between 12deg and 25deg across sections to prevent monotony. Each panel has its own scroll behavior -- one side scrolls at 1x speed while the opposing side scrolls at 0.7x, creating a subtle parallax between the two halves of each fork.
- **Convergence Sections (25% of content):** Between fork sections, single-panel full-bleed moments where the two paths merge. These use `100vw` width with negative margins to bust out of any container, filled entirely with a single oversized typographic statement or a full-viewport 3D render.
- **Fracture Zones (15% of content):** Narrow horizontal bands (200px-300px tall) that act as transitions, filled with glitched texture strips and animated flowing-curve SVGs that connect one fork to the next.

**Grid Substrate:**
Beneath the diagonal compositions, a hidden 16-column grid (`grid-template-columns: repeat(16, 1fr)`) provides alignment anchors for text blocks and UI elements. Text blocks snap to columns 2-7 or 10-15 (never centered, always off-axis) to maintain the asymmetric tension inherent in dilemma. The grid gap is `0` -- elements touch and overlap deliberately.

**Scroll Behavior:**
No traditional scroll-triggered reveals. Instead, the site uses a **continuous deformation** model: as the user scrolls, existing visible elements undergo subtle `transform: skewY()` and `scale()` shifts (never more than 3deg skew or 1.05 scale) that make the entire page feel like it is under torsional stress. Elements do not pop in -- they are always present but always slightly warping, as if the page itself is caught in an unresolvable tension.

## Typography and Palette

**Typography:**

- **Display / Hero Type:** "Dela Gothic One" (Google Fonts) -- a hyper-bold Japanese-influenced display face with extreme stroke weight and compressed proportions. Used at sizes from `12vw` to `20vw` for hero statements. The sheer mass of this typeface at oversized scale creates typographic monuments that dominate the viewport. Set with `letter-spacing: -0.04em` and `line-height: 0.85` so ascenders and descenders collide, creating a sense of compressed urgency. Color: alternating between #3B2314 (dark umber) and #D4A574 (warm sand) depending on the background panel.

- **Section Headers:** "Archivo Black" (Google Fonts) -- a grotesque sans-serif with authoritative weight and wide proportions. Used at `4rem` to `7rem`, weight 400 (the only weight available, which is already visually heavy). `text-transform: uppercase` with `letter-spacing: 0.08em` for commanding presence. These headers are positioned with `position: absolute` to break out of text flow and overlap adjacent content blocks.

- **Body / Reading Text:** "Source Serif 4" (Google Fonts) -- a transitional serif with robust x-height and excellent readability at text sizes, providing necessary contrast against the display types. Used at `1.125rem` (18px) to `1.375rem` (22px), weight 400 for body and 600 for emphasis. `line-height: 1.65` and `max-width: 38ch` to create dense but readable text columns. Color: #2A1A0E on light panels, #E8D5C0 on dark panels.

- **Accent / Labels:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with distinctive single-story 'a' and geometric structure. Used at `0.75rem` to `0.875rem` for metadata, labels, and UI elements. Weight 500, `letter-spacing: 0.12em`, `text-transform: uppercase`. Color: #8B6B4A (muted bronze).

**Palette:**

The palette is rooted in **earth-tones** -- the literal colors of geological strata, fired ceramics, and oxidized metals:

| Role | Color | Hex | Usage |
|------|-------|-----|-------|
| Deep Earth | Blackened Loam | #1A0F08 | Primary dark background, hero panels |
| Foundation | Dark Umber | #3B2314 | Section backgrounds, heavy text |
| Warmth | Terracotta | #B8653A | Primary accent, border elements, active states |
| Mineral | Burnt Sienna | #C47A3A | Secondary accent, hover states, glitch highlight |
| Light Ground | Warm Sand | #D4A574 | Light panel backgrounds, body text on dark |
| Surface | Raw Clay | #E8D5C0 | Light text panels, card surfaces |
| Highlight | Desert Gold | #DAA520 | Sparse accent for critical UI moments |
| Neutral | Fired Ash | #5C4A3A | Borders, dividers, muted secondary text |

The palette deliberately excludes blues, greens, and purples. Every color exists on the warm spectrum from yellow-orange through red-brown to near-black, creating a monolithic chromatic identity that reads as decisively earthy and uncompromising. Background sections alternate between the deep #1A0F08 and the lighter #E8D5C0, with the terracotta #B8653A used as the binding thread that appears in borders, underlines, and glitch-effect color channels.

## Imagery and Motifs

**3D Renders as Primary Visual Language:**
All hero imagery and section illustrations are presented as **3D-rendered** objects and environments -- not photographs, not illustrations, but the uncanny smooth surfaces of CGI. These renders depict:
1. **Forking paths** -- literal 3D corridors that split into two directions, rendered with terracotta-colored walls and volumetric fog in earth tones. The camera angle always positions the viewer at the decision point.
2. **Geological cross-sections** -- rendered strata of earth showing compressed layers of sediment, each layer a different earth tone, occasionally fractured by glitch distortion that reveals bright #DAA520 veins beneath.
3. **Abstract balancing objects** -- massive 3D-rendered stones, cubes, and organic forms balanced impossibly on knife-edges, their surfaces textured with clay and oxidized metal materials.

CSS treatment for 3D render images:
- `filter: contrast(1.1) saturate(0.85)` to unify color response with the earth palette
- `mix-blend-mode: multiply` on dark backgrounds to integrate renders into the page surface
- A persistent `box-shadow: inset 0 0 120px rgba(26,15,8,0.4)` vignette on image containers to darken edges and focus attention

**Glitch as Metaphor:**
Glitch effects are used as a visual metaphor for the moment of decision -- the instant where reality forks. Glitch is not decorative here; it is narratively purposeful. Implementation:
- **RGB channel splitting:** On hover or at scroll thresholds, key images undergo a 200ms `animation` that offsets the red channel by `translate(3px, -2px)`, the blue channel by `translate(-3px, 2px)`, while green remains static. Achieved through layered `pseudo-elements` with `mix-blend-mode: screen` and individual `background-position` offsets.
- **Scan-line overlay:** A repeating `linear-gradient(transparent 50%, rgba(26,15,8,0.03) 50%)` at `background-size: 100% 4px` applied as an `::after` pseudo-element on all image containers, giving a subtle CRT scan-line texture.
- **Data corruption moments:** At certain scroll positions, text blocks experience a 150ms glitch where characters are temporarily replaced with unicode block characters (U+2588, U+2591, U+2592) via JavaScript, then resolve back to readable text. This happens once per section, never repeating.

**Flowing Curves as Connective Tissue:**
Between sections, large SVG curves (drawn with cubic Bezier paths) flow across the full viewport width in earth-tone strokes (#B8653A, #C47A3A, #8B6B4A) at varying stroke widths (2px to 8px). These curves:
- Are animated using `stroke-dasharray` and `stroke-dashoffset` with a slow 8-second draw animation triggered on visibility
- Follow organic, non-geometric paths -- no perfect circles or sine waves, but the irregular meandering of river courses or crack propagation patterns
- Overlap and intersect, creating natural visual nodes where curves bundle together before diverging
- Have `opacity: 0.6` so they recede behind content while still providing visual continuity

**Additional Motifs:**
- **Cracked earth texture:** A tileable SVG pattern of irregular polygonal cells (Voronoi-style) used as a subtle background on convergence sections, rendered in #3B2314 lines on #1A0F08 ground at 4% opacity
- **Decision markers:** Small diamond shapes (rotated squares, 12px) in #DAA520 used as bullet points, list markers, and navigation indicators throughout
- **Torsion lines:** Thin diagonal lines (1px, #5C4A3A) at 15deg angle repeated across certain section backgrounds, creating a sense of directional tension

## Prompts for Implementation

**Full-Screen Narrative Experience:**
The site must open as an immediate confrontation. On load, the viewport is split diagonally -- the top-left triangle is #1A0F08 (deep earth), the bottom-right triangle is #E8D5C0 (raw clay). The split line itself pulses with a 2px #B8653A stroke that flickers with the RGB-channel-split glitch effect at 0.5-second intervals. The domain name "dilemma.quest" appears at `16vw` in "Dela Gothic One", split across the diagonal -- "dilemma" in #D4A574 on the dark side, ".quest" in #3B2314 on the light side. The text animates in via a `clip-path: inset()` reveal that opens from the center of each word outward over 1.2 seconds with an `ease-out` curve.

After the initial reveal (2 seconds), a subtle torsional skew begins on both panels -- the dark panel shifts `transform: skewY(0.5deg)` while the light panel shifts `transform: skewY(-0.5deg)`, creating an almost imperceptible sense that the two halves are pulling apart. This skew increases by 0.1deg per 100vh of scroll, maxing at 3deg.

**Section Transitions:**
Between major sections, implement a **fracture transition**: as the user scrolls past a section boundary, a horizontal crack appears (animated SVG path with jagged vertices) that splits from the center outward to both edges over 600ms. The crack reveals the next section's background color beneath. The crack line itself carries the glitch RGB-split treatment.

**Interactive Fork Moments:**
At least two sections should present genuine interactive forks -- the user hovers over one side of the diagonal split and that panel scales to `55vw` while the opposing panel compresses to `45vw`, with the diagonal boundary shifting accordingly. This hover interaction uses `transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)` for a physical, weighted feeling. On mobile, this becomes a tap-to-expand interaction.

**3D Render Presentation:**
Hero 3D renders should be presented in containers that extend beyond their parent elements using negative margins (`margin-left: -5vw; width: 110vw`) so they feel like they're pushing against the viewport boundaries. Apply a slow, continuous `transform: rotateY()` animation (0.5deg oscillation over 12 seconds) via CSS keyframes to give renders a subtle dimensional quality, as if the viewer is slowly circling the object.

**Typography as Architecture:**
Oversized display text (Dela Gothic One at 12vw-20vw) should be treated as structural elements, not just labels. These massive text blocks should have:
- `position: sticky; top: 0` so they persist as the user scrolls through their associated content
- `z-index: -1` with reduced opacity (`opacity: 0.08`) as watermark-scale background text that peeks through foreground content, creating a palimpsest effect
- Occasional `writing-mode: vertical-rl` instances (at least one per page) for vertical text pillars along the viewport edge

**Glitch Choreography:**
Glitch effects must be choreographed, not random. They occur at three specific moments: (1) initial page load, (2) each fork interaction hover/tap, and (3) the final section reveal. Each glitch instance lasts exactly 200ms and consists of: RGB channel split (3px offset), a single scan-line displacement (one horizontal band of content shifts 8px right), and a brief `filter: hue-rotate(15deg)` flash. After the glitch resolves, the affected element settles with a 100ms `ease-out` that conveys physical weight.

**Animation Engine:**
Use CSS custom properties and `@keyframes` exclusively -- no JavaScript animation libraries. The flowing-curve SVGs use `stroke-dasharray` animations. The torsional skew uses a scroll-linked CSS variable (`--scroll-progress`) updated via a single `IntersectionObserver` or `scroll` event listener that sets `document.documentElement.style.setProperty('--scroll-progress', value)`. All timing functions should feel heavy and physical: `cubic-bezier(0.22, 0.61, 0.36, 1)` (ease-out-cubic) for reveals, `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for interactions.

**AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menus, cookie consent modals as design features, social media icon rows. Navigation should be minimal -- a fixed vertical strip of diamond-shaped markers on the left edge of the viewport, each 12px, in #5C4A3A at 40% opacity, brightening to #DAA520 at full opacity when the corresponding section is active.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Diagonal Split as Primary Composition:** No other design in the portfolio uses a diagonal viewport split as its foundational layout device. While 54% of designs use asymmetric layouts and 27% use full-bleed, none combine these with a literal diagonal bisection of the viewport that embodies the thematic content (dilemma = two paths). The diagonal is not decorative -- it is the site's argument made visual.

2. **3D Renders in Earth Tones:** The combination of 3D-rendered imagery (appearing in 0% of analyzed designs) with an earth-tone palette (1% frequency) creates a visual language that has no precedent in the portfolio. Most 3D render aesthetics trend toward chrome, neon, or clinical white; rendering 3D objects with clay, terracotta, and oxidized-metal materials creates a distinctly archaeological-digital hybrid.

3. **Glitch as Narrative Device, Not Decoration:** While glitch appears in 8% of designs as an aesthetic category, it is typically used as ambient visual texture. In dilemma.quest, every glitch event is semantically linked to a moment of decision or transition. The glitch is diegetic -- it exists within the story the site tells about choice and fracture, not as a stylistic afterthought.

4. **Torsional Scroll Physics:** The continuous `skewY()` deformation that increases with scroll progress is unique in the portfolio. Rather than elements appearing or disappearing, the entire page geometry warps under the stress of scrolling, creating a physically intuitive metaphor for the tension of unresolved choice. No other design applies persistent geometric transformation to the page itself as a scroll response.

5. **Convergence/Divergence Rhythm:** The alternating pattern of fork sections (diverging panels) and convergence sections (unified full-bleed moments) creates a narrative rhythm -- separation, reunion, separation -- that is structurally unique and thematically essential to the concept of dilemma.

**Chosen Seed/Style:**
- aesthetic: maximalist
- layout: full-bleed
- typography: oversized-display
- palette: earth-tones
- patterns: glitch
- imagery: 3d-render
- motifs: flowing-curves
- tone: bold-confident

**Avoided Overused Patterns:**
- scroll-triggered animation (97% frequency) -- replaced with continuous deformation and choreographed glitch events
- parallax scrolling (81% frequency) -- replaced with differential scroll speeds between fork panels (a more specific, narratively motivated approach)
- centered layout (98% frequency) -- all text blocks are positioned off-axis on the 16-column grid
- mono typography (98% frequency) -- no monospaced type used anywhere; replaced with the oversized-display approach using Dela Gothic One
- playful aesthetic (97% frequency) -- the maximalist approach here is confrontational and weighty, not playful
- minimal imagery (96% frequency) -- replaced with dense 3D renders and layered visual motifs
- friendly tone (96% frequency) -- replaced with bold-confident, declarative voice
- vintage motifs (69% frequency) -- no vintage references; the earth-tone palette serves geological/material rather than nostalgic purposes
<!-- DESIGN STAMP
  timestamp: 2026-03-09T11:12:30
  domain: dilemma.quest
  seed: seed
  aesthetic: dilemma.quest is an overwhelming, visceral digital environment that embodies the...
  content_hash: 99c7dfaf6e0a
-->