# Design Language for namu.quest ## Aesthetics and Tone namu.quest (Namu — 나무(木), Korean for "tree") channels a muji aesthetic — the refined Japanese philosophy of "no-brand" design where beauty emerges from the absence of excess, applied to a tree-themed quest and exploration platform. The site embodies purposeful emptiness — raw, natural materials presented without embellishment, and the quiet confidence that a well-designed quest needs nothing but clear direction and considered space. Inspiration draws from Muji's product philosophy, Kenya Hara's design of emptiness, the wooden simplicity of Japanese tea ceremony utensils, and the clean functionality of Naoto Fukasawa's household objects. The tone is nostalgic-retro — gentle, backward-looking language that treats tree quests as a return to an older way of connecting with the natural world. ## Layout Motifs and Structure The layout uses a **hud-overlay** architecture — content presented as clean information overlays on atmospheric backgrounds, creating the navigational display of a nature-quest interface stripped to essential wayfinding. **HUD Overlay Architecture:** - Full-viewport atmospheric background per section - Content overlaid as clean panels: max-width: 600px - Panels: minimal borders, clean backgrounds with slight transparency - Quest status indicators at screen edges - Information hierarchy through typography alone - Container: content panels centered within full viewports **Section Sequence:** 1. **Trailhead:** Hero with commissioner-versatile title as HUD overlay on earth-tones gradient, minimal compass icon, book-scholarly quest journal styling 2. **Paths:** Quest paths in HUD-framed panels — magnetic interactive elements that subtly attract cursor with minimal nature icons 3. **Waypoints:** Quest checkpoints in clean HUD panels with book-scholarly milestone notation and minimal tree markers 4. **Journal:** Quest log in HUD-overlay format with book-scholarly field journal entries 5. **Camp:** Footer as base camp — nostalgic-retro closing with minimal campfire icon and quiet trail sign-off ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile variable font at 2rem-2.8rem, weight 700. Its adaptable character creates the reliable, multi-purpose quality of a well-worn field guide. - **Body Text:** "Noto Sans" (Google Fonts) — universal sans at 0.9rem, weight 400, line height 1.75. - **Accent:** "Noto Serif" (Google Fonts) — serif at 0.95rem, weight 400, italic for journal entries and quest wisdom. - **Labels:** "Commissioner" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Forest Floor:** #1a1810 — deep forest floor brown-black for backgrounds - **Bark Surface:** #2a2418 — warm bark for panels - **Earth Sienna:** #b87840 — warm sienna for primary accent - **Lichen Green:** #68885c — muted lichen green for secondary accent - **Stone Ash:** #a09888 — warm stone ash for tertiary accent - **Trail Cream:** #f0e8d8 — warm trail-marker cream for light text - **Shadow:** #504838 — warm shadow for secondary text - **Border Bark:** rgba(184,120,64,0.12) — bark-tinted border ## Imagery and Motifs **Minimal Quest Icons:** Quest elements represented by radically simple icons — single-stroke SVGs (24-36px) of trees (one vertical line, two angled branches), paths (single curved line), markers (small circle with stem). Earth Sienna stroke (1.5px), no fill. The extreme minimalism of Muji applied to wayfinding iconography. **Magnetic Cursor Attraction:** Interactive quest elements feature magnetic cursor behavior — JavaScript detecting cursor proximity within 60px and applying subtle transform toward the element (max 3px shift). The magnetic pull suggests the natural attraction between a quester and their next waypoint. **Book-Scholarly Quest Journal:** Quest entries styled as field journal annotations — thin left border (2px, Earth Sienna at 0.3 opacity), indented text blocks, date headers in Labels style, pull-quotes with Noto Serif italic. The scholarly treatment transforms digital quests into documented expeditions. **Earth-Tones Forest Atmosphere:** Backgrounds use deep, warm earth tones — radial-gradient(at 50% 40%, rgba(184,120,64,0.03), transparent 50%) on Forest Floor. The warm darkness creates the atmosphere of a forest at dusk, where quests begin and end at the boundary between known and unknown. **HUD Quest Status Indicators:** Small status elements positioned at viewport edges — thin lines (40px, 1px) and small dots (4px) in Lichen Green at 0.15 opacity. These minimal indicators suggest quest progress and navigational awareness without demanding attention. ## Prompts for Implementation Build the page as a Muji quest navigator. HUD: section { min-height: 100vh; position: relative; } .hud-panel { max-width: 600px; margin: 0 auto; background: rgba(42,36,24,0.85); border: 1px solid rgba(184,120,64,0.12); border-radius: 8px; padding: 32px; } Magnetic: document.querySelectorAll('.magnetic').forEach(el => { el.addEventListener('mousemove', e => { const rect = el.getBoundingClientRect(); const dx = e.clientX - (rect.left + rect.width/2); const dy = e.clientY - (rect.top + rect.height/2); el.style.transform = `translate(${dx*0.05}px, ${dy*0.05}px)`; }); }); Book-scholarly: .journal-entry { border-left: 2px solid rgba(184,120,64,0.3); padding-left: 20px; margin-left: 12px; } .entry-date { font-family: 'Commissioner', sans-serif; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.08em; color: #a09888; } Earth atmosphere: .forest-bg { background: #1a1810; } .forest-bg::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 50% 40%, rgba(184,120,64,0.03), transparent 50%); pointer-events: none; } Status indicators: .hud-indicator { position: fixed; width: 40px; height: 1px; background: rgba(104,136,92,0.15); } AVOID: Gamified quest platforms, colorful adventure interfaces, and complex RPG-style navigation. Let Muji emptiness and nostalgic-retro gentleness create a quest platform where exploring trees feels like a quiet return to an older, simpler way of being in nature. ## Uniqueness Notes 1. **Muji for tree quests:** No-brand simplicity strips the quest experience to its essence — direction, intention, and the natural world. 2. **HUD-overlay as minimal wayfinding:** Clean information overlays provide just enough navigation without cluttering the atmospheric experience. 3. **Magnetic as natural attraction:** Cursor-following interactions create the instinctive pull a quester feels toward their next waypoint. 4. **Book-scholarly as field journal:** Journal-style entry formatting transforms digital quests into documented naturalist expeditions. 5. **Earth-tones as forest-at-dusk:** Warm dark palette creates the liminal atmosphere where quests begin at the boundary of the known. **Seed/Style:** aesthetic: muji, layout: hud-overlay, typography: commissioner-versatile, palette: earth-tones, patterns: magnetic, imagery: minimal, motifs: book-scholarly, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses muji aesthetic, hud-overlay layout, earth-tones palette, minimal imagery, and nostalgic-retro tone.