# Design Language for munju.org

## Aesthetics and Tone

munju.org inhabits the intersection of **goblincore** and **celestial luxury** — a paradox made beautiful. The visual world is an enchanted midnight garden: mossy, feral, and overgrown with iridescent flora, yet draped in aurora light that spills across the sky like liquid silk. Think a goblin's treasure hoard discovered inside a baroque observatory — tarnished silver candlesticks next to pressed wildflowers, a jar of luminescent mushrooms glowing beside an astrolabe.

The tone is **luxurious-strange**: unhurried, confident, slightly uncanny. The palette hums with the deep greens and earthy blacks of the forest floor, pierced by the aurora's shifting violet-to-teal gradients. Nothing is harsh. Nothing is corporate. Every surface has texture — bark, velvet, moth-wing, dew.

Mood references: Maxfield Parrish meets Arthur Rackham meets a bioluminescent forest at 2 a.m.

## Layout Motifs and Structure

**Centered single-column narrative**, built like a scroll of illuminated manuscript rather than a webpage. Content flows downward through distinct "chambers" — each chamber is a vignette with its own micro-atmosphere, separated not by horizontal rules but by negative space dense with floating particles.

- **Primary axis**: vertical center column, max-width 720px, left-right breathing room filled with bokeh orbs and drifting spores
- **Chamber structure**: each section is a self-contained world — a full-viewport-height panel with its own color temperature shift
- **Asymmetric decorative insets**: botanical illustrations and celestial diagrams float left or right of the text column at 15–20% opacity, never cropped, always softly vignette-blurred at the edges
- **No navigation bar** — the page is entered top to bottom like a ritual, with a single discreet anchor map: seven glowing constellation dots in the bottom-right corner mapping to seven chambers
- **Scroll behavior**: parallax depth — background bokeh drifts at 0.3× scroll speed, midground moss-texture panels at 0.7×, foreground text at 1×
- **Star map header**: the very top is a full-bleed aurora-sky canvas with the site name rendered as a constellation — letters connected by faint dotted lines, each letter node a pulsing star

## Typography and Palette

**Display / Headers**: Cormorant Garamond — used in italic for all H1/H2, weight 300–400. Tracking +0.04em. This is the voice of an ancient, elegant library.

**Body / Narrative**: EB Garamond — Regular 400, line-height 1.85, for all paragraph text. Warm, readable, old-book feeling.

**Accent / Labels**: Cinzel Decorative — used sparingly for section labels, drop caps, and the constellation letter marks. All caps, tracking +0.2em, font-size 0.7rem.

**Palette — Aurora on Forest Night:**
- `#0b0f0a` — void-black with green undertone (page base)
- `#111c0f` — deep moss shadow (chamber backgrounds)
- `#1b3a1e` — forest understory (card/panel fills)
- `#2d6e3a` — living moss (accent borders, dividers)
- `#4ecb71` — bioluminescent green (hover states, glow accents)
- `#7b4fa6` — aurora violet (gradient start, celestial highlights)
- `#3dbfb8` — aurora teal (gradient end, bokeh orbs)
- `#c8aaf0` — lavender mist (secondary text, soft labels)
- `#f0ead6` — aged parchment (primary body text on dark)
- `#ffd97d` — candlelight gold (star nodes, drop caps, Cinzel accent text)

**Aurora gradient**: `linear-gradient(135deg, #7b4fa6 0%, #3dbfb8 55%, #4ecb71 100%)`

## Imagery and Motifs

**Bokeh background**: Deep-focus photograph of a night forest — out-of-focus fireflies or dew drops rendered as soft circular light halos in teal and violet. This lives on a fixed `<canvas>` element behind everything, animated with slow drift (each orb moves on a sine path, 8–20s cycle, opacity 0.15–0.45).

**Spring botanical insets**: SVG illustrations of spring flora — oxalis, forget-me-nots, fern spirals, moth wings — drawn in a stipple/engraving style, rendered in `#2d6e3a` on transparent backgrounds. These float beside text chambers at reduced opacity.

**Star-celestial motifs**:
- The site title in the hero is a **constellation map**: each character is a glowing node (4px circle, `#ffd97d`, box-shadow `0 0 8px #ffd97d`) connected by dotted lines (stroke-dasharray 2 4, opacity 0.4)
- Section transitions include a subtle **star-field layer**: 80–120 tiny fixed stars (1–2px, white, opacity 0.1–0.3) rendered in SVG behind the content
- A **rotating astrolabe SVG** appears once, in the third chamber, spinning at 0.5 rpm — purely decorative, partially obscured by text

