# Design Language for mujun.xyz

## Aesthetics and Tone

**mujun.xyz** is the digital presence of a singular creative practitioner — someone who works at the intersection of material culture and digital precision. The name *mujun* (矛盾) is the Japanese/Chinese word for "contradiction" — originating from the ancient paradox of an unstoppable spear and an impenetrable shield. The site embodies this contradiction without resolving it: raw geological weight against molten gold; silence against rupture; deep earth stillness against the digital tremor of glitch.

The aesthetic is **luxury-premium** with an earthy, grounded core — far from the cold gloss of fashion-house luxury or the chrome sterility of tech-luxury. This is the luxury of a hand-formed obsidian vessel, a lacquered black walnut slab, a slab of raw onyx with a vein of gold that formed over ten thousand years. The palette reads **gold-black-luxury** but the gold is not polished — it is the gold of tarnished bronze, of turmeric-stained stone, of candlelight held just far enough away. The black is not ink — it is the black of deep soil, of a kiln-fired ceramic before glazing, of a room with a single source of warm light.

The tone is **grounded-earthy**: unhurried, self-possessed, with long silences between statements. The site does not announce itself — it is simply present, the way a mountain is present. When glitch enters the frame, it is not decoration; it is a momentary crack in the surface, a reminder that the apparent solidity is a surface tension held over something formless and shifting beneath.

The creative influence is the meeting of **Brancusi's sculptural silence** and **Haegue Yang's material tension** — objects that hold their own gravity, arranged in a space that breathes.

## Layout Motifs and Structure

The layout is a **timeline-vertical** structure — but this is not a résumé-style bullet timeline. It is a geological timeline, the kind drawn by stratigraphers to show where one epoch ended and another began. The page is a single long vertical column read like a core sample bored from deep earth: each section is a stratum, laid down at a different pressure and temperature, with visible seams between them.

**Core composition rules:**
- The viewport is always a single column, 680px max-width, centered in space but not center-aligned in feel — it sits slightly left-of-center at 48% on wide screens, with the remaining 52% of the right as active negative space.
- There is no navigation bar. There is no sticky header. Wayfinding happens through the scroll itself — a thin vertical gold line (`#B89140`) runs along the left edge of the column from top to bottom, acting as a spine. Periodic short horizontal dashes extend from this spine into the content area, marking stratum breaks.
- Each stratum/section has a different density: some are spacious with a single large image and three lines of text; others are dense with a block of text set at small scale against a dark ground. The density alternation creates breathing rhythm.
- The page opens with a full-viewport-height hero: black ground, a single line of oversized display text in gold, and a glitch animation that runs once on load then freezes.
- Scrolling is governed by a subtle **zoom-focus** pattern: as a section enters the viewport, its primary visual element scales from 0.96 to 1.00 with a simultaneous opacity shift from 0.4 to 1.0 — like the eye adjusting its depth of field to land on each stratum.
- No cards. No grids. No feature rows. The only recurring structure is the stratum: a horizontal rule of earth, then content, then silence, then another rule.

**Spatial rules:**
- Minimum vertical padding per section: 120px top and bottom
- Maximum content width for text blocks: 480px (the column is 680px, so text has generous inset)
- Images always bleed to the full 680px column width
- Section labels (stratum names) appear as rotated text running vertically along the spine line, in a very small uppercase tracking-heavy sans, color `#4A3C2A`

## Typography and Palette

**Palette (exact hex values):**
- `#0A0804` — Deep Kiln Black: the primary background on dark sections; warmer than pure black, a trace of brown earth in it
- `#F5E6B8` — Aged Parchment: primary text color on dark ground; not white, never white — this is the color of handmade paper held to a window
- `#B89140` — Burnished Gold: all accent elements, the spine line, stratum dashes, hover states, glitch color channel displacement
- `#2C2318` — Scorched Umber: secondary background for mid-tone sections, body text ground
- `#6B5A3E` — Weathered Bronze: tertiary accent, used for de-emphasized text, section labels, subheadings
- `#E8D5A0` — Warm Highlight: catch-light equivalent used on image overlays and pull-quote backgrounds, near-transparent at 12% opacity

