# Design Language for saram.quest ## Aesthetics and Tone saram.quest channels a muji aesthetic — the no-brand, essential-quality philosophy of Muji's design approach applied to a 사람 (human/person) quest platform. The site simplifies — removing everything unnecessary until only the essential human experience remains, the way Muji strips products to their functional essence while maintaining warmth and material honesty. Inspiration draws from the no-brand philosophy of Muji's Kenya Hara-era design, the essential simplicity of Dieter Rams' less-but-better approach, the material honesty of Japanese domestic product design, and the quiet dignity of everyday objects designed without ego. The tone is approachable-casual — relaxed, unpretentious language that makes human quests feel like natural daily activities rather than epic undertakings. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture — content arranged in editorial spreads that create the lifestyle-magazine quality of human quests documented as personal stories worth sharing. **Magazine Spread Architecture:** - Editorial spreads with balanced text-image composition - Text columns: max-width: 560px alongside visual panels - Feature spreads: full-width with internal editorial divisions - Margin annotations for quest progress notes - Container: max-width: 1040px with 40px column gaps - The spreads create the lifestyle quality of human quests presented as beautiful everyday stories **Section Sequence:** 1. **Dawn:** Hero with garamond-classic title on candy-bright muji gradient, paper-aged natural material textures, grid-lines structural organization markers 2. **Journey:** Quest stories in magazine spreads — scroll-triggered interactive natural-reveal transitions with paper-aged gentle aging 3. **Heart:** Featured human quest in full-spread editorial with grid-lines precise structural framing and paper-aged immersive texture 4. **Steps:** Quest milestones in compact editorial columns with grid-lines simplified structure 5. **Rest:** Footer as journey pause — approachable-casual farewell with grid-lines settled structure and relaxed closing ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic serif at 2.2rem-3rem, weight 700. Its timeless elegance creates the literary quality of human stories told with the quiet dignity of well-crafted prose. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "EB Garamond" at 1rem, weight 400, italic for quest reflections and personal annotations. - **Labels:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em. **Color Palette:** - **Muji White:** #f8f4f0 — essential warm white for backgrounds - **Natural Kraft:** #e8e0d4 — kraft paper for panels - **Candy Coral:** #e87870 — bright candy coral for primary accent - **Candy Sky:** #58a8d8 — bright sky blue for secondary accent - **Candy Lemon:** #e8c848 — bright lemon for tertiary accent - **Natural Dark:** #282018 — warm natural dark for text - **Kraft Shadow:** #988878 — kraft shadow for secondary text - **Border Natural:** rgba(232,120,112,0.1) — coral tint border ## Imagery and Motifs **Paper-Aged Natural Material:** Quest panels feature honest material surfaces — subtle kraft-paper texture through background: linear-gradient(180deg, rgba(40,32,24,0.008), rgba(40,32,24,0.012)) with micro-noise from repeating radial-gradient at 0.006 opacity. The paper creates the Muji quality of materials that are honest about what they are. **Scroll-Triggered Natural Reveals:** Quest content appears with natural, unhurried timing — opacity 0 to 1 and translateY(16px) to translateY(0) over 500ms ease-out on scroll intersection with 0.15 threshold. No dramatic effects — just content appearing when you arrive at it. The scroll triggers create the Muji quality of experiences that happen naturally without demanding attention. **Grid-Lines Structural Organization:** Subtle organizational grid visible as thin lines (1px) in Natural Dark at 0.03 opacity — horizontal rules at section boundaries, vertical alignment guides at column edges. Small plus-mark (+) indicators at grid intersections (6px, 0.04 opacity). The grid creates the Muji quality of organization that is functional, visible, and honest about its structural purpose. **Candy-Bright Muji Atmosphere:** Despite Muji's typical neutrality, candy-bright accents add warmth — small color dots (8px circles) in Candy Coral, Candy Sky, and Candy Lemon at 0.08 opacity as quest-stage indicators. The candy colors create the childlike quality of human quests approached with genuine enthusiasm and wonder. **Essential Material Borders:** Panels with minimal, honest borders — border: 1px solid rgba(40,32,24,0.06); no border-radius (honest square corners) or minimal radius (2px). No decorative shadows — just material edges. The borders create the Muji quality of containers that serve function without pretending to be more than they are. ## Prompts for Implementation Build the page as a muji human quest magazine. Magazine spread: .quest-spread { max-width: 1040px; margin: 0 auto; padding: 80px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; } .quest-text { max-width: 560px; } .quest-full { grid-column: span 2; } Scroll reveal: .natural-reveal { opacity: 0; transform: translateY(16px); transition: all 500ms ease-out; } .natural-reveal.visible { opacity: 1; transform: translateY(0); } Muji panel: .muji-card { background: #e8e0d4; border: 1px solid rgba(40,32,24,0.06); border-radius: 2px; padding: 28px; } Grid structure: .structure-grid::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(40,32,24,0.03) 79px, rgba(40,32,24,0.03) 80px); pointer-events: none; } Color dot: .quest-stage { width: 8px; height: 8px; border-radius: 50%; background: var(--stage-color, rgba(232,120,112,0.08)); } AVOID: Corporate quest platforms, gamified achievement dashboards, and minimal task trackers. Let Muji essential simplicity and approachable-casual warmth create a human quest platform where 사람 experiences are documented as beautiful everyday stories, each quest a natural activity approached with honest material simplicity and genuine enthusiasm. ## Uniqueness Notes 1. **Muji for human quests:** No-brand essential simplicity makes personal quests feel like natural daily activities rather than gamified achievements. 2. **Magazine-spread as lifestyle storytelling:** Editorial composition creates the quality of human experiences documented as stories worth reading and sharing. 3. **Candy-bright accents on muji neutrality:** Unexpected color pops create the childlike quality of quests approached with genuine wonder. 4. **Paper-aged as material honesty:** Kraft textures create the Muji quality of materials that are honest about their nature and purpose. 5. **Grid-lines as visible structure:** Functional organization lines create the quality of design that shows its structural logic openly. **Seed/Style:** aesthetic: muji, layout: magazine-spread, typography: garamond-classic, palette: candy-bright, patterns: scroll-triggered, imagery: paper-aged, motifs: grid-lines, tone: approachable-casual **Avoided Overused Patterns:** corporate aesthetic (89%), parallax patterns (93%), asymmetric layout (91%), mono typography (94%), warm palette (95%), friendly tone (89%), minimal imagery (92%). This design uses muji aesthetic, magazine-spread layout, candy-bright palette, paper-aged imagery, and approachable-casual tone.