# Design Language for dilemma.dev ## Aesthetics and Tone `dilemma.dev` is a **luxury underground zine** — imagine a black-market pamphlet printed on hand-tooled cognac leather, distributed at the back door of a 1973 Milan fashion house by someone who was not supposed to be there. The aesthetic sits at the precise collision between high editorial gloss and street-level rebellion: gilt-edged pages smudged with motorcycle grease, Bodoni headlines defaced with a single gold Stabilo mark, a perfume ad ripped and repasted over itself at a 7-degree angle. The tone is **edgy-rebellious** but never juvenile. This is not punk nihilism — it is the arrogance of someone who has read everything and decided most of it is wrong. The site speaks in short declarative strikes: no hedging, no corporate warmth, no friendly CTAs. When it says something, it means it. The reader either gets it or they don't, and the site does not chase the ones who don't. The **dilemma** framing is not a problem-solver but a provocateur. Every scroll reveals a binary that cannot be cleanly resolved: old craft vs. new tech, luxury vs. access, permanence vs. digital decay. The site lives in the tension between these poles without resolving them, because resolution would kill the energy. Gold is used structurally, not decoratively. It is the ink of the hidden system — a rule that surfaces only when you are close enough to read it, a border that appears only when the cursor holds still. Black is not neutral: it is the weight of a leather spine, pressed flat under a century of use. ## Layout Motifs and Structure The page is a strict **split-screen** at all viewports above 768px. This is a rare layout choice — the registry shows split-screen at 1% — and it is deployed here with full commitment. The split is not a hero image left / text right cliché. It is a structural argument: **Left Panel — The Archive (40% viewport width):** - Position: `fixed`, full viewport height, left edge to the split-line. It does not scroll. It is the leather cover of the book — it stays. - Content: a single large numeral (the "dilemma index" — a count from 01 to ∞ that increments with each major scroll section), rendered at ~35vw in weight 900 variable, gold `#C9A84C`, slightly overshooting the panel boundaries so its right edge is clipped by the split. - Below the numeral: a single 2–4 word phrase — the name of the current dilemma. All-caps, tracked at 0.25em, `#F0E6D3` (aged parchment) on black. - The panel edge is a 2px vertical line, `#C9A84C`, with a `box-shadow: 2px 0 12px #C9A84C44` giving it a faint ember glow. - A faint leather-grain SVG texture fills the left panel background — not a photograph, a procedurally-described grain of diagonal hatching lines at 0.4px stroke, `#1A1A1A` on `#0D0D0D`, giving a felt/hide depth without visual noise. **Right Panel — The Argument (60% viewport width):** - Scrolls normally. Each "dilemma" section is a full-height viewport section (`100svh`). The left panel's numeral and label updates (with a spring animation) as the corresponding right-panel section enters view. - Sections are vertical, edge-flush, with generous padding (`96px` vertical, `72px` horizontal). No cards, no containers — text breathes directly on the black ground. - Occasional full-bleed right-panel moments: a single section (the "reveal" section mid-page) expands the right panel to full width, collapsing the left panel with a 600ms spring slide, then restoring after the section exits. **Mobile (<768px):** - Split collapses to single-column. The archive numeral becomes a sticky top-bar ticker at reduced size (`15vw`), gold on black, with the label beside it. The right content flows beneath. **Vertical rhythm:** - Sections are separated by a single horizontal rule: `1px solid #C9A84C20` (barely visible gold), with a centered diamond `◆` glyph at the midpoint, gold, `font-size: 10px`. - No padding blocks, no gradient fades between sections. The diamond rule is the only transition. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & section numerals — `Cormorant Garamond`** (variable, wght 300–700, ital). The oversized left-panel numeral uses weight 700, roman. Section headings (right panel) use weight 600 italic, 48–72px, tracked at -0.02em. This is the luxury editorial voice — high contrast, delicate serifs, authority without aggression. - **Body copy — `DM Sans`** (variable, wght 100–700). Used at weight 300 for body paragraphs, 18px / 1.75 line-height, `#D4C5A9` (warm parchment tone). Weight 600 for inline emphasis. The low weight against the black background creates a fine-thread tension — not easy reading, deliberate reading. - **Labels, captions, metadata — `Space Grotesk`** (wght 300–700). All-caps, letter-spacing 0.2em, 11px, `#C9A84C` gold. Used for the dilemma name labels, footnote markers, and any UI chrome. The grotesque geometry cuts against the serif warmth of Cormorant — the tension is intentional. - **Expressive variable mechanics:** The left-panel numeral's `font-weight` axis animates on spring. When a new section triggers, the numeral briefly drops to weight 100 (ghostly), then springs back to 700 in ~380ms with `easing: spring(stiffness:280, damping:22)`. No fade — pure weight snap, like a typewriter striking a new key. **Palette — gold-black-luxury:** | Role | Hex | Use | |------|-----|-----| | Obsidian ground | `#0A0A08` | Page background, left panel fill | | Aged leather | `#0F0E0B` | Right panel background (marginally lighter) | | Burnished gold | `#C9A84C` | Primary accent — rules, labels, active states | | Pale gold highlight | `#E8D5A3` | Hover states, numerals at ghost weight | | Parchment text | `#D4C5A9` | Body copy | | Cream cap text | `#F0E6D3` | Dilemma name labels, large display | | Deep amber | `#7A5C1E` | Inactive/muted gold — backgrounds of suppressed elements | | Ember glow | `#C9A84C44` | Gold shadow/glow (20% opacity) | | Split-line white | `#FFFFFF08` | Hairline separators beyond the gold rule | No pure white. No color besides gold and its warm neutrals. The palette discipline is part of the editorial identity. ## Imagery and Motifs **Imagery — leather-texture (procedural, not photographic):** The registry shows photography at 92% saturation across all sites. `dilemma.dev` uses zero photographs. All texture is drawn in SVG or computed in CSS: - **Left panel grain:** A single SVG `` filter tuned to `type="fractalNoise" baseFrequency="0.85 0.25" numOctaves="4"` combined with `` to isolate only dark/light contrast. The result is a fine cross-hatched hide texture. The SVG filter is applied as a CSS `filter: url(#leatherGrain)` to the left panel `::before` pseudo-element. Opacity 0.12 — barely there, felt more than seen. - **Diamond section dividers (`◆`):** Used as the sole decorative element between sections. 10px, `#C9A84C`, centered on the horizontal rule. On scroll-entry, the diamond rotates 45deg → 0deg with a spring snap (`stiffness: 320, damping: 18`) — a tiny crystalline settling. - **Retro-patterns motif:** Each dilemma section (right panel) has a unique `repeating-linear-gradient` or `repeating-conic-gradient` background treatment applied at very low opacity (3–6%) — the pattern is period-specific to the dilemma's era. Examples: - Dilemma 01 (Craft vs. Scale): fine herringbone `45deg`, 2px stripe, `#C9A84C05` - Dilemma 02 (Permanence vs. Decay): pinstripe `90deg`, 1px line every 12px, `#C9A84C04` - Dilemma 03 (Access vs. Exclusion): argyle diamond grid via `repeating-conic-gradient`, `#C9A84C06` - Dilemma 04 (Speed vs. Depth): houndstooth via two overlapping diagonal stripes, `#C9A84C03` These patterns are vintage tailoring patterns — they echo leather-goods craftsmanship and couture without being literal. They are invisible unless the user leans close or expands to full-screen on a high-DPI display. - **Gold rule system:** Beyond the split-line, 1px gold rules appear as borders on section-entry: the top border of the first paragraph `

