# Design Language for pmt.report ## Aesthetics and Tone pmt.report channels a memphis aesthetic — the bold, irreverent pattern language of the Memphis Group applied to a Pragmatic Magic Theory reporting and documentation platform. The site disrupts expectations — geometric patterns breaking through scholarly structure, primary shapes annotating theoretical proofs, and the playful conviction that serious research is more honest when it doesn't take itself too seriously. Inspiration draws from the patterned surfaces of Ettore Sottsass, the bold geometric textiles of the Memphis movement, the structured chaos of Wolfgang Weingart's New Wave typography, and the pattern-on-pattern maximalism of Camille Walala. The tone is minimal — stripped, economical language that delivers PMT research findings with maximum clarity and zero embellishment. ## Layout Motifs and Structure The layout uses a **ma-negative-space** architecture — content organized with generous Japanese-inspired whitespace that gives research findings room to breathe against the vibrant Memphis pattern energy. **Ma Negative Space Architecture:** - Generous padding: 80px vertical, centered at max-width: 720px - Research sections separated by expansive empty space - Feature findings expand to 880px with pattern-decorated margins - Intentional emptiness balances Memphis pattern density - Container: max-width: 720px centered - The calm center against vibrant Memphis borders creates focused reading **Section Sequence:** 1. **Abstract:** Hero with geometric-sans title on earth-tones Memphis gradient, data-viz statistical visualization charts, retro-patterns geometric border decorations 2. **Findings:** Research results in ma-spaced flow — elastic interactive data expansion animations with data-viz chart illustrations 3. **Analysis:** Deep analysis in generous ma-space with retro-patterns section borders and data-viz analytical graphics 4. **Conclusion:** Summary findings in focused ma-space with data-viz final charts 5. **Appendix:** Footer as research appendix — minimal closing with retro-patterns border seal and citation format ## Typography and Palette **Typography:** - **Headlines:** "Outfit" (Google Fonts) — geometric sans at 2rem-2.8rem, weight 700. Its clean geometric forms provide the rational structure that organizes Memphis-patterned research content. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.75. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for statistical data and research notation. - **Labels:** "Outfit" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Earth Charcoal:** #1c1810 — deep earth charcoal for backgrounds - **Clay Panel:** #2c2418 — warm clay for panels - **Earth Sienna:** #c08040 — warm earth sienna for primary accent - **Earth Sage:** #608850 — muted earth sage for secondary accent - **Earth Terracotta:** #b86048 — warm terracotta for tertiary accent - **Sand Light:** #f0e8d0 — warm sand for text on dark - **Shadow Earth:** #604830 — earth shadow for secondary text - **Border Clay:** rgba(192,128,64,0.1) — clay border ## Imagery and Motifs **Data-Viz Statistical Charts:** Research findings illustrated through minimal data visualizations — CSS-generated bar charts (div heights), line charts (SVG polylines), and percentage circles (conic-gradient). In Earth Sienna and Earth Sage. The data-viz treatment transforms PMT findings into visually clear, immediately graspable statistical evidence. **Elastic Data Expansion:** Data visualization elements use elastic animation on scroll — transform: scaleY(0) to scaleY(1) with cubic-bezier(0.25, 1.5, 0.5, 1) over 600ms for bar charts, opacity 0 to 1 with subtle overshoot for line charts. The elastic bounce gives data the energetic quality of research findings springing to life. **Retro-Patterns Memphis Borders:** Content sections decorated with geometric pattern strips — repeating zigzags (12px), dots (8px spacing), and triangles (16px) in Earth Sienna, Sage, and Terracotta at 0.08-0.12 opacity. Patterns appear in margins and as section dividers, creating the Memphis quality of decorated surfaces framing serious content. **Earth-Tones Research Warmth:** The palette uses archaeological earth tones — sienna, sage, and terracotta creating the grounded, serious quality of field research documentation. Backgrounds: subtle warm radial (rgba(192,128,64,0.02)) centered behind key findings. **Ma-Space as Research Pause:** The generous whitespace between findings functions as research pauses — space for the reader to absorb each finding before the next. Thin dotted rules (1px, Border Clay, dot pattern) at mid-points in the space suggest structured research sections. ## Prompts for Implementation Build the page as a Memphis research report. Ma-space: .finding { max-width: 720px; margin: 0 auto; padding: 80px 24px; } .feature-finding { max-width: 880px; padding: 100px 40px; } Elastic bars: .bar-chart .bar { transform: scaleY(0); transform-origin: bottom; transition: transform 600ms cubic-bezier(0.25, 1.5, 0.5, 1); } .bar-chart .bar.visible { transform: scaleY(1); } Data-viz: .percentage-ring { background: conic-gradient(#c08040 var(--percent), transparent var(--percent)); border-radius: 50%; width: 80px; height: 80px; } Retro patterns: .memphis-border { background: repeating-linear-gradient(90deg, transparent 0px, transparent 12px, rgba(192,128,64,0.08) 12px, rgba(192,128,64,0.08) 14px); height: 4px; } Research rules: .finding-divider { border: none; border-top: 1px dotted rgba(192,128,64,0.1); margin: 0 auto; width: 60%; } AVOID: Dense academic paper layouts, corporate research dashboards, and standard report templates. Let Memphis pattern energy and minimal language create a research report where PMT findings are delivered with visual boldness and verbal economy. ## Uniqueness Notes 1. **Memphis for research reporting:** Bold geometric patterns make scholarly findings visually engaging without sacrificing clarity. 2. **Ma-negative-space as research pauses:** Generous whitespace gives readers room to absorb each finding, creating contemplative reading rhythm. 3. **Elastic as energetic data:** Bouncy animation on data visualizations gives research findings the quality of discoveries springing to life. 4. **Data-viz as evidence:** CSS-generated charts transform abstract findings into immediately graspable visual proof. 5. **Earth-tones as archaeological ground:** Natural earth palette grounds magical theory research in the serious, tactile quality of field documentation. **Seed/Style:** aesthetic: memphis, layout: ma-negative-space, typography: geometric-sans, palette: earth-tones, patterns: elastic, imagery: data-viz, motifs: retro-patterns, tone: minimal **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 memphis aesthetic, ma-negative-space layout, earth-tones palette, data-viz imagery, and minimal tone.