# Design Language for miris.works ## Aesthetics and Tone miris.works (MiRiS — a game making circle) channels a dark-academia aesthetic — rich library tones, scholarly atmosphere, and the intellectual glamour of wood-paneled reading rooms applied to the comprehensive portfolio and works archive of the MiRiS game-making circle. The site is a private library of creative output — each game project shelved like a leather-bound volume, browsed by candlelight in a mahogany-furnished study. Inspiration draws from Oxford and Cambridge college libraries, Renaissance manuscript illumination, the bookish photography of dark academia Instagram, and the warmth of old bookshop interiors. The tone is luxurious — MiRiS's creative output presented as precious, collectible works deserving of reverent appreciation. ## Layout Motifs and Structure The layout uses an **organic-flow** architecture — content flowing in natural, non-rigid patterns that follow the reading eye's natural movement, creating the unhurried browsing experience of exploring a private collection. **Organic Flow Architecture:** - Content flows in variable-width blocks within a 1000px container - Blocks vary from 400px to full-width, creating natural rhythm - No rigid grid — elements placed for visual balance and reading flow - Generous vertical spacing (80-120px) between content groups - Organic blob backgrounds float behind content at low opacity **Section Sequence:** 1. **The Library:** Hero with playfair-elegant title on warm gradient background, generative-art bookshelf pattern, particle-effects of floating dust motes 2. **The Stacks:** Portfolio of game projects in organic-flow layout — each project a "volume" with scholarly presentation, pulse-attention new-release indicators 3. **Reading Room:** Featured project deep-dive with expanded generative-art illustrations and detailed development narratives 4. **Card Catalog:** Project categorization and search, styled as library card catalog with warm paper textures 5. **Closing Hours:** Footer as library closing announcement — warm dim lighting effect, hushed typography, closing-time credits ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) — elegant high-contrast serif at 2.5rem-3.5rem, weight 700. Its refined thick-thin strokes channel the typography of scholarly publication title pages. - **Body Text:** "Crimson Text" (Google Fonts) — scholarly serif at 0.95rem, weight 400, line height 1.8. Rich, warm reading for portfolio narratives. - **Project Titles:** "Playfair Display" at 1.5rem, weight 400, italic for individual work titles. - **Captions:** "Crimson Text" at 0.8rem, weight 400, italic for image captions and metadata. **Color Palette:** - **Library Warm:** #3a2818 — deep warm brown for primary backgrounds - **Mahogany:** #5a3828 — medium brown for card backgrounds - **Parchment Glow:** #f4e8d0 — warm parchment for primary text - **Gold Leaf:** #c8a040 — rich gold for primary accents and decorative elements - **Crimson Binding:** #a03030 — deep red for secondary accents - **Dust Mote:** #e0d0b0 — warm light beige for particles and secondary text - **Ink Dark:** #1a1010 — deep near-black for heavy emphasis - **Candle Light:** #e8c880 — warm amber for glow effects ## Imagery and Motifs **Generative-Art Bookshelf Patterns:** Section backgrounds feature procedurally-generated bookshelf patterns — CSS repeating-linear-gradient creating vertical rectangles of varying widths (12-24px) and heights in Mahogany, Library Warm, and Crimson Binding at 0.06 opacity, suggesting rows of book spines. Each section generates a slightly different pattern. **Particle-Effects Floating Dust Motes:** Small particles (2-4px, border-radius: 50%) in Dust Mote color at 0.1-0.25 opacity float slowly upward — @keyframes drift with translateY(-300px) and slight horizontal movement over 10-15s, infinite, staggered delays. Creates the atmospheric quality of dust dancing in library sunbeams. **Pulse-Attention New Release Indicators:** New and featured works have a gently pulsing glow — box-shadow: 0 0 20px rgba(200,160,64,0.15) alternating with 0 0 20px rgba(200,160,64,0.25) over 3s infinite. The warm gold pulse suggests candlelight flickering on a displayed volume. **Scholarly Volume Cards:** Project cards styled as book covers — background: Mahogany, border: 1px solid rgba(200,160,64,0.2), padding: 32px. Title in Playfair italic, description in Crimson Text, and a small decorative rule (40px, 1px, Gold Leaf at 0.4 opacity) between title and description. Corner decorations using small CSS ornaments. **Warm Vignette Overlays:** Section backgrounds feature a warm vignette — radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(26,16,16,0.3) 100%) overlaid on content sections, darkening edges and creating the intimate, enclosed feeling of a candlelit room. ## Prompts for Implementation Build the page as a dark-academia library portfolio. Container: max-width: 1000px, margin: 0 auto. Organic blocks: varying max-width (400-800px), some centered, some offset left or right with margin adjustments. Dust particles: 10-15 absolute-positioned spans, border-radius: 50%, various sizes 2-4px. @keyframes drift { from { transform: translate(0, 0); opacity: 0.15; } to { transform: translate(20px, -300px); opacity: 0; } } 10-15s infinite, staggered animation-delay. Bookshelf pattern: background: repeating-linear-gradient(90deg, rgba(90,56,40,0.06) 0px, rgba(90,56,40,0.06) 16px, transparent 16px, transparent 20px, rgba(58,40,24,0.04) 20px, rgba(58,40,24,0.04) 32px, transparent 32px, transparent 38px). Pulse glow: @keyframes candleGlow { 0%, 100% { box-shadow: 0 0 20px rgba(200,160,64,0.15); } 50% { box-shadow: 0 0 20px rgba(200,160,64,0.25); } } 3s infinite ease-in-out. Vignette: .section::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(26,16,16,0.3) 100%); pointer-events: none; } Volume cards: border: 1px solid rgba(200,160,64,0.2); padding: 32px; background: #5a3828. .card-divider { width: 40px; height: 1px; background: rgba(200,160,64,0.4); margin: 16px 0; } AVOID: Bright, modern portfolio layouts, gaming-showcase neon aesthetics, and casual social media presentation. Let the dark-academia warmth and luxurious tone create a reverent archive worthy of treasured creative works. ## Uniqueness Notes 1. **Dark-academia for game portfolio:** Library aesthetics transform a game dev portfolio into a precious collection of scholarly works. 2. **Organic-flow as unhurried browsing:** Non-rigid layout creates the natural, exploratory experience of browsing a private collection. 3. **Dust-mote particles as atmospheric immersion:** Floating particles create the tangible atmosphere of an old library in golden light. 4. **Bookshelf generative patterns as environmental texture:** Procedural book-spine backgrounds embed the library metaphor into every surface. 5. **Warm vignette as candlelit intimacy:** Edge-darkening overlays create the enclosed, intimate quality of a study lit by warm light. **Seed/Style:** aesthetic: dark-academia, layout: organic-flow, typography: playfair-elegant, palette: warm, patterns: pulse-attention, imagery: generative-art, motifs: particle-effects, tone: luxurious **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), friendly tone (76%), minimal imagery (84%). This design uses dark-academia aesthetic, organic-flow layout, warm palette, generative-art imagery, and luxurious tone.