# Design Language for miris.studio ## Aesthetics and Tone miris.studio (MiRiS — a game making circle) channels a flat-design aesthetic — clean geometric shapes, solid colors without gradients or shadows, and the honest simplicity of interfaces that hide nothing behind visual effects, applied to the creative studio workspace of the MiRiS game-making circle. The site is a digital studio floor plan — every tool, project, and resource laid out with the functional clarity of a well-organized workshop where everything has its place. Inspiration draws from Microsoft's Metro design language, Google Material Design's geometric foundations, the clean interfaces of Figma and Notion, and the organized beauty of Japanese tool walls (kanna-kake). The tone is raw-authentic — honest, direct documentation of creative work without pretense or performance. ## Layout Motifs and Structure The layout uses a **dashboard** architecture — content organized in functional panels and widgets, creating a control-center interface for managing and viewing the circle's creative output. **Dashboard Architecture:** - Grid of functional panels: display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - Panel hierarchy: large panels (2-column span) for primary content, small panels for metrics - Fixed sidebar option (240px) for navigation on desktop, collapsible on mobile - Panel headers: solid color bars (4px) in category colors - No shadows, no gradients — flat surfaces differentiated by color only **Section Sequence:** 1. **Workspace:** Hero dashboard with MiRiS identity in sans-grotesk type, bokeh-background photo of creative workspace, key metrics in flat-colored stat panels 2. **Projects Board:** Active projects in dashboard cards with crystalline-shaped status indicators and cursor-follow interaction highlights 3. **Tools Rack:** Development tools and technologies used by the circle, displayed as flat-design icon cards with honeyed-neutral backgrounds 4. **Calendar:** Timeline of events, releases, and milestones in a flat-design calendar widget 5. **Status Bar:** Footer as system status bar — flat panels showing last update, member count, and quick navigation ## Typography and Palette **Typography:** - **Headlines:** "DM Sans" (Google Fonts) — clean sans-grotesk at 2rem-3rem, weight 700. Its contemporary geometric forms channel the precision of dashboard interfaces. - **Body Text:** "DM Sans" at 0.95rem, weight 400, line height 1.7. Consistent type family for functional interface clarity. - **Metrics:** "DM Sans" at 2rem, weight 700 for large dashboard numbers and statistics. - **Labels:** "DM Sans" at 0.7rem, weight 500, uppercase, letter-spacing 0.06em. **Color Palette:** - **Honey Warm:** #c8a060 — warm honey for primary accents and active states - **Honey Light:** #f0e4c8 — light honey for panel backgrounds - **Neutral Cream:** #faf6f0 — warm off-white for page background - **Studio Dark:** #2a2420 — warm dark brown for primary text - **Panel Sage:** #b8c8a8 — muted sage for secondary panels - **Panel Blue:** #a0b8c8 — muted blue for tertiary panels - **Border Warm:** #d8d0c0 — warm light gray for borders - **Status Green:** #70a870 — flat green for active/success indicators ## Imagery and Motifs **Bokeh-Background Studio Photography:** The hero section features a soft-focus background of a creative workspace — achieved with CSS filter: blur(20px) on a background-image, with a semi-transparent Neutral Cream overlay (rgba(250,246,240,0.85)). Creates depth without violating flat-design principles on the foreground elements. **Crystalline Status Indicators:** Project status shown through crystalline-shaped badges — clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) creating hexagonal shapes, 24px wide, filled with flat status colors (Status Green for active, Honey Warm for in-progress, Border Warm for planned). No gradients, no shadows — pure flat geometry. **Cursor-Follow Panel Highlighting:** Dashboard panels respond to cursor proximity — JavaScript tracks mouse position and applies a subtle border-color change (from Border Warm to Honey Warm) on the nearest panel, transitioning over 200ms. Creates a responsive, alive-feeling dashboard without hover-dependent interaction. **Flat-Design Icon System:** All icons rendered as flat geometric SVGs — 24px, 2px stroke, single color (Studio Dark), no fills, no rounded corners beyond functional need. Consistent stroke-width and grid alignment across all icons. The icon set serves as a visual vocabulary for the studio's tools and processes. **Dashboard Metric Counters:** Key statistics displayed in large flat-colored panels — the number in weight 700 at 2rem, with a 4px top border in the panel's category color. Numbers optionally animate on scroll entry (counting up over 800ms). Minimal, functional data display. ## Prompts for Implementation Build the page as a flat-design studio dashboard. Grid: display: grid, grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)), gap: 16px. Panels: background flat color, border: 1px solid #d8d0c0, padding: 24px. No border-radius, no box-shadow. Bokeh background: .hero { background-image: url(studio.jpg); background-size: cover; position: relative; } .hero::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(20px); background: rgba(250,246,240,0.85); } Crystalline badges: .status-badge { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); width: 24px; height: 24px; background: var(--status-color); } Cursor-follow: JavaScript on mousemove, find nearest panel using getBoundingClientRect distance calculation, apply .highlighted class with border-color transition. Panel color bars: .panel::before { content: ''; display: block; height: 4px; background: var(--panel-color); margin: -24px -24px 16px; } AVOID: Skeuomorphic textures, gradient-heavy designs, and shadow-dependent depth systems. Let the flat-design clarity and raw-authentic voice create a functional, honest studio workspace. ## Uniqueness Notes 1. **Flat-design for creative studio dashboard:** Metro-style geometric purity creates a functional tool interface for a game-making circle. 2. **Dashboard layout as studio control center:** Panel-based organization mirrors the organized workspace of a productive creative studio. 3. **Bokeh-background with flat foreground:** Blurred photography adds depth behind strictly flat UI elements, creating interesting material contrast. 4. **Crystalline status badges in flat geometry:** Hexagonal shapes add visual interest while maintaining flat-design discipline. 5. **Cursor-follow panel highlighting as ambient interaction:** Proximity-based interaction creates a living, responsive dashboard feel. **Seed/Style:** aesthetic: flat-design, layout: dashboard, typography: sans-grotesk, palette: honeyed-neutral, patterns: cursor-follow, imagery: bokeh-background, motifs: crystalline, 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 flat-design aesthetic, dashboard layout, honeyed-neutral palette, bokeh-background imagery, and raw-authentic tone.