` in each section receives a `border-top: 1px solid #C9A84C` after a 200ms delay on scroll-entry, simulating ink registering on a press bed. **No illustrations. No icons. No image tags.** ## Prompts for Implementation Build `dilemma.dev` as a **single-page interrogation** — a series of irreconcilable binaries presented without resolution. The visitor scrolls through dilemmas the way they'd read annotated marginalia in a stolen notebook. **Macro structure (top to bottom):** 1. **Entry (100svh, split active from frame 0).** Left panel: numeral `01` in Cormorant Garamond 700, gold, clipped at panel edge. Label: `DILEMMA`. Right panel: site name `dilemma.dev` in Cormorant italic 72px, parchment. Below: a single sentence in DM Sans 300 — "The question that does not want an answer." No hero image. No navigation. A single downward-pointing caret `▾` in gold, `Space Grotesk` 11px, all-caps label `ENTER` beside it. 2. **Dilemma 01 — CRAFT vs. SCALE (100svh).** Left panel springs to `01` / `CRAFT vs. SCALE`. Right panel: a short essay-length text (~180 words) presenting both sides without conclusion. A footnote marker `¹` in gold leads to a bottom-anchored footnote — the only navigation element on the page. 3. **Dilemma 02 — PERMANENCE vs. DECAY (100svh).** Left panel updates. Right panel: the pinstripe section. Text treatment differs — wider tracking, lighter weight. A single date in gold `Space Grotesk`: `23.04.1973`. 4. **Dilemma 03 — ACCESS vs. EXCLUSION (100svh, THE REVEAL SECTION).** Left panel collapses (spring slide, 600ms). Right panel expands to full width. The text breaks the 60% container and fills all 100vw. After 800ms scroll dwell, the left panel returns. This is the structural provocation — the site breaks its own rule once, to make the rule meaningful. 5. **Dilemma 04 — SPEED vs. DEPTH (100svh).** Restored split. Houndstooth. The body text here is intentionally longer — more characters per line, smaller font (16px), denser. It asks you to slow down. 6. **Exit / Coda (100svh).** Left panel numeral resets to `∞`. Label: `ALL OF THEM`. Right panel: only two lines — the site name, and a single email address in `Space Grotesk` 11px. No CTA. No footer links. The split-line gold rule glows brighter here (`box-shadow: 4px 0 20px #C9A84C88`) — the book is closed, the leather spine catches the light. **Spring animation spec (all motion):** - Use CSS `spring()` or `animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)` for all element entries - Left-panel numeral weight transition: weight 100 → 700, duration 380ms, overshoot to simulate elastic press - Diamond divider rotation: 0deg → 45deg → 0deg on entry, 280ms - Gold border-top appearance: width 0 → 100%, duration 500ms, `ease-out` - Section collapse/restore (Dilemma 03): `transform: translateX(-100%)` on left, `width: 100vw` on right, both 600ms spring **Avoid:** - Any CTA buttons or pricing tables - Navigation bars (this site has none — you scroll or you leave) - Color outside the defined palette - Any typeface not listed above - Hover tooltips or popover UI - Animation that loops (all motion is triggered once per scroll-entry, not ambient) ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = `editorial`, layout = `split-screen`, typography = `expressive-variable`, palette = `gold-black-luxury`, patterns = `spring`, imagery = `leather-texture`, motifs = `retro-patterns`, tone = `edgy-rebellious`. **Differentiators from every other design in the registry:** 1. **Split-screen at 1% registry frequency.** While 94% of registry sites use centered and 84% use full-bleed, `dilemma.dev` commits fully to the architectural split — the left panel is fixed and never scrolls, making the layout itself part of the editorial argument (permanence vs. motion). 2. **The numeral as the entire left panel.** No logo, no navigation, no branding beyond the oversized variable-weight numeral. The number *is* the content — a Cormorant 700 digit at 35vw, clipped at its own panel's edge, that spring-snaps its weight axis on section change. This is not a decorative flourish; it is a structural UI element carrying all orientation and wayfinding. 3. **Retro tailoring patterns at 3–6% opacity as section wallpaper.** Instead of photographs (92% of registry) or generative art (7%), each dilemma section has a period-appropriate textile pattern (herringbone, pinstripe, argyle, houndstooth) as a CSS-gradient background. The patterns are era-coded — they place each binary in a specific decade of craft history — but they are so subtle they read as texture rather than decoration. 4. **A site that breaks its own structural rule exactly once.** The Dilemma 03 full-width reveal — where the left panel collapses for the "ACCESS vs. EXCLUSION" section — exists solely to demonstrate that the rule is a rule, not a default. The violation makes the architecture visible. No other registry design uses the layout itself as rhetorical content. 5. **Zero photographs, zero icons, zero image tags.** All texture is SVG-filter-computed or CSS-gradient-derived. The leather grain is an `feTurbulence` SVG filter. The retro patterns are pure CSS gradients. This is a direct counter to the 92% photography rate in the registry and keeps the entire site under 50KB before fonts. 6. **Palette as editorial identity: no colors outside gold and its warm neutrals.** No blues, no purples, no greens. The chromatic restriction to black + gold + parchment is both a luxury signal and a formal constraint — the kind of self-imposed rule a fashion house applies to a seasonal collection, not a website.