# Design Language for dilemma.studio ## Aesthetics and Tone Wabi-sabi minimalism translated into digital form — the beauty of impermanence, incompleteness, and the unhurried. dilemma.studio embraces deliberate quietness: aged parchment whites, dusty terracotta, moss-tinged stone, and the soft ochre of late afternoon mountain light. The mood is grounded and contemplative, evoking a lone figure standing at the treeline, watching mist roll across granite peaks. Nothing is finished in the conventional sense; edges breathe, spacing is generous, and silence carries as much weight as content. Tone is grounded-earthy: unsentimental but warm, confident without assertion, and deeply human. This is not a site that announces itself loudly — it whispers and expects the viewer to lean in. ## Layout Motifs and Structure Parallax-sections structure: each viewport-height section acts as a distinct atmospheric plane. The mountain-landscape motif manifests as layered depth — foreground elements (text, thin rules) scroll at a different rate from mid-ground texture washes and distant silhouette imagery. Three to five distinct sections, each with ample negative space and a single focal idea. Layout principles: - Ma (negative space) governs proportion: at least 60% of each panel is intentional emptiness - Vertical rhythm anchored to an 8px base grid, with section padding jumping to 160px+ on large screens - No sidebar, no card grid, no dashboard — pure stacked full-bleed sections - Content aligned left with a soft 10–12% right margin, creating an asymmetric calm - Thin horizontal rules (1px, 20% opacity) act as breathing pauses between ideas - No sticky nav — a minimal ghost header dissolves on scroll ## Typography and Palette **Typography — frutiger-clean:** - Display / heading: "Nunito Sans" (Google Fonts) — clean humanist sans, weight 300 for large headings to preserve the wabi-sabi lightness - Body: "Source Serif 4" (Google Fonts) — warm, readable, with subtle calligraphic traces that nod to craft and impermanence - Accent / label: "Nunito Sans" weight 600, tracked wide (0.12em), uppercase at small sizes - Type scale: 72px / 48px / 32px / 18px / 14px — generous jumps, never cramped - No decorative or display-only fonts; weight variation carries all hierarchy **Palette — warm earth with mountain mist:** - `#F5F0E8` — parchment white (primary background) - `#2C2318` — deep umber (primary text) - `#8C6E54` — worn terracotta (accent / rule lines) - `#BFA98A` — dusty sand (secondary text, dividers) - `#D4C5A9` — linen (section dividers, hover states) - `#4A5240` — lichen green (subtle accent, sparse use) - `#7B8C7A` — sage mist (parallax mid-layer tint) ## Imagery and Motifs **Mountain-landscape motif:** - Horizon silhouettes of mountain ridges rendered as thin SVG line-drawings — single stroke, no fill, 1–2px weight in deep umber at 15–25% opacity, used as section backdrops - Mist suggestion through layered CSS gradients (semi-transparent linen-to-transparent overlays) rather than photographs - Stone / pebble textures sampled as subtle grain overlays (CSS noise via SVG feTurbulence or tiny tiled PNGs) — never photorealistic - Sparse botanical element: a single abstract brushstroke-style mark (ink wash simulation via CSS filter: blur + sepia) anchoring one hero section **Patterns — fade-reveal:** - Sections and text blocks enter on scroll with a slow opacity 0→1 transition (1200ms ease-out) combined with a 24px vertical drift - No bounce, no spring, no scale — only the soft appear of fog lifting - Parallax depth layers move at 0.3×, 0.6×, and 1× scroll rates - Hover on interactive elements: text color shifts to worn terracotta (#8C6E54) with a 400ms ease — no underline draw, no lift, just warmth arriving - Mountain silhouette SVG paths have a subtle parallax on scroll (translateY only, no rotation) **Motifs:** - Thin horizontal ink-stroke rules (CSS border-bottom, 1px, terracotta at 30% opacity) - Imperfect circle mark (SVG, hand-traced quality) as a quiet logo/mark anchor - Numbered list items with small stone-textured counters ## Prompts for Implementation Build as a single-page HTML document with vanilla CSS and minimal JS (no framework). Structure as five parallax sections, each viewport-height (100dvh): 1. **Hero** — Full-bleed parchment, centered-left heading in Nunito Sans 300, mountain silhouette SVG behind text at 20% opacity, parallax at 0.3× rate. No hero CTA button. 2. **About** — Left-aligned body text in Source Serif 4, single thin rule above. Ink-wash accent mark in far right margin. 3. **Work** — Three project entries as plain text list (title + one-line descriptor), no cards, no images. Fade-reveal stagger: 200ms delay between items. 4. **Philosophy** — Pull quote in Nunito Sans 300, 48px, centered, with extra-wide tracking. Mountain ridge SVG silhouette behind at 0.6× parallax. 5. **Contact** — Minimal: email link in worn terracotta, nothing else. Section background shifts to deep umber (#2C2318) with text in parchment — the only dark section, creating a quiet end-note. **CSS approach:** - CSS custom properties for all palette values - `scroll-behavior: smooth` on html - Intersection Observer for fade-reveal (no GSAP, no ScrollMagic) - Parallax via `transform: translateY()` on scroll event, requestAnimationFrame throttled - `font-display: swap` for both Google Fonts - No animation for users with `prefers-reduced-motion` **AVOID:** - Hero CTA buttons with gradient fills - Pricing/stat grids - Card hover lift effects - Dark glassmorphism panels - Heavy JavaScript frameworks - Decorative emoji or icon libraries ## Uniqueness Notes 1. **Frutiger-clean is underused (5%)**: Most designs reach for editorial or hand-drawn aesthetics; this design uses a clean humanist sans at ultra-light weight to achieve wabi-sabi restraint without craft-store rusticity. 2. **Warm palette expressed as geological, not domestic**: Rather than terracotta pottery or warm kitchen tones, the warm palette references mountain stone, lichen, and granite mist — grounding the earthy tone in landscape rather than home. 3. **Parallax without spectacle**: Unlike most parallax implementations that emphasize movement and drama, these parallax layers move so slowly (0.3×) that the effect reads as depth rather than animation — consistent with the wabi-sabi principle of stillness. 4. **No photography**: All imagery is SVG line-drawing and CSS-generated texture — avoiding the photographic sheen that conflicts with imperfect-aesthetic values. 5. **Single dark section as punctuation**: Using color reversal only in the final contact section creates a rare compositional rhythm — five acts, one quiet resolution. Seed: aesthetic: wabi-sabi, layout: parallax-sections, typography: frutiger-clean, palette: warm, patterns: fade-reveal, imagery: minimal, motifs: mountain-landscape, tone: grounded-earthy Avoided patterns (overused per frequency analysis): hand-drawn illustration style (80%), editorial layout (50%), glassmorphism panels (32%), terminal aesthetic (30%)