# Design Language for mujun.study

## Aesthetics and Tone

mujun.study is a **kinetic field journal** — the visual language of a naturalist who also happens to be an architect. Imagine a botanical expedition notebook pinned to an isometric drafting table: pages of pressed ferns and sepia photographs sit alongside razor-precise angular blueprints drawn in forest-green ink. The tension between wild organic growth and deliberate geometric structure is the entire point.

The tone is **energetic and restless** — never static, never calm. This is not a meditation site. It is a place of active discovery, where the eye is always moving, always finding the next detail. The site evokes the feeling of hiking through a dense cedar forest and suddenly glimpsing a perfectly engineered suspension bridge. Nature does not stop for geometry; geometry does not apologize for nature.

Mood references: Soviet botanical illustration meets brutalist field station. Aldo Leopold's field journals laid over a Le Corbusier floor plan. Ansel Adams' photographs grain-mapped onto isometric grid paper.

## Layout Motifs and Structure

The page unfolds as an **organic isometric flow** — sections drift and angle across the viewport rather than stacking cleanly. Content blocks are isometric tiles: parallelogram-shaped panels tilted at 30° that appear to float at different z-heights on an invisible axonometric grid. The grid itself is faintly visible as a pale green dot-matrix beneath content, like graph paper seen through tracing paper.

**Structural logic:**
- No rectangular sections. Every content panel is a skewed parallelogram or hexagon at 30°/60° isometric angles
- Panels overlap slightly, casting hard-edged CSS drop-shadows (no blur — sharp-angle shadows only, 4px offset, no radius)
- Organic connective tissue: hand-drawn SVG path lines (like pencil traces) thread between panels, connecting them without enclosing them
- Vertical rhythm is deliberately broken — panels nest at different heights as if scattered across a drafting table
- A faint isometric dot grid (`radial-gradient` pattern) covers the entire page background at 24px spacing

**Five Content Zones (not sections — zones bleed into each other):**
1. **The Aperture** — Full-viewport opener. A large isometric hexagon dominates the left half; inside it, a vintage photograph fades in through a typewriter-reveal mask. The domain name types itself onto the hex surface letter by letter.
2. **The Survey** — Three floating isometric tiles at staggered heights, each containing a short text block. Sharp diagonal lines connect their corners like a surveyor's triangulation sketch.
3. **The Archive** — A mosaic of vintage photograph thumbnails arranged in isometric perspective, as if viewed from above on a light table. Photos appear to have physical depth — hover reveals the "underside" of each as if lifting a print.
4. **The Fieldwork** — A wide isometric panel (spans 80vw) with typewriter-animated text running across it like a teletype report. Behind the text, a slow-moving parallax of forest photography.
5. **The Bearing** — Closing zone. No footer. Just a single isometric diamond shape with a compass rose motif, hand-drawn SVG style, slowly rotating. Contact/link information etched along its edges.

## Typography and Palette

**Display / Headline Font:** `Caveat` — Google Fonts. This is the primary handwritten workhorse. Used at 72px–96px for headlines, tilted slightly (transform: rotate(-1.5deg)) to feel genuinely hand-placed. Variable weight 400–700.

**Secondary Handwritten Font:** `Kalam` — Google Fonts. Used for captions, labels, annotation-style micro-copy beside photographs. Weight 300 and 700 only. Feels like careful field-note lettering.

**Monospace / Typewriter Font:** `Courier Prime` — Google Fonts. Used exclusively for typewriter-effect animated passages and any system-like callouts. All caps, tracked at 0.15em.

**Accent / Structural Labels:** `Josefin Sans` — Google Fonts. Weight 100 only (ultra-thin). Used sparingly for panel labels and navigational waypoints. Its geometric precision contrasts sharply with the handwritten fonts.

**Palette — Forest-Green Core:**
- `#1a2e1a` — Deep forest black-green (primary background for dark panels)
- `#2d5016` — Dark canopy green (secondary background, large panel fills)
- `#4a7c2f` — Mid-forest fern green (primary accent, border lines, isometric grid)
- `#7fb069` — Sage leaf green (secondary accent, hover states, highlight lines)
- `#c8e6a0` — Pale lichen (text on dark panels, SVG line traces)
- `#f2ead7` — Aged paper cream (light panel backgrounds, photograph border matting)
- `#8b6914` — Sepia amber (vintage photograph tint overlay, aged-paper accents)
- `#1c1c1c` — Near-black charcoal (body text on light panels, shadow color)

