# Design Language for mujun.work ## Aesthetics and Tone mujun.work embodies the Japanese concept of "mujun" (contradiction) -- a site that feels like opening a forgotten cartographer's journal found inside a frosted glass cabinet. The aesthetic is **hand-drawn mysterious**: every element appears as if sketched by an unseen hand onto translucent panes that float in honeyed amber light. Think of a dimly lit apothecary where hand-labeled glass jars hold ink drawings of impossible machines, where pencil annotations appear in the margins of reality itself. The mood is deeply **mysterious-moody** -- not horror-dark, but the kind of twilight ambiguity found in a library that seems to have more rooms than the building should contain. Warmth exists here, but it is the warmth of beeswax candles and aged parchment, not of sunlight. There is an undercurrent of gentle unease, as if the drawings on the page might rearrange themselves when the viewer looks away. The entire experience should feel like deciphering a coded manuscript written by someone who drew their thoughts instead of writing them. The visual language draws from: Edo-period botanical illustration crossbred with Victorian technical drawing, displayed through frosted glass vitrines in an amber-lit archive. Every surface carries the imperfect tremor of a human hand. Nothing is pixel-perfect. Nothing is machine-crisp. The contradiction ("mujun") is that these rough, organic sketches are presented through the ultra-modern medium of glassmorphism -- fragile digital frost holding raw analog marks. ## Layout Motifs and Structure The layout uses a **persistent sidebar** as its primary navigational spine -- a vertical column fixed to the left edge of the viewport, 280px wide, that functions as the "binding" of the cartographer's journal. This sidebar is rendered as a strip of aged kraft paper (#C4A882) with hand-drawn ink dividers separating navigation items. Each nav item is a small sketch-icon (a compass rose, a skeleton key, a magnifying glass, a sealed envelope) accompanied by handwritten labels. The sidebar has a subtle parallax offset: as the main content scrolls, the sidebar drifts upward at 0.15x the scroll speed, creating the illusion that the binding is slightly detached from the pages. The main content area (right of the sidebar) operates on a **layered-depth** composition system. Content does not sit flat on a single plane. Instead, three distinct depth layers create parallax dimensionality: - **Layer 0 (Background):** A muted parchment field (#F5EBD9) with faint hand-drawn grid lines at 5% opacity, as if graph paper bleeds through from behind. This layer is static. - **Layer 1 (Mid-ground):** Glassmorphic card panels -- frosted translucent containers (backdrop-filter: blur(16px), background: rgba(245, 235, 217, 0.45)) that hold the primary content. These cards have hand-drawn borders: irregular SVG stroke paths that wobble and vary in thickness (1.5px to 3px), simulating ink-pen outlines. Cards are positioned with deliberate asymmetric offsets -- no two cards share the same margin values. Some overlap by 20-40px, creating layered stacking. - **Layer 2 (Foreground):** Floating annotation elements -- small hand-drawn arrows, margin notes in handwritten type, circled numbers, dotted connection lines between cards -- that drift at 1.2x scroll speed, moving faster than the content beneath them, as if scribbled on a glass overlay placed atop the journal. The grid is a 12-column system with a 24px gutter, but columns are intentionally "hand-adjusted" -- content blocks snap to grid positions but are then offset by random amounts between -8px and +8px (calculated once per page load, not animated), producing an organic, imperfect alignment that mimics hand-placement. Section breaks are not horizontal rules but hand-drawn SVG dividers: a wavy line, a row of small circles, or a sketched botanical branch stretching across the full width. The overall page height targets 5-6 viewport heights, structured as a vertical descent through themed "chapters": an opening fog that clears to reveal the journal, a section of floating specimen cards, a hand-drawn map section with connection lines between concepts, and a closing section where the drawings gradually fade as if the ink is running out. ## Typography and Palette **Typography:** - **Headlines / Section Titles:** "Caveat" (Google Fonts) -- a true handwriting font with natural variation in letterform shapes, slant, and baseline. Set at 2.8rem to 4.2rem for major headings, with `letter-spacing: -0.01em` and `line-height: 1.15`. The organic imperfection of Caveat reinforces the hand-drawn aesthetic -- each letter looks individually inscribed rather than typed. Headlines appear in Charcoal Ink (#2B2520) with a subtle CSS text-shadow (0 0 1px rgba(43, 37, 32, 0.3)) that simulates ink bleed. - **Body Text / Descriptions:** "Karla" (Google Fonts) -- a grotesque sans-serif with friendly proportions but enough geometric discipline to remain readable at long lengths. Set at 1.05rem with `line-height: 1.72` and `letter-spacing: 0.008em`. Karla provides the rational counterpoint to Caveat's wildness -- the contradiction of structured text floating inside hand-drawn containers. Body text uses Warm Umber (#5C4A3A). - **Annotations / Margin Notes:** "Indie Flower" (Google Fonts) -- a casual handwriting font more loose and spontaneous than Caveat, used exclusively for the floating annotation layer (Layer 2). Set at 0.85rem in Faded Sienna (#9A7B5B) at 75% opacity. These annotations feel like afterthoughts scribbled in the margins by a second hand, creating a dialogue between the "author" (Caveat) and the "annotator" (Indie Flower). - **Navigation Labels:** "Caveat" at 1.15rem in Amber Bark (#7D6348), with a CSS `text-decoration: underline wavy` on hover, simulating a hand-drawn underline wobble. **Palette:** The honeyed-neutral palette evokes beeswax, aged paper, amber resin, and iron-gall ink -- materials of a pre-digital archive illuminated by candlelight: | Role | Name | Hex | Usage | |------|------|-----|-------| | Background | Aged Parchment | #F5EBD9 | Main canvas, card interiors | | Surface | Kraft Paper | #C4A882 | Sidebar background, card borders | | Primary Text | Charcoal Ink | #2B2520 | Headlines, primary content | | Secondary Text | Warm Umber | #5C4A3A | Body copy, secondary content | | Tertiary Text | Faded Sienna | #9A7B5B | Annotations, dates, meta | | Accent | Amber Resin | #D4943A | Links, active states, highlights | | Accent Dark | Burnt Honey | #A16F2C | Hover states, focus rings | | Card Frost | Glass White | rgba(245, 235, 217, 0.45) | Glassmorphic card backgrounds | | Shadow | Warm Shadow | rgba(43, 37, 32, 0.12) | Card shadows, depth layers | | Ink Bleed | Sepia Wash | #B8956A | Decorative strokes, dividers | The palette deliberately avoids pure whites and pure blacks. The darkest value (#2B2520) is a warm near-black with brown undertones. The lightest value (#F5EBD9) carries yellow-amber warmth. This restricted tonal range keeps everything feeling like it exists within the same amber-lit environment -- nothing breaks the spell by appearing digital or clinical. ## Imagery and Motifs **Hand-Drawn SVG Illustrations as Primary Visual Language:** All imagery is rendered as hand-drawn SVG line art -- no photographs, no gradients, no raster images. Every illustration uses irregular stroke paths with variable width (achieved via SVG `stroke-width` variation along path segments or CSS `stroke-dasharray` with custom patterns). The drawing style references scientific illustration: cross-hatching for shadow, stippling for texture, clean outlines with occasional "overdrawn" lines where the pen traced the same edge twice. Specific illustration subjects tied to the "mujun" (contradiction) theme: - **Impossible Objects:** Penrose triangles, Escher-like staircases, Mobius mechanisms -- drawn in the style of technical patent diagrams with labeled parts and dimension lines, but depicting objects that cannot physically exist. - **Botanical Contradictions:** Flowers with clockwork internals, trees whose roots become circuit boards, seed pods that open to reveal architectural floor plans. - **Cartographic Fragments:** Partial maps of nonexistent territories with hand-drawn compass roses, scale bars, and topographic contour lines. These maps appear as backgrounds within glassmorphic cards, as if the cards are windows into an impossible atlas. **Glassmorphic Card System:** Content cards use backdrop-filter glassmorphism with a twist: the frosted glass effect reveals the hand-drawn background elements beneath at reduced clarity, creating depth. Each card has: - `backdrop-filter: blur(16px) saturate(1.2)` - `background: rgba(245, 235, 217, 0.45)` - `border: 2px solid rgba(180, 158, 120, 0.35)` - Hand-drawn SVG border overlay (a wobbly rectangle path) positioned absolutely over the CSS border, creating the illusion that someone traced around the card with a pen - `box-shadow: 0 8px 32px rgba(43, 37, 32, 0.08), inset 0 1px 0 rgba(255, 248, 235, 0.5)` - Cards are rotated by tiny random amounts (between -0.8deg and +0.8deg) to break mechanical alignment **Decorative Motifs:** - **Connection Lines:** Dashed SVG lines (stroke-dasharray: 6, 4) drawn between related cards, mimicking the red-thread-on-corkboard detective aesthetic but rendered in Sepia Wash (#B8956A). These lines animate on scroll, drawing themselves progressively using `stroke-dashoffset` animation. - **Margin Annotations:** Small handwritten notes positioned outside the main content flow -- "see fig. 3", "cf. reverse", "disputed" -- in Indie Flower, appearing to comment on the content like marginalia in an old manuscript. - **Ink Splatter Accents:** Tiny SVG ink spots (3-8px diameter, irregular shapes) scattered near section transitions, as if the cartographer's pen dripped while turning the page. - **Compass Rose:** A detailed hand-drawn compass rose SVG in the sidebar footer, slowly rotating (1 revolution per 120 seconds) as a subtle living element. - **Wax Seal Motif:** Section headers are "stamped" with a circular SVG wax seal graphic (Amber Resin color) containing a single kanji character, pressed into the parchment with a slight emboss effect via `box-shadow` and gradient overlay. ## Prompts for Implementation **Full-Screen Narrative Experience -- The Journal Opens:** The site loads to a full-viewport parchment field (#F5EBD9) with zero content visible. Over 1.5 seconds, a hand-drawn circle expands from the center (SVG `` with increasing `r`, stroked in Charcoal Ink, wobbling path) as if someone is drawing an opening on the page. The circle completes and the interior "opens" -- a CSS clip-path circle transition reveals the first content section behind it, with a backdrop-filter blur that sharpens from 20px to 0 over 0.8 seconds. The sidebar slides in from the left with a spring-eased animation (cubic-bezier(0.34, 1.56, 0.64, 1)), its kraft paper texture appearing as if a page is being unfolded. **Magnetic Cursor Interactions:** All glassmorphic cards implement magnetic cursor behavior. When the cursor enters a 120px proximity radius around a card, the card translates toward the cursor by up to 8px (using transform: translate) with a spring-physics easing. Simultaneously, the hand-drawn border overlay shifts in the opposite direction by 3px, creating a parallax separation between the glass surface and the ink outline -- as if the glass and the drawing beneath exist on separate planes that shift relative to each other when disturbed. On hover (direct contact), the card's backdrop-filter blur reduces from 16px to 8px, making the background illustration more visible through the frost, as if warmth from the hand is melting the frost on the glass. **Scroll-Driven Chapter Progression:** The vertical scroll journey unfolds in distinct narrative chapters: 1. **Chapter: The Opening (0-100vh):** The circle-reveal intro. Domain name "mujun.work" appears in Caveat at 5rem, written letter-by-letter with a typewriter-style animation (400ms per character) but with slight random vertical offsets per letter (-2px to +2px), simulating handwriting baseline wobble. Beneath it, a subtitle in Karla: "Contradictions, mapped." 2. **Chapter: The Specimens (100vh-250vh):** Glassmorphic cards enter from varying directions (some slide from left, others rise from below, one descends from above) with staggered timing (200ms delay between each). Each card contains a hand-drawn SVG illustration of an impossible object alongside a text description. Cards overlap slightly, creating a scattered-desk composition. Connection lines draw themselves between related cards as they enter view. 3. **Chapter: The Atlas (250vh-400vh):** A large hand-drawn map SVG occupies 80% of the viewport width, positioned behind a full-width glassmorphic panel. The map draws itself progressively as the user scrolls (stroke-dashoffset animated from full-length to 0, tied to scroll position). Geographic labels appear in Caveat as the map regions complete. Margin annotations in Indie Flower comment on various territories: "here be contradictions", "unresolved since 1843". 4. **Chapter: The Fading (400vh-500vh):** Content gradually loses opacity and saturation. Text becomes lighter. Hand-drawn strokes thin. Ink splatters shrink. The glassmorphic cards increase their blur from 16px to 40px. The experience ends with a single handwritten line in the center: "The map is not the territory. But what if it were?" -- fading to 30% opacity, never fully disappearing, leaving the viewer in permanent ambiguity. **Animation Specifications:** - All magnetic interactions use `requestAnimationFrame` with spring-physics (stiffness: 0.08, damping: 0.7) -- no CSS transitions for cursor-follow behavior - SVG path-draw animations use `stroke-dasharray` equal to `getTotalLength()` and animate `stroke-dashoffset` from that value to 0 - Stagger animations use a base delay of 150ms multiplied by element index - No element should animate for more than 1.2 seconds (except the continuous compass rotation and the initial page reveal) - Reduce motion: all animations respect `prefers-reduced-motion: reduce` by collapsing to instant state changes **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie banners, newsletter popups, hero images with stock photography, gradient mesh backgrounds, neon color accents, pixel-perfect geometric precision. **BIAS TOWARD:** Narrative scroll experiences, hand-crafted imperfection, layered depth, organic asymmetry, reveal-on-scroll storytelling, ambient micro-animations, atmospheric stillness punctuated by moments of movement. ## Uniqueness Notes **Differentiators from other designs:** 1. **Three-Layer Parallax Depth System with Annotation Overlay:** No other design in the portfolio implements a three-speed parallax system (static background, normal-speed content, fast-moving annotation layer) where the fastest layer contains handwritten marginalia that comments on the content below. This creates a dialogue between content and commentary that is structurally unique -- the annotations are not metadata or captions but a second narrative voice floating above the primary one. 2. **Glassmorphism Serving Hand-Drawn Aesthetics (Not Tech/SaaS):** Glassmorphic cards at 2% frequency are rare in the portfolio, and every existing instance uses them in a tech/SaaS context. mujun.work is the first to combine glassmorphism with hand-drawn illustration -- using frosted glass not as a modern UI pattern but as a literal visual metaphor (glass vitrines in an archive). The frost-melt hover effect (blur reduces to reveal the drawing beneath) has no precedent in existing designs. 3. **Magnetic Cursor with Parallax Border Separation:** While magnetic interactions appear at 10% frequency, no existing design uses the magnetic pull to create differential movement between a card's glass surface and its hand-drawn border overlay. This micro-parallax-within-parallax effect -- where the glass shifts toward the cursor while the ink border shifts away -- produces a tangible sense of material layering that is unique in the portfolio. 4. **Contradiction as Design Principle:** The "mujun" concept is structurally embedded: hand-drawn imperfection displayed through precise digital glassmorphism; a sidebar layout (structured, navigational) containing navigation drawn as sketched icons (organic, imprecise); handwritten annotations that float faster than the content they reference (temporal contradiction). No other design uses philosophical contradiction as its generative logic rather than merely its theme. 5. **Progressive Ink Depletion Narrative:** The final chapter's gradual fading -- where strokes thin, opacity drops, blur increases, and the design literally runs out of ink -- is a storytelling technique not found in any other portfolio design. Most designs maintain visual consistency throughout; mujun.work degrades intentionally, ending in ambiguity rather than resolution. **Chosen seed/style:** aesthetic: hand-drawn, layout: sidebar, typography: handwritten, palette: honeyed-neutral, patterns: magnetic, imagery: glassmorphic-cards, motifs: layered-depth, tone: mysterious-moody **Avoided overused patterns:** Avoided playful aesthetic (95%), centered layout (99%), friendly tone (98%), mono typography (99%), scroll-triggered as primary pattern (97%), warm palette without specificity (100%), minimal imagery (94%), vintage motifs (84%). Instead leaned into underused combinations: glassmorphic-cards imagery (2%), honeyed-neutral palette (2%), mysterious-moody tone (4%), magnetic patterns (10%), layered-depth motifs (7%).