# Design Language for miris.quest ## Aesthetics and Tone miris.quest (MiRiS — a game making circle) channels a playful aesthetic — bright colors, rounded forms, and the optimistic visual language of apps designed to delight, applied to the quest and adventure game development showcase of the MiRiS circle. The site gamifies its own presentation — each section is a stage to clear, each project a quest to discover, and the scroll journey is the adventure itself. Inspiration draws from Nintendo's UI design philosophy, the colorful worlds of Kirby games, indie game jam presentation pages, and the achievement systems of modern gaming platforms. The tone is tech-tutorial — breaking down game development concepts with clarity and structured guidance, making complex creation accessible. ## Layout Motifs and Structure The layout uses an **asymmetric** architecture — content blocks placed off-center and at varying widths, creating the dynamic, unpredictable energy of an adventure game map. **Asymmetric Architecture:** - Content alternates between left-aligned (margin-left: 10%) and right-aligned (margin-right: 10%) - Widths vary: narrow blocks (380-480px), wide blocks (560-720px), full-width feature panels - Vertical spacing varies (60-100px) creating adventurous rhythm - Floating-element decorations in the asymmetric gaps - Base container: 1100px max-width **Section Sequence:** 1. **Quest Start:** Hero with retro-display title, isometric-icon game world preview, and fade-reveal entrance animation 2. **Active Quests:** Current game projects in asymmetric cards — each with floating-element decorations and colorful muted-vintage borders 3. **Achievement Log:** Completed projects displayed as unlocked achievements with isometric-icon trophies and milestone markers 4. **Skill Tree:** Game development capabilities presented as a skill-tree diagram with fade-reveal progressive unlocking 5. **Save Point:** Footer as game save screen — progress summary, social links as inventory items, next-quest teasers ## Typography and Palette **Typography:** - **Headlines:** "Abril Fatface" (Google Fonts) — bold retro display serif at 2.5rem-3.5rem, weight 400. Its dramatic thick-thin contrast creates the heroic title treatment of classic adventure games. - **Body Text:** "Nunito" (Google Fonts) — rounded sans at 0.95rem, weight 400, line height 1.7. Friendly, approachable reading for tutorial content. - **Quest Titles:** "Abril Fatface" at 1.5rem for project names and section headers. - **Tags/Stats:** "Nunito" at 0.75rem, weight 700 for category tags and game statistics. **Color Palette:** - **Vintage Teal:** #408080 — muted teal for primary accents - **Vintage Rose:** #c07070 — dusty rose for secondary accents - **Vintage Gold:** #c0a050 — warm gold for achievement highlights - **Parchment:** #f4f0e8 — warm cream for page background - **Quest Dark:** #2a2828 — warm near-black for primary text - **Vintage Sage:** #88a880 — muted sage for tertiary accents - **Faded Blue:** #7090a8 — soft blue for links and interactive elements - **Dusty Lilac:** #a890b0 — muted purple for card backgrounds ## Imagery and Motifs **Isometric-Icon Game World Elements:** Game concepts illustrated with isometric icons (SVG, 32-48px) — treasure chests, swords, maps, controllers, code brackets rendered in clean isometric projection at 2px stroke in muted-vintage palette colors. Scattered as decorative elements around project cards. **Floating-Element Adventure Decorations:** Small decorative elements (stars, diamonds, circles, 8-16px) float in the asymmetric gaps between content — position: absolute, gently animated with @keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8px); } } 3-5s alternate infinite. Different shapes use different vintage palette colors at 0.2-0.4 opacity. **Fade-Reveal Stage Entrances:** Content blocks appear with a gentle fade-reveal — starting opacity: 0 with mask-image: radial-gradient(circle 0px at 50% 50%, black 0%, transparent 0%). On scroll entry (.visible): mask-image expands to radial-gradient(circle 250px at 50% 50%, black 80%, transparent 100%), opacity: 1, transition: 600ms ease-out. Creates the feeling of discovering new areas on a map. **Achievement Unlock Cards:** Completed project cards feature a special achievement treatment — gold (Vintage Gold) top border (3px), small trophy SVG icon (20px) in corner, and a subtle shimmer animation (background-position shift of a linear-gradient highlight) that plays once on scroll entry, suggesting a freshly-unlocked achievement. **Skill-Tree Connection Lines:** Game development capabilities connected by thin SVG path lines (1px, Vintage Teal at 0.3 opacity) branching from a central trunk. Nodes are small circles (12px) with filled colors indicating unlocked (Vintage Gold) or locked (Dusty Lilac at 0.3) status. Stroke-dasharray animation draws connections on scroll entry. ## Prompts for Implementation Build the page as a playful adventure quest map. Container: max-width: 1100px. Asymmetric blocks: .block:nth-child(odd) { margin-left: 10%; max-width: 480px; } .block:nth-child(even) { margin-left: auto; margin-right: 10%; max-width: 560px; } Fade-reveal: .block { opacity: 0; mask-image: radial-gradient(circle 0px at 50% 50%, black 0%, transparent 0%); transition: opacity 600ms, mask-image 600ms ease-out; } .block.visible { opacity: 1; mask-image: radial-gradient(circle 250px at 50% 50%, black 80%, transparent 100%); } Floating elements: position: absolute, various sizes. @keyframes bob { from { transform: translateY(0); } to { transform: translateY(-8px); } } 3-5s alternate infinite ease-in-out. Stagger animation-delay. Achievement shimmer: @keyframes shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } applied once (forwards) on .visible. Background: linear-gradient(90deg, transparent 30%, rgba(192,160,80,0.15) 50%, transparent 70%). Skill tree: SVG with stroke-dasharray: pathLength. On .visible: stroke-dashoffset transitions from pathLength to 0 over 800ms per segment with staggered delays. AVOID: Dark, competitive gaming aesthetics, corporate portfolio layouts, and overly complex UI. Let the playful energy and tech-tutorial clarity make game development feel like a welcoming adventure. ## Uniqueness Notes 1. **Playful aesthetic for quest game development:** The site itself becomes an adventure, with sections as stages and projects as quests to discover. 2. **Asymmetric layout as adventure map:** Off-center content placement creates the dynamic, exploratory feeling of navigating an unknown world. 3. **Achievement unlock cards for completed projects:** Gamified presentation of past work using familiar achievement-system visual language. 4. **Muted-vintage palette for nostalgic gaming:** Dusty, warm colors evoke the beloved color palettes of classic adventure games. 5. **Skill-tree visualization for capabilities:** Development skills presented as unlockable abilities bridge the game-making craft with game design language. **Seed/Style:** aesthetic: playful, layout: asymmetric, typography: retro-display, palette: muted-vintage, patterns: fade-reveal, imagery: isometric-icons, motifs: floating-elements, tone: tech-tutorial **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses playful aesthetic, asymmetric layout, muted-vintage palette, isometric-icons imagery, and tech-tutorial tone.