# Design Language for miris.dev ## Aesthetics and Tone miris.dev (MiRiS — a game making circle) channels a swiss aesthetic — rigorous grid systems, typographic precision, and the rational beauty of information hierarchy applied to the technical development portal of the MiRiS game-making circle. The site is a precision instrument — every element placed with engineering exactitude, every typeface chosen for maximum information transfer. The Swiss International Style's faith in clarity becomes the design philosophy for presenting game development documentation, SDKs, and technical resources. Inspiration draws from Josef Muller-Brockmann's grid systems, the Zurich school of graphic design, IBM Design Language, and the elegant information architecture of Stripe's developer documentation. The tone is bold-confident — MiRiS's technical capabilities presented with authority and conviction. ## Layout Motifs and Structure The layout uses a **diagonal-sections** architecture — content blocks separated by angled dividers, creating dynamic forward momentum through the page while maintaining Swiss precision within each section. **Diagonal Section Architecture:** - Sections separated by 3-5 degree angled dividers (clip-path or skewed pseudo-elements) - Content within sections remains perfectly horizontal — only dividers are angled - The angle direction alternates: /, \, /, \ creating zigzag section boundaries - Content max-width: 1080px centered, with 12-column grid internally - Section backgrounds alternate between high-contrast pairs **Section Sequence:** 1. **Interface:** Hero with commissioner-versatile headline over high-contrast black/white split, isometric-icon collection of development tools, counter-animated statistics 2. **Architecture:** Technical overview in swiss-grid cards with floating-element diagrams showing system architecture 3. **Components:** SDK and API documentation in precise grid columns with counter-animate version numbers and download counts 4. **Toolkit:** Developer resources with isometric-icon illustrations of each tool, presented in diagonal-separated panels 5. **Terminal:** Footer as command-line interface styled block — monospace text, chevron prompts, and minimal navigation links ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile serif at 2rem-3.5rem, weight 700. Its broad weight range creates a complete typographic system with Swiss-level precision. - **Body Text:** "Commissioner" at 0.95rem, weight 400, line height 1.7. Serif consistency for technical documentation. - **Code:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for code snippets and terminal output. - **Labels:** "Commissioner" at 0.7rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Swiss Black:** #0a0a0a — pure near-black for primary backgrounds - **Swiss White:** #fafafa — clean white for primary text and light sections - **Signal Red:** #d02020 — Swiss-flag red for primary accents and critical elements - **Signal Blue:** #2040d0 — strong blue for links and interactive elements - **Concrete:** #e0e0e0 — light gray for card backgrounds in light sections - **Graphite:** #404040 — medium gray for secondary text - **Steel Mid:** #808080 — mid gray for borders and dividers - **Code Green:** #40c040 — terminal green for code accents and success states ## Imagery and Motifs **Isometric-Icon Development Tools:** Technical concepts illustrated with isometric icons (SVG, 40-60px) — code editors, terminal windows, game controllers, gear assemblies rendered in clean isometric projection. Stroke-only at 2px in Signal Red or Signal Blue, creating a unified technical illustration system. **Floating-Element Architecture Diagrams:** System architecture visualized with floating connected elements — CSS positioned boxes (border: 1px solid Steel Mid, padding: 8px 16px) connected by thin SVG lines (1px, Graphite), with small circles (4px) at connection nodes. Gently animated with subtle translateY oscillation (4px over 4s, infinite). **Counter-Animate Statistics:** Key numbers (downloads, commits, projects) animate from 0 to their target value on scroll entry — JavaScript incrementing displayed number over 1200ms with ease-out timing. Numbers displayed in Commissioner weight 700 at 2.5rem in Signal Red. Creates data-driven credibility. **Diagonal Section Transitions:** Section dividers created with clip-path or ::after pseudo-elements — skewed 3-5 degrees, creating dynamic boundaries. Implementation: .section::after { content: ''; position: absolute; bottom: -30px; left: 0; right: 0; height: 60px; background: next-section-color; clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%); } **Swiss Grid Micro-Borders:** Content cards use precise 1px borders in Steel Mid with 0px border-radius — no rounding, pure Swiss geometry. Cards arrange on strict column grids with 24px gutters. Hover state: border-color transitions to Signal Red over 200ms. ## Prompts for Implementation Build the page as a swiss-precision developer portal. Grid: display: grid, grid-template-columns: repeat(12, 1fr), gap: 24px, max-width: 1080px. Cards span 4 or 6 columns. Diagonal dividers: .section { position: relative; } .section::after { content: ''; position: absolute; bottom: -30px; left: 0; right: 0; height: 60px; background: var(--next-bg); clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%); z-index: 1; } Counter-animate: on IntersectionObserver entry, animate number from 0 to data-target over 1200ms. const easeOut = t => 1 - Math.pow(1 - t, 3). requestAnimationFrame loop updating textContent. Floating elements: .arch-node { position: relative; animation: float 4s ease-in-out infinite alternate; } @keyframes float { from { transform: translateY(0); } to { transform: translateY(-4px); } } Isometric icons: SVG with consistent 30-degree isometric angles. viewBox standardized, stroke: Signal Red or Signal Blue, stroke-width: 2, fill: none. AVOID: Playful indie-dev aesthetics, casual gaming interfaces, and decorative excess. Let Swiss precision and bold-confident authority create a developer experience that communicates technical excellence. ## Uniqueness Notes 1. **Swiss aesthetic for game dev tools:** Muller-Brockmann grid rigor applied to indie game development creates unusually authoritative technical presence. 2. **Diagonal-sections as forward momentum:** Angled dividers create dynamic energy while maintaining internal precision within each section. 3. **Counter-animate as data credibility:** Animating statistics builds confidence in the circle's technical output and community size. 4. **Isometric icons as technical illustration system:** Consistent isometric projection creates a unified visual language for development concepts. 5. **Commissioner versatile as complete type system:** A single typeface family handling all roles demonstrates Swiss typographic discipline. **Seed/Style:** aesthetic: swiss, layout: diagonal-sections, typography: commissioner-versatile, palette: high-contrast, patterns: counter-animate, imagery: isometric-icons, motifs: floating-elements, tone: bold-confident **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 swiss aesthetic, diagonal-sections layout, high-contrast palette, isometric-icons imagery, and bold-confident tone.