# Design Language for miris.xyz ## Aesthetics and Tone miris.xyz (MiRiS — a game making circle) channels a luxury-premium aesthetic — refined materials, prestigious spacing, and the elevated presentation of high-end brand experiences applied to the experimental and cross-platform hub of the MiRiS game-making circle. The site positions MiRiS as a premium creative brand — each project presented with the care and exclusivity of a luxury product launch, where game development is elevated to haute couture. Inspiration draws from Hermes web design, Apple product pages, the editorial luxury of Monocle magazine, and the serene beauty of high-end Japanese ryokan photography. The tone is pastoral-romantic — creative work framed through the lens of natural beauty and idyllic creative life. ## Layout Motifs and Structure The layout uses a **single-column** architecture — a refined, focused vertical experience where content commands full attention in a centered, generous column, creating the paced reading experience of a luxury lookbook. **Single Column Architecture:** - Content max-width: 680px centered for premium reading experience - Full-bleed imagery breaks at 100vw between text sections - Generous vertical spacing (100-140px) between content groups - Text blocks rarely exceed 560px for optimal line length - Negative space is the primary design element **Section Sequence:** 1. **Atelier:** Hero with rounded-sans title, bokeh-background atmospheric photography, crystalline geometric accent frame, progressive-disclosure tagline expanding to mission statement 2. **Collection:** Featured projects presented as luxury product showcases — each with full-bleed imagery, editorial description, and crystalline border detail 3. **Process:** Creative methodology described in pastoral language with bokeh-background imagery of workspaces and nature, progressive-disclosure expanding each phase 4. **Editions:** Limited releases and special projects with premium presentation — gold-accented cards and crystalline frames 5. **Correspondence:** Footer as a refined sign-off letter — warm closing, elegant contact information, minimal social links ## Typography and Palette **Typography:** - **Headlines:** "Nunito" (Google Fonts) — rounded sans at 2rem-3rem, weight 700. Its warm, rounded forms create the approachable luxury of premium lifestyle brands. - **Body Text:** "Nunito" at 0.95rem, weight 400, line height 1.85. Extended line height for luxurious, airy reading. - **Accent Text:** "Nunito" at 1.2rem, weight 300, for pull-quotes and feature callouts. - **Labels:** "Nunito" at 0.7rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Sunset Blush:** #d08060 — warm sunset coral for primary accents - **Sunset Gold:** #c8a050 — warm gold for secondary accents - **Cream Luxe:** #faf6f0 — warm cream for page background - **Earth Ink:** #2a2018 — warm deep brown for primary text - **Dusk Rose:** #b08080 — muted rose for tertiary accents - **Morning Mist:** #e8e0d8 — soft warm gray for borders and dividers - **Pastoral Green:** #80a870 — muted sage for nature accents - **Amber Glow:** #e0b060 — warm amber for highlight effects ## Imagery and Motifs **Bokeh-Background Atmospheric Photography:** Full-bleed sections feature soft-focus background imagery — CSS filter: blur(12px) with brightness(1.1) on background images, overlaid with semi-transparent Cream Luxe (rgba(250,246,240,0.8)). Creates the dreamy, pastoral atmosphere of luxury lifestyle photography. **Crystalline Geometric Frames:** Featured content framed with angular, faceted borders — clip-path: polygon(2% 0%, 98% 0%, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2%) creating subtle octagonal crystalline shapes. Border simulated with outline or box-shadow in Sunset Gold at 0.2 opacity. **Progressive-Disclosure Luxury Reveals:** Content expands with refined animation — initial view shows headline and one-line summary. On click, content smoothly expands (max-height transition over 500ms ease) revealing full description, imagery, and details. The expansion feels like opening a luxury presentation folder. **Pastoral Gradient Overlays:** Sections transition with soft sunset gradients — linear-gradient(to bottom, rgba(208,128,96,0.03), rgba(200,160,80,0.02), transparent) at section tops, creating the warm glow of golden-hour light across the page. **Premium Spacing as Design Element:** The single-column layout uses 100-140px vertical gaps as intentional design elements — the empty space communicates luxury and confidence. Small decorative elements (a thin 40px horizontal rule in Morning Mist, or a tiny diamond in Sunset Gold) occasionally mark the center of these gaps. ## Prompts for Implementation Build the page as a luxury-premium single-column experience. Container: max-width: 680px, margin: 0 auto, padding: 0 24px. Full-bleed: width: 100vw, margin-left: calc(-50vw + 50%). Vertical gaps: 100-140px. Bokeh backgrounds: .atmospheric { position: relative; } .atmospheric::before { content: ''; position: absolute; inset: 0; background-image: url(...); background-size: cover; filter: blur(12px) brightness(1.1); } .atmospheric::after { content: ''; position: absolute; inset: 0; background: rgba(250,246,240,0.8); } Crystalline frames: clip-path: polygon(2% 0%, 98% 0%, 100% 2%, 100% 98%, 98% 100%, 2% 100%, 0% 98%, 0% 2%). box-shadow: 0 0 0 1px rgba(200,160,80,0.2). Progressive disclosure: .reveal-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 500ms ease, opacity 300ms 150ms; } .reveal.open .reveal-content { max-height: 600px; opacity: 1; } Pastoral gradient: .section { background: linear-gradient(to bottom, rgba(208,128,96,0.03), rgba(200,160,80,0.02) 30%, transparent 60%); } Gap decorators: .spacer { height: 120px; display: flex; align-items: center; justify-content: center; } .spacer::after { content: ''; width: 40px; height: 1px; background: #e8e0d8; } AVOID: Dense portfolio grids, tech-startup landing pages, and aggressive call-to-action patterns. Let the luxury spacing and pastoral-romantic tone create a premium brand experience that communicates creative excellence through restraint. ## Uniqueness Notes 1. **Luxury-premium for indie game circle:** High-end brand presentation elevates independent game development to the status of premium creative craft. 2. **Single-column as luxury lookbook:** Focused vertical reading creates the paced, deliberate experience of browsing a prestigious publication. 3. **Bokeh atmospheric photography as pastoral dream:** Soft-focus imagery creates the romantic, golden-hour quality of idyllic creative life. 4. **Crystalline frames for precious content:** Faceted geometric borders present each project as a gem-like precious object. 5. **Premium spacing as confidence signal:** Abundant negative space communicates that MiRiS has nothing to prove and everything to show. **Seed/Style:** aesthetic: luxury-premium, layout: single-column, typography: rounded-sans, palette: sunset-warm, patterns: progressive-disclosure, imagery: bokeh-background, motifs: crystalline, tone: pastoral-romantic **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 luxury-premium aesthetic, single-column layout, sunset-warm palette, bokeh-background imagery, and pastoral-romantic tone.