# Design Language for npc.quest ## Aesthetics and Tone npc.quest channels a neomorphism aesthetic — the soft, extruded quality of elements that appear pressed into or raised from a uniform surface, applied to a non-player character quest and interactive storytelling platform. The site feels touchable — every button a soft pillow, every card a gently raised platform, and the entire experience carrying the tactile satisfaction of pressing shapes into clay. Inspiration draws from the soft UI experiments of Alexander Plyuto, the dimensional quality of Claymation animation, the tactile interfaces of spatial computing, and the rounded, approachable world-building of Animal Crossing. The tone is whimsical-creative — imaginative, story-rich language that treats every NPC encounter as a delightful narrative surprise. ## Layout Motifs and Structure The layout uses a **diagonal-sections** architecture — content arranged in sections with angled boundaries, creating the dynamic energy and forward momentum of a quest path cutting across terrain. **Diagonal Sections Architecture:** - Sections: full-width with clip-path creating diagonal edges - clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%) alternating angles - Content centered within angled sections: max-width: 960px - Overlap zones between sections create depth - The diagonals suggest quest paths cutting across landscapes **Section Sequence:** 1. **Tavern:** Hero with eclectic-hybrid title on navy-metallic gradient, geometric-abstract NPC silhouette illustrations, organic-blobs soft terrain shapes 2. **Quests:** NPC quest listings in diagonal sections — parallax interactive depth with geometric-abstract quest marker icons 3. **NPCs:** Character profiles in angled panel format with organic-blobs character shape treatments 4. **Loot:** Rewards section in diagonal progression with geometric-abstract treasure illustrations 5. **Inn:** Footer as rest stop — whimsical-creative sign-off with organic-blobs comfortable shape and warm tavern closing ## Typography and Palette **Typography:** - **Headlines:** Mixed "Cinzel" (Google Fonts) decorative serif at 2.5rem weight 700 with "Nunito" (Google Fonts) rounded sans at 1rem weight 400 — the eclectic hybrid creates the fantasy-meets-friendly tone of a welcoming quest interface. - **Body Text:** "Nunito" at 0.95rem, weight 400, line height 1.7. - **Accent:** "Cinzel" at 1.1rem, weight 400 for NPC names and quest titles. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Navy Deep:** #101828 — deep navy for dark backgrounds - **Steel Surface:** #1c2838 — steel blue for raised surfaces - **Silver Metallic:** #8898b0 — silver metallic for primary accent - **Bronze Warm:** #a88850 — warm bronze for secondary accent - **Ice Blue:** #6088b8 — cool ice blue for tertiary accent - **Mist Light:** #d8e0e8 — misty light for text on dark - **Shadow:** #384050 — shadow blue for secondary text - **Border Steel:** rgba(136,152,176,0.12) — steel border ## Imagery and Motifs **Geometric-Abstract NPC Illustrations:** NPCs illustrated as geometric-abstract figures — SVG compositions of circles (heads), rectangles (bodies), and triangles (accessories) in Silver Metallic and Bronze Warm. Each NPC a unique arrangement of simple shapes, creating the abstracted character design of a quest interface where imagination fills in the details. **Parallax Quest Depth:** Quest sections feature parallax scrolling — background terrain elements (organic blobs, geometric markers) at 0.4x scroll speed, foreground quest content at 1x. Creates the sensation of traveling through a landscape toward quest objectives. **Organic-Blobs Terrain Shapes:** Soft, irregular blob shapes (SVG with complex border-radius, 60-200px) in navy and steel tones at 0.04-0.08 opacity serving as terrain markers in the background. The organic forms suggest hills, clouds, and landscape features that the quest path crosses. **Navy-Metallic Neomorphic Surfaces:** Neomorphic elements use navy-metallic palette — raised elements: background: #1c2838, box-shadow: 6px 6px 12px rgba(0,0,0,0.3), -6px -6px 12px rgba(40,50,70,0.2). Pressed elements: box-shadow: inset 4px 4px 8px rgba(0,0,0,0.3), inset -4px -4px 8px rgba(40,50,70,0.2). The metallic quality suggests armor and weapons. **Diagonal Quest Progression:** The angled section boundaries create a visual progression — each section angled slightly differently, suggesting the winding path of a quest journey across varied terrain. ## Prompts for Implementation Build the page as a neomorphic NPC quest platform. Diagonal sections: .quest-section { clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%); padding: 80px 24px; margin-top: -4vh; position: relative; } Neomorphic: .neumorphic-card { background: #1c2838; border-radius: 16px; box-shadow: 6px 6px 12px rgba(0,0,0,0.3), -6px -6px 12px rgba(40,50,70,0.2); padding: 28px; } .neumorphic-pressed { box-shadow: inset 4px 4px 8px rgba(0,0,0,0.3), inset -4px -4px 8px rgba(40,50,70,0.2); } Parallax: .terrain-bg { position: absolute; inset: 0; transform: translateZ(-1px) scale(2); } Geometric NPCs: SVG with fill: none, stroke: #8898b0 or #a88850, stroke-width: 1.5. Circles, rectangles, triangles composed into character shapes. Organic terrain: .terrain-blob { position: absolute; border-radius: 40% 60% 50% 50% / 50% 40% 60% 50%; background: rgba(28,40,56,0.06); width: var(--size); height: var(--size); } AVOID: Standard RPG interfaces, complex stat-heavy game UIs, and dark fantasy themes. Let neomorphic tactility and whimsical-creative storytelling create a quest platform where NPC encounters feel like delightful, touchable narrative surprises. ## Uniqueness Notes 1. **Neomorphism for NPC quests:** Soft, extruded surfaces make quest interfaces feel touchable and physically satisfying. 2. **Diagonal-sections as quest path:** Angled section boundaries create the dynamic forward momentum of a quest cutting across terrain. 3. **Geometric-abstract as NPC design:** Simple shape compositions create abstracted characters where imagination fills in narrative details. 4. **Organic-blobs as terrain features:** Soft landscape shapes create the environmental context for quest journeys. 5. **Navy-metallic as armor quality:** Color palette suggests the metallic quality of quest equipment and NPC attire. **Seed/Style:** aesthetic: neomorphism, layout: diagonal-sections, typography: eclectic-hybrid, palette: navy-metallic, patterns: parallax, imagery: geometric-abstract, motifs: organic-blobs, tone: whimsical-creative **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 neomorphism aesthetic, diagonal-sections layout, navy-metallic palette, geometric-abstract imagery, and whimsical-creative tone.