# Design Language for dilemma.studio ## Aesthetics and Tone dilemma.studio adopts a dark-academia aesthetic -- the moody sophistication of candlelit study rooms where moral philosophers debate impossible choices. "Dilemma Theme Game Studio" is the concept: a game development studio specializing in games built around moral and ethical dilemmas. Imagine a Victorian-era psychology department's demonstration theater: dark wood paneling, green-shaded desk lamps, chalkboards covered in decision trees, and the faint smell of leather-bound case studies. The visual language draws from gothic university architecture, the editorial design of Oxford University Press publications, and the atmospheric photography of old college libraries. The palette uses gradient tones -- from warm candlelight to deep shadow -- creating dramatic chiaroscuro that mirrors the moral light-and-dark of dilemma narratives. The tone is conversational, making the studio feel like a smart friend explaining their latest game concept over drinks. ## Layout Motifs and Structure The layout uses a **modular-blocks** composition where content is arranged in discrete, self-contained blocks of varying sizes, like game cards or case files spread across a desk. **Primary structure:** - **Studio entrance (100vh):** A dark gradient background (deep brown to near-black) with the studio name "Dilemma Studio" centered in elegant Playfair type. A subtle candle-atmospheric glow (warm amber radial-gradient, 200px, centered below the title) illuminates the text from beneath, like a desk lamp in a dark room. Two small duotone photo frames (styled as game preview thumbnails) float at the lower-third, angled slightly. - **Game showcase (variable, ~350vh):** The main body. Modular blocks (3 column CSS Grid with varying spans: 1x1, 2x1, 1x2) present different game concepts. Each block has a dark card background (rgba(0,0,0,0.6)), a thin warm border (1px, amber at 15% opacity), and generous internal padding. Some blocks contain text, others feature duotone visuals (game scenes processed in warm brown and cream). - **Philosophy wall (100vh):** A section styled as a chalkboard -- dark green-grey background with slightly textured surface (CSS noise). Content is "written" in cream-colored handwritten type (Playfair + Caveat for annotations), presenting the studio's design philosophy around dilemma-based game design. - **Candle-atmospheric reading room (80vh):** A warm, intimate section with multiple amber glow sources (3-4 small radial-gradients) simulating a room lit by several candles. Content here is a longer-form essay about the studio's approach, set in comfortable serif body text. - **Contact darkroom (50vh):** A minimal dark footer with contact information in muted type. The candle glows from the previous section fade to darkness. **Spacing philosophy:** Modular blocks have 16px gaps. Internal padding is 32px. Between major sections, a smooth 2vh gradient transition (one section's background blending into the next). The overall density is medium -- not sparse but not cluttered. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Playfair Display" (Google Fonts) -- a transitional serif with high contrast that captures the intellectual elegance of dark academia. Weight 700 for headlines. Size clamp(28px, 4vw, 52px). Letter-spacing: -0.01em. - **Body text:** "Crimson Text" (Google Fonts) -- a book-weight serif designed for comfortable extended reading, appropriate for the studio's narrative-heavy content. Weight 400 for body, 600 for emphasis. Size clamp(15px, 1.1vw, 18px). Line-height: 1.8. - **Annotations/Chalk:** "Caveat" (Google Fonts) -- handwritten font for chalkboard content, annotations, and informal notes. Weight 400, size clamp(16px, 1.2vw, 20px). **Palette:** - **Study Dark** `#1A1210` -- primary background, deep warm near-black - **Parchment Light** `#F0E8D8` -- primary text on dark backgrounds - **Candle Amber** `#D4A040` -- warm glow accent, candle flame color - **Chalk Green** `#2A3830` -- chalkboard background color - **Duotone Warm** `#8B6B4A` -- the warm tone for duotone photo processing - **Shadow Deep** `#0A0806` -- the darkest shadow areas and card backgrounds ## Imagery and Motifs **Core visual motifs:** - **Candle-atmospheric lighting:** Multiple small radial-gradients (100-200px radius) in Candle Amber at 5-10% opacity placed at strategic positions to simulate candlelight pools. These warm glows create the dark-academia atmosphere and guide the eye to important content areas. - **Duotone game previews:** Game concept images (or placeholder styled frames) processed in a duotone of Duotone Warm and Parchment Light. The duotone processing creates a consistent vintage/academic feel regardless of the source imagery, tying all game previews into the studio's visual identity. - **Chalkboard typography section:** The philosophy wall uses a chalkboard simulation -- Chalk Green background with SVG noise texture (feTurbulence, baseFrequency: 0.3, opacity: 0.08) and content rendered in Parchment Light with Caveat font for annotations. Small chalk "drawings" (simple SVG diagrams of decision trees) appear as decorative elements. - **Blur-focus depth transitions:** Content blocks that are not in the current viewport center have a slight blur applied (filter: blur(1px), transitioning to blur(0) as they approach center). This blur-focus effect creates a shallow depth-of-field simulation that reinforces the atmospheric, intimate quality. - **Warm border glow on hover:** Modular blocks respond to hover with their thin amber border brightening (opacity from 15% to 40%) and gaining a subtle box-shadow glow (0 0 20px Candle Amber at 8%). This simulates candlelight catching the edge of a card. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like visiting a game studio that is also a philosophy department. The atmosphere is warm, dark, intellectual, and slightly mysterious. Each game showcase block is a window into a different dilemma world. **Opening animation sequence:** - Frame 0-400ms: Study Dark background. Darkness. - Frame 400-1000ms: The candle glow below center materializes slowly (radial-gradient opacity from 0 to 0.08 over 600ms), casting warm light upward. - Frame 1000-1800ms: "Dilemma" fades into the candlelight (opacity 0 to 1), illuminated from below. - Frame 1800-2400ms: "Studio" appears below with slight blur-focus transition (blur(2px) to blur(0) over 400ms). - Frame 2400-3200ms: The two game preview frames fade in at the lower third, angled 2-3 degrees, with their duotone processing applying in real time (grayscale to duotone, achieved by changing CSS filter values). **Scroll behavior:** Modular game blocks enter with fade-in and a blur-to-focus transition (blur(2px) to blur(0), opacity 0 to 1, 400ms). The chalkboard section has no entry animation -- it is simply present when reached. The candlelit reading room's ambient glows pulse very slowly (opacity oscillating 0.05 to 0.10 over 6-second cycles) when the section is in the viewport. **Interaction details:** - Modular blocks show warm border glow on hover. - Chalkboard annotations increase in opacity on hover (0.6 to 1.0). - The candle glow element nearest to the cursor brightens slightly (opacity + 0.02) when the cursor is within 200px. - Game preview duotone frames shift slightly on hover (translateY(-2px), a subtle "picking up the card" gesture). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Game studio as philosophy department:** The dark-academia aesthetic applied to a game studio creates a unique identity where game development is positioned as intellectual and scholarly rather than commercial and flashy. The candlelit atmosphere suggests games of depth and moral weight. 2. **Modular-blocks as case files:** Using the modular-blocks layout to present game concepts as discrete "case files" (each block a self-contained dilemma scenario) gives the layout pattern a narrative function unique to this design. 3. **Chalkboard philosophy wall:** A dedicated section simulating an actual chalkboard with handwritten content and decision-tree diagrams is a distinctive visual device that bridges the academic and game-development worlds. 4. **Blur-focus as atmospheric depth:** The shallow depth-of-field simulation (off-center content slightly blurred) creates a photographic atmosphere that makes the digital space feel like a physical room captured by a camera with a wide aperture. **Chosen seed/style:** aesthetic: dark-academia, layout: modular-blocks, typography: playfair-elegant, palette: gradient, patterns: blur-focus, imagery: duotone-photo, motifs: candle-atmospheric, tone: conversational **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns as primary. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) as raw imagery. Avoided warm (87%) palette as a named token. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used modular-blocks (1%) layout, candle-atmospheric (1%) motifs, and duotone-photo (1%) imagery -- all heavily underused.