# Design Language for mujun.wiki

## Aesthetics and Tone

Mujun.wiki evokes the atmosphere of a well-kept field journal — the kind a botanist carries through a spring meadow, its leather cover worn soft from seasons of use, its pages filled with pressed flowers, pencil sketches of root systems, and margin notes in looping handwriting. The overall mood is professional but deeply tactile: the site should feel like it was drawn before it was coded.

The hand-drawn aesthetic is not playful or naïve. It is precise and considered — the precision of someone who has spent years rendering the vein structure of a leaf or the spiral geometry of a fern. Every line has intention. Every curve has the slight tremor of a skilled hand, not the wobble of an amateur.

Leather texture grounds the interface. Think the cover of that field journal: natural-tan or chestnut, slightly embossed, with the ghost of stitching at the edges. This texture appears as a recurring surface element — header backgrounds, sidebar panels, card backs — rendered via CSS blend modes and SVG filter noise so it breathes rather than tiles.

Spring is the seasonal metaphor: not explosive or garish, but the quiet arrival of growth. Pale green shoots against cream. A violet that hasn't yet committed to becoming purple. The blush of the first cherry blossom before the petals open.

The tone sits firmly in the professional register: mujun.wiki is a knowledge repository, not a lifestyle blog. The hand-drawn aesthetic serves intellectual seriousness, not whimsy. Imagine a senior researcher who also happens to illuminate manuscripts in her spare time.

## Layout Motifs and Structure

The core layout is an **organic-flow scroll** — not a grid, not a masonry wall, but a single long vellum scroll that the reader unrolls downward. Sections do not snap to column boundaries. Instead, content rivers around botanical illustration elements: a sprig of wisteria that occupies the left gutter for three hundred pixels, a cluster of seedpods that pushes the text column gently right, a full-width botanical divider that separates acts of the page.

**Navigation** lives along the left edge as a vertical vine: items are connected by a thin hand-drawn stem line, and the active item glows with a warm amber highlight as though someone pressed a wildflower there.

**Content blocks** use an asymmetric two-zone approach: a primary reading column at 62ch max-width floats slightly left of center (≈ 52% from left edge), while a narrow annotation zone (18ch) occupies the right side for pull-quotes, cross-references, and small botanical vignettes. These zones are not rigidly separated — annotation content occasionally bleeds into the main column, and the main column occasionally reaches into the annotation zone for emphasis.

**Section transitions** use hand-drawn botanical dividers: a single ink-line drawing of a botanical specimen (fennel frond, seed cluster, bramble branch) centered at full width, rendered as inline SVG so it scales perfectly and can be animated.

**Depth** is achieved through layering: the leather-texture ground sits at z=0, a cream parchment layer floats at z=1 with a subtle box-shadow suggesting the page hovering above the cover, and decorative botanical elements at z=2 cast soft SVG drop-shadows onto the parchment below.

Spacing is generous and non-uniform. Vertical rhythm follows a 10px base unit but sections breathe to multiples of 40–80px. No tight packing. White space (cream space) is structural.

## Typography and Palette

### Typefaces

**Primary body: Nunito** (Google Fonts) — weight 400 for running text, 600 for subheadings. Nunito's rounded terminals give every paragraph a softness that pairs naturally with hand-drawn illustration. Set at 17px / 1.8 line-height in the main column. The generous line-height reinforces the manuscript feel.

**Display headings: Comfortaa** (Google Fonts) — weight 700 for H1, 600 for H2–H3. Comfortaa's geometric-rounded construction reads as deliberate and crafted, never clunky. H1 is set at 52px with letter-spacing -0.02em; the slight tightening gives headers authority despite the rounded forms.

**Annotation / Pull-quote: Caveat** (Google Fonts) — weight 400–600. Caveat is a handwritten style that reads cleanly at small sizes and unmistakably evokes a scholar's marginalia. Used exclusively in the annotation zone and for labels on botanical vignettes. Never used for body copy.

**Monospace / code: DM Mono** (Google Fonts) — weight 400. For any reference strings, wiki syntax examples, or technical notation. The "DM" family's rounded sensibility keeps it in family with Nunito and Comfortaa.

### Palette

