# Design Language for mujun.io ## Aesthetics and Tone mujun.io is a **holographic amber reliquary** — a single-column narrative experience that feels like peering through a glass vessel filled with warm honey at a slowly rotating 3D object suspended inside. The aesthetic sits at the precise intersection of holographic iridescence and honeyed warmth: the background shimmers with prismatic light-shift (the kind that catches the inner surface of an abalone shell or a CD tilted at 15°), but the color temperature is always pushed toward amber, gold, and parchment rather than the cold blue-violet typical of holographic design. The tone is **friendly without being chatty** — mujun.io speaks to you the way a thoughtful artisan describes their work: unhurried, precise, warm. It never shouts. It never sells. It simply presents, with confidence that the material is worth your time. Imagine a craftsperson who makes luminous objects — not explaining what they are, but letting you discover them through light and texture. The visitor arrives, the object rotates, the warmth of the amber light catches it differently every second, and understanding arrives organically. The mood draws on **liquid optics** — the way light refracts through glass, honey, water, and polished stone. The holographic shimmer is not chrome-laser-pointer iridescence; it is more like the soft spectral bleed you see in moonstone, fire opal, or a perfectly pulled espresso crema catching noon light. Everything has translucency; nothing is opaque. Even the text blocks feel like they are printed on vellum suspended over a glowing amber substrate. ## Layout Motifs and Structure The page is a **single vertical column, 680px max-width, centered**, with the site title anchored at the top and a slowly unfurling sequence of content sections below. This is an explicit choice against the registry's full-bleed sprawl — mujun.io is a column as a lantern: the form itself focuses the glow. The composition follows a **chandelier structure**: a single weighted element at top (the 3D render, floating), then progressively lighter content descending like chains of smaller crystal drops. Each section `fade-reveal`s into existence as the user scrolls — not a sudden pop, but a slow brightening, as if candlelight is illuminating that portion of the page from behind. Spatial grammar: - **Section spacing** uses a Fibonacci rhythm: 34px, 55px, 89px gaps between major zones - **The 3D hero object** occupies `60vh` centered, with a soft `box-shadow` halo in `#C8860A` at 30% opacity - **Text blocks** are set at 60ch max-width within the 680px column for optimal reading rhythm - **Particle field** lives in `position: fixed` as a full-viewport layer at z-index 0, moving at 0.3× scroll speed, creating the sense that the column is a glass tube descending through a slow amber nebula - **No navigation bar** — the entire experience is a single downward journey. A small `position: fixed` circular amber dot (12px) at bottom-right is the only persistent chrome, and it subtly pulses to indicate scroll depth The layout deliberately avoids: card grids, stat blocks, pricing rows, CTA buttons, icon-grid feature lists, and horizontal rules. There is no footer. The page ends on the final text passage, which fades to transparent, letting the particle field breathe. ## Typography and Palette **Typography (Google Fonts only):** - **Display / Hero title — [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond)** — the primary voice of mujun.io. Set at `clamp(52px, 9vw, 108px)`, `font-style: italic`, `font-weight: 400`, `letter-spacing: -0.02em`. The title shimmers: a CSS `background-clip: text` applies a subtle diagonal iridescent gradient (`#F5E6A3` → `#C8860A` → `#E8C47A` → `#A67C52`) that slowly animates its position over 8s, giving the letterforms a living, honey-dipped luminosity. - **Body text — [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond)** at `18px / 1.75`, `font-weight: 400`, `color: #3D2B1F`. Long paragraphs use `text-rendering: optimizeLegibility` and `font-feature-settings: "liga" 1, "kern" 1` for classical typographic quality. The Garamond optical size renders beautifully at this scale. - **Section labels / captions — [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond)** at `13px`, `font-weight: 300`, `letter-spacing: 0.18em`, uppercase. These sit above section headings in `#8A6A3A` at 70% opacity — whispered annotations rather than bold markers. - **Pull quotes / emphasis — [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond)** at `26px`, `font-style: italic`, left-indented 40px with a 2px left-border in `#C8860A` at 50% opacity. **Palette — Honeyed Neutral with Holographic Accent:** | Role | Hex | Description | |---|---|---| | Background deep | `#1A1208` | Near-black amber — the velvet inside the reliquary | | Background mid | `#2C1E0F` | Dark walnut — warmed shadows | | Column substrate | `#F5F0E8` | Warm parchment — the lantern glass | | Body text | `#3D2B1F` | Dark espresso brown — legible against parchment | | Amber primary | `#C8860A` | Saturated honey gold — the glow source | | Amber light | `#E8C47A` | Pale honeycomb — highlights | | Amber deep | `#7A4A10` | Burnt amber — shadow edge | | Holographic shift 1 | `#C2E8F0` | Ice-blue iridescence — the cold edge of the shimmer | | Holographic shift 2 | `#D4B8F0` | Soft violet iridescence — the purple edge of the shimmer | | Holographic shift 3 | `#B8F0D4` | Mint iridescence — the green-teal shimmer | | Particle warm | `#E8C47A` | Floating particles in the nebula field | | Particle cool | `#C2E8F0` | Occasional cool-spectrum particle sparkle | The holographic iridescence appears *only* in accent contexts (title shimmer, hover states, 3D object reflections, particle field), never in backgrounds or body copy. The page's thermal register stays warm amber; holographic is a controlled flash, not a wash. ## Imagery and Motifs **The 3D render as the centerpiece.** A single 3D-rendered object occupies the hero position: a floating, slowly rotating form that reads as simultaneously geological and manufactured — think a polished sphere of translucent amber with inclusions of light refracting inside it, or a multi-faceted crystal teardrop with a warm glow source at its center. This object is implemented as an inline `` WebGL scene (using Three.js with an `IcosahedronGeometry` at `detail: 4`, subdivided to near-sphere smoothness), with: - `MeshPhysicalMaterial`: `roughness: 0.05`, `metalness: 0.1`, `transmission: 0.92`, `thickness: 2.0`, `ior: 1.45` (approximating amber's refractive index) - Warm point light at `#C8860A` intensity 3.0, positioned at `(1.5, 2, 2)` - Cool rim light at `#C2E8F0` intensity 0.8, positioned at `(-2, -1, -1)` - Holographic color-shift in the environment map (an HDR-equivalent procedurally generated gradient sphere) - Continuous Y-axis rotation at 0.004 rad/frame, with a subtle bob on Y at amplitude 8px, period 6s **Particle motif.** The `position: fixed` particle field contains 180 particles: - 140 warm particles (`#E8C47A`, size 1.2–2.8px) drifting upward at 0.08–0.22px/frame with slight horizontal sine drift - 40 cool iridescent particles (`#C2E8F0` / `#D4B8F0`, size 0.8–1.6px) with 60% opacity, moving more slowly (0.04–0.12px/frame) - Particles reset to bottom when they exit the top; no recycling flicker - Canvas renders at `devicePixelRatio` for crisp rendering on high-DPI screens - The field is at z-index 0; the column content is z-index 10 **Holographic shimmer glyph.** A decorative SVG separator — a single horizontal thin line (1px, `#C8860A` at 30% opacity) with a small central diamond glyph (8×8px, rotated 45°) that cycles through `#C8860A` → `#C2E8F0` → `#D4B8F0` → `#B8F0D4` over 4s on a `color` animation. This glyph appears between major sections, replacing all traditional horizontal rules or decorative borders. **Typography as image.** The site uses no photography and no illustration. The large italic EB Garamond letterforms — especially in pull quotes — are treated as visual objects. The hero title has a `text-shadow` of `0 0 40px rgba(200, 134, 10, 0.4)` creating a soft amber glow bloom around the letterforms, blurring the boundary between type and luminous object. ## Prompts for Implementation Build mujun.io as a **single long-form vertical scroll through a lit amber chamber**, with a floating 3D object greeting the visitor at the top and each section of content breathing into view as the user descends. **Scene construction:** 1. `` background: radial gradient from `#2C1E0F` at center to `#1A1208` at edges. Full-viewport. 2. `` — position: fixed, inset 0, z-index 0, pointer-events: none. Initialize 180 particles on DOMContentLoaded. 3. `
` — max-width: 680px, margin: 0 auto, position: relative, z-index: 10, background: `rgba(245, 240, 232, 0.96)`, `backdrop-filter: blur(2px)`, padding: 80px 48px. The slight translucency lets the fixed particle field ghost through at the very edges. 4. Inside `.column`, the sequence: - `.hero-title` — EB Garamond italic, clamp(52px, 9vw, 108px), with animated gradient text via `background-clip: text` - `.hero-object` — 60vh canvas WebGL scene, centered, no border, `filter: drop-shadow(0 0 32px rgba(200, 134, 10, 0.35))` - Alternating `.section-label` + `.section-body` + `.section-divider` (the holographic diamond glyph) - Final `.coda` — last paragraph, text fades to opacity 0 at the very bottom via a CSS gradient mask **Fade-reveal animation (IntersectionObserver):** ```js const observer = new IntersectionObserver(entries => { entries.forEach(e => { if (e.isIntersecting) { e.target.style.transition = 'opacity 1.2s ease, transform 1.2s ease'; e.target.style.opacity = '1'; e.target.style.transform = 'translateY(0)'; } }); }, { threshold: 0.12 }); document.querySelectorAll('.section-label, .section-body, .section-divider').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(28px)'; observer.observe(el); }); ``` **3D object (Three.js via CDN):** ```js const geo = new THREE.IcosahedronGeometry(1, 4); const mat = new THREE.MeshPhysicalMaterial({ roughness: 0.05, metalness: 0.1, transmission: 0.92, thickness: 2.0, ior: 1.45, color: new THREE.Color('#E8C47A'), envMapIntensity: 1.4 }); // Warm key light const warm = new THREE.PointLight('#C8860A', 3.0); warm.position.set(1.5, 2, 2); // Cool rim light const cool = new THREE.PointLight('#C2E8F0', 0.8); cool.position.set(-2, -1, -1); // Animate: mesh.rotation.y += 0.004; mesh.position.y = Math.sin(Date.now() * 0.001) * 0.08; ``` **Iridescent title shimmer (CSS):** ```css .hero-title { background: linear-gradient( 112deg, #F5E6A3 0%, #C8860A 28%, #E8C47A 50%, #C2E8F0 68%, #D4B8F0 82%, #C8860A 100% ); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: shimmer 8s linear infinite; } @keyframes shimmer { to { background-position: -300% 0; } } ``` **Particle canvas loop:** ```js function drawParticles(ctx, particles, W, H) { ctx.clearRect(0, 0, W, H); particles.forEach(p => { ctx.globalAlpha = p.alpha; ctx.fillStyle = p.color; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fill(); p.y -= p.speed; p.x += Math.sin(p.y * 0.012 + p.phase) * 0.4; if (p.y < -p.r) { p.y = H + p.r; p.x = Math.random() * W; } }); } ``` **Avoid:** navigation menus, hamburger menus, pricing tables, feature grids, testimonial carousels, sticky headers, floating CTAs, social proof badges, footer nav trees, hero text with subtitle + CTA button stacking. This site does not sell. It illuminates. **Story arc through scroll:** - Top: The floating amber object. No words yet. The particle field breathes. The user looks. - First text: The title fades in, italic, glowing — a proper noun introduction. - Middle sections: Short meditative passages about the domain's essence, each separated by the holographic diamond glyph. - Lower third: A pull quote in large italic Garamond, indented, amber-bordered — a crystallization of the site's core idea. - Final passage: Short, unembellished, ends mid-thought, fades to invisible. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic: holographic, layout: single-column, typography: garamond-classic, palette: honeyed-neutral, patterns: fade-reveal, imagery: 3d-render, motifs: particle-effects, tone: friendly **Differentiators from the existing corpus:** 1. **Warm-holographic rather than cold-holographic.** The entire registry's holographic work trends cold (blue-violet-chrome). mujun.io is the only design that routes holographic iridescence through an amber-honey thermal filter — the shimmer is warm, the page smells like beeswax, the light source is a candle not a laser. 2. **3D object as the page's sole image.** No photography, no illustration, no SVG decoration except one small diamond glyph. The entire visual weight of the page rests on a single WebGL-rendered translucent amber sphere that rotates for the entire session. This is the `3d-render` seed used as pure presence, not as product-showcase chrome. 3. **Column as lantern, not as reading frame.** The single-column layout uses `backdrop-filter: blur(2px)` and `rgba` background to remain slightly translucent over the fixed particle field — the column *glows*, it does not simply contain text. Scrolling through it feels like descending through a luminous tube, not reading a blog. 4. **No ending.** The page has no footer, no nav, no CTA, and the final paragraph deliberately fades out at the bottom of the column. The user does not reach a conclusion; they reach a threshold. This anti-resolution structure is rare in the corpus and unique in combination with the amber-holographic aesthetic. 5. **Fibonacci spatial rhythm.** The section spacing uses Fibonacci values (34px, 55px, 89px) rather than arbitrary multiples of 8. This creates a subtly organic vertical rhythm that reads as classical and alive rather than grid-mechanical. **Avoided patterns (frequency-informed):** - No `shake-error` (overrepresented at 3%) - No `display-bold` typography (overrepresented at 5%) - No `sans-grotesk` (overrepresented at 5%) - No `serif-classic` generic treatment (overrepresented at 5%) — garamond-classic is chosen instead, a more specific and underrepresented variant at 2% - No `art-deco-display` or `eclectic-hybrid` (both 5%)