# Design Language for mujun.quest ## Aesthetics and Tone **Mujun** (矛盾) is the Japanese/Chinese word for *contradiction* — the original paradox story of the unstoppable spear meeting the impenetrable shield. This site weaponizes that contradiction at every level: ancient marble geometry colliding with botanical overgrowth, classical isometric drafting precision erupting into chaotic organic rebellion, pristine blue-white ethereal calm torn apart by edgy typographic aggression. The mood is **a Renaissance botanical atlas that has been defaced by a graffiti artist who studied architecture.** Imagine a 16th-century Flemish herbalist's folio — copper-engraved plant specimens, precise Latin annotations, gilded page edges — but the pages have been torn, reassembled at 3D tilt angles, stamped with bold angular type, and pinned to a marble slab that is itself cracking apart. The result is simultaneously museum-quality and street-level, archival and transgressive, serene and violent. The **isometric grid** is the structural spine — every element lives on a 60-degree axonometric lattice, as if the entire page is a cutaway technical drawing of an impossible marble garden. Portfolio items float as isometric cubes, tilted 3D cards that cast hard shadows and reveal hidden faces when hovered. The botanical illustrations bleed off the cube faces as if the plants are growing *through* the geometry. Tone is cold, precise, then suddenly alive — like touching a marble statue that blinks. ## Layout Motifs and Structure The primary grid is an **isometric coordinate system** rendered in CSS 3D transforms. The page is conceived as an axonometric blueprint — a top-down 30-degree tilt that reveals both the top face and two side faces of every element simultaneously. **Structure:** - Full-viewport hero: a single isometric marble slab, cracked down the center, with a botanical specimen illustration erupting from the crack in full color against the cold white-blue ground. The site title "MUJUN" is set in massive capitals, split across the crack so each half of the letter sits on a different marble face. - Portfolio section: a **3-column isometric grid** where each project card is a 3D cube rendered with CSS `transform: rotateX(-30deg) rotateY(45deg)`. The top face shows the project thumbnail. The right face shows the project title. The left face shows the tech stack or medium. On hover, the cube tilts further (tilt-3d pattern), the botanical illustration on the card face animates as if the vines are growing. - Interstitial breaks between portfolio sections: full-bleed marble texture panels with single large botanical engravings, overlaid with contradictory bold type fragments ("PARADOX", "矛盾", "UNSTOPPABLE / IMPENETRABLE"). - Footer: a flat isometric floor plan grid, like an architectural section cut, with the contact information set in tiny drafting-style monospace. **Spatial logic:** The isometric grid lines are rendered as `1px` hairlines in `#B8C9E8` (pale blue-slate), visible only at high zoom, giving the page the feel of technical drafting paper. The grid never disappears — it is the underlying truth the botanical chaos grows out of. No horizontal nav bars. No sticky headers. No sidebar. The only navigation is a vertical tab rail on the far right, rendered as isometric tabs extruding from the page edge, like folders in a filing cabinet viewed at angle. ## Typography and Palette **Primary Display Font:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — condensed all-caps, used at extreme scale (15–25vw) for the main wordmark and section breaks. Tracked at `0.08em`. Rendered in marble-white `#F0EDE8` against deep blue-black, with a 3px hard offset shadow in `#2A3F6B` to simulate letterforms carved into stone. **Secondary Display Font:** [Cormorant](https://fonts.google.com/specimen/Cormorant) — the classical serif italic, used for Latin botanical specimen names, pull quotes, and contradictory captions. Set at `1.2–2rem`, weight 300 italic. This is the "old master" voice against Bebas Neue's street aggression. **Body / UI Font:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — humanist sans, weight 300/400, used for project descriptions, labels, and technical annotations. At `0.85rem` with `1.6` line-height. Crisp and functional, never decorative. **Monospace accent:** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) — used only for isometric grid coordinates, footer details, and the "矛盾" romanization labels. Weight 100, letter-spacing `0.15em`, in `#7A9CC4`. **Palette:** | Role | Name | Hex | |------|------|-----| | Background | Marble Void | `#0D1B2A` | | Ground | Deep Lapis | `#1B2E4A` | | Isometric Face A | Glacier | `#C5D8F0` | | Isometric Face B | Ice Shadow | `#8AAED4` | | Isometric Face C | Marble White | `#F0EDE8` | | Accent | Ethereal Cerulean | `#5B9BD5` | | Botanical Green | Verdigris | `#4A8C6A` | | Botanical Warm | Parchment Gold | `#C9A96E` | | Grid Lines | Blue-Slate Hairline | `#B8C9E8` | | Shadow | Abyss | `#070F1A` | | Type Edgy | Raw White | `#F5F2EE` | The ethereal-blue palette reads as **cold intelligence** — the blue of antique maps, of cyanotype prints, of glacier light through museum glass. The botanical accents (verdigris, parchment gold) are the organic heat that breaks through. ## Imagery and Motifs **Botanical Illustrations:** The core visual motif is copper-engraved botanical specimens in the style of Maria Sibylla Merian or Pierre-Joseph Redouté — intricate, scientifically precise plant drawings with delicate cross-hatching and careful tonal rendering. These illustrations are treated in two modes: 1. **Monochrome ghost:** desaturated to `#8AAED4` blue, used as large background watermarks and structural page dividers, translucent at 12–18% opacity so they feel like ghost impressions in paper. 2. **Full bleed specimens:** the primary botanical appears in full color (verdigris, parchment gold, deep shadow) against marble slab backgrounds, like a museum specimen plate. **Marble-Classical Motifs:** - Cracked marble texture used as the primary surface treatment — not smooth render but fractured, geological, ancient. CSS `background-image` with layered radial gradients mimicking veining: `#F0EDE8`, `#D8D0C8`, `#B0A898`, with thin dark vein paths. - Greek key border fragments (meander pattern) appear at section transitions, rendered as SVG at `1px` stroke in `#5B9BD5`, partial and interrupted — as if the classical pattern was never finished. - Isometric column drums: decorative isometric cylinders (CSS 3D transforms) appear as page ornaments, rendered in marble gradient, with botanical vines growing around them. **Tilt-3D Pattern:** - Portfolio cards use `transform: perspective(800px) rotateX(-25deg) rotateY(40deg)` at rest, transitioning to `rotateX(-35deg) rotateY(50deg)` on hover with a `cubic-bezier(0.23, 1, 0.32, 1)` easing. - `box-shadow: 20px 20px 60px #070F1A, inset 1px 1px 0 #B8C9E8` creates the isometric shadow plane. **Contradiction Glyphs:** The kanji `矛` (spear) and `盾` (shield) appear as large watermark overlays at key scroll points — set at `40vw`, opacity `0.04`, acting as invisible architecture. ## Prompts for Implementation Build this as a **single-scroll isometric world** — the user moves through a 3D axonometric space, not through sections. The entire page is conceived as a museum of contradictions: a room where the floor is marble, the walls are covered in living botanical specimens, and every object on display is a project rendered as an impossible geometric solid. **Hero implementation:** - CSS `clip-path: polygon()` to create the jagged crack bisecting the hero marble slab. - GSAP ScrollTrigger to animate the crack widening as the user scrolls down — the botanical specimen erupts through the widening gap. - The wordmark "MUJUN" uses SVG text with `textPath` following the crack path, so the letters bend with the fracture geometry. **Isometric grid:** - CSS custom properties `--iso-x`, `--iso-y`, `--iso-z` for each card's position on the grid. - `transform: rotateX(var(--iso-rx)) rotateY(var(--iso-ry))` with JS-driven parallax that slightly adjusts rotation based on cursor position (`mousemove` at 0.03x damping). - Grid hairlines are an SVG background pattern: `` with 60-degree lines, `stroke="#B8C9E8"`, `stroke-width="0.5"`, `opacity="0.3"`. **Botanical animation:** - On hover of any portfolio cube, the botanical illustration CSS class `.specimen` triggers: `animation: vine-grow 0.8s cubic-bezier(0.23, 1, 0.32, 1) forwards` — SVG path draw animation where `stroke-dashoffset` animates from full length to 0, as if the vine is drawing itself. - Botanical ghosts in backgrounds use `filter: blur(0.5px) sepia(1) hue-rotate(180deg)` to shift them toward the blue-slate tone. **Scroll narrative:** - Section 1 (Hero): Marble void. The crack. "MUJUN" in broken Bebas Neue. Silence. - Section 2 (Portfolio grid): Isometric cubes emerge from the marble floor as if extruded upward. Each cube is a project. No intro text — just the cubes and their botanical faces. - Section 3 (Specimen gallery): Full-width botanical plate panels separated by Greek key fragments. "FLORA IMPOSSIBILIS" in Cormorant italic at 6vw. - Section 4 (About): Single isometric room — walls, floor, ceiling visible in axonometric projection. A figure-shaped cutout (botanical silhouette) stands center. Text fills the room like annotations on a specimen case. - Footer: Flat blueprint — technical drawing style, `JetBrains Mono`, grid coordinates, contact as XY positions. **AVOID:** CTAs, hero buttons, pricing blocks, testimonial grids, stat counters, newsletter modals, sticky navigation bars, hamburger menus on desktop, any rounded card corners (everything is isometric hard edges), gradients that are smooth (all gradients should have visible step-bands for the "carved stone" feel). ## Uniqueness Notes 1. **Isometric portfolio grid at <2% frequency.** The frequency report shows isometric/tilt-3d patterns in the underused tier. No other design in the registry combines isometric CSS 3D grid with botanical-illustration motifs. This cross of technical drafting geometry with organic natural history illustration is a zero-overlap combination. 2. **Marble-classical motifs executed as fracture geometry, not decorative trim.** Other designs that use classical motifs apply them as ornamental borders. Here the marble *is* the structural substrate — it cracks, it bleeds, it reveals the contradiction beneath. The crack is load-bearing narrative, not decoration. 3. **Edgy-rebellious tone through typographic contradiction.** The collision of Bebas Neue (street-level condensed display) with Cormorant (aristocratic editorial serif) within the same composition — at wildly different scales and weights — creates a visual argument rather than a visual statement. Most portfolio sites pick one typographic personality; this one stages a fight between two. 4. **Kanji-as-architecture.** The characters `矛盾` (mujun) function as invisible structural elements — large-scale watermarks at near-zero opacity that shape empty space without appearing as "decorative Asian typography" — they are the hidden bones of the layout. 5. **Zero smooth surfaces.** All backgrounds use stepped gradient bands (CSS `linear-gradient` with hard stops, no feathering) to simulate carved stone or geological strata. This is a deliberate anti-smooth-web move against the prevailing glassmorphism trend (frequency: overused). **Chosen seed:** aesthetic: isometric, layout: portfolio-grid, typography: humanist, palette: ethereal-blue, patterns: tilt-3d, imagery: botanical-illustration, motifs: marble-classical, tone: edgy-rebellious **Avoided overused patterns:** glassmorphism, neumorphism, smooth gradients, sticky nav bars, CTA-heavy above-the-fold, rounded cards, testimonial grids, stat blocks.