# Design Language for miris-project.net ## Aesthetics and Tone miris-project.net (MiRiS — a game making circle) channels a muji aesthetic — restrained elegance, functional beauty, and the quiet confidence of design that removes everything unnecessary, applied to an indie game development collective's project hub. The site presents MiRiS's game-making work with the understated precision of a well-curated product catalog — each project given clean space to breathe, with no visual noise competing for attention. Inspiration draws from Muji's product design philosophy, Dieter Rams's ten principles of good design, Japanese stationery packaging, and the clean interface design of early Nintendo DS menus. The tone is conversational — warm and approachable despite the minimal aesthetics, like a friend showing you their workshop. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — the viewport divided into two functional halves, one for navigation/context and one for content, creating a tool-like interface for exploring game projects. **Split-Screen Architecture:** - Viewport divided: left panel (35%) for navigation and project list, right panel (65%) for content display - Left panel: fixed position, scrolls independently, subtle border-right (1px) - Right panel: main content area with standard scroll behavior - On mobile: stacks vertically, left panel becomes horizontal nav bar - Panel backgrounds differentiated by subtle shade difference **Section Sequence:** 1. **Studio:** Left panel header with MiRiS circle name in elegant serif, right panel hero with current featured project and neon-glow accent highlight 2. **Projects:** Left panel shows project list with hover states, right panel displays selected project detail with tropical-fish decorative accents 3. **Process:** Split view of development methodology — left: timeline steps, right: detailed descriptions with ripple-animation interactive elements 4. **Members:** Team profiles split across panels — names/roles left, bios/work right 5. **Contact:** Left panel: minimal contact form, right panel: social links and circle information ## Typography and Palette **Typography:** - **Headlines:** "Cormorant Garamond" (Google Fonts) — elegant serif at 2rem-3rem, weight 600. Its refined proportions channel the quiet authority of Muji's typographic restraint. - **Body Text:** "Inter" (Google Fonts) — clean UI sans at 0.95rem, weight 400, line height 1.7. Functional clarity for project descriptions. - **Project Titles:** "Cormorant Garamond" at 1.5rem, weight 700 for project names in the navigation list. - **Meta:** "Inter" at 0.75rem, weight 500, letter-spacing 0.04em for dates and tags. **Color Palette:** - **Paper White:** #fafaf6 — warm white for right panel background - **Linen:** #f0efe8 — slightly darker warm white for left panel background - **Ink Deep:** #1a1a1a — near-black for primary text - **Neon Coral:** #e05050 — vivid coral-red for primary accent highlights - **Neon Teal:** #20b0b0 — bright teal for secondary accents and links - **Mist Gray:** #a0a098 — warm gray for secondary text and borders - **Stone:** #d0d0c8 — light warm gray for dividers and inactive states - **Shadow Warm:** #2a2a28 — dark warm gray for hover states and emphasis ## Imagery and Motifs **Neon-Glow Project Highlights:** Featured projects emit a soft neon glow — box-shadow: 0 0 20px rgba(224,80,80,0.1) in Neon Coral for the currently active project. On hover, glow shifts to Neon Teal (rgba(32,176,176,0.12)). The restrained neon against muji backgrounds creates a striking minimal-meets-vivid contrast. **Tropical-Fish Decorative Accents:** Small SVG illustrations of stylized tropical fish (simple geometric forms — triangles and circles, 24-32px, stroke-only at 1.5px in Neon Teal at 0.2 opacity) swim as decorative elements in content margins. 2-3 fish per section, gently animated with @keyframes drift (translateX 10px over 8s, alternate, infinite). A playful contrast to muji restraint. **Ripple-Animation Interactive Feedback:** Interactive elements produce a ripple effect on click — a circle expanding from click point (position: absolute, border-radius: 50%, background: Neon Coral at 0.08 opacity) scaling from 0 to 200px over 400ms with opacity fading to 0. Creates satisfying tactile feedback in the clean interface. **Split-Panel Hover Transitions:** When hovering project items in the left panel, the right panel content cross-fades — opacity transitioning from 1 to 0.3 on the old content and 0 to 1 on the new content over 300ms. The left panel item gets a subtle left-border highlight (3px, Neon Coral) sliding in from the left. **Muji Grid Lines:** Subtle grid lines at 80px intervals in the background — repeating-linear-gradient creating horizontal rules in Mist Gray at 0.04 opacity, suggesting the lined paper of a design notebook. Only visible on the right panel. ## Prompts for Implementation Build the page as a muji-inspired split-screen project hub. Layout: display: grid, grid-template-columns: 35% 65%, height: 100vh. Left panel: position: sticky, top: 0, overflow-y: auto. Right panel: overflow-y: auto. Neon glow: .project-active { box-shadow: 0 0 20px rgba(224,80,80,0.1); transition: box-shadow 300ms; } .project-card:hover { box-shadow: 0 0 20px rgba(32,176,176,0.12); } Ripple: on click, create absolute-positioned span at click coordinates. @keyframes ripple { from { transform: scale(0); opacity: 0.08; } to { transform: scale(1); opacity: 0; } } 400ms forwards. Remove element after animation. Tropical fish: SVG paths, position: absolute in section margins. @keyframes drift { from { transform: translateX(0); } to { transform: translateX(10px); } } 8s alternate infinite ease-in-out. Background grid: .right-panel { background: repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(160,160,152,0.04) 79px, rgba(160,160,152,0.04) 80px); } AVOID: Cluttered game-dev portfolio aesthetics, dark-themed gamer interfaces, and visual excess. Let the muji restraint and conversational tone create a calm, inviting space that lets the game projects speak for themselves. ## Uniqueness Notes 1. **Muji aesthetic for indie game development:** Product-design minimalism reframes game-making as a craft of quiet precision rather than flashy entertainment. 2. **Split-screen as studio tool interface:** The dual-panel layout creates a functional workspace feeling appropriate for a development circle. 3. **Neon accents against muji restraint:** Vivid color sparks against austere backgrounds create the tension between discipline and creative energy. 4. **Tropical-fish decorative whimsy:** Tiny swimming fish add playful life to minimal layouts, hinting at the creative spirit within the restraint. 5. **Ripple feedback as tactile craft:** Physical-feeling click responses reinforce the handcrafted quality of the circle's work. **Seed/Style:** aesthetic: muji, layout: split-screen, typography: elegant-serif, palette: high-contrast, patterns: ripple, imagery: neon-glow, motifs: tropical-fish, tone: conversational **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses muji aesthetic, split-screen layout, high-contrast palette, neon-glow imagery, and conversational tone.