# Design Language for mujun.dev

## Aesthetics and Tone

`mujun.dev` is a **light-academia sanctuary for slow thinking** — an illuminated manuscript that has been left open on a stone windowsill, afternoon light pooling across the vellum. The aesthetic sits at the precise overlap of a 19th-century botanical journal and a Japanese ma-informed reading room: unhurried, gathered, reverent of white space and the weight of ink on paper.

The tone is **zen-contemplative** — not the performative minimalism of tech portfolios, but the genuine quiet of a scholar who has spent years with rare pressed flowers and now wishes to share one carefully-chosen specimen at a time. The visitor does not scroll for information; they *settle* into reading the way one settles into a window seat.

The mood draws from:
- The warm cream of old book pages, slightly foxed at the margins
- Afternoon light through a studio window in late October — not golden-hour warmth, but the cooler amber of a sun already tilting west
- The deliberate irregularity of hand-ruled margins in a field notebook
- Burnt-orange ink used in 18th-century plant annotations — pigment mixed from madder and iron gall

There is no urgency on this page. No count-down timers, no notification badges, no anything that pulses. The page breathes at the speed of a reader turning a page.

## Layout Motifs and Structure

The layout is **asymmetric** — but asymmetry here means *eccentric balance*, not chaos. Think of a spread in a hand-bound Japanese album: the right page holds an illustration occupying three-fifths of the surface; the left holds five lines of calligraphy in the upper quarter and empty space below. The imbalance is intentional and restful.

**Primary composition rule:** The viewport is divided into a 5-column silent grid where columns 1–2 are reserved for marginalia, column 3 is structural gutter, and columns 4–5 carry the primary reading column. On mobile, all five columns collapse into one narrow centered strip.

**Macro structural zones:**
1. **Folio header** — extreme left, vertical text, rotated 90° counter-clockwise, running the full left edge of the viewport in small-caps; domain name and a single descriptive phrase. Fixed position. Text color: `#8B4513` (saddle-brown, the ink of the field notes).
2. **Marginalia column** (columns 1–2) — sparse, annotative. Contains: page numbers set in italic Cormorant Garamond, small pressed-flower SVG motifs at irregular y-intervals, and occasional single-word asides in #9E6B3C at 10px. This column feels like the handwritten notes a previous owner made in the margins.
3. **Primary content column** (columns 4–5) — wide enough to read comfortably (max 640px), left-aligned text, generous leading (1.85). This is the reading surface.
4. **The gap between columns** (column 3) — never filled. It is structural white space, the stitching of the spine.

**Scroll behavior:** The page does not scroll vertically in the traditional sense. Instead, it uses **folio-turn transitions**: sections are positioned as if on individual pages, and scroll triggers a linen-texture page-turn animation (CSS 3D transform with a slight crinkle gradient overlay). The Lottie animation provides an ambient botanical illustration that unfolds slowly as the reader reaches the second folio.

**Section rhythm:** Sections are deliberately unequal in height. Some are tall (an extended annotation fills two-thirds of the folio), some are brief (a single sentence and a botanical motif). The reader cannot predict the length of the next page.

## Typography and Palette

**Type system (all Google Fonts, verified):**