**Isometric grid color:** `#4a7c2f` at 8% opacity on cream panels, 12% opacity on dark panels.

## Imagery and Motifs

**Vintage Photography — the primary visual anchor:**
All photographs are treated with a sepia-to-forest duotone: shadows map to `#2d5016`, highlights map to `#f2ead7`, creating a unified vintage-botanical-journal aesthetic. No color photography. Every image appears as though it was developed in a darkroom using forest-steeped chemicals. Images are clipped into isometric hexagon/parallelogram shapes using CSS `clip-path`.

**Sharp-Angle Motifs — the structural nervous system:**
- Isometric corner brackets: every panel corner has a precise 45° bracket mark drawn in SVG (like engineering drawing corner marks), `#7fb069` at 60% opacity
- Chevron dividers: instead of horizontal rules, sharp V-shaped chevron lines (like geological strata indicators) separate text blocks
- Triangulation web: faint SVG lines connecting panel midpoints, like a surveyor's triangulation sketch, `#4a7c2f` at 15% opacity
- No rounded corners anywhere — zero border-radius on all elements

**Hand-drawn SVG annotation system:**
Labels and callouts use SVG paths that simulate pencil marks: slightly wobbly, 1.5px stroke, `#c8e6a0` on dark backgrounds, `#2d5016` on light. Arrow pointers are hand-drawn chevrons, not CSS arrows.

**Typewriter-effect pattern:**
The typewriter animation uses a character-by-character reveal with a blinking `|` cursor in `#7fb069`. After each sentence completes, a 0.8s pause before the next line begins. The cursor then moves to the new line position. Used in The Aperture (headline) and The Fieldwork (body passage). Implementation: vanilla JS with `requestAnimationFrame`, no libraries. Character delay: 45ms base with ±15ms jitter per character for mechanical realism.

**Compass Rose Motif:**
A hand-drawn 16-point compass rose rendered in SVG, strokes only (no fills except for cardinal direction triangles in `#4a7c2f`). Rotates continuously at 0.3rpm using CSS animation. Used only in The Bearing zone.

**Isometric depth illusion:**
Panels use three CSS custom properties `--face-color`, `--left-face-color`, `--right-face-color` to render isometric "box" faces. Top face is the main content area; left and right faces are darker shades of the same hue, creating genuine 3D-box illusion using pure CSS skew transforms.

## Prompts for Implementation

**Build this as a drifting, spatial scroll experience — not a sequence of sections.**

The viewport should feel like panning across a large drafting table. As the user scrolls, panels don't just appear from below — they drift in from oblique angles (transform origin varies per panel: some enter from upper-left, others from lower-right). Use `IntersectionObserver` with a threshold of 0.15 for triggering panel entrance animations.

**The isometric grid system:**
Every panel must be implemented as a CSS Grid or Flexbox item inside a parent with `transform: perspective(800px)`. Do NOT use real 3D CSS — simulate isometric using 2D skew/rotate transforms only (`skewX(-30deg)` etc). Each panel's content must be counter-rotated to remain readable.

**Panel entrance choreography:**
- Zone 1 panels: slide in from top-left at 45° (translateX(-80px) translateY(-80px) → 0,0)
- Zone 2 panels: rise from below (translateY(60px) → 0), staggered 120ms apart
- Zone 3 panels: scale from 0.85 to 1.0 with a 0.4s ease-out
- Zone 4 panels: no entrance animation — already visible, text typewriter-animates in
- Zone 5 panels: fade from opacity 0 with compass rose rotating in simultaneously

**The typewriter system:**
```
Characters appear one by one into a <span> element.
Each character gets its own <span class="char"> for potential per-character animation.
Cursor: a <span class="cursor"> with CSS animation blink 0.7s step-end infinite.
On completion of a line, cursor moves to next line position after 800ms pause.
Never use setInterval — use setTimeout chains only for precise control.
```

