# Design Language for dilemma.dev ## Aesthetics and Tone A minimalist crossroads interface where binary choices divide the screen -- dilemma.dev renders as a decision-architecture toolkit for developers, where every layout element embodies the fork-in-the-road tension of a dilemma. The minimalist aesthetic strips away everything except the choice itself: two paths, two options, two sides of every question. White space is not empty -- it is the space between alternatives, charged with the tension of uncommitted decisions. The tone is philosophical-developer: the voice of an engineer who reads epistemology papers. Technical concepts are explored through the lens of choice, trade-offs, and irreconcilable alternatives. The site speaks in contrasts: "this, or that." Visual references: a Robert Frost poem typeset in a code editor; the split-screen scene compositions of Brian De Palma; a decision tree drawn on a whiteboard with only the root node filled in; the loading screen of a text-based adventure at a fork. ## Layout Motifs and Structure The layout uses a **binary split** architecture -- every section divides into two halves presenting contrasting options. **Binary System:** - Sections are divided vertically (50%/50%) with a thin central divider (1px, #2a2a2a) - Left half presents option A; right half presents option B - The user's cursor position determines which half is slightly emphasized (subtle background brightness shift) - Some sections invert to horizontal splits (top/bottom) for rhythm variation **Section Flow:** 1. **The Fork:** Hero section split vertically. Left: "DILEMMA" Right: ".DEV" -- meeting at the central divider. 2. **The Choices:** Content sections each presenting a development dilemma as a binary split. 3. **The Convergence:** A section where both halves merge into a centered column, resolving the visual tension. 4. **The Commit:** Closing section -- a single centered line: "Every merge was once a fork." ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) -- geometric with slight quirks suggesting choice points. Used at 2rem-4rem, weight 700, line-height 1.15. - **Body:** "Inter" (Google Fonts) -- clean and neutral, not biasing either side. Used at 1rem, weight 400, line-height 1.7. - **Code:** "JetBrains Mono" (Google Fonts) -- for code comparisons. Used at 0.85rem, weight 400. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Paper White | Background | #fafafa | Primary background | | Ink Black | Text | #1a1a1a | Primary text | | Divider | Separator | #d0d0d0 | Central dividers | | Choice A | Left accent | #2060d0 | Left-side accents | | Choice B | Right accent | #d02060 | Right-side accents | | Hover Light | Emphasis | #f0f4ff / #fff0f4 | Hover background tint per side | | Muted | Secondary | #8a8a8a | Secondary text | ## Imagery and Motifs **Central Divider Line:** The signature visual element -- a thin vertical line running the full height of each section, representing the moment of decision. On scroll, the line pulses briefly (opacity 0.5 to 1.0, 300ms). **Binary Color Accents:** Left sections use cool blue (#2060d0) for accents; right sections use warm red (#d02060). The two colors never appear on the same side, maintaining the binary separation. **Cursor-Tracking Emphasis:** As the cursor moves left or right of center, the respective half gains a barely perceptible background tint (the Hover Light colors), creating an implicit "which side are you on?" interaction. **Fork Icon:** A simple SVG fork symbol (a line splitting into two) appears at the top of each binary section, drawn with animated stroke-dashoffset on scroll. ## Prompts for Implementation Build as a decision interface. The hero loads with the central divider drawing from top to bottom (1s), then the two halves of the title appearing simultaneously from their respective edges (translateX toward center). Each binary section enters with both halves sliding in from opposite edges. The cursor-tracking emphasis should be extremely subtle -- barely noticeable but felt. The Convergence section, where halves merge, should feel like relief: the divider fades away, and content flows into a centered single column. The closing line appears with a 2s fade, centered, in a lighter weight. Everything is black, white, blue, and red. No decoration beyond the binary structure. No CTAs, illustrations, or marketing. The layout IS the content. ## Uniqueness Notes 1. **Binary split as universal layout principle:** Using vertical halves for every section embodies the dilemma concept in structure itself. 2. **Cursor-tracking side emphasis:** The barely perceptible background tint responding to cursor position creates an ambient "choice" interaction. 3. **Convergence as structural resolution:** The moment where the binary layout merges into a single column provides narrative resolution through layout. 4. **Blue/red as permanent binary opposition:** Assigning consistent colors to left/right creates a visual language of alternatives. Document chosen seed/style: aesthetic: minimalist, layout: binary-split, typography: geometric-sans, palette: blue-red-minimal, patterns: cursor-track, imagery: divider-line, motifs: fork-symbol, tone: philosophical-developer Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)