# Design Language for mujun.work ## Aesthetics and Tone **mujun.work** exists in the visual register of a cryogenic research archive crossed with a spectral diffraction plate — the kind of place where light bends into color and meaning bends into paradox. The name *mujun* (矛盾) is the classical Chinese/Japanese paradox: the spear that pierces everything and the shield that stops everything, held simultaneously. The site does not resolve this tension; it *is* this tension. The aesthetic is **holographic-crystalline**: surfaces that appear flat until light catches them at an angle, whereupon hidden geometry becomes visible — depth, facets, prismatic dispersion. Not the cheap rainbow foil of concert merchandise, but the cold refraction of X-ray crystallography plates, of liquid crystal alignment layers photographed through crossed polarizers, of Bragg diffraction patterns on photographic film. The tone is **scholarly-intellectual but not academic in the dusty sense** — this is the intellectual energy of the physicist who stays up until 3 a.m. because the data is showing something impossible. Precision of language, exactness of form, zero tolerance for visual noise. Every element earns its presence. The page reads like a monograph whose author cared obsessively about the layout. The holographic aesthetic is deployed with restraint: not gradient rainbow everywhere, but precise moments where a single element catches and refracts — a headline that splits into spectral channels on hover, a divider line that diffracts at its midpoint, crystalline lattice structures as decorative geometry rather than background noise. ## Layout Motifs and Structure The layout is **hero-dominant** with a radically original interpretation: the hero does not sell, announce, or welcome — it *demonstrates the paradox*. The hero occupies 100vh, organized not as a banner but as a **split interference pattern** — two overlapping planes of content that create a moiré beat frequency where they overlap. The left plane carries the wordmark and primary concept in tight grotesque type; the right plane carries a crystallographic diagram — rotating, unhurried, crystalline. Neither plane wins. The overlap zone is where meaning lives. Below the hero, the page shifts to a **ruled-paper vertical rhythm** — tight horizontal bands 4rem tall, each containing exactly one thought. No cards, no grids, no columns. Content moves like entries in a laboratory notebook: date, observation, result. Each band is separated by a hairline rule at `#1a1a1a` on `#0a0a0a`, creating a micro-texture of lined paper in near-monochrome. **Spatial logic:** - Hero: 100vh, split 52/48 (left/right) with a 4vw overlap zone - Notebook bands: full-width, 4rem minimum height, `padding: 0 8vw`, left-aligned text - Section transitions: a 2px horizontal rule that refracts — it starts as a single line and fans into 3 spectral offset lines (R/G/B channels, each offset 1px) over 200ms when the viewport scrolls past - No rounded corners anywhere. No drop shadows. No card borders. Hard edges only. - Negative space is load-bearing: 40% of every visible area should be background **Scroll behavior:** The hero's crystallographic diagram continues to rotate as the user scrolls past; it does not stop at the fold. It remains visible as a fixed-position element, shrinking from 48vw to 6vw as scroll progress increases from 0 to 1, until it becomes a small crystalline glyph that settles permanently in the top-right corner — serving as the site's navigational anchor. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Primary Display / Wordmark**: [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk), weight 700. Grotesque-neo in character — the slight quirks in the `a`, `e`, and `G` give it optical intelligence. Used for the hero wordmark at `clamp(4rem, 10vw, 11rem)`, tracking `-0.04em`. All caps for the wordmark only. Never all-caps elsewhere. - **Secondary / Headings**: [`Space Grotesk`](https://fonts.google.com/specimen/Space+Grotesk), weight 400, for section headings at 1.25rem–2rem. Same family keeps the voice unified without using different typefaces for hierarchy — distinction comes from weight, size, and opacity, not font-switching. - **Body / Notebook entries**: [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 300 (Light), for all running text. The monospace register reads as laboratory notebook — precise, non-decorative, each character occupying the same column-width. Set at 15px / 1.8 line-height. Letter-spacing `0.01em`. - **Annotation / Metadata**: [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 400, at 11px, `opacity: 0.4`, for timestamps, coordinates, figure captions. Appears only in the notebook bands' left gutter (a 3rem-wide annotation column visible on screens >1200px). **Palette — strict monochrome with prismatic accent moments:** | Role | Name | Hex | |------|------|-----| | Deep background | Void | `#070709` | | Surface background | Slate | `#0f0f13` | | Band separator | Rule | `#1c1c22` | | Primary text | Paper | `#e8e8ec` | | Secondary text | Fog | `#7a7a88` | | Muted annotation | Ash | `#3e3e4a` | | Crystalline accent 1 (red channel) | Spectra-R | `#ff3a3a` | | Crystalline accent 2 (green channel) | Spectra-G | `#3affb8` | | Crystalline accent 3 (blue channel) | Spectra-B | `#3a8fff` | | Holographic shimmer (CSS only) | Prism | `linear-gradient(135deg, #ff3a3a 0%, #3affb8 50%, #3a8fff 100%)` | The three Spectra colors appear *only* as 1-pixel offset channel-split effects on hover states and the refracting rule line animation. In default state, everything is monochrome. The holographic reveal is the reward for interaction, not the baseline. ## Imagery and Motifs **Collage methodology — academic-forensic:** The collage aesthetic here is not scrapbook warmth but **evidence collage**: the way a physicist pins X-ray crystallography printouts, spectrograph readouts, and handwritten annotations to a corkboard and photographs the whole assembly. Images are treated as specimens under examination, not as aesthetic decoration. - **Crystallographic diagrams**: SVG-rendered Bragg diffraction patterns — concentric arcs of dots representing atomic planes, drawn in `#e8e8ec` at `opacity: 0.15` as ambient background texture for the hero's right plane. On hover, opacity rises to 0.6 and the outermost arcs begin slowly rotating (1rpm, CSS transform). - **Spectral interference fringes**: Thin horizontal bands of alternating near-black (`#070709`) and near-dark (`#0f0f13`), spaced 3px apart, occupying a 20vh band at the top of the hero. These are CSS-generated (repeating-linear-gradient) and create a scan-line / interference pattern texture without any image assets. - **Collage fragments**: Two or three irregularly-clipped image fragments (CSS `clip-path: polygon()`) placed in the hero overlap zone — these are abstract scientific imagery (electron microscope textures, polarized light microscopy color patterns) desaturated to near-monochrome with `filter: grayscale(90%) contrast(120%)`. They bleed into each other with no borders, cut at non-rectangular angles. - **Crystalline geometry motifs**: Recurring SVG decorative elements — a truncated octahedron wireframe (12px stroke, `#1c1c22`), a hexagonal close-packed lattice drawn as dots, a Miller index notation `[1̄10]` rendered in DM Mono as decorative text. These appear as section markers between notebook bands, replacing conventional dividers. - **Moiré texture**: A subtle CSS background using two overlapping radial gradient patterns at slightly different frequencies, producing a low-contrast interference pattern on the `#070709` background. Static, purely CSS, never distracting. **No photography**, no icons from icon libraries, no stock imagery. All visual elements are either CSS-generated or custom SVG. ## Prompts for Implementation **The story to tell.** A researcher named Mujun has been working on a problem that should be impossible. The site is their working surface — not a portfolio, not a product page, but an open notebook of the problem. The visitor arrives at the hero and sees the problem stated in two halves: a compressed proposition on the left (the spear), a rotating crystallographic structure on the right (the shield). As they scroll, they move through the notebook's pages, each band a single dated observation. Nothing is resolved. Everything is exact. **Hero implementation:** - Full-viewport, `display: grid; grid-template-columns: 52fr 48fr`, background `#070709` - Left plane: `Space Grotesk` wordmark `MUJUN` at clamp(4rem, 10vw, 11rem), weight 700, color `#e8e8ec`, tracking `-0.04em`. Below it, two lines of `DM Mono` at 15px: the paradox statement in original Chinese (矛盾) and a single declarative sentence about the work. Positioned `align-self: center; padding-left: 8vw`. - Right plane: a WebGL canvas (or Three.js) rendering a wireframe truncated octahedron rotating at 0.3rpm on the Y-axis, 0.1rpm on the X-axis. Geometry drawn as lines only (no faces), line color `#e8e8ec` at 40% opacity. On first load, the geometry assembles from scattered vertices over 2.4 seconds — vertices drift in from random positions, then snap into crystalline order. This is the only load animation. - Overlap zone (center 4vw): two desaturated image fragments bleed into each other at `mix-blend-mode: screen`, their edges clipped at 15-degree angles. Opacity 0.25 at rest. - Interference fringe texture (top 20vh of hero): CSS `repeating-linear-gradient(180deg, #070709 0px, #070709 2px, #0f0f13 2px, #0f0f13 3px)` layered over the hero at `opacity: 0.6`, pointer-events none. **Scroll narrative:** - On scroll, the crystallographic diagram in the right plane transitions to fixed-position, shrinking via CSS scale transform tied to `scrollY` progress (0→1 → scale 1→0.12). It settles as a 48×48px glyph in top-right corner after the hero exits the viewport. - Each notebook band enters from below with `transform: translateY(8px); opacity: 0` → `translateY(0); opacity: 1` over 400ms as it enters the viewport (Intersection Observer, threshold 0.2). No stagger — bands enter individually as they become visible. - The refracting divider: each `
` element is rendered as a single `#1c1c22` line. On viewport entry, it runs a 200ms animation that briefly fans into three 1px lines at `#ff3a3a` (–1px Y), `#3affb8` (0), `#3a8fff` (+1px Y), each at `opacity: 0.7`, then recombines into the monochrome rule. This runs once per divider, never loops. **Pulse-attention pattern:** The one element that pulses is the crystalline glyph in the top-right corner (after hero scroll). It breathes with a `box-shadow: 0 0 0 0 rgba(58, 143, 255, 0.4)` that expands to `0 0 0 12px rgba(58, 143, 255, 0)` over 2s on a loop. This is the only ambient animation on the page once the user has scrolled past the hero. It signals interactivity — clicking the glyph returns the user to the top and re-runs the assembly animation. **Typography details:** - No CTA buttons. No pricing blocks. No stat grids. No testimonials. - Notebook bands use `DM Mono` for all body text. The annotation column (left gutter, desktop-only) shows band numbers in `DM Mono` 11px `#3e3e4a`. - Headings in `Space Grotesk` 400 weight, never bold below the hero. Size hierarchy: 2rem → 1.5rem → 1.25rem → 1rem. - `letter-spacing: 0.12em; text-transform: uppercase` used only for category labels (4 characters max) in the annotation gutter — never in body text. **AVOID in implementation:** - No carousel, no slider, no testimonial rotator - No sticky navigation bar with hamburger menu - No hero "button" or "learn more" CTA - No card components with border-radius - No background gradients that are purely decorative (only functional: moiré, interference fringes) ## Uniqueness Notes 1. **Interference-pattern collage with scientific forensics framing.** The corpus uses collage (8%) almost always as warm, tactile, editorial. Here collage is forensic: clipped evidence fragments at mix-blend-mode screen, zero warmth, zero color except the prismatic 1px-channel-split reveals. This is the only design in the registry that frames collage as a physics experiment rather than an art school project. 2. **Monochrome palette with spectral channel-split as the sole accent delivery mechanism.** Most monochrome designs in the registry use a single accent color. This design uses three micro-accents that only appear together, only for 200ms, and only as an animation artifact (the refracting rule) or a 1px hover channel-split — never as fill colors or backgrounds. The three Spectra values are never visible simultaneously at rest; they exist only in motion. This is structurally unlike any other palette in the registry. 3. **Crystallographic diagram that persists across scroll as a navigational glyph.** The hero's right-plane 3D element does not disappear on scroll — it migrates, shrinks, and becomes the page's only navigational control. This morphs a decorative element into a functional one through scale transform alone, with no change in identity. No other design uses this scroll-to-navigation-icon pattern. 4. **Notebook-band layout with per-band Intersection Observer entry and annotation gutter.** The layout uses neither card-grid nor article flow but laboratory notebook pages: uniform-height bands, hairline ruled separators, a dedicated annotation column visible only at ≥1200px, and entry animations that fire once per band rather than per section. This rhythm is unprecedented in the registry — it reads as measured, not cinematic. 5. **Chosen seed from assignment:** aesthetic: holographic, layout: hero-dominant, typography: grotesque-neo, palette: monochrome, patterns: pulse-attention, imagery: collage, motifs: crystalline, tone: scholarly-intellectual 6. **Avoided from frequency analysis:** centered layout (85% — used as default everywhere, actively subverted here with the split 52/48 non-centered hero and ruled notebook bands), full-bleed layout (70% — the hero is full-bleed but every subsequent section is constrained to a precise band rhythm, not full-bleed), asymmetric layout (40% — avoided in favor of a formally balanced split with deliberate overlap zone), icon-heavy imagery (5% — zero icon library usage), organic-blobs motifs (5% — hard edges and crystalline geometry instead).