# Design Language for pmt.moe ## Aesthetics and Tone pmt.moe channels a minimalist aesthetic — the radical reduction of visual elements to their essential forms, applied to a Pragmatic Magic Theory platform rooted in moe (萌え) subculture. The site breathes — vast emptiness holding precisely placed elements, every pixel intentional, and the serene confidence that comes from showing only what matters. The tension between minimalist restraint and moe's expressive warmth creates a platform where magical theory feels both rigorous and endearing. Inspiration draws from the white-space mastery of Kenya Hara's MUJI design, the minimal interfaces of Nothing OS, the precise typography of Dieter Rams's Braun manuals, and the clean warmth of Japanese stationary brand Hobonichi. The tone is playful — light, spirited language that makes magical theory feel approachable and delightful rather than academic or arcane. ## Layout Motifs and Structure The layout uses a **dashboard** architecture — content organized in clean, minimal dashboard panels that present magical theory concepts as organized, systematic knowledge units. **Dashboard Architecture:** - CSS Grid: 12-column base for flexible panel arrangement - Primary panels: span 8 columns, secondary: span 4 - Minimal panel styling: thin borders, generous padding - Feature panels: span full 12 columns with extra whitespace - Container: max-width: 960px centered - The dashboard is stripped to essentials — form follows magical function **Section Sequence:** 1. **Axiom:** Hero dashboard with serif-revival title on chrome-metallic minimal gradient, collage assemblage theory illustrations, sci-fi-hud minimal analytical overlays 2. **Theory:** Core PMT concepts in minimal dashboard — counter-animate interactive formula demonstrations with collage curated evidence assemblages 3. **Praxis:** Practical applications in dashboard panels with sci-fi-hud minimal diagnostic displays and collage method illustrations 4. **Moe:** Subculture connection in feature panel with collage moe-theory blend illustrations 5. **Theorem:** Footer as final proof — playful closing with sci-fi-hud minimal readout and theory sign-off ## Typography and Palette **Typography:** - **Headlines:** "Source Serif 4" (Google Fonts) — refined serif at 2.2rem-3rem, weight 700. Its optical sizes and refined letterforms create the scholarly authority of academic publishing infused with contemporary precision. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.75. - **Accent:** "Source Serif 4" at 1rem, weight 400, italic for theory annotations and moe references. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Chrome White:** #f8f8fa — near-white chrome for backgrounds - **Steel Light:** #eceef2 — light steel for panels - **Chrome Graphite:** #2c2c34 — dark chrome graphite for primary text - **Chrome Blue:** #4870a8 — metallic blue for primary accent - **Chrome Rose:** #b85878 — soft metallic rose for secondary accent (moe warmth) - **Chrome Mute:** #888890 — muted chrome for secondary text - **Shadow Minimal:** #c8c8d0 — minimal shadow for borders - **Border Chrome:** rgba(72,112,168,0.1) — chrome blue border ## Imagery and Motifs **Collage Theory Assemblages:** PMT concepts illustrated through minimal collage — clean geometric shapes (circles, rectangles, triangles) arranged in precise compositions with thin connecting lines. In Chrome Blue and Chrome Rose at varying opacities (0.1-0.3). The collage style transforms magical theory into visual proofs — each arrangement a theorem expressed in form. **Counter-Animate Formula Demonstrations:** Theory formulas and statistics animate on scroll — numbers counting up, percentages filling, ratios calculating in real-time over 1.2s ease-out. Font-variant-numeric: tabular-nums for stable layout. The counting creates the quality of magical theory being proven through live computation. **Sci-Fi-HUD Minimal Diagnostics:** Ultra-thin HUD elements (1px lines, 4px corner brackets, tiny dot indicators) in Chrome Blue at 0.08 opacity overlaid on theory panels. The HUD is reduced to absolute minimum — just enough to suggest analytical precision without visual noise. **Chrome-Metallic Minimal Surface:** The palette uses chrome-adjacent neutrals — whites with subtle blue or rose tint. Panel surfaces: background: #eceef2 with box-shadow: 0 1px 3px rgba(44,44,52,0.04). The chrome quality creates the premium, machined feel of precision instruments. **Moe Warmth Accents:** Chrome Rose (the moe color) appears sparingly but meaningfully — heart-shaped indicators (8px), warm rose highlights on interactive elements, and rose-tinted panel accents for moe-related content. The selective warmth prevents the minimal palette from feeling cold. ## Prompts for Implementation Build the page as a minimalist magical theory dashboard. Grid: display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; .panel-wide { grid-column: span 8; } .panel-narrow { grid-column: span 4; } .panel-full { grid-column: span 12; } Container: max-width: 960px; margin: 0 auto; padding: 60px 24px. Counter-animate: .formula-counter { font-variant-numeric: tabular-nums; font-size: 2rem; font-weight: 700; color: #2c2c34; } Minimal panels: .theory-panel { background: #eceef2; border: 1px solid rgba(72,112,168,0.1); border-radius: 6px; padding: 32px; box-shadow: 0 1px 3px rgba(44,44,52,0.04); } HUD minimal: .hud-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(72,112,168,0.15); } .hud-bracket { width: 12px; height: 12px; border: 1px solid rgba(72,112,168,0.08); border-right: none; border-bottom: none; } Moe accent: .moe-indicator { color: #b85878; } .moe-heart { width: 8px; height: 8px; background: #b85878; clip-path: path('M4 1.5C...'); } AVOID: Dense academic theory sites, cluttered magical reference databases, and corporate knowledge platforms. Let minimalist precision and playful warmth create a magical theory platform where PMT concepts are presented with the clarity of mathematical proofs and the charm of moe culture. ## Uniqueness Notes 1. **Minimalist for magical theory:** Radical reduction makes complex PMT concepts feel clear and approachable through visual restraint. 2. **Dashboard as systematic knowledge:** Clean panel layout presents magical theory as organized, systematic knowledge rather than mystical chaos. 3. **Counter-animate as live proof:** Formulas counting in real-time create the quality of theories being proven through active computation. 4. **Chrome-metallic as precision instrument:** Near-white chrome palette gives the platform the machined quality of scientific instruments. 5. **Moe warmth in minimal chrome:** Selective rose accents prevent minimalism from feeling cold, honoring the moe (萌え) connection with endearing warmth. **Seed/Style:** aesthetic: minimalist, layout: dashboard, typography: serif-revival, palette: chrome-metallic, patterns: counter-animate, imagery: collage, motifs: sci-fi-hud, tone: playful **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses minimalist aesthetic, dashboard layout, chrome-metallic palette, collage imagery, and playful tone.