| Role | Name | Hex |
|------|------|-----|
| Ground / leather | Chestnut Tan | `#C4956A` |
| Page / parchment | Ivory Vellum | `#F5EFE0` |
| Deep text | Inkwell | `#2C2418` |
| Primary accent | Wisteria Bloom | `#9B7FA6` |
| Secondary accent | Fern Shoot | `#7A9E7E` |
| Tertiary accent | Cherry Flush | `#D4857A` |
| Highlight / active | Pressed Amber | `#D4A853` |
| Muted annotation | Aged Graphite | `#8A7E72` |
| Divider / rule | Dry Ink | `#BFB5A5` |
| Deep shadow | Tanned Shadow | `#8A6040` |

The dominant visual impression is `#F5EFE0` (parchment) over `#C4956A` (leather), with `#9B7FA6` (wisteria) carrying the primary interactive accent. The palette never goes cool — every color has a warm undertone, even the fern green and the wisteria violet.

CSS custom properties declared on `:root`, referenced everywhere. No hard-coded hex values in component rules.

## Imagery and Motifs

### Botanical SVG Library

The heart of mujun.wiki's visual identity is a library of **eight hand-drawn botanical SVGs**, each rendered as a single continuous SVG path with `stroke` rather than `fill`, using `stroke-width: 1.5` and stroke color `#2C2418` (Inkwell) at 70% opacity. These are:

1. **Fennel Frond** — used as the primary navigation vine connector
2. **Wisteria Cluster** — used as the hero left-gutter botanical, drooping from a horizontal branch at the page top
3. **Fern Unfurling** — used as section-opening decorative element (implies growth, new knowledge)
4. **Seed Cluster (three types)** — used as bullet-point replacements and list markers
5. **Bramble Branch** — used as horizontal section dividers
6. **Cherry Blossom Spray** — used as the favicon motif and logo mark
7. **Root System Fragment** — used as footer decoration, suggesting depth and grounding
8. **Pressed Flower Outline** (generic five-petal) — used for tag/category labels

All SVGs are inline so CSS can animate their `stroke-dashoffset` for draw-on effects.

### Leather Texture

The leather surface is generated via an SVG `<feTurbulence>` + `<feColorMatrix>` filter chain, applied as a pseudo-element background to the `<body>`. Base color `#C4956A`, turbulence `baseFrequency="0.65" numOctaves="4"`, with a `feBlend` in `multiply` mode layered over the flat color. The result is a surface that looks woven and worn without repeating visibly.

### Parchment Layer

The main content `<article>` sits on a parchment card with:
- Background: `#F5EFE0`
- Box-shadow: `0 4px 40px rgba(44,36,24,0.18)`
- Border: `1px solid #BFB5A5`
- A subtle radial vignette at all four corners using a radial-gradient overlay pseudo-element, darkening edges by 6% toward `#C4956A`

### Motif Animation

On scroll entry, botanical SVGs perform a **draw-on** animation: `stroke-dashoffset` animates from `100%` to `0%` over 1.2s with `easing: cubic-bezier(0.25, 0.46, 0.45, 0.94)`. The effect suggests the illustrator's hand completing a drawing as the reader arrives. This is triggered once per element via `IntersectionObserver`.

The navigation vine connector draws progressively as the user scrolls: `stroke-dashoffset` is driven by `scrollY` rather than a one-shot animation, so the vine literally grows as the page is read.

## Prompts for Implementation

**Core philosophy:** Every scroll event should feel like turning a page in a journal. The leather ground is always visible. The parchment floats. Botanicals emerge.

**HTML Structure:**
- `<body>` carries the leather texture filter and `#C4956A` base
- `<div class="scroll-wrapper">` is a single vertical scroll container, `overflow-y: auto`, `scroll-snap-type: none` (organic, no snapping)
- `<article class="parchment">` is the floating parchment card, `max-width: 900px`, centered with `margin: 0 auto`, `padding: 60px 80px 60px 60px`
- `<aside class="annotation-rail">` is absolutely positioned right of the parchment, `width: 200px`, for marginalia
- `<nav class="vine-nav">` is a fixed left-side navigation, `position: fixed; left: 40px; top: 50%; transform: translateY(-50%)`

