# Design Language for mujun.art ## Aesthetics and Tone mujun.art is a **botanical sci-fi observatory** — where chlorophyll diagrams meet orbital navigation overlays. The aesthetic is isometric illustration fused with HUD targeting reticles: imagine a botanist's field notebook transcribed by a spacecraft's AI copilot, rendered in electric ultraviolet and acid lime on a deep-space black ground. Every plant specimen is catalogued as if it were a mission-critical organism; every leaf vein doubles as a circuit trace. The dominant mood is **bold confidence** — not cold technical authority, but the swagger of a future naturalist who has mapped every flower on an exoplanet and is not apologetic about the neon. There is no pastels, no softness. The palette is dopamine-electric: a near-black void (#0A0A14) punctuated by voltage-lime (#B8FF00), electric violet (#7B2FFF), hot magenta (#FF1CF7), and luminous aqua (#00FFD1). Botanical forms are rendered flat and geometric, as if pressed inside a glowing display panel rather than a paper herbarium. Tone: bold-confident, maximalist in color but precise in layout. Not loud for its own sake — every neon accent has a structural reason. The site speaks to artists, illustrators, and digital naturalists who want their portfolio to feel like a statement. ## Layout Motifs and Structure The page uses a **centered isometric grid composition** — content lives inside an implied axonometric plane that tilts at 30°, giving flat panels a three-dimensional spatial logic without resorting to literal 3D rendering. All primary content blocks are centered within the viewport but are arranged on this isometric grid axis: cards and containers are slightly skewed to align with the 30°/60° isometric perspective, then "flattened" back to screen plane via CSS transform. The result feels like looking down at a glowing control room floor plan from directly above, with each panel a lit tile. **Grid system:** - Max-width: 1200px, centered, 24px gutter - Primary layout: a 3-column isometric panel grid for portfolio work, collapsing to 1-column on mobile - Each panel: rectangular with a 2px border in a rotating neon color (lime → violet → magenta → aqua), a top-left specimen label in all-caps mono, and a bottom-right taxonomy tag - Negative space is deliberate: ~40% of each panel face is void, black — neon content floats against darkness **Structural sections (top to bottom):** 1. **HUD MASTHEAD** (full-width, fixed, 48px): wordmark `MUJUN.ART` in variable-weight display type, centered. Flanked by two HUD bracket glyphs (⌐ ¬) that animate outward on load. Background: `#0A0A14` with a 1px bottom border that cycles through the four neon colors over 6 seconds. 2. **ISOMETRIC HERO PANEL** (100vh): a large SVG botanical specimen — a stylized cross-section of a stem showing cellular rings, rendered with isometric depth lines. Surrounded by HUD reticle marks: targeting brackets, coordinate readouts, specimen ID code. Headline in variable-weight type: wgt 900 to wgt 100 across the words `NATURE / SYSTEM`. 3. **SPECIMEN GRID** (portfolio): 3-column isometric card grid, each card a botanical illustration with neon HUD annotations. On hover: the card face "activates" with a fade-reveal of metadata — genus, medium, year — in a HUD overlay layer. 4. **PROCESS SIGNAL** (single wide panel): an isometric cross-section diagram showing the creative process as a botanical growth chart with HUD data layers. No stat grids, no numbers alone — always visual. 5. **CONTACT TERMINAL** (full-width): centered, minimal — just the email as a blinking terminal cursor and the wordmark again. **Fade-reveal is the sole interaction pattern:** no parallax, no scroll-triggered stagger (both overused at 77% and 55%). On scroll, panels fade in from 0 → 1 opacity with a single cubic-bezier ease; on card hover, HUD metadata layers fade in. No lifts, no springs, no magnetic effects. ## Typography and Palette **Typography — variable-fluid system, Google Fonts only:** - **Display / Wordmark:** `Syne` (Google Fonts) — a variable font with a uniquely constructed geometric character. Used at variable weight 400–800 for the hero headline `NATURE / SYSTEM`, animating weight fluidly on scroll (CSS `font-variation-settings: "wght" ...`). The weight shifts from 800 at the top of the hero to 400 at the bottom, giving a breathing, living quality. Letter-spacing: 0.08em at heavy weight, 0.16em at light weight. - **UI Labels / HUD Text:** `Space Mono` (Google Fonts) — 400 weight, used for all specimen labels, coordinate readouts, taxonomy tags, and the contact terminal. Reads as clinical and precise, matching the sci-fi HUD intent. - **Body / Descriptions:** `Syne` at 400 weight (same family, different weight) for portfolio descriptions. Coherent family, contrasted only by weight and size. No third family needed — the contrast comes from scale and color. **Fluid sizing (CSS clamp):** - Hero display: `clamp(3.5rem, 8vw, 9rem)` - Section headers: `clamp(1.5rem, 3vw, 3rem)` - Body: `clamp(0.875rem, 1.2vw, 1rem)` **Palette — dopamine-neon:** - `#0A0A14` — primary background, near-black with a violet undertone (not pure black) - `#B8FF00` — voltage lime, primary accent: wordmark, active borders, primary CTA text - `#7B2FFF` — electric violet, secondary accent: card borders, section dividers - `#FF1CF7` — hot magenta, tertiary accent: hover states, HUD reticle marks - `#00FFD1` — luminous aqua, quaternary accent: specimen coordinate readouts, terminal cursor - `#1A1A2E` — panel background (slightly lighter than void black), card faces - `#FFFFFF` — body text, used sparingly at 90% opacity for contrast - `#3D3D5C` — muted panel border (inactive state) ## Imagery and Motifs **Imagery is exclusively botanical-illustration in isometric-icon style** — no photography anywhere (photography is at 90% frequency in the corpus: fully avoided). All visuals are SVG botanical cross-sections and specimen diagrams: stem cross-sections showing cellular rings, leaf venation networks rendered as circuit-like trees, seed pod cutaways showing interior geometry. These are not soft watercolors — they are precise, angular, neon-outlined botanical diagrams that look engineered rather than observed. **Sci-fi HUD motifs throughout:** - **Targeting reticles:** SVG corner brackets placed at card corners. On hover, the brackets animate (scale from 120% to 100%, opacity 0 → 1) to "lock on" to the specimen. - **Coordinate readouts:** Each botanical panel has a ghost-text coordinate pair (e.g., `28.7°N / 77.2°E`) in `Space Mono`, `#00FFD1`, 10px — placed bottom-right of every card, visible at all times. - **Specimen IDs:** Each work item has a top-left label like `MJ-047 / FLORA.SYS` in `Space Mono`, `#B8FF00`, 11px. - **Isometric grid overlay:** A subtle SVG isometric dot-grid at 8px spacing covers the entire background at 4% opacity — enough to suggest the grid without overwhelming. - **Neon border cycling animation:** The masthead bottom border and card active borders cycle through the four neon hues on a 6-second CSS keyframe loop (`@keyframes hue-cycle`). **Botanical forms are geometric, not organic:** all curves are approximated as polylines or cubic bezier arcs with controlled handles — the aesthetic sits between a technical diagram and a design poster. ## Prompts for Implementation Build mujun.art as a **single-page botanical intelligence station** — a dark void lit by precise neon, every element a specimen under examination. No pricing blocks, no testimonial carousels, no stat grids. Pure atmosphere: dark science meets electric art. **Implementation priorities:** **1. The isometric dot-grid background (build first).** An SVG `` element tiled across the full viewport background inside the ``: ```css body { background-color: #0A0A14; background-image: url("data:image/svg+xml,..."); /* isometric dot grid */ } ``` The pattern uses two rows of offset dots at 8px spacing to create the isometric visual. Dots: 1px radius, fill `#3D3D5C`, opacity 0.35. This is the foundation — everything else layers on top. **2. The HUD masthead with border cycle animation.** Fixed position, 48px height, full width, `z-index: 100`. Wordmark `MUJUN.ART` centered in `Syne` 700, `#B8FF00`, 1.1rem, letter-spacing 0.12em. Flanking bracket glyphs `⌐` and `¬` in `#3D3D5C`, animating to `#B8FF00` on page load (opacity 0 → 1, translateX ±12px → 0, duration 0.8s ease-out). The bottom border: 1px solid, implemented as a pseudo-element with a hue-cycle animation: ```css @keyframes hue-cycle { 0% { border-color: #B8FF00; } 25% { border-color: #7B2FFF; } 50% { border-color: #FF1CF7; } 75% { border-color: #00FFD1; } 100% { border-color: #B8FF00; } } ``` **3. The hero specimen SVG.** A 600×400px SVG of a stylized stem cross-section — concentric ellipses (xylem rings) outlined in `#B8FF00` at 1.5px stroke, with radial lines at 30° intervals (like spokes) in `#7B2FFF` at 0.5px. The outermost ellipse has a dashed stroke. This SVG sits centered in the 100vh hero, with four HUD targeting bracket groups positioned at its cardinal corners via absolute positioning. The hero headline `NATURE / SYSTEM` is placed to the left of the SVG in `Syne` variable weight, 8vw, cycling weight from 800 to 200 across the two words. **4. The specimen card grid.** CSS Grid, 3 columns, `gap: 24px`, max-width 1200px, centered. Each card: `background: #1A1A2E`, `border: 1px solid #3D3D5C`, `position: relative`, `overflow: hidden`. Card contains: - Top-left label (`Space Mono`, 11px, `#B8FF00`): `MJ-047 / FLORA.SYS` - Bottom-right coordinate (`Space Mono`, 10px, `#00FFD1`): `28.7°N / 77.2°E` - The botanical SVG illustration fills the card center - A `.hud-overlay` div with `position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease` — on hover, `opacity: 1`, revealing metadata in a semi-transparent `#0A0A14cc` layer with fade-reveal pattern **5. Fade-reveal scroll entrance (the only animation pattern).** Use `IntersectionObserver` with threshold 0.15. Each card starts at `opacity: 0; transform: none` (no translateY — no slide-up, that's everywhere). On intersection: `opacity: 1`, transition `opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1)`. Pure opacity fade, nothing else. This differentiates from the stagger+translate approach in 55% of the corpus. **6. Syne variable font weight animation on scroll.** In the hero, the headline font-weight is driven by `scrollY`: ```js window.addEventListener('scroll', () => { const progress = Math.min(window.scrollY / window.innerHeight, 1); const wght = Math.round(800 - (progress * 600)); // 800 → 200 heroText.style.fontVariationSettings = `"wght" ${wght}`; }); ``` This is the primary "wow" moment — text visually lightening as you scroll into the content. **Avoid:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, parallax scroll (77% corpus), stagger animations (55% corpus), card lift on hover (overused), magnetic cursor (9% corpus). ## Uniqueness Notes 1. **Botanical-illustration as primary image vocabulary at isometric rendering style (corpus: 2%).** All 90%+ of the corpus uses photography. This design uses zero photography — only SVG botanical cross-section diagrams drawn in an isometric-influenced flat style. The "pressed botanical specimen" meets "spacecraft sensor display" intersection is not represented anywhere in the 306-design corpus. 2. **Variable font weight as the scroll-driven narrative engine.** Variable-fluid typography is at 7% in the corpus, but no design uses font-weight variation tied directly to scrollY as the primary motion event. The Syne headline weight drop from 800 → 200 as the user enters the page is the site's signature interaction — replacing the overused parallax (77%) and stagger (55%) patterns with a typographic animation that is both novel and semantically meaningful (the title "loosens" as you explore deeper). 3. **Dopamine-neon palette against botanical subject matter (corpus: 3%).** Dopamine-neon is used at 3% corpus frequency, but exclusively in tech/dev contexts (dashboards, APIs, code tools). Applying it to botanical illustration art creates cognitive dissonance-as-design: electric acid lime on stem cell diagrams, hot magenta on leaf vein networks. The contrast between the "soft science" subject and the "hard neon" palette is the site's conceptual core. 4. **Fade-reveal as the sole interaction pattern — no stagger, no parallax, no lift.** Fade-reveal is at 5% corpus frequency. Using it exclusively (no parallax at 77%, no stagger at 55%, no hover-lift at 11%) creates a quieter, more confident interaction language: content simply appears, like a specimen illuminating under a UV lamp. The restraint itself is a differentiator. **Chosen seed:** `aesthetic: isometric, layout: centered, typography: variable-fluid, palette: dopamine-neon, patterns: fade-reveal, imagery: botanical-illustration, motifs: sci-fi-hud, tone: bold-confident` **Avoided patterns from frequency analysis:** photography (90%), parallax (77%), stagger (55%), mono typography (78%), hand-drawn (59%), editorial (52%), warm palette (89%), gradient palette (78%), hover-lift (11%), centered layout noted as overused but assigned in seed.