# Design Language for mujun.art ## Aesthetics and Tone mujun.art (Mujun — 矛盾, Japanese/Chinese for contradiction, literally "spear-shield") channels a corporate aesthetic — systematic design, professional structure, and institutional authority applied to an art gallery and exhibition platform exploring the concept of contradiction in visual art. The site applies corporate rigor to artistic chaos — every contradiction cataloged, every paradox filed in its proper category, creating delicious tension between the wild nature of art and the controlled nature of corporate presentation. Inspiration draws from MoMA's exhibition design system, the Swiss International Style of Josef Muller-Brockmann, IBM's design language, and the rigorous catalog systems of Sotheby's auction house. The tone is edgy-rebellious — sharp, provocative writing that challenges viewers to see contradictions as creative fuel rather than logical flaws. ## Layout Motifs and Structure The layout uses a **card-grid** architecture — uniform content cards in a responsive grid, creating the systematic catalog feel of a corporate art collection management system. **Card Grid Architecture:** - Grid: display: grid, grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) - Gap: 16px between cards - Cards: consistent padding (24px), uniform border treatment - Feature cards span 2 columns - Container: max-width: 1080px centered - Grid density creates the systematic quality of a corporate catalog **Section Sequence:** 1. **Paradox:** Hero with frutiger-clean title on pastel gradient, vintage-photography processed contradiction imagery, book-scholarly reference accents 2. **Gallery:** Art exhibitions in card-grid catalog — scale-hover interactive cards with vintage-photography treatments and book-scholarly catalog numbers 3. **Thesis:** Contradiction philosophy essays in full-width editorial breaks between grid sections with book-scholarly margin annotations 4. **Artists:** Creator profiles in card-grid with vintage-photography portraits and systematic catalog-style biographical data 5. **Colophon:** Footer as corporate catalog back-matter — edgy closing statement with systematic link organization ## Typography and Palette **Typography:** - **Headlines:** "Albert Sans" (Google Fonts) — clean Frutiger-inspired sans at 2rem-3rem, weight 700. Its Swiss precision creates the corporate authority needed for systematic art cataloging. - **Body Text:** "Albert Sans" at 0.95rem, weight 400, line height 1.75. - **Catalog Numbers:** "Fira Code" (Google Fonts) — monospace at 0.8rem for exhibition codes and catalog references. - **Labels:** "Albert Sans" at 0.7rem, weight 600, uppercase, letter-spacing 0.06em. **Color Palette:** - **Blush Soft:** #f0e0e0 — soft pastel pink for primary light backgrounds - **Lavender Pale:** #e0e0f0 — pale lavender for secondary backgrounds - **Mint Whisper:** #e0f0e8 — whisper mint for tertiary backgrounds - **Charcoal Corp:** #1a1a20 — corporate charcoal for text and dark elements - **Slate System:** #404050 — systematic slate for secondary text - **Rose Accent:** #c06070 — dusty rose for primary accents - **Ink Deep:** #0a0a10 — deep ink for headlines - **Border System:** #c8c0d0 — soft lavender-gray for borders ## Imagery and Motifs **Vintage-Photography Contradiction Art:** Exhibition imagery processed with vintage photographic treatment — CSS filter: sepia(0.15) contrast(1.05) saturate(0.9) with a subtle color overlay in Blush Soft (mix-blend-mode: soft-light, opacity: 0.15). Creates the archival quality of art documentation from prestigious institutions. **Scale-Hover Catalog Cards:** Art cards scale on hover — transform: scale(1.02) with box-shadow expanding from 0 1px 4px rgba(0,0,0,0.05) to 0 6px 20px rgba(0,0,0,0.1). Border-top transitions from Border System to Rose Accent (3px). Catalog number opacity transitions from 0.4 to 0.8. Transition: 200ms ease. The systematic hover creates corporate catalog interaction. **Book-Scholarly Reference System:** Exhibition entries include scholarly-style references — small superscript catalog numbers, margin annotations in 0.75rem italic, and footnote-style artist citations. Each artwork has a systematic reference format: [MUJUN-2024-0042]. The academic apparatus elevates art viewing to scholarly study. **Pastel-Corporate Section Rhythm:** Alternating sections use different pastel backgrounds — Blush Soft, Lavender Pale, Mint Whisper in sequence, all with Charcoal Corp text. The pastel rotation creates visual rhythm while maintaining the systematic quality of corporate color-coding. **Contradiction Visual Breaks:** Between major sections, a thin horizontal line (1px, Rose Accent) with the 矛盾 character centered in small text (0.7rem, Slate System at 0.3 opacity). These cultural markers acknowledge the philosophical core beneath the corporate surface. ## Prompts for Implementation Build the page as a corporate art catalog. Grid: display: grid, grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)), gap: 16px. Container: max-width: 1080px, margin: 0 auto. Scale-hover: .art-card { transition: transform 200ms ease, box-shadow 200ms ease; border-top: 3px solid #c8c0d0; } .art-card:hover { transform: scale(1.02); box-shadow: 0 6px 20px rgba(0,0,0,0.1); border-top-color: #c06070; } Vintage photo: .artwork-img { filter: sepia(0.15) contrast(1.05) saturate(0.9); } .artwork-img::after { content: ''; position: absolute; inset: 0; background: #f0e0e0; mix-blend-mode: soft-light; opacity: 0.15; } Scholarly refs: .catalog-number { font-family: 'Fira Code', monospace; font-size: 0.8rem; opacity: 0.4; transition: opacity 200ms; } .art-card:hover .catalog-number { opacity: 0.8; } Section rhythm: .section-blush { background: #f0e0e0; } .section-lavender { background: #e0e0f0; } .section-mint { background: #e0f0e8; } AVOID: Gallery-style white-cube minimalism, artsy creative layouts, and experimental art-world typography. Let corporate systematic rigor and edgy-rebellious voice create an art platform where contradiction is cataloged with the precision of an enterprise database. ## Uniqueness Notes 1. **Corporate aesthetic for art gallery:** Institutional design language creates deliberate tension with artistic content — the contradiction that defines 矛盾. 2. **Card-grid as corporate catalog:** Uniform grid cards transform artworks into systematically organized corporate assets. 3. **Vintage-photography as archival documentation:** Photographic treatments position exhibition content as institutional records of artistic significance. 4. **Pastel palette against corporate structure:** Soft, gentle colors create paradoxical warmth within rigid systematic design. 5. **Edgy-rebellious tone within corporate form:** Sharp, provocative writing rebels against the very corporate structure it inhabits — embodying 矛盾. **Seed/Style:** aesthetic: corporate, layout: card-grid, typography: frutiger-clean, palette: pastel, patterns: scale-hover, imagery: vintage-photography, motifs: book-scholarly, tone: edgy-rebellious **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 corporate aesthetic, card-grid layout, pastel palette, vintage-photography imagery, and edgy-rebellious tone.