**Moss texture overlay**: A subtle repeating SVG moss-stipple pattern (tile 200×200px) overlays all dark chamber backgrounds at 4% opacity, giving the surface a living, organic granularity.

**Candle-glow dividers**: Between chambers, instead of `<hr>` tags — a single centered flame SVG (CSS-animated flicker, height 32px) flanked by two 120px dotted lines in `#2d6e3a`.

## Prompts for Implementation

Build this as **a single long-scroll immersive experience** — seven named chambers, each a full-viewport-height (or taller) section, entered sequentially from top to bottom. The reader is not browsing; they are *descending into an enchanted place*.

**Canvas layer (z-index 0, position: fixed):**
Animate 60 bokeh orbs on a `<canvas>` using `requestAnimationFrame`. Each orb: radius 20–90px, color sampled from aurora palette (`#7b4fa6`, `#3dbfb8`, `#4ecb71`), opacity 0.1–0.35, rendered with `ctx.filter = 'blur(28px)'`, drifting on independent sine/cosine paths. Orbs wrap at viewport edges.

**Constellation title (hero chamber):**
SVG overlay. Parse the site name character by character, place each as a node in an arc arrangement, connect with `<line stroke-dasharray="2 4">`. Animate each node with a CSS keyframe: `@keyframes star-pulse { 0%,100% { r: 4; opacity: 0.7; } 50% { r: 6; opacity: 1; } }`, staggered by 0.3s per character.

**Parallax chambers:**
Use `IntersectionObserver` to detect when each chamber enters the viewport, then apply a class that triggers a CSS transition (`transform: translateY(0); opacity: 1`) from `(translateY(40px); opacity: 0)`. Background layers use `background-attachment: fixed` for the moss texture.

**Aurora gradient text:**
All `<h2>` elements use `background: linear-gradient(135deg, #7b4fa6, #3dbfb8, #4ecb71); -webkit-background-clip: text; -webkit-text-fill-color: transparent`. Text shadows are disabled on gradient-clipped text.

**Botanical SVG floats:**
Each chamber may include one botanical SVG absolutely positioned (CSS `position: absolute; pointer-events: none`), outside the text flow, with `mix-blend-mode: screen` at 18% opacity. On mobile (<768px) these are hidden.

**Navigation constellation (bottom-right):**
A fixed `<nav>` of seven 6px star-dots arranged in a gentle arc, each linked to a chamber anchor. Active dot glows: `box-shadow: 0 0 10px 3px #ffd97d`. On hover, a tooltip appears with the chamber name in Cinzel Decorative, 0.65rem.

**Candle divider animation:**
```css
@keyframes flicker {
  0%,100% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
  25% { transform: scaleY(1.04) scaleX(0.97); opacity: 1; }
  75% { transform: scaleY(0.97) scaleX(1.02); opacity: 0.85; }
}
```

**Astrolabe (chamber 3):**
SVG with two concentric rings and degree markings. CSS `animation: rotate 120s linear infinite`. Positioned as a right-side float on desktop, centered and scaled to 40% on mobile.

**AVOID**: hero buttons, pricing tables, stat counters, testimonial carousels, sticky headers, hamburger menus, flat icon sets, white backgrounds.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic = **goblincore**, layout = **centered**, typography = **elegant-serif**, palette = **aurora-gradient**, patterns = **spring**, imagery = **bokeh-background**, motifs = **star-celestial**, tone = **luxurious**

**Differentiators from other designs in the registry:**

1. **Goblincore-luxury paradox**: No other design in the registry pairs feral forest aesthetics (moss, fungi, earth) with high-gloss celestial luxury. The tension between the two is the visual concept — decayed organic matter lit by aurora light.
2. **Constellation title typography**: The site name is not rendered in a font — it is a navigable SVG star map, each glyph a constellation node. This is distinct from all other typographic treatments in the registry.
3. **Seven-chamber descent narrative**: The page is structured as a ritual descent through seven distinct atmospheric chambers, each with its own color temperature shift, rather than scrollable sections of a conventional site.
4. **Animated candle-flame section dividers**: Replacing horizontal rules with a CSS-animated flame SVG flanked by dotted lines — a detail drawn from candlelit manuscript tradition.
5. **Avoided overused patterns**: frequency.sh showed `aurora-lights` at 5% (highest among aurora variants) — this design uses `aurora-gradient` (3%) instead, and deliberately avoids the flat, backlit aurora-sky cliché by anchoring the aurora palette in dark forest materials rather than open sky.
<!-- DESIGN STAMP
  timestamp: 2026-05-09T13:34:06
  domain: munju.org
  seed: seed
  aesthetic: munju.org inhabits the intersection of **goblincore** and **celestial luxury** —...
  content_hash: ff249506184b
-->