# Design Language for dilemma.studio ## Aesthetics and Tone A game-studio war room where ethical dilemmas are prototyped as playable experiences -- dilemma.studio renders as an indie game development workspace, where wireframe mockups, sticky-note brainstorms, and prototype UIs coexist on a shared digital corkboard. The indie-studio aesthetic is deliberately unfinished: elements look like works-in-progress, borders are hand-drawn-style, and the whole interface feels like peering into a creative process rather than viewing a finished product. The tone is designer-enthusiastic: the voice of a game designer explaining their newest mechanic with barely contained excitement. Technical game-design terminology mixes with moral philosophy. "The fork mechanic creates emergent ethical gameplay..." Visual references: the prototype mockups pinned to the walls of a Naughty Dog design room; a Figma canvas zoomed out to show the whole project; the wireframe aesthetic of a game in early development; sticky notes on a glass wall. ## Layout Motifs and Structure The layout uses a **corkboard** architecture -- elements are positioned freely on a large scrollable canvas, like items pinned to a board. **Corkboard System:** - A warm brown (#3a2a1a) background simulating cork surface with CSS noise texture - Content "cards" are positioned with slight rotation (transform: rotate(-1deg to 3deg)) - Cards have different styles: sticky-note (yellow background, sans-serif), wireframe (white background, dashed border), sketch (lined-paper background) - The corkboard scrolls both vertically and horizontally (overflow: auto on both axes) with content spread across a wider-than-viewport canvas **Section Flow:** 1. **The Board:** The entire site is one continuous corkboard with items clustered in zones. 2. **Zone: CONCEPT** (upper-left) -- sticky notes explaining the dilemma-game concept. 3. **Zone: PROTOTYPES** (center) -- wireframe-style cards showing game mockups. 4. **Zone: PHILOSOPHY** (lower-right) -- lined-paper cards with ethical framework notes. 5. **Zone: CREDITS** (bottom) -- a single clean card with studio information. ## Typography and Palette **Typography:** - **Headlines:** "Caveat" (Google Fonts) -- a handwriting font that reinforces the sketched/brainstorm aesthetic. Used at 2rem-3.5rem, weight 700, line-height 1.3. - **Body:** "Nunito" (Google Fonts) -- friendly and readable. Used at 0.95rem, weight 400, line-height 1.6. - **Wireframe Labels:** "Space Mono" (Google Fonts) -- for technical annotations. Used at 0.75rem, weight 400. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Cork Brown | Background | #3a2a1a | Corkboard surface | | Sticky Yellow | Card type 1 | #fff8a0 | Sticky-note cards | | Sticky Pink | Card type 2 | #ffa0b0 | Important sticky notes | | Sticky Green | Card type 3 | #a0ffa0 | Completed items | | Wire White | Card type 4 | #ffffff | Wireframe cards | | Lined Cream | Card type 5 | #f8f4e8 | Philosophy/notes cards | | Pin Red | Accent | #d03030 | Push-pin indicators | | Pencil Grey | Text | #3a3a3a | Body text | | Sketch Blue | Annotation | #4080c0 | Wireframe annotations | ## Imagery and Motifs **Push-Pin Indicators:** Each card has a small CSS circle (12px) at the top center in Pin Red, simulating a push pin holding it to the board. The pin has a subtle shadow (2px 2px 2px rgba(0,0,0,0.3)). **Sticky-Note Cards:** Yellow/pink/green cards with box-shadow: 2px 2px 4px rgba(0,0,0,0.2) and slight rotation. The bottom-right corner curls slightly (a CSS triangle pseudo-element creating a fold). **Wireframe Dashed Borders:** Wireframe cards use border: 2px dashed #4080c0 on white backgrounds, with UI elements drawn as simple rectangles and circles in Sketch Blue. **Lined Paper:** Philosophy cards have a repeating-linear-gradient creating horizontal ruled lines (1px #d0d0c0 every 24px) on cream background. **Cork Texture:** The background uses a CSS noise pattern (SVG feTurbulence) in warm brown tones, creating the fibrous surface of actual cork. ## Prompts for Implementation Build as a game studio's working corkboard. The page loads with cards appearing in staggered order (100ms between each, random-seeming sequence), each card dropping into place with a brief bounce (scale 1.1 to 1.0, 200ms). Cards are positioned using CSS Grid on a canvas wider than the viewport (2000px x auto), with horizontal scroll enabled. Each card's slight rotation is unique (CSS custom properties: --rotate: 1.5deg per card). Hovering a card lifts it slightly (translateY: -4px, box-shadow increases) and brings it to front (z-index bump). Push pins at card tops are the consistent visual anchor. The corkboard has no traditional navigation -- users explore by scrolling and discovering. Zones are loosely clustered but not rigidly separated, creating organic discovery. Avoid polished, finalized design elements. Everything should look in-progress. No CTAs, pricing, or formal marketing. This is a creative workspace, not a product page. ## Uniqueness Notes 1. **Corkboard as site architecture:** The entire site as a freely explorable pinboard is unique, breaking all conventional web layout expectations. 2. **Mixed card types (sticky/wireframe/lined):** Multiple card styles coexisting creates authentic studio messiness. 3. **Horizontal+vertical scroll exploration:** The wider-than-viewport canvas invites spatial exploration rare in web design. 4. **Handwriting typography for a game studio:** Using Caveat as the primary display font reinforces the brainstorm-in-progress atmosphere. Document chosen seed/style: aesthetic: indie-studio, layout: corkboard, typography: handwriting, palette: sticky-note, patterns: push-pin, imagery: cork-texture, motifs: wireframe-sketch, tone: designer-enthusiastic Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)