**Background isometric dot grid:**
```css
background-image: radial-gradient(circle, #4a7c2f 1px, transparent 1px);
background-size: 24px 20.78px; /* 20.78 = 24 * sin(60°) — true isometric spacing */
background-position: 0 0, 12px 10.39px;
```

**Vintage photograph treatment:**
All images use CSS filter: `sepia(0.8) hue-rotate(60deg) saturate(0.7) brightness(0.9)` as baseline. On hover, the filter animates toward `sepia(0.2) hue-rotate(60deg) saturate(1.2) brightness(1.05)` over 0.6s ease — as if a bit of color is being "developed" before your eyes.

**Sharp shadow system:**
```css
box-shadow: 4px 4px 0 0 #1a2e1a; /* no blur, no spread */
```
Apply to all panels. Never use blurred shadows anywhere in the design.

**Scrolling behavior:**
Use `scroll-behavior: smooth` but also implement a custom scroll listener that tracks scroll velocity. When velocity is high (fast scroll), panels that haven't entered the viewport yet briefly show only their isometric "edge" faces (left/right panels) before the full face reveals. This creates a fleeting 3D-book-page effect during fast scrolling.

**AVOID:** navigation bars, hamburger menus, hero CTAs, pricing blocks, testimonial carousels, stat grids, rounded cards, gradient backgrounds, any box-shadow with blur radius.

**BIAS TOWARD:** continuous scroll narrative, overlapping spatial panels, physical-object metaphors (notebook, drafting table, field journal), text that earns its place through animation and context, silence between elements.

## Uniqueness Notes

**Chosen seed:** aesthetic: isometric, layout: organic-flow, typography: handwritten, palette: forest-green, patterns: typewriter-effect, imagery: vintage-photography, motifs: sharp-angles, tone: energetic

**Differentiators from every other design in the registry:**

1. **Isometric + handwritten typography is genuinely unprecedented here.** Isometric aesthetics typically demand technical precision fonts (monospace, geometric sans). Using Caveat and Kalam as primary display faces against an isometric grid creates productive cognitive friction — the hand-drawn letterforms look as though they were physically written onto a blueprint. No other design in the registry attempts this collision.

2. **Organic-flow layout applied to isometric structure, not to curves.** "Organic flow" normally means fluid, curved, biomorphic layouts. Here it means panels that drift and scatter freely across the viewport — but each panel is geometrically rigid. The flow is in the spatial arrangement, not in the shapes themselves. This inverts the typical interpretation of the layout motif.

3. **Forest-green palette with vintage-photography duotone as a coherent system.** The sepia-to-forest-green duotone treatment makes every photograph look as if it was developed using photographic chemicals derived from the same forest the photographs depict. The palette is not just background color — it colonizes the imagery itself, creating total visual cohesion.

4. **Typewriter-effect used as narrative pacing tool, not decorative flourish.** Most typewriter implementations on the web are title animations that complete and disappear. Here, the typewriter is the primary pacing mechanism for an entire content zone (The Fieldwork), with character-level timing jitter that simulates actual mechanical keystroke variance. The experience slows the reader down to reading-pace deliberately.

5. **Sharp-angle motifs as anti-softness discipline.** Every design decision that might introduce softness (rounded corners, blurred shadows, smooth gradients) is explicitly replaced with its sharp-angle equivalent (bracket marks, hard-edged shadows, isometric chevrons). This is not brutalism — it is precision. The site enforces its own visual grammar through zero-tolerance for radius.

**Patterns avoided based on frequency analysis:**
- display-bold (5% — overused): using handwritten Caveat instead of bold display sans
- art-deco-display (5% — overused): isometric geometry is structural, not ornamental
- eclectic-hybrid (5% — overused): this design has strict visual grammar, not eclecticism
- serif-classic (5% — overused): zero serif fonts anywhere; handwritten + monospace only
- sans-grotesk (5% — overused): Josefin Sans used only at ultra-thin weight for labels, not as a primary voice
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:09:22
  seed: seed:
  aesthetic: mujun.study is a **kinetic field journal** — the visual language of a naturalist...
  content_hash: ff32e236a4b8
-->