# Design Language for munj.uk ## Aesthetics and Tone **munj.uk** is a site built from contradiction: the word *munj* evokes something blunt, monosyllabic, slightly mysterious — a sound-object, not a word with etymology. The `.uk` suffix is clipped British modesty. Together they suggest a studio or person who operates at the intersection of **meditative clarity and glowing excess** — a Zen monk who builds neon sculptures, a calligrapher who works in liquid light. The aesthetic is **Neon Zen** — Japan's *ma* (間, negative space) philosophy rendered in deep plum and electric amethyst, where emptiness is not absence but *charged stillness*. Think a ryokan corridor at 3am where someone has lined the shoji panels with ultraviolet LEDs. The geometry is crystalline and precise; the atmosphere is humid and glowing. **Tone:** Playful gravity. The site does not announce itself — it materialises slowly, like bioluminescence in still water. Text appears in short, almost haiku-length fragments. There is wit here but no jokes; wonder but no whimsy. The user is invited to *notice*, not to click. **Mood references:** - Hiroshi Sugimoto long-exposure theatres, but the screen shows a neon mandala - Kusama's infinity rooms, but the mirrors are obsidian - A Kyoto machiya interior, but every lacquered surface holds a faint chromatic glow --- ## Layout Motifs and Structure The page is a **single descending timeline spine** — a vertical timeline-vertical architecture where each entry is a *crystalline node* floating on a central vertical axis at a precise depth. This is not the typical "bullet list" timeline; it is a **branching crystal lattice** where nodes appear offset left and right of the spine in a deliberate asymmetric alternation (55% / 45% split), each node connected to the spine by a hairline that pulses with ripple energy when the viewport reaches it. **Structural logic:** - The spine is a single 1px line, colour `#4A0E2C` deepening to `#8B1A4A` as the user scrolls — it bleeds from dark root to glowing tip, top to bottom - Nodes are crystalline faceted diamonds (CSS `clip-path: polygon(50% 0%, 100% 30%, 100% 70%, 50% 100%, 0% 70%, 0% 30%)`) — not circles, not cards, not rectangles - Each node contains **one fragment**: a date-stamp, a short phrase (≤12 words), and a micro-illustration (inline SVG, ~80×80px) - Between nodes: vast negative space — at minimum 40vh of breathing room between entries - Navigation: a fixed left-edge vertical progress indicator, a single hairline with a travelling bead of `#E040FB` light - No header. No footer. No navigation bar. The spine IS the navigation. **Scroll behaviour:** - Ripple emanates from the spine connection point as each node enters view — a single ring wave, not a burst, travelling outward at 0.8s - The crystal node rotates 6° on entry (spring easing), settling into its resting orientation - Text within nodes fades in with a blur-to-sharp reveal: `filter: blur(8px) → blur(0)`, 0.6s **No grid systems. No columns. No flexbox rows for content.** Pure single-axis descent with crystallographic asymmetry. --- ## Typography and Palette **Typography (Google Fonts only):** - **Spine dates / micro-labels:** [Nunito](https://fonts.google.com/specimen/Nunito), weight 300, letter-spacing 0.18em, size 0.65rem. Rendered in `#6B2D5E` on the dark ground. Ultra-light, barely there — chronology as whisper. - **Node primary text:** [Fredoka](https://fonts.google.com/specimen/Fredoka), weight 400, size 1.1–1.4rem. Fredoka's rounded terminals carry the playful-rounded mandate without becoming childish — they feel like polished river stones, not cartoon bubbles. Used for the short node phrases. - **Accent / pull-quotes:** [Nunito](https://fonts.google.com/specimen/Nunito), weight 700 italic, size 1.8–2.4rem, colour `#E040FB`. For the rare longer fragment that deserves elevation — set ragged-right, max 18 characters per line, creating a haiku-like visual cadence. - **Micro-annotations:** [Fredoka](https://fonts.google.com/specimen/Fredoka), weight 300, size 0.7rem, `#4A0E2C` — timestamps, coordinates, silent metadata. **Palette — Deep Burgundy × Neon Glow:** | Role | Hex | Name | |------|-----|------| | Ground (base bg) | `#0D0208` | Obsidian plum | | Spine dark | `#4A0E2C` | Blood garnet | | Spine mid | `#8B1A4A` | Deep burgundy | | Spine tip glow | `#B5245F` | Pomegranate | | Crystal fill | `#1A0515` | Void amethyst | | Crystal edge | `#6B2D5E` | Dusty magenta | | Neon accent primary | `#E040FB` | Electric orchid | | Neon accent secondary | `#B388FF` | Lavender plasma | | Neon accent tertiary | `#F48FB1` | Neon blush | | Text on dark | `#F3E8F5` | Ghost lilac | | Micro-text | `#9C4B8A` | Muted violet | **Glow implementation:** The neon accents are *never* used as fills alone. Every instance of `#E040FB` is accompanied by a CSS `text-shadow` or `box-shadow` with 3 layers: tight (2px blur, 60% opacity), mid (8px blur, 40%), outer halo (20px blur, 20%). This creates the neon-tube emission quality without requiring WebGL. --- ## Imagery and Motifs **No photography. No stock. No raster images.** All imagery is inline SVG, procedurally composed from three element families: **1. Crystalline node icons (the primary motif)** Each timeline node carries a unique micro-SVG inside its faceted diamond shape. These icons are drawn from a crystalline vocabulary: prismatic shards, hexagonal cross-sections, geodesic triangulations, refracted light rays. Each is monochrome (single colour from the palette), filled with a subtle radial gradient from `#1A0515` centre to `#6B2D5E` edge, with a 0.5px stroke in `#E040FB` at 80% opacity. They are NOT icons in the conventional sense — they are *geological specimens*, as if someone found them in a riverbed made of frozen light. **2. Spine ripple rings** The ripple pattern — the only animation in the patterns seed that is used here — manifests as expanding hexagonal rings (not circular), drawn as SVG `polygon` elements that animate `scale(1)→scale(3)` with `opacity: 1→0` over 0.8s. The hexagonal ring choice is critical: it rhymes with the crystalline motif family without repeating it literally. One ring per node activation. Never stacked. Never looping. **3. Background: neon-glow particle field** The page background hosts a very sparse (`opacity: 0.06`) field of micro-dots (`r=1px`) scattered at pseudo-random positions, coloured in `#E040FB` and `#B388FF`. They twinkle via CSS `animation: pulse` with randomised `animation-delay` values (0–8s stagger). Density: approximately 40 dots per 1000×1000px viewport area. This creates the impression of a star field viewed through deep burgundy glass — present only at the periphery of perception. **Motifs summary:** - Crystalline: the structural language of every content container (faceted diamond nodes, hexagonal rings, prismatic micro-icons) - Neon-glow: the atmospheric layer (spine glow, text-shadow halos, particle field) - Negative space: the dominant "motif" — 70% of the viewport is empty deep burgundy ground at any given moment --- ## Prompts for Implementation **Conceptual framing:** munj.uk is a **single descending crystal vein** — imagine a geological cross-section of the earth where someone has drilled a narrow shaft and found, at each stratum, a small luminous fossil. Scrolling is geological descent. Each node is an artefact of a particular depth. The entire experience is one unbroken act of vertical discovery. **Macro structure (timeline spine, 7–9 nodes):** 1. **Node 0 — Emergence.** The spine line draws itself from top to centre over 1.2s on page load. No text yet. The particle field fades in. The first crystal node nucleates from a single point, growing outward via `clip-path` animation from `polygon(50% 50%, 50% 50%, ...)` to its final hexagonal form over 0.9s. The word "munj" appears inside in Fredoka 300, 2rem, `#F3E8F5`. Nothing else. 2. **Node 1 — First fragment.** Left-offset node (55% from spine). Contains a crystalline prism SVG and a ≤12-word phrase describing the studio's core act. The spine hairline pulses a single hexagonal ripple ring at its connection point. 3. **Nodes 2–6 — The vein.** Alternating left/right, each carrying one artefact: a time-anchor (year, season, or coordinate), a crystalline SVG specimen, a short phrase. Vast negative space between each. The particle field density increases slightly with depth (implemented via CSS custom property `--depth-factor` on `body`, incremented via JS IntersectionObserver as nodes enter viewport). 4. **Node 7 — Terminus.** The spine line ends in a small radiant burst — 6 crystalline shards firing outward via SVG `animateTransform`, then freezing. Text: the domain name again, this time in Nunito 700 italic, `#E040FB`, with full neon glow stack. The spine below this point glows brightest here. **Animation constraints:** - `prefers-reduced-motion`: replace all translate/scale animations with simple `opacity` crossfades. Ripple rings disabled. Particle field static. - No autoplay. No looping animations except the particle field pulse (which is ambient, not attention-grabbing at 6% opacity). - All transitions use `cubic-bezier(0.34, 1.56, 0.64, 1)` (slight overshoot, springlike) for node entry. Ripple rings use `cubic-bezier(0, 0, 0.2, 1)` (ease-out only). **CSS architecture notes:** - Use CSS `@property` to register `--spine-glow` as an animatable custom property (RGBA colour), enabling smooth colour interpolation along the spine as scroll depth increases. - The spine itself: a `::before` pseudo-element on a full-height wrapper div, `width: 1px`, with a CSS `linear-gradient` from `#4A0E2C` (top) → `#E040FB` (bottom). The gradient `background-size` is animated via JS scroll to reveal progressively. - Crystal node clip-path is applied to a `div` with `background: #1A0515`, border achieved via a slightly-larger parent div with `background: #E040FB` at low opacity (0.4) — not `border` property, as `clip-path` clips borders. **AVOID in implementation:** - No hero section with tagline + CTA button - No pricing cards, feature grids, testimonials - No sticky navigation bar - No scroll-jacking (only scroll-triggered, not scroll-controlled) - No background video - No parallax (overused at 77% — use ripple + scroll-triggered instead) --- ## Uniqueness Notes 1. **Zen × Neon-glow as genuine tension, not pastiche.** The corpus shows zen at 3% and neon-glow at 2% — but no design has combined them. Most zen designs resolve toward muted, beige, muji-adjacent calm. munj.uk inverts this: the zen is structural (negative space, silence, single-axis restraint) while the neon-glow is atmospheric (ambient, peripheral, barely-there). The tension between these two registers — emptiness and luminosity — is the entire design argument. 2. **Crystalline geometry as primary layout container.** The corpus shows crystalline at 5% as a motif, but in all instances it appears as decoration layered over conventional rectangular layouts. Here the crystal facet IS the content container — the `clip-path: polygon(hexagonal)` is applied to every content node. No rectangles. No rounded-rect cards. Pure crystallographic geometry as structural architecture. 3. **Timeline-vertical with hexagonal ripple instead of circular.** Timeline-vertical appears at only 2% in the corpus, making it strongly underused. The standard implementation uses circular node markers. munj.uk replaces every circular element with hexagonal/crystalline equivalents — the ripple rings are hexagonal polygons, the nodes are faceted diamonds, the micro-icons are prismatic specimens. The circular/organic impulse is entirely suppressed in favour of crystallographic precision. 4. **Neon glow via CSS shadow stacking, not WebGL/canvas.** The neon-glow imagery seed is typically implemented with canvas particle systems or Three.js. Here it is achieved purely via CSS `text-shadow` and `box-shadow` multi-layer stacks — 3 concentric shadow layers per glowing element. This keeps the file dependency-free (no JS library required for the glow effect) and ensures the glow degrades gracefully on low-power devices. 5. **Playful-rounded typography deployed at haiku scale.** Fredoka (playful-rounded seed) typically appears in large display contexts, used boldly. munj.uk uses it at body weight (400) and near-body sizes (1.1–1.4rem), where its rounded terminals create warmth without shouting. The playfulness is quiet — felt rather than seen. This inverts the standard playful-rounded convention and creates a typographic voice that is simultaneously friendly and austere. **Chosen seed:** aesthetic: zen, layout: timeline-vertical, typography: playful-rounded, palette: deep-burgundy, patterns: ripple, imagery: neon-glow, motifs: crystalline, tone: playful **Avoided overused patterns from frequency analysis:** - parallax (77% — replaced with scroll-triggered ripple) - stagger (55% — replaced with sequential spine-draw) - centered layout (85% — replaced with alternating asymmetric offset) - full-bleed sections (69% — replaced with single-axis spine with vast negative space) - scroll-triggered as primary motion (35% — used sparingly, only for node entry, not continuous)