# Design Language for miris.tech ## Aesthetics and Tone miris.tech (MiRiS — a game making circle) channels a victorian-ornate aesthetic — intricate decorative borders, detailed ornamental patterns, and the lavish craftsmanship of 19th-century design applied to the technical documentation and engineering blog of the MiRiS game-making circle. The site treats game engine code and technical systems with the reverence of Victorian scientific illustration — each system diagram framed like a patent drawing, each code explanation presented with the elaborate care of an engraved encyclopedia plate. Inspiration draws from William Morris's Arts and Crafts patterns, Victorian-era patent illustrations, ornate book binding designs, and the technical beauty of antique clockwork mechanism drawings. The tone is grounded-earthy — practical, honest technical writing that respects the reader's intelligence. ## Layout Motifs and Structure The layout uses a **masonry** architecture — content blocks of varying heights arranged in a Pinterest-style cascading grid, creating the collected, specimen-cabinet appearance of a Victorian naturalist's display. **Masonry Architecture:** - Columns: 3-column masonry grid on desktop, 2 on tablet, 1 on mobile - Variable-height cards: content determines card height, no forced uniformity - Column gap: 24px, row gap: 24px - Cards have ornate borders with corner decorations - CSS columns or JavaScript masonry for layout **Section Sequence:** 1. **Frontispiece:** Hero with ornate slab-serif title, ethereal-blue gradient background, generative-art decorative border frame, and tropical-fish illustrative accents 2. **The Collection:** Technical articles in masonry grid — each card an ornate-bordered specimen with path-draw-svg decorative lines 3. **Plates:** Featured technical diagrams and system architecture illustrations in generative-art style with Victorian frame borders 4. **Taxonomy:** Article categories organized as a Victorian classification system with ornate tree diagram 5. **Endpapers:** Footer as book endpaper — repeating ornamental pattern in ethereal-blue, credits in centered serif type ## Typography and Palette **Typography:** - **Headlines:** "Rokkitt" (Google Fonts) — slab serif at 2rem-3rem, weight 700. Its robust slab serifs channel Victorian industrial letterpress typography. - **Body Text:** "Source Serif 4" (Google Fonts) — humanist serif at 0.95rem, weight 400, line height 1.75. Scholarly reading for technical content. - **Code:** "Fira Code" (Google Fonts) — monospace at 0.85rem for code blocks. - **Ornamental Labels:** "Rokkitt" at 0.7rem, weight 400, uppercase, letter-spacing 0.1em. **Color Palette:** - **Ethereal Blue:** #3060a0 — medium blue for primary accents and borders - **Ethereal Pale:** #e8f0f8 — pale blue for light backgrounds - **Parchment:** #f8f4e8 — warm cream for card backgrounds - **Victorian Dark:** #1a1820 — deep near-black for primary text - **Copper Accent:** #b07040 — warm copper for secondary accents - **Botanical Green:** #408050 — rich green for nature-themed accents - **Ornament Gold:** #c0a050 — warm gold for decorative elements - **Aged Paper:** #e8e0d0 — medium cream for section backgrounds ## Imagery and Motifs **Generative-Art Technical Illustrations:** System architecture and technical concepts rendered as generative art — SVG compositions of geometric patterns (circles, lines, arcs) in Ethereal Blue and Copper Accent, procedurally arranged to suggest circuit diagrams, flow charts, and mechanism cross-sections. Each illustration unique, algorithmically composed from a set of geometric primitives. **Tropical-Fish Decorative Accents:** Small SVG tropical fish illustrations (24-32px, stroke-only at 1.5px) in Ethereal Blue and Botanical Green swim as decorative elements between masonry cards. 2-3 fish per section, gently animated with @keyframes swim (translateX 15px, slight rotation over 6s, infinite). A whimsical Victorian naturalist touch — specimens among the technical plates. **Path-Draw-SVG Ornamental Borders:** Card borders feature SVG ornamental line patterns that draw themselves on scroll entry — stroke-dasharray animation revealing intricate corner flourishes and edge decorations over 800ms. The ornaments combine simple curves and dots to create Victorian-inspired frames without requiring complex assets. **Victorian Corner Decorations:** Each masonry card features CSS-drawn corner ornaments — pseudo-elements combining borders and small geometric shapes (4px circles, 6px lines) at each corner, creating simplified Victorian frame corners in Ethereal Blue at 0.3 opacity. **Ethereal-Blue Section Glow:** Section backgrounds feature a subtle ethereal glow — radial-gradient(ellipse at 50% 50%, rgba(48,96,160,0.06) 0%, transparent 60%) centered behind each section header, creating a soft luminous quality like light through stained glass. ## Prompts for Implementation Build the page as a victorian-ornate technical cabinet. Masonry: CSS columns: 3 with column-gap: 24px. Cards: break-inside: avoid; margin-bottom: 24px; border: 1px solid rgba(48,96,160,0.2); padding: 24px; background: #f8f4e8. Corner ornaments: .card::before { content: ''; position: absolute; top: 8px; left: 8px; width: 16px; height: 16px; border-top: 1px solid rgba(48,96,160,0.3); border-left: 1px solid rgba(48,96,160,0.3); } Repeat for other corners with appropriate border sides. Path-draw borders: SVG overlay with stroke-dasharray: totalLength; stroke-dashoffset: totalLength. On .visible: stroke-dashoffset: 0; transition: 800ms ease-out. Tropical fish: SVG, position: absolute between cards. @keyframes swim { from { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(15px) rotate(3deg); } to { transform: translateX(0) rotate(0deg); } } 6s infinite ease-in-out. Ethereal glow: .section-header { background: radial-gradient(ellipse at 50% 50%, rgba(48,96,160,0.06) 0%, transparent 60%); } AVOID: Modern minimal tech-doc layouts, dark-mode developer themes, and utilitarian documentation aesthetics. Let the victorian-ornate craftsmanship and grounded-earthy tone create technical documentation that feels like a beautifully bound reference volume. ## Uniqueness Notes 1. **Victorian-ornate for game tech documentation:** 19th-century decorative craftsmanship reframes technical writing as a beautiful, collectible artifact. 2. **Masonry layout as specimen cabinet:** Variable-height cascading cards create the collected quality of a naturalist's curiosity display. 3. **Generative-art as technical illustration:** Algorithmically-composed diagrams bridge Victorian illustration traditions with computational aesthetics. 4. **Tropical-fish as naturalist specimens:** Whimsical fish among technical content add the Victorian naturalist's delight in cataloging the living world. 5. **Path-draw ornamental borders as reverence:** Self-drawing frame ornaments suggest that each technical article is being carefully, reverently presented. **Seed/Style:** aesthetic: victorian-ornate, layout: masonry, typography: slab-serif, palette: ethereal-blue, patterns: path-draw-svg, imagery: generative-art, motifs: tropical-fish, tone: grounded-earthy **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 victorian-ornate aesthetic, masonry layout, ethereal-blue palette, generative-art imagery, and grounded-earthy tone.