**Typography:**

- **Display / Primary Headlines:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 300, italic, set at `clamp(4.5rem, 10vw, 9rem)`. Cormorant's razor-thin strokes at extreme scale create a tension between delicacy and dominance that is exactly the site's contradiction. No letter-spacing adjustments — the natural spacing at large sizes has an aristocratic ease. The hero wordmark sits at 9rem on desktop.
- **Subheadings / Stratum Labels:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — weight 200, uppercase, letter-spacing 0.35em, 11px. This near-disappearing whisper of a sans beneath the Cormorant giants creates the tension between the geological label and the formation itself.
- **Body Text:** [Lora](https://fonts.google.com/specimen/Lora) — weight 400, set at 17px / 1.85 line-height, max 480px measure. Lora's ink-trap serifs and slightly irregular stroke widths carry the warmth of letterpress without nostalgia.
- **Accent / Pull Quotes:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — weight 300, italic, 1.8rem, set in `#B89140` gold. Pull quotes are not blockquoted — they are set inline but at display scale, breaking the text flow like a vein of quartz in stone.
- **Glitch Text (hero only):** Same Cormorant display, but with CSS `text-shadow` displacement on three color channels: one frame offset 2px in `#B89140`, one -2px in `#2C2318`, held in a subtle loop that fires on hover and on load.

## Imagery and Motifs

**Primary image treatment: glitch-art applied to material photography**

Photography exists — but only imagery of material surfaces and forms. Never faces. Never humans in frame. The subject matter is: raw stone, fired ceramic, scored earth, hand-formed clay, darkroom prints, textile grain, tarnished metal. Each photograph is processed with a **glitch-art treatment** that is not RGB-channel-split chaos but precise and controlled: a single horizontal band of channel displacement, 3–8px wide, positioned at a specific point in the image (never the center, always at a natural fault line in the composition). The band appears to vibrate slightly — a 0.8s loop, very subtle — as if the image is straining to hold its material integrity against digital substrate.

**Flowing-curves motifs (SVG, inline):**

The site's recurring decorative language is **flowing curves**: not the balloon-animal organic blobs of web 3.0, but slow geological curves — the silhouette of an eroded mesa, the line of water smoothing over stone, the cross-section of a river delta. These appear as:
- Very thin SVG path lines (`stroke: #B89140`, `stroke-width: 0.5px`, no fill) that appear at stratum boundaries, each one unique
- A single large background SVG in the hero: a slow sinusoidal curve, very low amplitude, that drifts leftward at 0.02px/frame using a CSS animation — barely perceptible motion, like heat shimmer
- A path-draw-svg animation on first load: the spine line itself draws from top to bottom over 1.2 seconds

**No photography of people, no stock imagery, no icon fonts, no decorative emoji, no geometric patterns.**

**Glitch sequence on load:**

1. Page loads: pure black, 200ms
2. The hero text appears character-by-character with a `typewriter-effect` — but using Cormorant at full display weight, so each character arriving feels monumental
3. At 100% text revealed, a single full-width glitch flash: the entire viewport displaces horizontally by 6px for 80ms then snaps back
4. The spine line begins its path-draw animation
5. Scroll prompt appears: a single thin downward-pointing Cormorant italic chevron `↓` in gold, fade-in at 600ms

## Prompts for Implementation

**The story:** A visitor is handed a core sample from a deep borehole. Each section is a layer they push through: the studio's presence, their working method, a selected work, a material statement, a contact layer. There is no salesman. There is no CTA. The work presents itself; the person is already here.

**Scroll behavior:** Implement `IntersectionObserver` for every stratum section with threshold 0.15. On entry: the section's primary visual scales from 0.96→1.00 (CSS transform, 600ms ease-out) and opacity 0.4→1.0 (400ms ease-out). This is the `zoom-focus` pattern — the depth-of-field settle of an eye arriving at something.

**Glitch implementation:** Use CSS `@keyframes` with `clip-path` to create the horizontal band displacement. The band position is a CSS custom property `--glitch-y` set per image. The animation runs on `hover` for images, on load for the hero. Three keyframe stages: normal → displaced (3px, color channel shift via `text-shadow` or `filter: hue-rotate(40deg)` on a duplicate layer) → normal. Duration 0.8s, `steps(1, end)` timing to make it feel digital rather than smooth.

**Spine line:** The left-edge gold line is a CSS `border-left: 1px solid #B89140` on the main column container, with `height: 0` at page load and CSS animation `height 1.2s ease-out` reaching `100%`. Section dashes extend from it as `::before` pseudo-elements with `width: clamp(20px, 4vw, 40px)`.

**Color scheme toggle:** No. Dark mode only. The earth is always the same depth.

**Avoid:** Hero CTAs, "Book a call" buttons, pricing panels, stat grids (`87% client satisfaction`), testimonial carousels, logo bars, sticky navigation, modal overlays, cookie banners styled with brand colors, any element that would be at home on a SaaS landing page. This is not a SaaS landing page. This is the inside of a stone.

**Immersive detail:** The `<title>` is just `矛盾`. The favicon is a tiny 16×16 black square with a single gold pixel at center. The `<meta name="description">` is left empty. These are deliberate.

**Section sequence:**
1. Hero — the name, the contradiction, the glitch
2. Stratum I: Practice — what this person does, in one Lora paragraph
3. Stratum II: A work — full-width glitch-treated image, one sentence caption in gold italic
4. Stratum III: Method — body text on dark umber ground, a pull quote in display gold
5. Stratum IV: Another work — image, different aspect ratio, different glitch band position
6. Stratum V: Presence — contact, sparse, one line, no form

## Uniqueness Notes

1. **Contradiction as structural principle, not decoration.** No other registry design uses the meaning of its domain name as the organizing logic of the visual system. The tension between luxury-premium and grounded-earthy is not a surface styling choice — it is load-bearing, structuring the palette, the typography scale contrast, the glitch-against-stone imagery treatment.

2. **Timeline-vertical as geological stratigraphy, not UI timeline.** At 2% frequency, timeline-vertical is already rare. No other design in the registry treats it as a core-sample geological form with a physical spine line, stratum labels running vertically, and density variation between layers. The typical timeline-vertical in the corpus is a résumé or project chronology with bullets.

3. **Glitch-art as controlled fault-line, not cyberpunk decoration.** Glitch-art sits at 2% in the registry and is consistently used in cyberpunk/tech contexts with RGB-channel-split chaos aesthetics. This site uses glitch as a single horizontal band at a natural image fault line — geological fracture logic, not digital corruption aesthetic. The restraint makes each instance of glitch feel like a real event rather than a style.

4. **Oversized-display typography in a non-grotesque face.** At 5% frequency, oversized-display almost exclusively uses grotesque/condensed sans faces (Bebas Neue, etc.). Using Cormorant Garamond at 9rem creates a display presence that is simultaneously monumental and fragile — the hairline strokes of a 300-weight italic at that scale have a tension no grotesque achieves.

5. **Palette avoidance of white.** The registry uses photography at 89% and white backgrounds at high frequency. This design uses `#F5E6B8` (aged parchment) as the lightest value — never pure white — and uses no photography of people, only material surfaces. This makes the site's warmth feel material and earned rather than sterile and produced.

**Chosen seed (from assignment):**
aesthetic: luxury-premium, layout: timeline-vertical, typography: oversized-display, palette: gold-black-luxury, patterns: zoom-focus, imagery: glitch-art, motifs: flowing-curves, tone: grounded-earthy

**Avoided patterns (from frequency analysis):**
- hand-drawn (59%) — not used
- editorial layout (51%) — not used
- photography-as-hero (89%) — subverted: material surfaces only, never people
- centered layout (85%) — subverted: column sits at 48%, not centered
- full-bleed (69%) — avoided as primary layout logic
- mono typography (77%) — avoided; using serif display + humanist serif body
- parallax (77%) — avoided entirely
- stagger animation (55%) — replaced with zoom-focus
<!-- DESIGN STAMP
  timestamp: 2026-05-09T13:35:47
  domain: mujun.xyz
  seed: seed
  aesthetic: mujun.xyz** is the digital presence of a singular creative practitioner — someon...
  content_hash: f0f3597500e2
-->