# Design Language for mujun.ai ## Aesthetics and Tone mujun.ai is a **y2k-futurism** institute — a hand-drawn, slightly squishy speculative-AI research lab as imagined by a 1999 Sanrio publishing house collaborating with the IBM eBusiness print campaign. The aesthetic merges Y2K's chrome-curve optimism, inflated lozenge buttons, and gel-button shadowing, with hand-drawn ink illustrations of imagined "AI machines" that look like household appliances rendered by a child. The tone is **authoritative** — the copy on the page reads like a calm, slightly amused institute that has been studying contradictions ("mujun" 矛盾) since 1997. Inspiration draws from the early Frutiger Aero gel buttons, Hideki Inaba's *Shift* magazine spreads, the marble plinths of Kenya Hara's Mujirushi exhibitions, and a creamy pastel softness reminiscent of the cover of *Wallpaper* in early 2000. Visiting feels like opening a softcover institute brochure from a brand that has been confidently strange for twenty-five years. ## Layout Motifs and Structure The architecture is a strict **f-pattern** layout — content follows the natural eye-scan path established in reading research: a horizontal hero bar at the top, then a shorter horizontal "summary stripe" beneath it, then a long vertical column of paragraphs and inline visuals on the left margin, with right-margin marginalia in italic. This f-pattern is honored explicitly: the hero is 80vh and full-width, the summary stripe is 28vh, and the body column is 720px wide with right marginalia at 220px wide. Big creamy-pastel inflated-lozenge UI elements occupy the f-pattern's two horizontals (a giant "Inquire" lozenge on the hero, a "Bulletin 2026" lozenge on the summary stripe). The page scrolls vertically through six chapters: *On Contradiction*, *Tools of Inquiry*, *Specimens*, *Marble Examples*, *Bulletin*, *Address*. Each chapter resets the f-pattern at the top of its section, so the rhythm repeats. **Magnetic** cursor behavior pulls the cursor toward the inflated lozenges when within 80px, the way old gel buttons used to feel. ## Typography and Palette **Typography** is led by Quicksand (the **rounded-sans** brief): Quicksand 700 at 144px for the institute name, Quicksand 500 at 19px / 1.6 for body, and Quicksand 600 at 18px tracked +120 uppercase for f-pattern subheaders. A secondary face, EB Garamond Italic at 15px / 1.55, is used only for the right-margin marginalia — the institute "voice" speaking sideways to the main text. A monospace third face, IBM Plex Mono at 11px, appears in catalog numbers and footnote citations. Numbers are tabular oldstyle for institutional dignity. **Palette** is **creamy-pastel**, calibrated to feel like 1999 Mujirushi paper: - `#F7F1E3` — milk-paper cream (page ground) - `#FEFBF3` — secondary cream (inflated-lozenge fill, lighter zone) - `#F2C9B3` — sherbet peach (primary accent, lozenge highlight) - `#B6D7C5` — pistachio mint (secondary accent, marginalia bullets) - `#E0A1B8` — strawberry milk (tertiary accent, hover state) - `#3A2E2A` — chestnut ink (typography, hairlines) - `#FFFFFF` — pure white (lozenge gel highlight stripe) - `#7F6F66` — clay-tone marginalia ink (right-margin italics) Every inflated lozenge carries the gel-highlight: a top white stripe at 22% opacity to give a curved-glass appearance. ## Imagery and Motifs Imagery is built around **hand-drawn** illustrations — every "AI machine" depicted in the body column is a hand-drawn ink sketch in chestnut on cream, rendered in a slightly wobbly Risogarmany line style: a teapot with eyes, a desk lamp with a thinking expression, a stack of three folded paper origami "models", a tabletop arcade machine titled *MUJUN.ai-2*. Each illustration sits 240×240 in the body column with a hand-lettered Quicksand caption beneath. **Marble-classical** motifs appear sparingly as ornamental plinths and small ionic-column dividers between chapters — a quiet nod that the institute considers itself classical. Decorative furniture includes a tabloid-fold catalog number stamp in the top-right corner of each chapter (e.g., "Cat. 04 / II / Bulletin"), and a recurring small handwritten miko-glyph 巫 used as a section end-mark. No photographs. ## Prompts for Implementation Build a y2k-futurism institute page laid out on a strict f-pattern. The signature interaction is **magnetic** cursor: every inflated-lozenge element has a `data-magnetic` attribute; a JS listener tracks cursor proximity and, within 80px, transforms the lozenge with `translate3d(cursorOffsetX * 0.16, cursorOffsetY * 0.16, 0)` so it leans toward the cursor like a magnetized gel pebble. The lozenges themselves are CSS-painted: `border-radius: 200px; background: linear-gradient(180deg, #FEFBF3 0%, #F2C9B3 100%); box-shadow: 0 12px 36px -8px rgba(58,46,42,0.16), inset 0 1px 0 rgba(255,255,255,0.7);` with a `::before` pseudo-element providing the curved white gel-highlight stripe across the top 40% of the button. The body column rhythm alternates one hand-drawn ink illustration every 3 paragraphs, with right-margin marginalia entering via 400ms italic letter-spacing reveal on scroll. Chapter transitions use a small marble-plinth divider SVG (60px wide) and a Quicksand 144pt chapter title that slides in from the left over 700ms. Avoid CTA stacks, pricing menus, signup ladders, stat grids, hero-feature combos — the lozenges already carry interaction; the page is a brochure. The footer is a Quicksand 600 line tracked +120 uppercase: "MUJUN INSTITUTE — EST. 1997 — 矛盾と共に." ## Uniqueness Notes - **Differentiator 1:** Strict f-pattern observed explicitly across six chapters with right-margin marginalia in italic Garamond — almost no design in the registry honors f-pattern as a structural commitment. - **Differentiator 2:** Inflated-lozenge buttons built with multi-layer CSS gels (gradient + inset shadow + pseudo-element highlight) — a true Y2K technique, not a flat homage. - **Differentiator 3:** Imagery is hand-drawn ink sketches of imagined AI machines — a tactile, narrative use of illustration completely sidestepping the registry's 89% photography saturation. - **Differentiator 4:** Magnetic cursor implemented as a per-element subtle pull (16% offset) rather than the typical big lerp-follow — feels analog, not digital. - **Differentiator 5:** Authoritative institute "voice" delivered via two parallel text streams (body + italic marginalia) — a rare two-voice editorial structure. - Planned seed: aesthetic=y2k-futurism, layout=f-pattern, typography=rounded-sans, palette=creamy-pastel, patterns=magnetic, imagery=hand-drawn, motifs=marble-classical, tone=authoritative. - Avoids overused patterns flagged by frequency.sh: `playful` aesthetic (28%), `photography` imagery (89%), `corporate` aesthetic (24%) — none used here.