# Design Language for munju.wiki ## Aesthetics and Tone munju.wiki lives in the impossible space where a grandmother's herb garden has been threaded with fiber-optic cables -- where foxglove and lavender push through cracked circuit boards, where dew collects on copper traces, and where the warm smell of bread drifting from a stone cottage mingles with the ozone tang of electricity. The aesthetic is **cottagecore corrupted by technology**: not a gentle overlay of digital onto pastoral, but a genuine collision where neither side wins. The glitch is not decorative -- it is structural. It represents the moment where the pastoral ideal attempts to render itself digitally and the signal degrades, producing artifacts that are simultaneously broken and beautiful. The tone is **grounded-earthy** -- deliberate, unhurried, rooted in soil and certainty. There is no anxiety here, no startup urgency. The voice of the site speaks the way a blacksmith speaks: with weight, with pause, with the authority of someone who has shaped material with their hands. But that groundedness is constantly interrupted by digital tremors -- glitch artifacts that fracture the calm surface, reminding the visitor that this pastoral world exists inside a machine, and the machine is dreaming. The mood draws from the paintings of Samuel Palmer (his golden Shoreham period, where wheat fields glow with supernatural light), crossed with the corrupted VHS aesthetic of early net art -- Jodi.org's broken interfaces, Olia Lialina's "My Boyfriend Came Back from the War." It is the feeling of finding a handwritten recipe card inside a server rack. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture -- not the tired corporate parallax of hero images sliding behind text blocks, but a genuine depth-layered composition where the page is constructed as a series of full-viewport narrative chambers stacked along the scroll axis, each chamber occupying its own parallax depth plane. **The Depth Model:** The page is divided into five distinct parallax depth layers, numbered 0 (farthest) through 4 (nearest): - **Layer 0 (Sky/Background):** A continuous gradient field that shifts hue as the user scrolls, moving from dawn lavender (#D4C5E2) through midday sage (#A8C3A0) to dusk amber (#D4A574). This layer moves at 10% of scroll speed, creating the illusion of a vast, slowly-turning sky behind everything. CSS: `transform: translateZ(-400px) scale(5)` within a perspective container. - **Layer 1 (Landscape):** SVG-rendered rolling hills, hedgerows, and cottage silhouettes that drift at 30% scroll speed. These are not photographic -- they are flat, stylized shapes filled with CSS gradient patterns that subtly glitch: every 8 seconds, a random hill's gradient rotates 180 degrees over 200ms, then snaps back. The landscape is always visible through gaps in the content. - **Layer 2 (Content Frames):** The primary content lives in discrete rectangular frames that sit at 60% scroll speed. Each frame is styled as a torn piece of linen paper (`border: none; background: #F5EDE0; box-shadow: 4px 8px 24px rgba(58,42,28,0.15)`) with ragged edges achieved through SVG clip-paths that simulate hand-torn paper. Frames are never centered -- they alternate between 15% left offset and 25% right offset, creating an asymmetric, scrapbook-like rhythm. - **Layer 3 (Circuit Overlay):** Thin SVG circuit-trace lines (stroke: #6B8F71, stroke-width: 1px, opacity: 0.4) that connect content frames to each other, routing around obstacles like PCB traces. These lines move at 80% scroll speed, so they slide past the content frames, creating a sense of electronic connectivity threading through the pastoral layout. Periodically, a pulse of light (#A8E6CF at opacity 0.8) travels along a trace line from one frame to another. - **Layer 4 (Foreground Particles):** Water-bubble elements (CSS-only circles with radial gradients and `backdrop-filter: blur(2px)`) that float upward at 120% scroll speed (faster than scroll), drifting left and right with `sin()` CSS animation. Bubbles range from 8px to 60px diameter and carry a subtle lens-distortion effect where content behind them is magnified 1.05x. **Section Architecture:** Each full-viewport section transitions to the next through a **glitch gate** -- a 100px tall zone where all five layers momentarily desynchronize. During the glitch gate, Layer 1 shifts 40px left, Layer 3 shifts 20px right, and Layers 2 and 4 apply a `clip-path: inset()` animation that slices the content into 5 horizontal bands that briefly stagger before snapping back into alignment. The effect lasts 300ms as the scroll position passes through the gate zone, creating the sensation of the pastoral world buffering, breaking apart, and reassembling. **No centered layouts. No card grids. No pricing blocks.** ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- weight 400 italic. The high-contrast serifs and elegant swashes evoke hand-lettered farmhouse signage, herbarium labels, the title pages of Victorian botanical volumes. Used at 3rem to 7vw for section headings. `letter-spacing: 0.02em; line-height: 1.1`. The italic slant gives every headline a sense of forward motion, of wind bending wheat. Crucially, headlines are rendered with a CSS `text-shadow` that creates a subtle glitch-double: `text-shadow: 2px 0 #6B8F71, -2px 0 #D4A574` -- an RGB-split effect that fractures the pastoral elegance with digital interference. - **Body / Running Text:** "Libre Baskerville" (Google Fonts) -- weight 400 regular. A warm, readable transitional serif with generous x-height and open counters. It reads like a well-set book page, grounding the body content in literary tradition. Used at 1.05rem to 1.15rem, `line-height: 1.72; letter-spacing: 0.01em`. Paragraphs are set with `max-width: 38em` and `text-align: left` (never justified -- the ragged right edge is part of the organic aesthetic). - **Accent / Labels / UI:** "Space Mono" (Google Fonts) -- weight 400. A monospaced typeface that represents the circuit/tech side of the design language. Used for metadata, dates, tags, navigation labels, and any text that belongs to the "machine layer" of the site. Set at 0.8rem to 0.9rem, `letter-spacing: 0.08em; text-transform: uppercase`. Color is always #6B8F71 (sage) to visually separate it from the warm serif content. Space Mono text occasionally undergoes a glitch animation: individual characters randomly shift 1-3px vertically for 100ms, as if the monospace grid is destabilizing. - **Decorative / Pull Quotes:** "Caveat" (Google Fonts) -- weight 400-700. A handwritten script that reads like pencil notes scrawled in the margin of a garden journal. Used sparingly for pull quotes, annotations, and the occasional aside. Set at 1.3rem to 1.8rem, always rotated 1-3 degrees counterclockwise with `transform: rotate(-2deg)`, positioned as if casually placed on the linen-paper content frames. **This is eclectic-hybrid typography** -- four faces from four different traditions (elegant serif, literary serif, technical mono, casual script) unified by the cottagecore-meets-circuit-board narrative. The collision is intentional: each typeface represents a different voice in the conversation between the pastoral and the digital. **Palette:** The palette is **gradient-based** but built from earth tones and botanical greens rather than the neon gradients that dominate the portfolio. Every color is pulled from a real-world referent in the cottagecore landscape: | Role | Color | Hex | Source | |------|-------|-----|--------| | Primary Background | Linen Cream | #F5EDE0 | Unbleached linen fabric | | Secondary Background | Wheat Gold | #D4A574 | Ripe wheat field at sunset | | Primary Accent | Sage Circuit | #6B8F71 | Oxidized copper on a circuit board overgrown with moss | | Secondary Accent | Foxglove Pink | #C4789B | Digitalis purpurea petals | | Glitch Artifact | Lavender Static | #D4C5E2 | Lavender field seen through a corrupted video signal | | Deep Ground | Soil Dark | #3A2A1C | Rich garden loam | | Tech Trace | Patina Green | #A8C3A0 | Verdigris on aged copper traces | | Bubble Highlight | Dew Bright | #A8E6CF | Morning dew catching sunlight | | Text Primary | Bark Brown | #2E1F14 | Oak bark | | Text Secondary | Moss Gray | #5C6B5A | Lichen on stone | **Gradient Specifications:** - **Sky Gradient (Layer 0):** `linear-gradient(180deg, #D4C5E2 0%, #A8C3A0 35%, #D4A574 70%, #3A2A1C 100%)` -- this gradient spans the entire page height and shifts via parallax, so different sections see different "times of day." - **Content Frame Gradient:** `linear-gradient(135deg, #F5EDE0 0%, #EDE5D5 100%)` -- a near-imperceptible warm shift that prevents the linen backgrounds from feeling flat. - **Circuit Glow Gradient:** `radial-gradient(circle, #A8E6CF 0%, transparent 70%)` -- applied to pulse animations traveling along circuit traces. - **Glitch Band Gradient:** `linear-gradient(90deg, #C4789B, #D4C5E2, #6B8F71)` -- a tricolor band that flashes across content during glitch-gate transitions, chromatic aberration made visible. ## Imagery and Motifs **Water Bubbles as Living Elements:** The primary imagery mode is **water-bubbles** -- not decorative background dots, but volumetric, physically-simulated spheres that interact with the page content. Each bubble is rendered as a CSS element with layered radial gradients to create a convincing glass-sphere illusion: - Inner gradient: `radial-gradient(circle at 35% 35%, rgba(255,255,255,0.6) 0%, transparent 50%)` for the specular highlight - Outer gradient: `radial-gradient(circle, rgba(168,230,207,0.15) 0%, rgba(168,230,207,0.05) 70%, transparent 100%)` for the body - `backdrop-filter: blur(1px) saturate(1.1)` for the lens effect - `border: 1px solid rgba(168,230,207,0.3)` for the meniscus Bubbles spawn from the bottom of each parallax section and drift upward with varying speeds (CSS animation `bubble-rise` with random duration 6s-14s). They wobble horizontally using a secondary animation keyed to `sin()` via CSS `@property` custom properties. When a bubble crosses a circuit trace (detected via Intersection Observer), it briefly brightens and the trace pulses -- as if the bubble is carrying data through the garden's hidden network. **Large "hero" bubbles** (80-120px diameter) contain SVG drawings inside them -- tiny botanical illustrations of herbs (rosemary, thyme, lavender, sage) rendered in single-stroke line art (#3A2A1C). These illustrated bubbles rise more slowly and rotate gently, like specimens in a cabinet of curiosities that has been submerged in water. **Circuit Motifs:** The circuit motif is not mere decoration -- it is the site's nervous system. SVG circuit traces follow specific routing rules borrowed from actual PCB design: - Traces run only at 0, 45, and 90 degree angles (no curves, no arbitrary diagonals) - Traces maintain minimum spacing of 8px from each other - Junction points are marked with small filled circles (4px radius, #6B8F71) - Via holes (where traces connect between layers) are marked with concentric circles (6px and 3px radius) The traces connect content frames to each other, creating a visible information architecture. A frame about herbs connects via trace to a frame about recipes; a frame about seasons connects to a frame about planting calendars. The circuit is the site's sitemap made visible and tangible. **Glitch Artifacts:** Glitch is not random visual noise -- it manifests in three controlled ways: 1. **Chromatic Aberration:** Applied to images and headlines via CSS `text-shadow` or `filter` duplicating the element in offset R/G/B channels. The aberration is subtle (2-4px offset) and activates only on scroll or hover, creating a momentary sense that the pastoral image is a digital reproduction struggling to maintain coherence. 2. **Scan Lines:** A pseudo-element overlay on content frames creates faint horizontal lines (1px solid rgba(58,42,28,0.04), spaced 3px apart) that evoke both CRT monitors and the ruled lines of a garden journal. These scan lines occasionally shift 1px downward in a 60fps animation, creating a subtle rolling effect. 3. **Data Moshing:** During glitch-gate transitions between sections, content momentarily pixelates via `image-rendering: pixelated` combined with a rapid scale-down-and-up (`transform: scale(0.25)` for 1 frame, then back to `scale(1)`), creating the visual effect of a video codec struggling to decode the pastoral scene. **Decorative Patterns:** - **Pressed Flower Silhouettes:** Scattered across Layer 1, semi-transparent SVG silhouettes of dried flowers (#D4A574 at 15% opacity) appear pressed between the layers of the page, as if the site itself is a botanical press. - **Woven Linen Texture:** A subtle CSS repeating pattern (`repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(58,42,28,0.02) 2px, rgba(58,42,28,0.02) 3px)` overlaid with the same at 90 degrees) gives all content frames the tactile quality of woven fabric. ## Prompts for Implementation **Full-Screen Narrative Scroll Experience:** The site opens to a full-viewport pastoral scene: Layer 0's dawn-lavender gradient fills the sky, Layer 1's SVG hills rise from the bottom third, and a single content frame (Layer 2) fades in at center-left containing only the domain name "munju.wiki" set in Playfair Display Italic at 5vw with the characteristic RGB-split text-shadow. Below the name, in Space Mono at 0.8rem, a single line reads a subtitle in sage green. No navigation. No menu. No call to action. Just the name, the landscape, and the first bubbles beginning to rise from the base of the screen. As the user scrolls, the first glitch gate is encountered. The pastoral scene fractures -- the hills shift, the traces jitter, the content frame slices into bands -- and then resolves into the first narrative section. Each subsequent section is a full-viewport chamber containing one content frame (torn-linen-paper, asymmetrically placed) with text in Libre Baskerville, accompanied by Caveat annotations in the margins. Circuit traces weave between sections. Bubbles persist throughout, creating continuity across the fractured parallax space. **Animation Directives:** - All parallax transforms use `will-change: transform` and are driven by `requestAnimationFrame` throttled to 60fps, reading `scrollY` once per frame and applying transforms to all five layers in a single batch. No scroll event listeners -- use Intersection Observer for section activation and `requestAnimationFrame` for continuous parallax. - Bubble animations are pure CSS (`@keyframes bubble-rise` with randomized `animation-duration` and `animation-delay`). No JavaScript for bubble physics -- CSS is sufficient and more performant. - Glitch effects use CSS `@keyframes` with step timing functions (`steps(1)`) to create the abrupt, digital quality of actual glitches. No smooth easing on glitch animations -- they should snap, not transition. - Circuit trace pulses use SVG `` elements with `attributeName="stroke-dashoffset"` to create the traveling-light effect. Each pulse completes in 1.5s and fires every 4-8 seconds (randomized per trace). - The glitch-gate desync animation uses GSAP ScrollTrigger (if available) or falls back to Intersection Observer with CSS class toggling. The gate zone is a 100px scroll region; entering it adds `.glitch-active` to the section container, which triggers the CSS keyframes. **Interaction Model:** - **Hover on bubbles:** Bubble scales to 1.15x, inner botanical illustration (if present) becomes fully opaque, and the bubble's backdrop-filter intensity increases to `blur(3px) saturate(1.3)`. A Caveat-font label appears below the bubble naming the herb. - **Hover on circuit traces:** The trace brightens to full opacity and its connected content frames receive a subtle box-shadow pulse (`0 0 20px rgba(168,230,207,0.3)`), making the information architecture visible. - **Scroll momentum:** If the user scrolls rapidly, glitch artifacts intensify -- chromatic aberration offsets double, scan-line rolling speed increases, and more bubbles spawn. This creates a feedback loop where fast scrolling makes the digital corruption more visible, as if the rendering engine cannot keep up with the pastoral simulation. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, sticky headers, hamburger menus, cookie banners styled as content. This is a narrative experience, not a conversion funnel. **BIAS TOWARD:** Full-screen immersive chambers, environmental storytelling through layered parallax, emergent interactions between decorative elements (bubbles + traces), typography as mood-setting rather than information hierarchy, white space as breathing room rather than wasted pixels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Cottagecore Aesthetic at 0% Frequency:** No other design in the portfolio uses the cottagecore aesthetic. This is a completely uncharted visual territory -- the pastoral, domestic, handmade world of herb gardens, linen tablecloths, and pressed flowers has never been explored. By combining cottagecore with glitch and circuit motifs, this design creates a genre collision that has no precedent in the existing corpus: the digital pastoral, where technology does not replace nature but grows through it like ivy through brickwork. 2. **Parallax-Sections Layout at 0% Frequency:** While basic parallax scrolling appears in 76% of designs, the parallax-sections layout (full-viewport narrative chambers with depth-layered content) appears in 0%. This design treats parallax not as a background effect but as the fundamental spatial architecture -- five distinct depth layers that create a genuine sense of looking through a diorama or shadow box, each layer containing its own class of visual element. 3. **Water-Bubbles as Interactive Information Carriers:** Water-bubble imagery appears in only 2% of designs, and nowhere in the portfolio are bubbles used as interactive elements that carry content (botanical illustrations) and interact with other systems (circuit traces). The bubbles in this design are not decoration -- they are the site's primary dynamic element, connecting the organic (rising like air in water, containing plant drawings) with the digital (triggering circuit pulses on intersection). 4. **Eclectic-Hybrid Typography at 2% Frequency:** The four-font system (Playfair Display + Libre Baskerville + Space Mono + Caveat) creates a typographic conversation between pastoral elegance, literary gravity, digital precision, and handwritten intimacy. Each font represents a different narrative voice, and their coexistence on the page mirrors the aesthetic collision between cottagecore and circuit-board. 5. **Glitch as Narrative Device, Not Style:** While glitch-aesthetic appears at 12% frequency, it is always used as pure visual style. In this design, glitch is narratological -- it represents the tension between the pastoral ideal and its digital mediation. The glitch gates between sections are not random interference; they are the moments where the simulation reveals itself, where the garden admits it is running on hardware. This gives the glitch effects meaning beyond aesthetics. 6. **Grounded-Earthy Tone at 2% Frequency:** In a portfolio where 98% of designs use a friendly tone and 95% adopt a playful aesthetic, this design's grounded-earthy voice is a deliberate departure. There is no bounce, no exclamation marks, no "Hey there!" energy. The tone is patient, rooted, confident -- like the voice of someone explaining how to prune a rosemary bush while their fingers trace the copper paths of a circuit board. **Documented Seed/Style:** aesthetic: cottagecore, layout: parallax-sections, typography: eclectic-hybrid, palette: gradient, patterns: glitch, imagery: water-bubbles, motifs: circuit, tone: grounded-earthy **Patterns Avoided from Frequency Analysis:** - Centered layout (99%) -- replaced with asymmetric torn-paper frames offset left/right - Playful aesthetic (95%) -- replaced with cottagecore (0%) - Friendly tone (98%) -- replaced with grounded-earthy (2%) - Minimal imagery (94%) -- replaced with water-bubbles (2%) and circuit motifs - Mono typography dominance (99%) -- Space Mono is present but as accent only, not primary - Scroll-triggered as sole animation pattern (97%) -- glitch gates use scroll position but the core animations (bubbles, traces, parallax) are continuous CSS/SVG animations independent of scroll events