# Design Language for dilemma.dev ## Aesthetics and Tone dilemma.dev embraces a muji aesthetic -- the Japanese philosophy of "no-brand" simplicity where beauty emerges from the absence of excess. A dilemma is the tension between two equally compelling choices, and the muji approach strips away everything except that essential tension. Imagine a pristine white room with two doors: one labeled A, one labeled B. No decorations, no distractions -- just the pure weight of choice. The visual language draws from Muji's product design, Kenya Hara's graphic work, and the philosophical minimalism of Naoto Fukasawa. Ocean-deep blues provide the only chromatic depth, suggesting the unfathomable waters beneath every decision. The ".dev" suffix signals this is a developer tool or framework for exploring dilemmas computationally. The tone is nostalgic-retro -- evoking the quiet wisdom of ancient philosophical traditions (the trolley problem, the prisoner's dilemma) presented through a lens of digital purity. ## Layout Motifs and Structure The layout uses a **magazine-spread** composition -- content is arranged in editorial spreads, each presenting one dilemma as a magazine feature with its own visual hierarchy. **Primary structure:** - **Title spread (100vh):** A clean white canvas. The word "dilemma" is set in large serif type at center-left, with ".dev" in a smaller, lighter weight at center-right. Between them: empty space. This gap IS the dilemma -- the tension between two things with nothing in between. Below, a thin horizontal line extends edge to edge. - **Dilemma spreads (5 spreads, ~100vh each):** Each spread presents one philosophical/computational dilemma. The left half contains the "A" argument (text on white background), the right half contains the "B" argument (text on very pale blue background). A thin vertical line (1px) divides them precisely at center. Custom illustrations (circuit-board motif icons) appear as small accent elements within each argument. - **Convergence section (80vh):** A section where the split disappears. Content spans full width on a uniform white background. This section discusses how dilemmas are resolved (or not) in computational systems. - **Pulse-attention interactive (100vh):** A section with a single interactive element at center -- a large circle divided in half (left white, right ocean blue) that pulses gently (scale 1 to 1.02 to 1, 3-second cycle), drawing attention to the binary nature of choice. Surrounding text explains the dilemma framework. - **Closing editorial (50vh):** A minimal footer in magazine-editorial style -- a single column of centered text with a thin rule above and below. **Spacing philosophy:** Muji-level restraint. Margins are 10vw on each side. The vertical divider line in spreads is the only structural decoration. White space constitutes at least 40% of every viewport. Content density is deliberately low -- each spread contains no more than 200 words per side. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Noto Serif" (Google Fonts) -- a comprehensive serif with a classical, authoritative presence that befits philosophical content. Weight 700 for headlines. Size clamp(32px, 5vw, 64px). Letter-spacing: -0.01em. - **Body text:** "Noto Sans" (Google Fonts) -- the sans-serif complement to Noto Serif, creating a harmonious typographic system. Weight 400 for body, 500 for emphasis. Size clamp(15px, 1.1vw, 18px). Line-height: 1.85. - **Labels/Annotations:** "Noto Sans Mono" (Google Fonts) -- monospaced for dilemma labels, option identifiers, and technical annotations. Weight 400, size 12px, letter-spacing: 0.06em. **Palette:** - **Paper Pure** `#FFFFFF` -- primary background, true white for muji purity - **Ink True** `#1A1A2E` -- primary text, a deep navy-tinged black - **Ocean Depth** `#1A3A5C` -- the single accent color, used for the "B" argument backgrounds (at 3% opacity), lines, and interactive elements - **Pale Tide** `#F0F4F8` -- very subtle background tint for alternate sections - **Divider Grey** `#D0D0D0` -- structural lines and borders - **Pulse Blue** `#2A5A8C` -- slightly brighter blue for the pulsing interactive element ## Imagery and Motifs **Core visual motifs:** - **The vertical divider:** The signature element. A single 1px line in Divider Grey running from top to bottom of each dilemma spread, dividing A from B. This line is the physical manifestation of the dilemma -- the boundary between choices that cannot be crossed without committing. - **Custom circuit-pattern illustrations:** Small decorative elements (16-24px) using circuit-board motifs -- perpendicular lines with 90-degree turns, small nodes (4px circles), and T-junctions. These are rendered as SVG paths in Ocean Depth at 40% opacity. They appear as margin decorations within the dilemma arguments, referencing the ".dev" technical context. - **Pulse-attention circle:** The central interactive element -- a 200px-diameter circle (CSS border-radius: 50%) split vertically (left half white with 1px border, right half filled with Ocean Depth). The circle has a CSS animation: scale oscillating between 1 and 1.02 with a 3-second ease-in-out cycle. A subtle box-shadow (0 0 40px Ocean Depth at 10%) breathes in sync. - **Editorial hairline rules:** Thin horizontal lines (0.5px, Divider Grey) appear as section separators and framing devices, borrowed from magazine editorial design. They are used sparingly -- maximum 2-3 per viewport. - **A/B choice labels:** Small labels ("A" and "B") in monospaced type, enclosed in thin-bordered circles (20px diameter), positioned at the top of each dilemma argument column. These are the minimal UI for navigating the dilemma structure. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like reading a beautifully designed philosophy journal that happens to be about computational decision-making. Each spread is a discrete meditation on one dilemma. The experience is slow, deliberate, and quiet. **Opening animation sequence:** - Frame 0-400ms: Paper Pure white background. Nothing visible. - Frame 400-1000ms: "dilemma" fades in at center-left (opacity 0 to 1, translateX(-10px) to 0). The text is in Noto Serif, heavy weight. - Frame 1000-1600ms: ".dev" fades in at center-right (same animation, but from translateX(10px) to 0). The gap between the two words is the visual tension. - Frame 1600-2200ms: The horizontal line below draws itself from center outward in both directions simultaneously (width transitioning from 0 to 100vw). - Frame 2200-2800ms: The first dilemma spread's vertical divider line fades in at the viewport bottom, visible as a thin grey suggestion of what's to come. **Scroll behavior:** Dilemma spreads enter with a clean fade (opacity 0 to 1 over 400ms, no translateY -- the content simply materializes). The vertical divider in each spread draws itself from top to bottom as the spread enters the viewport (height transitioning from 0 to 100%). Circuit motif decorations appear with a pulse-attention effect (a brief scale from 1.1 to 1.0 over 300ms). The convergence section enters with no animation -- it is simply there, a statement of resolution. **Interaction details:** - Hovering over the "A" side of a dilemma spread adds a barely perceptible warm tint (background-color: rgba(255,248,240,0.3)). Hovering over "B" adds a cool tint (rgba(26,58,92,0.03)). This is the muji version of hover feedback -- almost invisible. - The pulse-attention circle pauses its animation on hover and splits slightly (the two halves translate 2px apart), revealing a thin gap. - Links are underlined in Ocean Depth with the underline offset 4px below the text for elegant spacing. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Split-spread dilemma visualization:** Each content section is physically divided by a vertical line into A/B halves, making the dilemma visible as a spatial relationship rather than just a textual description. The reader can literally see both sides simultaneously. 2. **Muji philosophy applied to philosophical content:** The "no-brand" design approach applied to content about dilemmas creates a meta-commentary: the design itself refuses to take sides, presenting both arguments with identical visual weight and treatment. 3. **The gap-as-design-element in the title:** The deliberate empty space between "dilemma" and ".dev" in the opening spread is the design's most radical element -- the void between the words is the dilemma itself, an absence that speaks louder than any decoration. 4. **Circuit motifs as philosophical decoration:** Small circuit-board pattern elements used as margin decorations in a philosophical context create an unexpected bridge between computational logic and humanistic inquiry. **Chosen seed/style:** aesthetic: muji, layout: magazine-spread, typography: serif-classic, palette: ocean-deep, patterns: pulse-attention, imagery: custom-illustration, motifs: circuit, tone: nostalgic-retro **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used muji (1%) aesthetic, pulse-attention (4%) pattern, and circuit (5%) motifs -- all underused.