# Design Language for miris.one ## Aesthetics and Tone miris.one (MiRiS — a game making circle) channels a glassmorphism aesthetic — frosted glass surfaces, layered translucency, and light refracting through semi-transparent panels, applied to the primary landing page and unified hub of the MiRiS game-making circle. The site is a crystal exhibition hall — each section of the circle's work displayed behind luminous frosted panels, creating a sense of looking into a carefully curated glass cabinet. Inspiration draws from Apple Vision Pro's spatial interface, the architecture of I.M. Pei's Louvre Pyramid, art deco exhibition hall photography, and the warm amber tones of terracotta museum galleries. The tone is raw-authentic — direct, unvarnished communication about the circle's work and mission, without marketing polish. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture — content presented in editorial-style spreads with dramatic imagery, pull-quotes, and the pacing of a high-end design publication showcasing the circle's portfolio. **Magazine Spread Architecture:** - Two-column spreads: display: grid, grid-template-columns: 1fr 1fr at full viewport width - Single-column editorial blocks: max-width: 580px for comfortable reading - Full-bleed imagery zones spanning full width between text sections - Pull-quotes: large type (2rem+) in art-deco display font breaking the reading flow - Gutter line: thin 1px vertical line at center of spreads suggesting magazine binding **Section Sequence:** 1. **Cover:** Full-bleed hero with MiRiS name in art-deco display type, photography-style circle portrait, glassmorphic overlay panel with tagline 2. **Feature:** Magazine spread introducing the circle — left: editorial text about mission, right: progressive-disclosure expanding detail panels 3. **Portfolio:** Game projects presented as magazine feature articles with glassmorphic card overlays on photography-style backgrounds 4. **Tech Column:** Technical philosophy section with tech-motif accents and detailed methodology pull-quotes 5. **Colophon:** Footer as magazine colophon — credits, circle members, and contact information in restrained editorial layout ## Typography and Palette **Typography:** - **Headlines:** "Poiret One" (Google Fonts) — art deco display sans at 2.5rem-4rem, weight 400. Its geometric, thin-line elegance channels 1920s exhibition poster typography. - **Body Text:** "Lora" (Google Fonts) — editorial serif at 0.95rem, weight 400, line height 1.8. Magazine-quality reading serif. - **Pull Quotes:** "Poiret One" at 2rem for dramatic editorial pull-quotes. - **Captions:** "Lora" at 0.75rem, weight 400, italic for image captions and credits. **Color Palette:** - **Terracotta Deep:** #8a4a30 — warm terracotta for primary accents and headings - **Terracotta Light:** #c08060 — lighter terracotta for secondary accents - **Cream Warm:** #f8f0e4 — warm cream for page background - **Earth Dark:** #2a2018 — deep warm brown for primary text - **Glass Frost:** rgba(248,240,228,0.7) — translucent cream for frosted glass panels - **Glass Border:** rgba(138,74,48,0.15) — terracotta-tinted glass edges - **Copper:** #b07040 — medium copper for decorative elements - **Linen:** #ece4d8 — light warm linen for card backgrounds ## Imagery and Motifs **Photography-Style Project Showcase:** Game projects presented with editorial photography treatment — images framed with generous white borders (16px padding in Cream Warm), thin Copper borders (1px), and italic caption text below. Creates the feeling of a printed magazine photo spread. **Progressive-Disclosure Content Panels:** Detailed information revealed through expandable glassmorphic panels — clicking a summary line smoothly expands the panel (max-height transition from 0 to measured, 400ms ease), with content fading in (opacity 0 to 1, 300ms delay). The frosted glass surface brightens slightly when expanded. **Glassmorphic Exhibition Panels:** Key content areas float on frosted glass — background: rgba(248,240,228,0.7), backdrop-filter: blur(16px), border: 1px solid rgba(138,74,48,0.12), border-radius: 2px (minimal rounding for art-deco precision). Box-shadow: 0 4px 16px rgba(0,0,0,0.06). **Tech-Motif Circuit Patterns:** The technology section features subtle circuit-board patterns — thin lines (1px) in Copper at 0.05 opacity creating right-angle paths with small circles (4px) at junctions. SVG or CSS repeating patterns suggesting the digital technology behind the glass-and-terracotta surface. **Art Deco Geometric Dividers:** Section breaks decorated with geometric dividers — horizontal lines flanked by small geometric shapes (diamonds, circles, chevrons) in Terracotta Deep at 0.3 opacity, centered. CSS-only using border and pseudo-element combinations. ## Prompts for Implementation Build the page as a glassmorphic magazine exhibition. Spreads: display: grid, grid-template-columns: 1fr 1fr, width: 100vw. Editorial blocks: max-width: 580px, margin: 0 auto. Glass panels: background: rgba(248,240,228,0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(138,74,48,0.12); border-radius: 2px; box-shadow: 0 4px 16px rgba(0,0,0,0.06). Progressive disclosure: .panel-content { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 400ms ease, opacity 300ms 100ms; } .panel.open .panel-content { max-height: 500px; opacity: 1; } Photography frames: .photo-frame { padding: 16px; background: #f8f0e4; border: 1px solid #b07040; } .photo-frame figcaption { font-style: italic; font-size: 0.75rem; margin-top: 8px; } Art deco dividers: .divider { display: flex; align-items: center; gap: 12px; justify-content: center; } .divider::before, .divider::after { content: ''; height: 1px; width: 60px; background: rgba(138,74,48,0.3); } .divider span { width: 6px; height: 6px; transform: rotate(45deg); background: rgba(138,74,48,0.3); } AVOID: Flashy gaming portfolio aesthetics, dark tech-heavy interfaces, and casual social media layouts. Let the glassmorphic refinement and raw-authentic voice create an exhibition-quality circle homepage. ## Uniqueness Notes 1. **Glassmorphism meets terracotta warmth:** Frosted glass panels over warm terracotta tones create a unique material combination — digital precision with earthy warmth. 2. **Magazine-spread for game dev circle:** Editorial presentation elevates indie game development to the status of a design-magazine feature. 3. **Art deco typography for digital craft:** Geometric display type brings 1920s exhibition elegance to contemporary game-making. 4. **Progressive-disclosure as gallery curation:** Expandable panels let visitors choose their depth of engagement, like exploring different gallery rooms. 5. **Photography framing for game projects:** Editorial photo treatment makes game screenshots feel like curated art prints. **Seed/Style:** aesthetic: glassmorphism, layout: magazine-spread, typography: art-deco-display, palette: terracotta-warm, patterns: progressive-disclosure, imagery: photography, motifs: tech, tone: raw-authentic **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 glassmorphism aesthetic, magazine-spread layout, terracotta-warm palette, photography imagery, and raw-authentic tone.