**Animations to implement:**
1. `stroke-dasharray` / `stroke-dashoffset` draw-on for all botanical SVGs — use `IntersectionObserver`, trigger once
2. Scroll-driven vine nav growth — compute `scrollProgress = scrollY / (documentHeight - viewportHeight)`, map to dashoffset
3. Parchment parallax — the `<article>` moves at `0.95×` scroll speed relative to the leather ground (subtle, 5% offset), creating a hovering depth effect
4. Heading entrance — H1 and H2 use `opacity: 0 → 1` + `translateY(12px → 0)` over 0.6s on intersection, no bounce, no spring — smooth ease-out only
5. Annotation marginalia — when a paragraph containing a `data-note` attribute comes into view, the corresponding annotation in `<aside>` fades in with a Caveat-font handwritten style

**Palette application rules:**
- Active / hover states always use `#D4A853` (Pressed Amber) — the color of a flower pressed into the page
- Visited links use `#8A7E72` (Aged Graphite)
- Focus outlines use `#9B7FA6` (Wisteria) at 2px, offset 3px — visible but harmonious
- Never use pure `#000000` or `#FFFFFF` — use `#2C2418` and `#F5EFE0` throughout

**Avoid at all costs:**
- CTA blocks with bright fill buttons — any action links should look like marginalia annotations, not purchase buttons
- Pricing tables or stats grids — mujun.wiki is a knowledge space, not a product page
- Hero sections with centered headline + subheading + button — instead, the hero is the full leather cover experience: botanical illustration fading in over the leather ground, then the parchment card scrolling up from below
- Modal overlays or popups — entirely incompatible with the manuscript aesthetic
- Dark mode toggle — the palette is intentional and singular; a dark mode would destroy the leather/parchment contrast that defines the design

**Narrative arc of the page:**
1. **Cover** — full-viewport leather texture, wisteria cluster SVG drawing on over 2s, site name in Comfortaa 700 in Inkwell ink, no other elements
2. **Reveal** — after 2.5s (or scroll), the parchment article card slides up from `translateY(100vh)` to its natural position over 0.8s, ease-out
3. **Reading** — the long organic-flow scroll with vine nav tracking progress
4. **Footer** — root system SVG at full width, then a single line in Caveat: the domain name and year, centered, no links

## Uniqueness Notes

**Differentiators:**

1. **Scroll-driven vine navigation**: The left-side nav is not a static list — it is a living SVG vine whose stem grows as the user reads, with leaf nodes marking each section. No other design in this registry uses scroll-progress-driven SVG stroke animation as the primary navigation affordance.

2. **Leather-as-ground, parchment-as-content**: Most designs use a single surface. Mujun.wiki uses two deliberate material layers — leather ground (the journal cover) and parchment content card (the journal page) — with physics-suggesting parallax between them. The leather is never covered completely; it breathes at the margins.

3. **Caveat font for annotations only**: The handwritten font (Caveat) is strictly quarantined to the annotation zone and botanical labels. Body and headings use rounded geometric sans-serif (Nunito + Comfortaa). This strict font-role separation prevents the "design student chaos" trap of mixing handwritten fonts throughout, while still honoring the hand-drawn seed.

4. **SVG feTurbulence leather texture** (no image assets): The leather texture is generated entirely in SVG filter primitives — no JPEG, no PNG, no external image. This means the texture scales perfectly to any resolution, loads at zero bytes, and can be recolored via CSS variable without re-exporting assets.

5. **Draw-on botanical dividers as section breaks**: Instead of horizontal rules (`<hr>`) or decorative images, every section break is a named botanical SVG that draws itself as the reader arrives. The specific botanical matches the content section's theme (e.g., fern unfurling for "new topics", root system for "foundations").

**Chosen seed:** aesthetic: hand-drawn, layout: organic-flow, typography: rounded-sans, palette: creamy-pastel, patterns: spring, imagery: leather-texture, motifs: floral-botanical, tone: professional

**Avoided patterns (per frequency analysis):**
- `shake-error` (3% — error animation cliché, incompatible with manuscript calm)
- `display-bold` (5% — overused; this design uses rounded-sans display instead)
- `art-deco-display` (5% — overused; botanical/organic aesthetic is the counter-choice)
- `eclectic-hybrid` (5% — overused; mujun.wiki has a single unified material metaphor)
- Full-bleed hero with centered CTA (registry 85% rate — deliberately avoided via the cover-then-reveal structure)
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:09:10
  domain: mujun.wiki
  seed: seed:
  aesthetic: Mujun.wiki evokes the atmosphere of a well-kept field journal — the kind a botan...
  content_hash: 9f0dd978a3d2
-->