# Design Language for mujun.day ## Aesthetics and Tone mujun.day takes its name from the Zen Buddhist concept of *mujun* (矛盾) -- contradiction, paradox, the spear that pierces every shield meeting the shield that stops every spear. The visual language channels the Bauhaus school's obsessive union of form and function, but refracts it through the lens of Japanese craft imperfection and the blunt materiality of polished stone and hammered gold leaf. The reference points are specific: Josef Albers's nested squares rendered in veined Calacatta marble instead of flat gouache; Marianne Brandt's metallic tea infuser scaled to architectural proportion; Oskar Schlemmer's Triadic Ballet costumes reimagined as gilded relief sculptures against obsidian slabs. The tone is raw-authentic -- not polished corporate sincerity, but the frank directness of a stonemason explaining the grain of a block. Text speaks in declarative fragments. No exclamation points. No sales language. No hedge words. Statements land like chisel strikes: precise, unapologetic, final. There is warmth in the directness, the way a craftsperson's bluntness conveys more care than any marketing copy could. The mood sits at the intersection of a Bauhaus workshop at 2am -- tools scattered, models half-built, coffee cold -- and a Kyoto temple garden where every stone placement took three decades of consideration. Controlled chaos. Deliberate imperfection. The beauty of function exposed. The entire experience feels as though someone carved a website into a slab of Nero Marquina marble and inlaid the type with 24-karat gold wire. Heavy. Permanent. Unapologetically physical in a medium that has no physicality. ## Layout Motifs and Structure The layout follows a **portfolio-grid** system -- not a generic masonry grid, but one inspired directly by Herbert Bayer's exhibition designs for the 1938 Bauhaus retrospective at MoMA. The grid is a 12-column system where content modules occupy asymmetric spans: a primary showcase block claims 7 columns, its companion text block takes 4, with 1 column of deliberate void. This asymmetry rotates: the next row reverses the ratio, creating a zigzag reading pattern that never settles into predictability. Grid cells are not bordered by lines but by material transitions. A marble-textured block (light Calacatta veining, #F5F0E8 base with #C9B99A vein traces) sits adjacent to a deep black block (#0A0A0A) with no gap, no padding between them -- the edge where marble meets obsidian IS the border. This material-boundary approach replaces all conventional UI borders, dividers, and card edges throughout the site. Vertical rhythm follows a strict 8px baseline grid, but horizontal placement uses the golden ratio (1:1.618) for column width relationships. The 7-column primary zone is precisely 1.618x the width of the 4-column secondary zone. This mathematical relationship extends to all spacing: margins are 34px (Fibonacci), gutters are 21px, section padding is 55px. The portfolio grid contains three tiers of content modules: 1. **Monument Blocks** -- full-width, 100vh height, containing a single visual element and minimal text. These anchor the page like chapter dividers. 2. **Gallery Blocks** -- the 7+4+1 asymmetric pairs, presenting work or content with image-text relationships. 3. **Fragment Blocks** -- small, 2-3 column modules scattered in the void spaces, containing single sentences, dates, or detail shots. These fill the negative space the way gold fills cracks in kintsugi repair. Navigation is reduced to a single fixed element: a thin vertical bar (2px wide, #C9973F gold) on the left edge of the viewport, functioning as both scroll indicator and section marker. Circular gold dots (6px diameter) along this bar mark section positions. No hamburger menu, no horizontal nav bar, no footer navigation. The scroll is the journey. ## Typography and Palette **Typography:** - **Display / Headlines:** "Bebas Neue" (Google Fonts) -- a condensed, all-caps sans-serif with the mechanical authority of Bauhaus poster typography. Used at clamp(3rem, 6vw + 1rem, 8rem) for Monument Block headlines. Weight: 400 (its only weight, which is inherently bold). Letter-spacing: 0.15em -- wide-tracked to let each letter breathe like columns in a temple colonnade. Always uppercase. Set in #C9973F (antique gold) on dark backgrounds, or #0A0A0A on marble-light backgrounds. - **Body / Running Text:** "Source Serif 4" (Google Fonts) -- a transitional serif with the precision of a Bauhaus technical drawing but the warmth of hand-set type. Used at clamp(1rem, 1.2vw + 0.5rem, 1.35rem). Weight: 300 (Light) for body text, 600 (SemiBold) for emphasis. Line-height: 1.75 for generous vertical breathing room. Color: #B8A88A (muted gold-gray) on dark backgrounds, #2A2420 (warm near-black) on light backgrounds. - **Accent / Labels / Metadata:** "Space Grotesk" (Google Fonts) -- a geometric grotesque that bridges the Bauhaus geometric tradition with contemporary interface design. Used at 0.75rem-0.9rem for dates, categories, captions, and navigation indicators. Weight: 500 (Medium). Letter-spacing: 0.2em, always uppercase. Color: #8A7D6B (weathered bronze) -- deliberately understated so it recedes behind the display and body type. The eclectic-hybrid typography strategy pairs the shouting industrial condensed of Bebas Neue with the quiet literary grace of Source Serif 4, mediated by the neutral utility of Space Grotesk. These three voices create a typographic hierarchy that mirrors the site's central paradox: raw industrial force meeting refined material beauty. **Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Primary Dark | #0A0A0A | Obsidian | Primary background, Monument Blocks, deep contrast zones | | Primary Gold | #C9973F | Antique Gold | Headlines, accent lines, navigation markers, the gold "wire" inlay | | Secondary Gold | #B8A88A | Weathered Bronze | Body text on dark, secondary UI elements, muted accents | | Marble Base | #F5F0E8 | Calacatta Cream | Light background blocks, the "marble" surface | | Marble Vein | #C9B99A | Vein Gold | Marble texture veining, decorative lines on light backgrounds | | Text Dark | #2A2420 | Burnt Umber | Body text on light backgrounds, grounded warmth | | Accent Dark | #8A7D6B | Patina | Labels, metadata, tertiary text | | Deep Accent | #1A1510 | Black Gold | Hover states, deep shadows, subtle gradients from obsidian | The gold-black-luxury palette avoids the cliche of bright yellow-gold (#FFD700) entirely. Every gold in this system is aged, tarnished, closer to brass than to bullion. The luxury here is not new-money gleam but old-world patina -- the gold leaf on a 400-year-old lacquer box, not a Dubai hotel lobby. ## Imagery and Motifs **Marble Texture as Structural Material:** The primary visual motif is marble -- not as a decorative background pattern, but as a literal material identity. Every light-colored surface on the site renders as a Calacatta marble slab: a warm cream base (#F5F0E8) crossed by thin, wandering veins in gold-gray (#C9B99A). These veins are generated procedurally using layered SVG `` and `` filters, creating organic, non-repeating patterns that shift subtly on each page load. The marble is never photographic -- it is always synthetic, always slightly too perfect, always betraying its digital origin in a way that honors the Bauhaus commitment to honest materiality. The material does not pretend to be real stone; it announces itself as a digital interpretation of stone. **Flowing Curves as Connective Tissue:** Between the rigid geometry of the portfolio grid, flowing curves -- rendered as thin gold SVG paths (#C9973F, 1.5px stroke, no fill) -- weave through the layout like the veins in the marble itself. These curves follow bezier paths that connect content blocks across the grid, creating visual continuity where the rigid structure creates separation. They reference Schlemmer's wire sculptures and Kandinsky's "Several Circles" -- Bauhaus artists who found the curve within the right angle. The curves are animated: they draw themselves progressively as the user scrolls, using SVG `stroke-dasharray` and `stroke-dashoffset` techniques, so they appear to grow organically through the geometric framework like vines through a trellis. **Gold Leaf Fragment Overlays:** Small, irregular polygons of semi-transparent gold (#C9973F at 15% opacity) are scattered across Monument Blocks -- 5 to 8 per block, each 40-120px in size, with irregular edges generated by randomized polygon clip-paths. These suggest fragments of gold leaf that have partially adhered to the obsidian surface, creating an effect halfway between kintsugi repair and geological mineral deposits. They rotate very slowly (360 degrees over 120 seconds) to create ambient motion without distraction. **Geometric Bauhaus Primitives:** Circle, triangle, and square -- the three elemental Bauhaus shapes (Kandinsky's form-color theory: yellow triangle, red square, blue circle) -- appear as thin-stroked outlines (#C9973F, 1px) in the void spaces of the grid. They are never filled, never dominant. They hover in the margins like technical drawing annotations, 40-60px in size, rotating at imperceptible speeds. These are not decorative; they are signatures, the way a potter marks the bottom of a bowl. **No Photography:** mujun.day contains zero photographic images. Every visual element is generated through CSS, SVG, or procedural techniques. This is a deliberate constraint: the site's visual richness must emerge entirely from code-generated materiality -- marble textures, gold paths, geometric primitives, typographic composition. The absence of photography forces the design to carry meaning through pure form, which is the Bauhaus ideal distilled to its logical extreme. ## Prompts for Implementation **Full-Screen Narrative Experience:** mujun.day opens to a full-viewport Monument Block: a field of #0A0A0A obsidian, the procedural marble texture bleeding in from the left edge as if the dark surface is cracking to reveal stone beneath. The domain name "mujun.day" appears in Bebas Neue at clamp(4rem, 8vw + 1rem, 10rem), letter-spacing 0.2em, in #C9973F gold, centered vertically at 45% viewport height. Below it, a single line in Source Serif 4 Light: "contradiction as craft" in #B8A88A. No other elements. No scroll indicator. The user discovers the scroll. **Micro-Interactions as Material Response:** Every interactive element responds as though it were a physical material being touched: - Hover on gold text: the text does not change color but gains a subtle text-shadow (0 0 20px rgba(201, 151, 63, 0.3)) as though the gold is catching light. - Hover on Gallery Blocks: the marble texture veins shift slightly (2px displacement via CSS filter adjustment), as though pressure is being applied to the stone surface. - Hover on Fragment Blocks: the block lifts 2px (transform: translateY(-2px)) with a 0.4s cubic-bezier(0.23, 1, 0.32, 1) transition, like a tile being nudged. - Click/tap feedback: a single ripple of gold (#C9973F at 10% opacity) expands from the touch point and fades over 0.6s. - Scroll progress: the 2px gold vertical bar on the left grows from top to bottom, its circular section markers filling from hollow to solid as each section enters the viewport. These micro-interactions are never flashy. They are the haptic feedback of digital stone -- subtle, physical, suggesting mass and material resistance. No bounce animations. No elastic overshoot. Everything moves with the weight of marble. **SVG Path Drawing Animation:** The flowing curve SVG paths that connect content blocks use a scroll-linked animation system. As a curve's parent section enters the viewport (detected via IntersectionObserver at threshold 0.15), the curve begins drawing from its start point. The draw speed is calibrated to match average scroll velocity, so the curve appears to grow in real-time with the user's movement. If the user scrolls back up, the curve does not un-draw -- it remains fully rendered, like ink that cannot be returned to the pen. This one-way revelation creates a sense of permanent discovery. **Monument Block Transitions:** When scrolling from one Monument Block to the next, a 0.3s crossfade occurs where the departing block's gold elements dim to #8A7D6B (Patina) while the entering block's gold elements brighten from #8A7D6B to #C9973F. This creates a breathing rhythm of gold intensity throughout the scroll journey -- each new section announces itself by "lighting up" while the previous one recedes to aged bronze. **Gallery Block Stagger Entry:** Gallery Block pairs (7-column image + 4-column text) enter the viewport with a 150ms stagger: the larger block appears first (opacity 0 to 1, translateY 30px to 0, duration 0.6s, ease cubic-bezier(0.23, 1, 0.32, 1)), then the smaller block follows with the same animation. The 1-column void space between them contains one of the flowing curve SVGs, which begins its path-draw at the moment the second block completes its entry. **AVOID:** CTA buttons, pricing blocks, stat-grids, testimonial carousels, hamburger menus, hero gradient overlays, stock photography, emoji, card shadows, rounded corners (all corners are sharp 0px radius), newsletter signup forms, social media icons, cookie banners. The site is a self-contained artifact, not a conversion funnel. **Technical Constraints:** - All marble textures generated via SVG filters (feTurbulence: type="fractalNoise", baseFrequency="0.015", numOctaves="4") -- no image files. - All flowing curves are inline SVG with hand-authored bezier control points, not generated libraries. - Animations use CSS custom properties and IntersectionObserver, not animation libraries. No GSAP, no Framer Motion, no Lottie. - Total page weight target under 150KB including all SVG. - Single HTML file with embedded CSS and JS. No external dependencies except Google Fonts. ## Uniqueness Notes **Differentiators from other designs:** 1. **Zero-Photography Constraint as Design Philosophy:** No other design in the portfolio commits to generating all visual richness entirely through code -- procedural marble textures, SVG path animations, CSS-generated gold leaf fragments. This constraint transforms a limitation into an identity. While 94% of designs use "minimal" imagery and 72% use photography, mujun.day uses neither, occupying an unexplored territory of pure code-generated materiality. 2. **Material-Boundary Grid System:** The portfolio-grid layout (2% frequency) uses material transitions -- marble meeting obsidian -- as its only border mechanism, eliminating all conventional dividers, card edges, and separator lines. No other design in the collection treats surface material change as a structural layout device. The grid becomes geological: different strata of stone butting against each other at tectonic boundaries. 3. **Bauhaus-Wabi-Sabi Synthesis:** The bauhaus aesthetic (2% frequency) is typically implemented as clean, primary-colored geometric purity. mujun.day deliberately corrupts this with the Japanese aesthetic of honored imperfection -- veined marble instead of flat color, tarnished gold instead of primary yellow, procedural irregularity instead of mathematical perfection. This cross-cultural collision has no precedent in the existing collection and directly embodies the domain name's meaning of "contradiction." 4. **One-Way SVG Revelation System:** The flowing curves (1% frequency) draw themselves forward but never un-draw when scrolling back, creating a permanent trace of the user's journey through the site. This directional animation philosophy -- where interaction leaves visible residue -- is unique in the portfolio and transforms scrolling from navigation into mark-making. 5. **Aged Gold Palette Without Bright Gold:** The gold-black-luxury palette (1% frequency) deliberately avoids all bright golds (#FFD700, #F5C518, etc.) in favor of tarnished, aged tones (#C9973F, #B8A88A, #8A7D6B). This positions the luxury register in antique patina rather than contemporary opulence, creating a warmth that reads as earned rather than purchased. **Documented Seed/Style:** - aesthetic: bauhaus (2% frequency -- underused, PREFERRED) - layout: portfolio-grid (2% frequency -- underused, PREFERRED) - typography: eclectic-hybrid (2% frequency -- underused, PREFERRED) - palette: gold-black-luxury (1% frequency -- underused, PREFERRED) - patterns: micro-interactions (6% frequency -- low, acceptable) - imagery: marble-texture (2% frequency -- underused, PREFERRED) - motifs: flowing-curves (1% frequency -- underused, PREFERRED) - tone: raw-authentic (4% frequency -- underused, PREFERRED) **Avoided Overused Patterns:** - playful aesthetic (95%) -- replaced with raw-authentic directness - centered layout (99%) -- replaced with asymmetric portfolio-grid - mono typography (99%) -- replaced with eclectic-hybrid (Bebas Neue + Source Serif 4 + Space Grotesk) - warm palette (100%) -- replaced with gold-black-luxury (cool obsidian dominant, gold as accent) - scroll-triggered patterns (97%) -- replaced with micro-interactions as primary pattern - friendly tone (98%) -- replaced with raw-authentic - vintage motifs (84%) -- replaced with flowing-curves - minimal imagery (94%) -- replaced with marble-texture procedural generation