- **Primary display / section titles:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic. Used for all headings H1–H3. Set H1 at clamp(3.2rem, 6vw, 5.5rem), letter-spacing −0.02em. The italicized weight 300 has the same optical delicacy as the engraved lettering in a Redouté botanical plate. Section titles appear in `#5C2E0A`.
- **Body / reading text:** [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond), weight 400 regular, 18px / 1.85 line-height. The slightly more robust stroke width of EB Garamond (vs. Cormorant) creates a comfortable long-read texture. Set in `#2C1A0E`.
- **Marginalia / annotations:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond), weight 300 italic, 10–11px, tracking +0.08em. Set in `#9E6B3C`. Uppercase small-caps for folio numbers.
- **Accent / Lottie captions:** [`Lora`](https://fonts.google.com/specimen/Lora), weight 400 italic, 13px. Used beneath the Lottie animation panel only, as a specimen caption.

**Palette — six colors derived from burnt-orange + light-academia:**

| Role | Name | Hex |
|------|------|-----|
| Page ground | Vellum | `#F5EDD8` |
| Primary text | Iron gall ink | `#2C1A0E` |
| Heading / folio labels | Madder-brown | `#5C2E0A` |
| Accent / annotation | Burnt-orange ink | `#C4611A` |
| Marginalia / secondary text | Ochre-tan | `#9E6B3C` |
| Decorative rule lines | Foxed-paper | `#D4B896` |

Background: `#F5EDD8` (vellum). No black. No white. The entire site lives in the warm register of aged paper and iron-gall pigment.

**Hover states:** Links use `#C4611A` underline with 1px offset, transitioning from `#9E6B3C` on default. No color change on hover — only the underline thickens from 1px to 2px across 180ms ease-out.

## Imagery and Motifs

**Floral-botanical motifs are the visual language of this site.** Every decorative element is drawn from the vocabulary of 19th-century botanical illustration:

- **Pressed-flower SVGs** — six unique specimens, each drawn as single-color ink-line SVGs at 1px stroke, no fills (except one specimen with a faint `#D4B896` fill at 20% opacity for depth). Species represented: Rosa canina (dog rose), Anemone nemorosa (wood anemone), Papaver rhoeas (field poppy), Galium aparine (cleavers), Viola tricolor (wild pansy), and Artemisia absinthium (wormwood). Each SVG is placed in the marginalia column at an angle between −8° and +12°, as if dropped into the gutter.
- **The Lottie animation** — a single Lottie animation occupies a full folio-width panel at the transition between the first and second sections. The animation depicts a botanical illustration being drawn by an invisible hand: thin ink lines bloom outward from a single point, tracing the stem, then the leaves, then the petals of a Papaver in real-time. The animation plays once on scroll-enter (Intersection Observer trigger at 30% visibility), then loops gently from the bloom stage only (not re-drawing from the stem). Duration: 4.2s initial play, 2.8s loop. The Lottie fills the full panel width up to 960px, letter-boxed in `#F5EDD8`.
- **Vintage-photography integration** — one single photograph per folio, placed as an **inset** in the primary column, not a hero. Each photo is treated with a CSS `sepia(40%) contrast(0.92) brightness(1.08)` filter and given a 1px border in `#D4B896` with a box-shadow that mimics a glued-in photograph (`inset 0 0 0 4px #F5EDD8, 0 1px 3px rgba(44,26,14,0.18)`). Photos are sourced from public-domain archives (Biodiversity Heritage Library, Internet Archive). No modern stock photography.
- **Rule lines** — horizontal rules between sections are drawn as `#D4B896` at 0.5px, never full-width: they extend from the primary column's left edge only 60% of the column width, trailing off into white space as if the scholar stopped mid-stroke.
- **Folio numbers** — bottom-right of each folio section: small-caps Cormorant Garamond, `#9E6B3C`, preceded by a thin `×` mark.

## Prompts for Implementation

**The story to tell.** The visitor opens a field notebook that belongs to a botanist named Mujun — a scholar who has spent fifteen years documenting the flora of a mountain range that no one else visits. The notebook is not a portfolio. It is not a product pitch. It is a document of attention. The reader turns through five folios: the scholar's method, one specimen studied in detail, a letter to an unnamed correspondent about what it means to look closely, a list of unremarkable days that were remarkable, and the colophon.

**Implementation architecture:**

1. **Folio container system.** Each `<section>` has `position: relative; min-height: 100vh; display: grid; grid-template-columns: 2fr 1fr 3fr 5fr 5fr` (the 5-column silent grid). On `@media (max-width: 768px)` this collapses to `1fr` with all content in the single column, marginalia hidden.

2. **Folio-turn animation.** Build with CSS 3D perspective. On `scroll` (throttled via `requestAnimationFrame`), when the scroll position crosses a folio boundary, the departing section transforms: `rotateY(−180deg)` from a `transform-origin: left center`, revealing the incoming section underneath. The "page" surface uses a layered background: base `#F5EDD8`, then a subtle `radial-gradient(ellipse at 15% 80%, rgba(212,184,150,0.3) 0%, transparent 60%)` for paper aging, then a `repeating-linear-gradient` at 0.3px creating a faint laid-paper texture. The transform runs over 640ms with `cubic-bezier(0.4, 0, 0.2, 1)`.

3. **Lottie integration.** Load the Lottie animation with `lottie-web` (CDN: `https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js`). The animation JSON should be a hand-traced botanical line drawing — if a real Lottie JSON is not available, synthesize it using `lottie-web`'s programmatic API: define 8 shape layers, each an EB Garamond stroke path representing a plant segment, with `it` (trim) keyframes from 0 to 100 staggered by 200ms per layer. Play on Intersection Observer trigger at `rootMargin: '0px 0px -30% 0px'`.

4. **Pressed-flower SVG placement.** The six botanical SVGs are absolutely positioned within the marginalia grid columns. Their `top` values are set to specific fractions of their containing folio height (e.g., 22%, 58%, 81%) to create a scattered but intentional feel. On viewport entry (Intersection Observer), each SVG transitions from `opacity: 0; transform: rotate(calc(var(--angle) - 5deg))` to `opacity: 1; transform: rotate(var(--angle))` over 600ms, with a 120ms stagger per specimen. The `--angle` custom property is set inline per element.

5. **Folio-edge rotated text.** The left-edge vertical label is `position: fixed; left: 0; top: 50%; transform: translateX(-50%) translateY(-50%) rotate(-90deg); transform-origin: center center; white-space: nowrap`. It reads `mujun.dev × field notes` in small-caps Cormorant Garamond, `#5C2E0A`, 11px.

6. **Vintage photograph treatment.** Each `<figure>` with class `.specimen-photo` receives the sepia filter, the inset border (CSS `outline: 4px solid #F5EDD8; border: 1px solid #D4B896`), and a slight `transform: rotate(var(--photo-tilt))` where `--photo-tilt` is between −1.2deg and +1.8deg, set inline. This is the only non-axis-aligned content in the primary column.

7. **Typeface loading.** Load `Cormorant Garamond:ital,wght@0,300;1,300` and `EB Garamond:ital,wght@0,400;1,400` and `Lora:ital@1` via a single Google Fonts link. Use `font-display: swap` in a `<style>` block, and set `font-size: 112%` on `<html>` to prevent text-size-adjust artifacts on iOS.

8. **No JavaScript frameworks.** Vanilla JS only. The folio-turn, the Lottie trigger, the SVG stagger, and the scroll position tracker run in ~120 lines of vanilla JS. No React, no Vue, no build step in the final HTML.

**Bias toward narrative experience:**
- Do not add a navigation bar. The folio-edge label is the only persistent navigation.
- Do not add social sharing buttons, email capture forms, or any conversion element.
- The page ends with a colophon: italic EB Garamond, one short paragraph, centered in the primary column, followed by the Artemisia wormwood SVG and the final folio number.

## Uniqueness Notes

**Chosen seed (per assignment):** aesthetic: `light-academia`, layout: `asymmetric`, typography: `serif-classic`, palette: `burnt-orange`, patterns: `lottie-animation`, imagery: `vintage-photography`, motifs: `floral-botanical`, tone: `zen-contemplative`.

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

1. **Folio-turn page transitions as primary navigation metaphor.** The corpus uses parallax (77%) and scroll-triggered (36%) animations universally. This site replaces both with a single CSS 3D folio-turn that simulates a physical codex. There are no parallax layers, no scroll-triggered reveals of individual elements — only the turn of an entire page. This is the first folio-metaphor navigation in the registry.

2. **A 5-column silent grid with a dedicated marginalia zone.** The registry's asymmetric layouts (40% of sites) all use asymmetry at the content level — an image column and a text column, or a sidebar and a main area. This site uses asymmetry at the *grid architecture* level: two of five columns are permanently reserved for annotation and decorative marginalia, and are never used for primary content. The gap (column 3) is structural white space functioning as a book spine. No other registry entry treats the grid as a codex anatomy.

3. **Lottie animation as a botanical illustration being drawn in real-time, not as a UI element.** The corpus uses lottie-animation (3%) almost exclusively for loading screens, icon transitions, or logo reveals. Here, the Lottie occupies a full folio-width panel and depicts a single plant specimen being drawn by an invisible hand — the animation *is* the content, not a decoration around the content. The plant's lines bloom as the visitor arrives; the page waits for the drawing to complete before revealing the text beneath.

4. **Vintage photography used as inset specimens, not heroes.** Photography at 85% of registry sites is used as full-bleed heroes, background textures, or section dividers. Here, photographs are small, tilted, bordered like glued-in field specimens — they appear in the middle of reading, the way a scientist pastes a photo into a notebook. No photograph fills more than 35% of the column width.

5. **The entire palette lives in the warm register of aged paper and iron-gall ink — no neutral gray, no white, no black.** The registry's burnt-orange palette (2%) is typically used as an accent against a neutral white or off-white ground. Here, the page ground itself is vellum (`#F5EDD8`), and every color from body text to decorative rules is in the amber-brown-ochre family. The effect is that the page appears to be made of the same material as its botanical specimens.

**Patterns avoided due to overuse:**
- `parallax` (77%) — replaced by folio-turn
- `stagger` (55%) — replaced by specimen-drop botanical SVG reveals
- `scroll-triggered` (36%) — Lottie trigger is the only scroll-based event; folio navigation is position-based, not scroll-rate-based
- `asymmetric` layout (40%) — used per seed but implemented as codex-grid asymmetry, not the standard image/text split dominant in the registry
<!-- DESIGN STAMP
  timestamp: 2026-05-09T11:10:03
  domain: mujun.dev
  seed: but implemented as codex-grid asymmetry, not the standard image
  aesthetic: `mujun.dev` is a **light-academia sanctuary for slow thinking** — an illuminated...
  content_hash: cae289496130
-->