# Design Language for mujun.works ## Aesthetics and Tone mujun.works is a **chrome-lacquered confessional** — an avant-garde artist's portfolio staged as a single burning candle in a darkened studio. The name "mujun" (矛盾, Japanese for *contradiction*) is the thematic spine: beauty in opposition, stillness inside motion, the raw against the polished. Every surface is simultaneously molten-chrome and handwritten graphite, as if a calligrapher had scratched poetry onto a mirror. The visual register is **anti-corporate, anti-decorative** — no flourishes for flourish's sake. Chrome-metallic tones are not used as luxury signifiers but as reflective surfaces: mirrors that show the viewer their own attention. The handwritten layer floats above the metallic base like breath fogging glass, fragile and immediate. The overall mood is **raw-authentic** in the Lana Del Rey / Patti Smith sense — confessional and slightly imperfect, refusing the glossy approximation of feeling. Tone: introspective, confrontational, quietly defiant. The site does not ask permission. It burns. Inspiration touchstones: Cindy Sherman's self-portraiture, Ryuichi Sakamoto's minimal piano compositions, the texture of tarnished silver, a candle flame in a drafty room — light that is alive and slightly afraid. ## Layout Motifs and Structure The page is a **single centered column**, 680px maximum width on desktop, full width on mobile, anchored to the mathematical center of the viewport at all times. There is no sidebar, no grid, no card array. The centered column is not a compromise — it is a declaration: the work is singular, the gaze is fixed. **The Axis of Gaze.** A vertical chromatic thread — 1px wide, rendered in a `linear-gradient(to bottom, #C8C8CC, #8A8A8E, transparent)` — runs from the top edge of the viewport to the bottom, exactly centered at 50% horizontal. It appears on page load via a downward path-draw animation over 2.2 seconds. Everything on the page is oriented to this axis. **Five Cantos.** The page is divided into five full-height cantos, each `100svh`, separated only by the continuation of the axis thread. No dividers, no horizontal rules. The cantos: 1. **Ignition** — domain wordmark hand-lettered, candle flame SVG, a single sentence 2. **Contradiction** — the 矛盾 kanji rendered in large chrome type, rotating 180° on scroll-entry, a prose meditation beneath it 3. **Works** — the portfolio lattice: six project cells arranged in a 2×3 centered grid, each a chromatic square that reveals handwritten title on hover 4. **Echo** — a full-bleed gradient-mesh canvas that responds to cursor position, framed by two lines of calligraphic text top and bottom 5. **Coda** — contact, a final sentence, and the candle flame again, this time dim and nearly spent **Spacing.** Column padding: `clamp(24px, 6vw, 80px)` left and right. Vertical rhythm in units of `1.6rem`. No component exceeds 88% of column width. ## Typography and Palette **Typography — handwritten anchored by sharp grotesque, all Google Fonts.** Two families only. No third font. - **Handwritten Display: *Caveat***, weight 700 for large titles and 400 for annotations. Used at `clamp(2.8rem, 8vw, 7.2rem)` for the wordmark and canto headers. Letter-spacing `-0.01em`. Line-height `0.95` for headlines, `1.4` for body-level handwritten annotation. The italic axis is exploited for subcaptions. Caveat is chosen because it reads as authentic handwriting at scale without collapsing into illegibility at small sizes — it has the irregular baseline of a real hand. - **Grotesque Anchor: *DM Sans***, weight 300 for prose body and 600 for micro-labels. Used at `16px / 1.65` for body paragraphs, `11px / 1.2` uppercase tracked at `0.14em` for section identifiers. DM Sans's slightly humanist terminals stop the chrome palette from reading as cold corporate. **Color Palette — chrome-metallic with candle-amber accent:** | Role | Name | Hex | |------|------|-----| | Background | Void Black | `#0B0B0D` | | Primary Chrome | Mirror Silver | `#C4C4C8` | | Mid Chrome | Steel Fog | `#7C7C82` | | Dark Chrome | Burnished | `#3E3E44` | | Accent | Candle Amber | `#D4892A` | | Accent Dim | Tallow Glow | `#8A5218` | | Handwriting | Graphite | `#E8E8EC` | | Surface | Smoked Glass | `#161618` | Chrome is never used as fill — only as gradient, as shine, as edge. The `Candle Amber` appears in exactly one location per canto: a single glyph, a dot, a flicker. It is the only warm color on the page. ## Imagery and Motifs **Imagery is gradient-mesh and SVG candle flame — no photography, no raster stock.** **Gradient Mesh Canvas (Canto 4 — Echo).** A full-bleed `` element renders a live gradient mesh using 9 control points arranged in a 3×3 grid. Each point carries a color sampled from the chrome-metallic palette, ranging from `#0B0B0D` to `#5A5A62`. On `mousemove`, the nearest control point drifts 14px toward the cursor over 300ms using spring physics (`damping: 18, stiffness: 90`). The mesh is redrawn on `requestAnimationFrame`. The result: a subtly breathing metallic surface that responds to attention without calling attention to itself. **Candle Flame SVG (Cantos 1 and 5).** A single-path SVG candle flame, drawn as a teardrop with a slight asymmetric lean. In Canto 1 it is rendered at 48×80px, flame in `#D4892A`, wick in `#3E3E44`, with a `flicker` CSS animation: `transform: scaleX(1) skewX(0deg)` cycling to `scaleX(0.93) skewX(-2deg)` and back over `2.4s ease-in-out infinite`. In Canto 5 the same flame renders at 24×40px with opacity `0.4`, as if exhausted. **Chrome Text Motif.** The 矛盾 kanji pair in Canto 2 is set at `clamp(6rem, 18vw, 14rem)` in Caveat 700, colored via a CSS `background-clip: text` gradient: `linear-gradient(135deg, #C4C4C8 0%, #7C7C82 45%, #C4C4C8 70%, #3E3E44 100%)`. The gradient shifts on scroll-entry via a `background-position` animation that makes the chrome appear to catch light as the kanji enters the viewport. **Counter-Animate Pattern.** The six project cells in Canto 3 use a counter-animate entrance: cells in column 1 slide in from the left (`translateX(-32px) opacity 0 → 0 1`) while column 2 cells simultaneously slide from the right (`translateX(+32px) → 0`). The two columns arrive and settle at the same moment, creating a pinch-toward-center effect. Each cell's hover state reveals the handwritten Caveat title by animating `clip-path: inset(0 100% 0 0)` to `inset(0 0% 0 0)` over `0.5s cubic-bezier(0.16, 1, 0.3, 1)`. **Axis Thread.** The 1px vertical center-line continues through all five cantos, dimming in opacity section by section: `1.0, 0.6, 0.35, 0.18, 0.08`. By Canto 5 it is nearly invisible — a ghost of the structure that held everything together. ## Prompts for Implementation Build mujun.works as **a single-scroll meditation** — five cantos, one axis, one candle. The implementation must preserve the sense of a hand making marks on a reflective surface. Do not add testimonials, CTAs, pricing, feature grids, newsletter capture, social media icons in a row, or sticky navigation. The only persistent element across scroll is the faint axis thread. **Macro structure (top to bottom):** 1. **Canto 1 — Ignition (`100svh`).** Background `#0B0B0D`. The axis thread draws down over 2.2s on page load. The wordmark `mujun.works` in Caveat 700 fades in at `clamp(3.2rem, 9vw, 7.2rem)`, centered, 400ms after axis draw completes. Below it, in DM Sans 300 at 14px tracked `0.22em` uppercase: `"works of contradiction"`. The candle flame SVG appears 600ms later via `scale(0) → scale(1)` spring transition centered beneath the subtitle. Interaction: the flame responds to `mousemove` within 120px — it tilts `skewX` up to `±4deg` toward the cursor. 2. **Canto 2 — Contradiction (`100svh`).** The 矛盾 kanji pair enters viewport, triggering the chrome gradient-shift animation (1.1s). Beneath it, a prose meditation of 3–4 sentences in DM Sans 300, 17px, `#7C7C82`, max-width 480px, centered. A single `#D4892A` em-dash `—` in Caveat 400 serves as the only decorative mark between the kanji and the prose. 3. **Canto 3 — Works (`100svh`).** Six project cells, 2×3 grid, centered in column. Each cell is `aspect-ratio: 1`, background `#161618`, border `1px solid #3E3E44`, width `calc(50% - 12px)`. On hover: `border-color` transitions to `#7C7C82`, and the handwritten title clip-path reveals. No descriptions, no tags, no dates — title only. The counter-animate entrance fires when the grid enters `IntersectionObserver` at `0.3` threshold. 4. **Canto 4 — Echo (`100svh`).** Full-bleed gradient-mesh `` fills the entire canto background. Over it, positioned absolutely, two lines of Caveat 400 at 18px, color `#E8E8EC`, opacity `0.72`: one line at `top: 12%`, one at `bottom: 12%`. Both lines are handwritten-style annotation: e.g., `"you looked"` and `"it looked back"`. Canvas spring-responds to cursor. No other content in this canto. 5. **Canto 5 — Coda (`100svh`).** The spent candle flame, dim. A contact line in DM Sans 300 at 15px, color `#7C7C82`, centered: an email address. Beneath it, one final sentence in Caveat 400 at `clamp(1.2rem, 3.5vw, 2rem)`, color `#C4C4C8`. Below that, the axis thread ends with a hairline horizontal mark: `width: 40px, height: 1px, background: #3E3E44`, centered. **Animation principles:** - Entrance animations use `IntersectionObserver` — no scroll-jacking - Spring physics for organic feel: `stiffness: 80–100, damping: 16–20` - The counter-animate pinch uses a shared `AnimationController` with offset timing: column A fires at `t=0`, column B at `t=0`, both complete at `t=500ms` - The gradient-mesh canvas runs at native `requestAnimationFrame`, no throttle - All Caveat text uses `font-smooth: antialiased` and `text-rendering: optimizeLegibility` **Palette deployment in CSS custom properties:** ``` --void: #0B0B0D --chrome: #C4C4C8 --fog: #7C7C82 --burn: #3E3E44 --amber: #D4892A --tallow: #8A5218 --graphite:#E8E8EC --smoked: #161618 ``` Avoid: any CTA button with fill color, any grid with more than 2 columns, any icon library, any sticky header, any modal or overlay. ## Uniqueness Notes 1. **Centered single-column at 0% frequency paired with avant-garde.** The frequency report shows `centered` layout at near-zero (not charted as dominant), while `avant-garde` aesthetic is also at low frequency. All high-frequency designs use broken-grid or editorial-flow layouts. mujun.works uses strict centering not as a safe fallback but as a conceptual stance — the center as axis of contradiction, the page as a vertically scrolling column of confrontations. 2. **Chrome-metallic palette used as *mirror* not *luxury*.** `chrome-metallic` appears at only 2% in the palette frequency. Every prior use in the registry treats chrome as opulence signifier (luxury-premium aesthetic context). mujun.works uses chrome as a reflective-surface metaphor anchored to the site's contradiction theme — the gradient-clip kanji and the smoked-glass cell backgrounds use chrome to suggest that what you see is also seeing you. 3. **Candle flame as *narrative arc* across the full scroll.** `candle-atmospheric` motif appears at 2% in the frequency analysis, and no existing design uses it as a structural device spanning the whole page. The candle in Canto 1 (full, flickering) and Canto 5 (dim, exhausted) form a temporal narrative arc embedded in the scroll journey — the visit is the burning. 4. **Counter-animate as a pinch/opposition gesture — not decorative stagger.** `counter-animate` is at 5% frequency, but all uses treat it as an entrance flourish. mujun.works makes it semantic: the two columns moving toward each other enact the 矛盾 concept (opposing forces) at the visual-motion level, not merely as decoration. 5. **Handwritten typography (Caveat) combined with sharp grotesque (DM Sans) at 18% handwritten frequency — but the combination is uncommon.** Handwritten type is typically paired with serif-revival or editorial display in the registry. Using handwritten as the *primary display* voice anchored by a humanist grotesque that stays cold is inverted from the norm. Chosen seed: aesthetic: avant-garde, layout: centered, typography: handwritten, palette: chrome-metallic, patterns: counter-animate, imagery: gradient-mesh, motifs: candle-atmospheric, tone: raw-authentic Avoided (overused): parallax (77%), stagger (55%), scroll-triggered (35%), mono typography (77%), hand-drawn aesthetic (59%), editorial aesthetic (51%), vintage motifs (40%), warm palette (89%).