# Design Language for miris.bar ## Aesthetics and Tone miris.bar (MiRiS — a game making circle) channels a glassmorphism aesthetic — frosted glass surfaces, layered translucency, and the ethereal beauty of light passing through semi-transparent materials, applied to a social hub and community space for the MiRiS game development circle. The site feels like a lounge suspended in aurora light — conversations and updates visible through frosted glass panels, creating a sense of ambient community presence. Inspiration draws from Apple's iOS frosted glass panels, the translucent architecture of Toyo Ito's Sendai Mediatheque, the glow of arcade cabinet edges, and the dreamy quality of underwater photography. The tone is raw-authentic — unfiltered updates and honest community communication, presented without corporate polish. ## Layout Motifs and Structure The layout uses a **split-screen** architecture — the viewport divided between a community feed and content zones, creating a social-lounge atmosphere with dual focal points. **Split-Screen Architecture:** - Left panel (45%): community feed and updates, scrolls independently - Right panel (55%): featured content and project highlights - Glassmorphic divider: 1px frosted line between panels with blur effect - On mobile: single column with tab switching between feed and content - Both panels share a common aurora-gradient background visible through glass **Section Sequence:** 1. **Lobby:** Split hero — left: MiRiS circle greeting in geometric type, right: featured game with water-bubble particle animation and aurora-lights background 2. **The Feed:** Left panel: community updates in frosted glass cards, right panel: pinned announcements with pulse-attention indicators 3. **Arcade:** Game project showcase with glassmorphic cards floating over aurora gradient, each with water-bubble decorative elements 4. **Vibe Check:** Community polls and discussions in interactive glassmorphic forms with pulse-attention feedback 5. **Last Call:** Footer as lounge closing — soft fade-out with minimal links on frosted glass strip ## Typography and Palette **Typography:** - **Headlines:** "Jost" (Google Fonts) — geometric Futura-inspired sans at 2rem-3.5rem, weight 600. Its precise geometry pairs perfectly with glassmorphic surfaces. - **Body Text:** "Inter" (Google Fonts) — clean UI sans at 0.95rem, weight 400, line height 1.7. Functional clarity through frosted glass. - **Tags:** "Jost" at 0.75rem, weight 500, uppercase, letter-spacing 0.06em for category labels. - **Timestamps:** "Inter" at 0.7rem, weight 400 for dates and meta information. **Color Palette:** - **Aurora Violet:** #6030a0 — deep purple for aurora gradient base - **Aurora Teal:** #20a0a0 — vivid teal for aurora gradient mid - **Aurora Rose:** #c04080 — warm pink for aurora gradient accent - **Glass White:** rgba(255,255,255,0.08) — translucent white for glass surfaces - **Glass Border:** rgba(255,255,255,0.15) — slightly more opaque for glass edges - **Text Bright:** #f0f0f8 — near-white for primary text - **Pastel Mint:** #a0e0c0 — soft mint for secondary accents - **Pastel Peach:** #e0b0a0 — soft peach for tertiary accents ## Imagery and Motifs **Water-Bubble Particle Effects:** Decorative bubble elements float across sections — small circles (4-12px) with border: 1px solid Glass Border, background: transparent, animated upward with slight horizontal drift. @keyframes float { from { transform: translateY(0) translateX(0); opacity: 0.3; } to { transform: translateY(-200px) translateX(20px); opacity: 0; } } Duration varies 4-8s per bubble. Creates an underwater lounge atmosphere. **Aurora-Lights Background Gradient:** The shared background behind all glassmorphic panels features a slowly-shifting aurora gradient — multiple radial-gradient layers in Aurora Violet, Aurora Teal, and Aurora Rose at 0.3 opacity, with @keyframes aurora shifting gradient positions over 20s infinite. The aurora is visible through every frosted glass surface. **Pulse-Attention Notification Dots:** New content and active discussions feature pulsing indicator dots — small (8px) circles in Pastel Mint with @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.7; } 50% { transform: scale(1.4); opacity: 1; } } 2s infinite. Draws gentle attention without urgency. **Glassmorphic Card Surfaces:** All content cards use frosted glass treatment — background: rgba(255,255,255,0.06), backdrop-filter: blur(20px), border: 1px solid rgba(255,255,255,0.12), border-radius: 16px. On hover, background brightens to rgba(255,255,255,0.1) with 300ms transition. **Split-Panel Aurora Bleed:** The aurora gradient subtly shifts hue between the left and right panels — left panel leans violet, right panel leans teal, with the gradient blend point at the split line. Creates visual distinction while maintaining unity. ## Prompts for Implementation Build the page as a glassmorphic aurora lounge. Layout: display: grid, grid-template-columns: 45% 55%, height: 100vh. Background: fixed div with aurora gradients. Aurora background: position: fixed, inset: 0. Background: radial-gradient(ellipse at 20% 30%, rgba(96,48,160,0.3), transparent 50%), radial-gradient(ellipse at 80% 60%, rgba(32,160,160,0.25), transparent 50%), radial-gradient(ellipse at 50% 80%, rgba(192,64,128,0.2), transparent 40%). @keyframes aurora { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } } 20s infinite. Glass cards: background: rgba(255,255,255,0.06); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.12); border-radius: 16px. Water bubbles: absolute-positioned divs, randomized sizes (4-12px), border: 1px solid rgba(255,255,255,0.15). @keyframes float with translateY(-200px) and slight X drift, 4-8s each, staggered animation-delay. Pulse dots: .notification-dot { width: 8px; height: 8px; border-radius: 50%; background: #a0e0c0; animation: pulse 2s infinite; } AVOID: Opaque, heavy gaming interfaces, dark gamer aesthetics, and cluttered social media layouts. Let the glassmorphic transparency and raw-authentic tone create a dreamlike community space where you can see the creative energy flowing. ## Uniqueness Notes 1. **Glassmorphism for game dev community:** Frosted glass surfaces create a lounge atmosphere where community activity is ambient and visible. 2. **Split-screen as social-lounge dual zones:** The divided viewport creates distinct spaces for community feed and featured content, like different areas of a bar. 3. **Aurora-lights as shared ambience:** The shifting gradient background visible through all glass panels unifies the space with living light. 4. **Water-bubble particles as underwater atmosphere:** Rising bubble animations create the dreamy, submerged quality of an undersea lounge. 5. **Pulse-attention as gentle social signals:** Soft pulsing dots indicate activity without the anxiety of aggressive notification patterns. **Seed/Style:** aesthetic: glassmorphism, layout: split-screen, typography: futura-geometric, palette: pastel, patterns: pulse-attention, imagery: water-bubbles, motifs: aurora-lights, 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, split-screen layout, pastel palette, water-bubbles imagery, and raw-authentic tone.