# Design Language for mujun.works ## Aesthetics and Tone mujun.works (Mujun — 矛盾, contradiction) channels a dark-mode aesthetic — the refined elegance of deep backgrounds with precise luminous accents, applied to a portfolio and case study platform showcasing creative works that embrace contradiction. The site is a dark gallery where works glow — each project illuminated against void backgrounds, creating the focused viewing experience of a private screening room. Inspiration draws from MUBI's film curation interface, Behance's dark portfolio mode, the moody exhibition spaces of contemporary art galleries, and the atmospheric interfaces of music production software. The tone is dreamy-ethereal — gentle, wonder-filled language that makes each creative work feel like a vision encountered in a dream. ## Layout Motifs and Structure The layout uses a **hud-overlay** architecture — content presented as information overlays on atmospheric backgrounds, like a heads-up display projecting data onto the real world. **HUD Overlay Architecture:** - Full-viewport atmospheric backgrounds per section - Content overlaid as HUD panels: semi-transparent backgrounds, thin borders - HUD panels: max-width: 640px, positioned at varying screen locations - Background: fixed or slow-scrolling underneath HUD content - Status bar elements at screen edges (thin, minimal data) **Section Sequence:** 1. **Signal:** Hero with geometric-sans title as HUD overlay on triadic gradient, paper-aged texture under glass overlay, leaf-organic floating accents 2. **Works:** Portfolio pieces as HUD-framed showcases with fade-reveal animations and paper-aged processing on each work's documentation 3. **Process:** Creative process documented as HUD data readouts with leaf-organic growth metaphors and triadic color-coded stages 4. **Archive:** Past works in HUD-overlay timeline format with fade-reveal sequential access 5. **Drift:** Footer as HUD shutdown — dreamy closing with interface elements fading to black ## Typography and Palette **Typography:** - **Headlines:** "DM Sans" (Google Fonts) — geometric sans at 2rem-3rem, weight 700. Its clean precision creates the HUD-quality readability needed for overlay interfaces. - **Body Text:** "DM Sans" at 0.9rem, weight 400, line height 1.75. - **HUD Data:** "Fira Code" (Google Fonts) — monospace at 0.75rem for status readouts and metadata. - **Labels:** "DM Sans" at 0.65rem, weight 600, uppercase, letter-spacing 0.1em. **Color Palette:** - **Void:** #080808 — pure near-black for backgrounds - **Panel Dark:** #0c0c10 — slightly lighter for HUD panels - **Triadic Violet:** #8050c0 — vivid violet for primary accent - **Triadic Amber:** #c0a030 — warm amber for secondary accent - **Triadic Teal:** #30a0a0 — bright teal for tertiary accent - **Glass:** rgba(200,200,220,0.06) — glass effect for HUD panels - **Text Glow:** #d0d0e0 — cool glowing text - **Border HUD:** rgba(200,200,220,0.12) — HUD border ## Imagery and Motifs **Paper-Aged Work Documentation:** Portfolio documentation treated with aged-paper effect — pseudo-element with noise grain at 0.05 opacity plus sepia color cast (filter: sepia(0.08) contrast(1.02)). Creates the archival quality of works being preserved in a dark vault, each piece a precious document. **Fade-Reveal Portfolio Unveiling:** Portfolio works reveal with slow fade — opacity: 0 to 1 over 600ms with simultaneous subtle scale from 0.98 to 1. No directional movement, just materialization from the void. Creates the dreamlike quality of visions appearing in darkness. **Leaf-Organic Growth Accents:** Small organic leaf forms (SVG, 20-40px) in Triadic Teal at 0.08 opacity float in HUD panel margins. Subtle rotation animation (rotate from 0 to 5deg over 6s, alternate). The organic forms represent growth and natural contradiction emerging within the technological HUD framework. **Triadic Color HUD Status:** Three triadic colors code different information types — Violet for creative/artistic, Amber for technical/process, Teal for organic/growth. Small status dots (6px circles) in corresponding colors appear in HUD panel headers. The triadic system creates rich color variety without chaos. **HUD Glass Panel Treatment:** Content panels use glass-morphism adapted for HUD — background: rgba(200,200,220,0.06), backdrop-filter: blur(8px), border: 1px solid rgba(200,200,220,0.12). Panels appear to float over atmospheric backgrounds, creating the layered depth of augmented-reality interfaces. ## Prompts for Implementation Build the page as a dark-mode HUD portfolio. Backgrounds: full viewport, position: fixed or background-attachment: fixed. HUD panels: position: relative, max-width: 640px, background: rgba(200,200,220,0.06), backdrop-filter: blur(8px), border: 1px solid rgba(200,200,220,0.12), padding: 28px. Fade reveal: .work-item { opacity: 0; transform: scale(0.98); transition: all 600ms ease; } .work-item.visible { opacity: 1; transform: scale(1); } Paper aged: .documented::after { content: ''; position: absolute; inset: 0; opacity: 0.05; pointer-events: none; } .documented img { filter: sepia(0.08) contrast(1.02); } Leaf organic: .leaf { position: absolute; opacity: 0.08; animation: leafSway 6s ease-in-out infinite alternate; } @keyframes leafSway { from { transform: rotate(0deg); } to { transform: rotate(5deg); } } HUD status: .status-creative { color: #8050c0; } .status-technical { color: #c0a030; } .status-organic { color: #30a0a0; } .status-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } AVOID: Standard portfolio grids, bright showcase layouts, and conventional case study formats. Let the dark-mode HUD overlay and dreamy-ethereal atmosphere create a portfolio where each work materializes from darkness like a vision. ## Uniqueness Notes 1. **Dark-mode HUD for creative portfolio:** Heads-up display overlay transforms portfolio viewing into an augmented-reality experience. 2. **HUD-overlay as information projection:** Content floating on atmospheric backgrounds creates the layered depth of AR interfaces. 3. **Triadic color-coding as information system:** Three colors organize creative, technical, and organic aspects of each work. 4. **Paper-aged as archival preservation:** Aged-document treatment positions portfolio works as precious artifacts in a dark vault. 5. **Dreamy-ethereal tone in technological interface:** Wonder-filled language creates paradox of soft emotion within hard HUD framework. **Seed/Style:** aesthetic: dark-mode, layout: hud-overlay, typography: geometric-sans, palette: triadic, patterns: fade-reveal, imagery: paper-aged, motifs: leaf-organic, tone: dreamy-ethereal **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 dark-mode aesthetic, hud-overlay layout, triadic palette, paper-aged imagery, and dreamy-ethereal tone.