# Design Language for dilemma.dev ## Aesthetics and Tone dilemma.dev channels the visual restlessness of standing at a literal fork in a road -- not a pastoral Robert Frost fork, but the kind etched into concrete at a brutalist interchange where two highways peel apart at forty-five degrees and the signage only gives you three seconds to decide. The aesthetic is **minimalist** in the way an empty voting ballot is minimalist: the blankness isn't absence, it's pressure. Every element on the page carries the weight of a choice not yet made. The mood draws from the graphic design of mid-century decision theory textbooks -- those Rand Corporation reports from the 1950s and 60s where game theory matrices were typeset in clean geometric sans-serifs on cool gray paper stock, where the visual austerity amplified the existential stakes of the content. Think of the cover of Thomas Schelling's "The Strategy of Conflict" redesigned by Josef Muller-Brockmann: mathematically precise grids containing profoundly human uncertainties. The tone is **approachable-casual** -- not the false friendliness of a chatbot, but the disarming ease of someone who explains prisoner's dilemma over beers, who draws payoff matrices on napkins, who makes game theory feel like gossip about human nature rather than an academic exercise. The site should feel like the smart friend who never makes you feel dumb for asking. Color temperature runs **cool** throughout -- steel grays, blue-tinted silvers, the color of morning fog over a city, of a freshly poured concrete wall before it yellows with age. Warmth enters only at decision points, where a single accent color marks the moment of choice. ## Layout Motifs and Structure The layout employs a **broken-grid** system that literally embodies the concept of dilemma -- elements that should align don't quite. Content blocks are positioned on a 12-column grid that has been deliberately fractured: columns 5 and 6 (the center) contain a persistent 2px vertical gap, a hairline crack that runs the full height of the page. Content on the left side and content on the right side never bridge this gap simultaneously. When a text block extends across the center, the block on the opposite side retreats. When imagery crosses the divide, neighboring text shifts to accommodate. The layout breathes through this central fissure like a wound that refuses to close. **Structural Principles:** - **The Divided Field:** The viewport is conceptually split by a vertical axis that is not a visible line but a zone of tension. Elements approach this center from either side but rarely sit on it. When an element does center itself (for emphasis), it commands total attention because it has violated the site's fundamental spatial logic. - **Offset Stacking:** Sections do not stack flush. Each new content section is offset 20-40px horizontally from the one above it, alternating left and right, creating a subtle zigzag down the page. The effect is like shuffled cards -- each one slightly displaced from the stack, suggesting a deck being dealt, choices being distributed. - **Tension Pairs:** Key content appears in paired blocks positioned at the same vertical level but different horizontal positions, separated by the central gap. These are not equal columns -- one block is always slightly larger, slightly higher, slightly bolder. The asymmetry forces the eye to choose which to read first. This IS the dilemma made spatial. - **Collapse Points:** At specific scroll positions, the broken grid momentarily resolves into perfect alignment -- all elements snapping to a clean, traditional grid for exactly one viewport height before fracturing again. These moments of resolution feel like decisions being made, order temporarily imposed on chaos. - **Negative Space as Protagonist:** Large areas of cool gray emptiness are not wasted space but the visual equivalent of silence before a difficult answer. The space between elements carries as much meaning as the elements themselves. Minimum 35% of any viewport should be uncommitted space. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Jost" (Google Fonts) -- a geometric sans-serif in the lineage of Futura, with perfectly circular Os, triangular As, and a mechanical precision that evokes mid-century rationalism. But Jost carries a subtle warmth that Futura lacks -- its stroke terminals are fractionally softer, its x-height more generous -- making it approachable where Futura can feel cold. Used at 4rem-7rem for section headings, weight 500 (Medium) with `letter-spacing: 0.02em` and `line-height: 0.95`. The slight positive tracking keeps it open and readable at large sizes without the claustrophobic tightness common in geometric faces. - **Secondary / Subheadings:** "Josefin Sans" (Google Fonts) -- another geometric family but with a distinctly different personality: taller x-height, more condensed proportions, and a vintage elegance that contrasts with Jost's modernity. Used at 1.5rem-2.5rem, weight 300 (Light), with `letter-spacing: 0.06em` and `text-transform: uppercase`. The wide tracking on light weight creates a whispery, expansive feel -- like reading the fine print of a treaty, the terms and conditions of a choice. - **Body Text:** "Work Sans" (Google Fonts) -- a humanist sans-serif with geometric DNA, bridging the precision of the display fonts with the readability needed for extended reading. Weight 400 (Regular) at 1.05rem with `line-height: 1.65` and `letter-spacing: 0.005em`. The subtle optical adjustments in Work Sans prevent the reading fatigue that pure geometric faces induce in body copy while maintaining visual harmony with the headline fonts. - **Monospace Accent:** "IBM Plex Mono" (Google Fonts) -- used sparingly for labels, metadata, interactive element states, and decision-point indicators. Weight 400 at 0.85rem with `letter-spacing: 0.04em`. The Plex Mono letterforms have a warmth and readability unusual in monospace faces, and their slightly wider proportions create a sense of deliberation -- each character occupying its own measured space, as if each letter is a considered choice. **Palette:** The color system is built on a **cool-grays** foundation with a single warm disruption point: | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Primary | Fog | `#F2F3F5` | The lightest gray -- not white, never white. The faint blue undertone of early morning concrete, of unprinted newspaper stock. | | Background Secondary | Slate Wash | `#E3E5E8` | A slightly deeper gray for recessed panels, card backgrounds, and the "other" side of any dilemma pair. | | Surface | Steel Mist | `#C8CCD2` | The color of brushed aluminum under fluorescent light. Used for borders, dividers, and the central fissure line. | | Text Primary | Graphite | `#2B2D33` | Near-black with a cool blue undertone. Never pure black -- the slight warmth of graphite pencil on gray paper. | | Text Secondary | Pewter | `#6B7080` | Mid-gray for secondary text, timestamps, attribution. The color of institutional signage. | | Accent / Decision | Signal Coral | `#E8655A` | The only warm color in the entire system. A muted coral-red that appears exclusively at moments of choice, decision, or resolution. Used for: active states on interactive elements, the highlight on the "chosen" side of a dilemma pair, hover states, and the single accent rule that underlines the resolved grid moments. Deliberately muted -- not alarm-red but the warm blush of conviction. | | Accent Dark | Rust Ember | `#B84A42` | Darkened variant of Signal Coral for hover/active states and text set on light backgrounds where the coral needs more contrast. | | Depth | Charcoal Blue | `#1E2028` | The darkest value in the system. Used for rare full-bleed moments, footer, and the deep background visible through the central grid fissure. Has the blue-black quality of a deep lake at night. | **Color Rules:** - The accent coral NEVER appears without a preceding cool-gray context. It must always feel like an interruption, a break in the gray monotony. - Adjacent elements never share the same gray value. The palette of grays must step through at least two values between any touching surfaces. - Gradients, if used, are exclusively gray-to-gray with no more than a 15% luminance shift. No multi-hue gradients anywhere in the system. ## Imagery and Motifs **Minimal Imagery with Maximum Implication:** The imagery approach is deliberately **minimal** -- not in the generic "clean and simple" sense, but in the philosophical sense of reduction to essence. Every visual element must justify its existence by embodying the concept of dilemma, choice, or bifurcation. **Primary Motif -- Grid Lines as Decision Trees:** Thin lines (1px, color `#C8CCD2` Steel Mist) form the backbone of all visual decoration. These are not background patterns but active structural elements that: 1. **Forking Lines:** A single horizontal line enters from the left edge of the viewport and, at a specific point, splits into two diverging paths at 15-degree angles. One path continues across the viewport; the other fades to transparency over 200px. These forking lines appear between major sections, each fork positioned at a different horizontal point, creating a rhythm of decisions down the page. 2. **Ghost Grids:** Behind content blocks, a faint grid of intersecting lines (opacity 0.06) is visible -- the platonic grid that the broken layout was derived from. These ghost grids are slightly rotated (1-2 degrees) from true horizontal, creating a subliminal sense of unease, of a system that has been disrupted. 3. **Decision Nodes:** At points where forking lines branch, a small circle (8px diameter, 1px stroke, no fill) marks the decision point. On hover or scroll intersection, these nodes fill with Signal Coral (#E8655A) over 400ms, marking them as activated decisions. 4. **Convergence Moments:** Occasionally, two previously divergent lines reconverge, meeting at a node. These convergence points always align with moments of content resolution -- a conclusion, a synthesis, a statement that bridges the two sides of a dilemma. **Secondary Motifs:** - **The Hairline Split:** Text blocks occasionally feature a single word split across the central grid fissure, with the left half on one side and the right half on the other, connected by a thin dashed line. This typographic device is used only for key thematic words (CHOICE, RESOLVE, COMMIT) and never more than twice per page. - **Negative Silhouettes:** Rather than showing images, rectangular areas are carved out of content blocks -- empty rectangles with 1px borders where an image could be but isn't. These voids act as mirrors for the user's projection, spaces where the absence of imagery IS the imagery. Each void is labeled with a monospace caption in Pewter gray describing what could be there: "// scenario A" or "// the road not taken." - **Phase Indicators:** Small clusters of 3-5 dots arranged in asymmetric patterns appear near section transitions. The dots are in varying opacities of Steel Mist, and exactly one dot in each cluster is filled with Signal Coral, indicating position or progress -- like you're partway through a sequence of choices. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full viewport of Fog (#F2F3F5). For 800ms, nothing is visible. Then, from the exact center of the viewport, a single 1px line in Steel Mist (#C8CCD2) begins to draw itself horizontally in both directions simultaneously -- left and right -- at a speed of approximately 200px per second. The line reaches approximately 70% of the viewport width and stops. A pause of 300ms. Then the word "dilemma" fades in directly above the center of the line, set in Jost at 5rem, weight 500, color Graphite (#2B2D33). The fade-in takes 600ms with an ease-out curve. Below the line, smaller text in Josefin Sans Light, uppercase, tracked wide: "THE SPACE BETWEEN DECISIONS" -- this fades in 200ms after the domain name, slightly slower, over 800ms. After 1.5 seconds of stillness, the central line begins to fork: at its midpoint, the line splits, one branch angling upward-right at 15 degrees, the other downward-right at 15 degrees. The fork animation takes 500ms. Each branch terminates in an unfilled circle (decision node). The title text and subtitle shift upward by 60px over 400ms to accommodate the fork. As the user begins to scroll, the opening composition slides upward and the first content section is revealed. The transition uses a **fade-reveal** pattern: the new section does not slide in from below but materializes in place, opacity transitioning from 0 to 1 over 300ms with a concurrent 8px upward translation. Elements within each section stagger their reveals by 80ms each, but the stagger is not top-to-bottom -- it follows the broken-grid logic, with left-side elements revealing before right-side elements (or vice versa, alternating by section), reinforcing the sense of one side always being chosen before the other. **Section Transition Pattern:** Between each major section, a forking line animation plays as the section enters the viewport. The line draws from left to right (400ms), pauses (150ms), forks (300ms), and the unchosen branch fades to 0.03 opacity (500ms) while the chosen branch continues into the next section. The direction of the "chosen" branch alternates between sections. **Interactive Decision Moments:** At two or three points in the page, the user encounters a choice: two content blocks presented side by side across the central fissure, both at 0.5 opacity. As the user hovers over one, it transitions to full opacity and gains a subtle 1px Signal Coral bottom border, while the other block dims to 0.3 opacity. The transition takes 250ms. If the user moves to the other block, the states reverse. Neither choice navigates anywhere -- the interaction is purely about the experience of choosing, the visual weight of preference made visible. On mobile, these become swipeable cards with the same opacity logic triggered by swipe direction. **Scroll Behavior:** - No parallax. Zero. The broken-grid offset provides sufficient visual dynamism without parallax effects, which would fight the austere minimalism. - Scroll position drives the fill state of decision nodes: as nodes pass the viewport center, they fill with coral over 400ms. - The ghost grid behind content blocks rotates by an additional 0.5 degrees for every full viewport height scrolled, creating an almost imperceptible increasing unease as the user progresses. - At the final section, all grid lines converge to a single point at viewport center, and the background transitions from Fog to Charcoal Blue (#1E2028) over the final 50vh of scroll distance, inverting the color scheme: text becomes Fog-colored, the accent coral brightens slightly. **Animation Philosophy:** - Every animation uses `ease-out` or custom cubic-bezier curves that decelerate -- the physics of arriving at a decision, slowing down as commitment approaches. - No bounce, no spring, no elastic. Decisions don't bounce. - Duration range: 250ms (micro-interactions) to 800ms (section reveals). Nothing faster, nothing slower. - Fade-reveal is the dominant pattern. Elements materialize rather than move. The metaphor is emergence, not arrival. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hamburger menu animations, gradient backgrounds, warm color palettes, playful or bouncy motion, centered hero sections with background images, parallax scrolling, card hover lift effects. ## Uniqueness Notes **Differentiators from other designs:** 1. **The Central Fissure as Structural Metaphor:** No other design in the portfolio uses a persistent vertical gap as both a compositional device and a thematic metaphor. The 2px crack running the full page height, with content deliberately avoiding or bridging it, creates a spatial experience unique to dilemma.dev. The broken-grid layout at only 5% frequency in the portfolio becomes something entirely new when organized around this central wound. 2. **Cool-Gray Monotone with Single Warm Accent:** At only 2% frequency, the cool-grays palette is drastically underrepresented. While nearly every other site in the portfolio uses warm palettes (100% frequency) and gradient systems (93%), dilemma.dev operates in an almost monochromatic cool-gray field where the single coral accent carries enormous visual weight precisely because it has no warm context to dilute it. The accent color appears only at "decision moments," making it narratively meaningful rather than decoratively habitual. 3. **Forking Line System as Visual Language:** The motif of lines that split into divergent paths is entirely original within the portfolio. Grid-lines as a motif category sits at only 2% frequency, and no existing design uses lines as dynamic, animated decision-tree structures. The forking, converging, and fading line system creates a visual vocabulary unique to dilemma.dev that directly embodies its domain concept. 4. **Anti-Parallax Stance with Fade-Reveal Dominance:** While 80% of portfolio designs use parallax and 97% use scroll-triggered animations, dilemma.dev explicitly rejects parallax in favor of pure fade-reveal (4% frequency). Elements do not move laterally or at different scroll speeds -- they simply emerge or recede, mimicking the phenomenology of decision-making where options appear and disappear from consideration without physical motion. 5. **Negative Silhouette Imagery:** The deliberate use of empty bordered rectangles instead of actual images, labeled with monospace captions describing absent content, is an imagery approach absent from the portfolio. While "minimal" imagery scores 96% frequency, no other design weaponizes minimalism as actively as this -- the voids are not simplicity but intentional emptiness, absence as content. **Chosen Seed/Style:** `aesthetic: minimalist, layout: broken-grid, typography: futura-geometric, palette: cool-grays, patterns: fade-reveal, imagery: minimal, motifs: grid-lines, tone: approachable-casual` **Avoided Patterns (from frequency analysis):** - Warm palette (100% frequency) -- replaced with cool-grays (2%) - Parallax animation (80% frequency) -- explicitly rejected - Scroll-triggered as primary pattern (97% frequency) -- minimized, fade-reveal prioritized - Centered layout (98% frequency) -- replaced with broken-grid (5%) - Gradient palette (93% frequency) -- no gradients in the system - Mono typography as primary (98% frequency) -- mono used only as accent, not primary face - Friendly tone (96% frequency) -- replaced with approachable-casual (3%) - Vintage motifs (69% frequency) -- no vintage elements whatsoever