# Design Language for mujun.studio ## Aesthetics and Tone mujun.studio (Mujun — 矛盾, contradiction) channels a dopamine aesthetic — the maximalist, serotonin-inducing visual overload of colors, shapes, and textures that trigger immediate positive emotional response, applied to a creative studio producing work that embraces contradictions. The site is a dopamine hit — every scroll delivers color, movement, and surprise, creating the addictive quality of feeds and apps that keep users engaged through constant visual reward. Inspiration draws from Spotify Wrapped's data visualization, Nintendo's product marketing, LEGO's brand experience, and the sensory maximalism of Japanese convenience store design. The tone is minimal — sparse, essential text that lets the visual dopamine do the talking. ## Layout Motifs and Structure The layout uses a **bento-box** architecture — content organized in compartmentalized containers of varying sizes, like a Japanese bento box where each compartment holds something different and delightful. **Bento Box Architecture:** - Grid: display: grid with named template areas - Desktop: mix of 1x1, 2x1, 1x2, and 2x2 cells - Gap: 12px between cells - Each cell: border-radius: 16px, overflow: hidden - Container: max-width: 1100px centered - Cells have different background colors from palette **Section Sequence:** 1. **Rush:** Hero as oversized bento cell with display-bold title on honeyed-neutral gradient, photography-style studio shots with blur-focus processing, abstract-tech circuit accents 2. **Work:** Portfolio in bento grid — each project a colorful cell with blur-focus interactive hover reveals and abstract-tech decorative corners 3. **Process:** Creative methodology in sequential bento cells with photography work-in-progress shots 4. **Team:** People in square bento cells with blur-focus portrait treatment and abstract-tech skill badges 5. **Ping:** Footer as final bento cell — minimal contact information in single compact compartment ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) — bold geometric sans at 2.5rem-4rem, weight 700. Its techy geometry creates the punchy, immediate impact dopamine design demands. - **Body Text:** "Inter" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.7. - **Accent:** "Space Grotesk" at 1.5rem, weight 500 for cell labels. - **Tiny:** "Inter" at 0.65rem, weight 500, uppercase, letter-spacing 0.1em for minimal labels. **Color Palette:** - **Honey Base:** #f8f0e0 — warm honey base for primary background - **Honey Deep:** #e8dcc4 — deeper honey for secondary cells - **Punch Orange:** #e07020 — dopamine orange for primary accent cells - **Punch Blue:** #2080d0 — bright blue for secondary accent cells - **Punch Green:** #30a060 — vivid green for tertiary accent cells - **Dark Cell:** #1a1810 — warm dark for inverted cells - **Text Dark:** #181410 — warm near-black for text - **Border Honey:** #d0c4a8 — honey border ## Imagery and Motifs **Photography Studio Documentation:** Portfolio work shown as high-quality studio photography — images fill entire bento cells edge-to-edge, with subtle CSS filter: contrast(1.05) saturate(1.1) for that extra-vivid dopamine pop. No padding between image and cell edge. **Blur-Focus Interactive Reveals:** Portfolio cells start with blur (filter: blur(4px) brightness(1.1)) on images, revealing sharp (blur(0) brightness(1)) on hover over 300ms. Creates a peek-behind-the-curtain interaction that rewards curiosity — the dopamine of discovery. **Abstract-Tech Circuit Corners:** Cell corners feature small abstract circuit-like decorative elements — thin SVG lines (1px) forming right-angle patterns with small dots (3px) at junctions, in the cell's accent color at 0.15 opacity. The tech patterns suggest the digital infrastructure behind creative work. **Dopamine Color Cell Rotation:** Bento cells rotate through accent colors — Punch Orange, Punch Blue, Punch Green, and Dark Cell backgrounds in irregular sequence. No two adjacent cells share the same color. The color variety creates the constant novelty that triggers dopamine response. **Bento Compartment Boundaries:** Each cell clearly separated with 12px gap and distinct border-radius: 16px, creating crisp compartment boundaries. Cells overflow: hidden ensures content is neatly contained. The compartmentalization is both organizational and aesthetic — order within dopamine chaos. ## Prompts for Implementation Build the page as a dopamine bento studio. Grid: display: grid, grid-template-columns: repeat(4, 1fr), gap: 12px. Cells: border-radius: 16px, overflow: hidden, padding: 20px. Feature cells: grid-column: span 2 and/or grid-row: span 2. Blur-focus: .portfolio-cell img { filter: blur(4px) brightness(1.1); transition: filter 300ms ease; } .portfolio-cell:hover img { filter: blur(0) brightness(1); } Color rotation: .cell-orange { background: #e07020; color: white; } .cell-blue { background: #2080d0; color: white; } .cell-green { background: #30a060; color: white; } .cell-dark { background: #1a1810; color: #f8f0e0; } Circuit corners: .cell::before { content: ''; position: absolute; top: 8px; left: 8px; width: 20px; height: 20px; border-top: 1px solid currentColor; border-left: 1px solid currentColor; opacity: 0.15; } Photography pop: .studio-img { width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05) saturate(1.1); } AVOID: Subdued portfolio presentations, muted creative agency aesthetics, and restrained studio layouts. Let the dopamine color hits and minimal text create a studio portfolio that delivers instant visual reward with every scroll. ## Uniqueness Notes 1. **Dopamine aesthetic for creative studio:** Maximalist color and visual reward makes portfolio browsing addictively engaging. 2. **Bento-box as compartmentalized creativity:** Japanese lunch-box organization creates delightful variety within systematic structure. 3. **Blur-focus as discovery reward:** The reveal interaction rewards curiosity with visual clarity — a micro-dopamine hit per hover. 4. **Honeyed-neutral base with punch accents:** Warm neutral ground allows vivid accent colors to pop with maximum impact. 5. **Minimal tone against visual maximalism:** Sparse text creates the paradoxical contrast (矛盾) of saying little within visual abundance. **Seed/Style:** aesthetic: dopamine, layout: bento-box, typography: display-bold, palette: honeyed-neutral, patterns: blur-focus, imagery: photography, motifs: abstract-tech, tone: minimal **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 dopamine aesthetic, bento-box layout, honeyed-neutral palette, photography imagery, and minimal tone.