# Design Language for mujun.studio ## Aesthetics and Tone **mujun** (矛盾) is the Japanese word for *contradiction* — literally "spear-shield," from the old parable of the merchant who sold an unstoppable spear and an immovable shield in the same breath. mujun.studio is the portfolio of a small experimental design practice that works *only* on impossible briefs: a logo for a company that does not exist yet, a building that is also a song, a font that reads differently every time. The site is built as a **surreal dreamscape** — not the airbrushed Dalí-poster kind, but the *cold morning-after* kind, where furniture floats six centimetres above the floor and nobody in the dream finds this strange. The governing emotional register is **calm impossibility**. Nothing on the page jitters or shouts; instead, things are quietly, confidently *wrong*. A horizon line that curves the wrong way. A shadow that falls toward the light. Text that is heavier where it should be lighter. The visitor should feel they have walked into a room that obeys a physics adjacent to ours — beautiful, lucid, and faintly destabilising. The tone is **mysterious-moody** with a thin seam of dry wit running underneath: the studio takes the paradox seriously, but it is also a little amused by it. Inspiration anchors: Giorgio de Chirico's empty arcaded plazas at long-shadow hour; René Magritte's deadpan object-substitutions (the pipe, the apple, the train from the fireplace); Tarkovsky's *Stalker* zone where rooms rearrange themselves; the impossible staircases of Escher rendered not as line-art but as *photographed concrete*; Hiroshi Sugimoto's seascapes where sky and water are the same grey nothing; and the editorial restraint of a Swiss exhibition catalogue describing artworks that cannot photograph. ## Layout Motifs and Structure The site is **one continuous horizontal-then-vertical dreamscape** divided into **seven "rooms"** — but the rooms do not stack in the ordinary way. The page begins as a **horizontal-scroll corridor** (rooms 01–04 slide past left-to-right as you scroll down — the contradiction: a *vertical* gesture produces *horizontal* motion), then at room 05 the scroll axis silently rotates ninety degrees and the final three rooms descend in a normal vertical column, as though the building "remembered" how websites are supposed to behave. Each room is a **full-bleed stage** with a single floating subject and a great deal of negative space — *ma* (間), the charged emptiness, but tilted: the empty space is never quite centred, it leans, like a room photographed by someone standing slightly off-balance. There is **no top navigation bar**. Instead a **horizon line** runs across every room at a consistent 61.8% height — except it is not straight: it bows up at the edges in rooms 01–04 and bows *down* in rooms 05–07, so the corridor feels concave and the column feels convex. The horizon doubles as the navigation: seven small **plumb-bob markers** hang *from* the horizon (in the horizontal section) and *stand on* it (in the vertical section) — same object, opposite gravity. Composition rules: - **The off-centre axis:** every floating subject sits at one of four golden-ratio nodes, never the middle. - **Doubled shadows:** every object casts two shadows at slightly different angles — one soft and correct, one hard and *wrong* (falling toward the light source). The wrong shadow is always 7% darker. - **The arcade frame:** rooms 02, 04, and 06 are viewed *through* a de Chirico arch — a thin concrete archway in the foreground, slightly out of focus, so the visitor is always "looking from another room." - **No footer.** The seventh room simply opens onto a flat grey field labelled `— end of the proof —` and the horizon, finally, is dead straight. ## Typography and Palette **Type system (Google Fonts only):** - **Display / contradiction face:** **`Fraunces`** (variable; optical size and "soft/wonky" axes pushed). Fraunces is a serif that was *designed* to be a little ungainly — bulging ball terminals, an exaggerated optical-size axis — which makes it the perfect "spear" of the pairing. Used at huge sizes (clamp 4rem–9rem) for room titles, set with negative tracking (`-0.02em`) and the SOFT axis at maximum so the serifs almost melt. - **Body / shield face:** **`IBM Plex Mono`** — a monospace, used as *running prose* (which is itself the contradiction: a typeface built for code, asked to carry poetry). Set at 1.02rem, line-height 1.85, tracking `0.01em`. Its rigid grid stabilises every room that Fraunces destabilises. - **Caption / wall-label face:** **`IBM Plex Sans`** at 0.72rem uppercase, tracking `0.22em` — for the plumb-bob room numbers, the arch labels, and the dry one-line briefs ("BRIEF: a door that is only a door when no one needs it"). **Palette — "the long-shadow plaza at 5 p.m.":** - `#E7E1D6` — *plaza plaster*: the dominant ground, a warm bone-grey, the colour of sunlit stucco that has never been rained on. - `#1C1B22` — *unstoppable ink*: near-black with a violet undertone, used for Fraunces titles and the "wrong" hard shadows. - `#C4452B` — *cinnabar spear*: a single, deliberate burnt vermilion — the only saturated colour on the site, used for exactly one element per room (a thread, a sphere, a horizon segment) and never twice in the same place. - `#7C8B86` — *immovable sage*: a cool dust-green, the colour of de Chirico's distant statues, used for the arches, the soft/correct shadows, and the body-text on dark rooms. - `#3A4A5C` — *dream-slate*: a deep desaturated blue, the "night side" of rooms 05–07 where the scroll axis has rotated. - `#F4F0E8` — *paper-of-the-proof*: a near-white for the final flat field and for inverted text panels. The palette deliberately reads **warm and muted** in the corridor and **cool and muted** in the column — the same six colours, re-weighted, so the visitor feels the temperature drop without being able to name a single new hue. (This is the palette's own little mujun.) ## Imagery and Motifs **One impossible object per room, rendered as a hybrid of soft photo-grade gradient and crisp SVG geometry:** 01 — **The spear-and-shield** itself: a vermilion thread, dead straight, that passes *through* a sage circle without entering or exiting it — the thread is in front on the left half and behind on the right half, with the crossover hidden by a 2px feathered seam. Floats at the upper-left node. 02 — **A door, free-standing, ajar** — seen through the first concrete arch. Through the gap: the *same plaza you are standing in*, but with no door in it. A faint grain overlay (subtle film noise, ~4% opacity) sits over everything to bind the SVG door to the photographic-feeling ground. 03 — **A staircase that arrives where it left** — a short Escher-flight of seven steps drawn in flat sage with cinnabar nosings; a small ink sphere rests on step three and *also* on step five (two spheres? one sphere?), each with its doubled shadow. 04 — **A cloud, indoors** — a single soft white volumetric blob (radial-gradient, very faint inner shadow) tethered by a vermilion plumb-line to the floor, casting a hard violet shadow upward onto an unseen ceiling. Seen through the second arch. 05 — *(the axis rotates here)* **A horizon, folded** — the bowed horizon line of the corridor visibly *creases* and the page tips into the column; a sage statue-head, eyes closed, slides down past the fold like a setting moon. 06 — **A window that is a mirror that is a window** — a tall slate rectangle through the third arch; reflected in it: the visitor's scrollbar position, abstracted as a single moving cinnabar tick — *you are the only thing in the dream that moves on purpose*. 07 — **The proof, completed** — all six impossible objects, now small, arranged in a calm grid on the flat `#F4F0E8` field, each labelled with its brief. Below: a straight horizon and three words. The grain overlay lifts. The dream ends by becoming a clean catalogue page — the final contradiction: the surreal site resolves into Swiss order. **Recurring micro-motifs:** the **plumb-bob** (gravity made visible, always pointing somewhere slightly wrong); the **doubled shadow**; the **out-of-focus concrete arch**; the **single vermilion element**; the **bowing horizon**; a **faint film-grain skin** over the entire page that makes flat vectors feel like photographs of objects that were never built. ## Prompts for Implementation Build mujun.studio as **one HTML page, one CSS file, one ES module** — no framework, no build step. The experience is a ~75-second walk through seven impossible rooms whose scroll behaviour itself enacts a contradiction. **Storytelling / motion structure:** 1. **The corridor (rooms 01–04) — horizontal from vertical.** Use a pinned section with `position: sticky` + a horizontal translate driven by vertical scroll progress (a single `scroll` listener writing a CSS custom property, or `scroll-timeline` where supported). The user scrolls *down*; the rooms slide *left*. Ease with a critically-damped spring feel (long, soft, no overshoot) — calm, not bouncy. 2. **The fold (room 05) — the axis rotates.** As corridor progress hits 100%, the whole stage rotates ~3° and the layout "snaps" back to normal `overflow-y` scrolling for rooms 05–07. Make the transition a single 1.2s eased move; the horizon line should *visibly crease* (an SVG path morph from bowed-up to bowed-down via `path-draw` / `d` interpolation). 3. **The column (rooms 06–07) — ordinary, at last.** Plain vertical scroll. Subjects fade-and-rise on a scroll-triggered reveal, staggered by ~120ms across their parts. 4. **The resolution (room 07).** All six prior objects animate from their room positions into a tidy grid; the film-grain layer fades to 0; the horizon straightens; type settles into a Swiss baseline grid. The page literally *calms down*. **Signature interactions (use sparingly, all subtle):** - **The disobedient cursor:** a small custom cursor — a vermilion plumb-bob — that lags the real cursor with spring physics and *swings* slightly as if hanging from the pointer. On dark rooms it inverts to bone-grey. - **Doubled-shadow parallax:** on mouse-move, the *correct* (sage) shadow of each subject shifts naturally; the *wrong* (violet) shadow shifts in the *opposite* direction. Tiny amplitude (≤8px). This is the whole site's thesis in one micro-interaction. - **Horizon-as-nav:** the seven plumb-bob markers on the horizon are the only navigation; clicking one does a smooth scrolljack to that room. In the corridor they hang down; in the column they stand up — same SVG, flipped. - **Grain breathing:** the film-grain overlay (a tiling SVG `feTurbulence` or a small noise PNG at ~4% opacity) very slowly drifts its position, 1px every few seconds — almost imperceptible, like the dream is breathing. - **Type that contradicts weight:** room titles in Fraunces animate their variable SOFT/optical axes on entrance so the serifs *bloom* outward — the heading gets visually *softer* as it gets *bigger*. **Hard constraints — AVOID:** no CTA buttons, no "Get a Quote," no pricing tables, no stat counters / number-grids, no testimonial sliders, no logo wall, no contact form beyond a single mailto line in room 07 (`brief us an impossible thing →`), no newsletter, no cookie banner, no chatbot, no hero-with-three-features. The page sells nothing; it *proves a paradox and then files it away neatly.* Keep DOM lean, prefer transforms/opacity for all animation, and make sure the corridor degrades to a normal vertical stack if `scroll-timeline` and JS are both unavailable. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The scroll axis itself is the contradiction.** No other site in the corpus changes its scroll direction *mid-page* as a narrative device — a vertical gesture producing horizontal motion in the first half and ordinary vertical motion in the second. Layout becomes argument. 2. **Monospace as body prose, serif as the wild card.** The corpus's 94% mono-typography convention is almost always used for terminals, code, or "tech" voice. Here `IBM Plex Mono` is the *calm, stabilising* face carrying poetry, while the variable serif `Fraunces` (with its wonky/soft axes) is the destabiliser — the opposite of every other mono site. 3. **Doubled, contradictory shadows on every object.** A consistent visual grammar of one correct shadow + one "wrong" shadow falling toward the light — a system-level surreal device, not a one-off illustration. 4. **Surreal that resolves into Swiss.** The site begins as a de Chirico dreamscape and *ends* as a clean exhibition-catalogue grid — the aesthetic itself performs a contradiction (chaos → order) rather than just depicting one. 5. **No central composition, anywhere.** Every subject sits on an off-centre golden node and the horizon bows; the page never lets the eye rest in the middle — a deliberate refusal of the 85%-centered convention. **Chosen seed / style:** `surreal dreamscape promo` — *aesthetic: surreal, layout: horizontal-scroll → single-column, typography: serif-revival + tech-mono, palette: warm-earthy → cool-grays muted, patterns: parallax / scroll-triggered / path-draw-svg / spring, imagery: grain-overlay + geometric-abstract, motifs: floating-elements / sharp-angles / flowing-curves, tone: mysterious-moody.* **Avoided overused patterns (from frequency analysis):** no hand-drawn aesthetic (96%), no glassmorphism (77%), no card-grid hero stacking (89% — the only grid appears once, at the very end, as the punchline), no cursor-follow done the usual magnetic way (the cursor here *disobeys* with pendulum lag instead of snapping), no photography (98% — the site is built from gradients + SVG dressed in grain so it *feels* photographic without a single photo), and no pastoral-romantic / warm-inviting tone (the two largest tone buckets) — this site is cool, lucid, and faintly unsettling.