# Design Language for mujun.ai > Theme keyword: **矛盾 (mujun)** — "contradiction," the ancient Chinese parable of the spear that pierces any shield and the shield that no spear can pierce. This site is built on that paradox: an Art-Deco hall of mirrors where every assertion is quietly answered by its opposite. ## Aesthetics and Tone mujun.ai is a **marble lyceum suspended in a pale dawn** — a scholarly Art-Deco rotunda where two opposing colonnades face each other across a reflecting floor, and the visitor walks the seam between them. Picture the 1925 Exposition des Arts Décoratifs reimagined as a quiet thinking-room: chevron inlays, fluted pilasters, sunburst fanlights — but drained of gold leaf and jazz-age noise, re-rendered in **chalk-pastel limestone, faded rose quartz, and dusty cerulean**. The mood is *scholarly-intellectual*: hushed, precise, faintly melancholic, like a lecture hall an hour before the talk. Nothing shouts. The drama is structural, not chromatic — it lives in the perfect bilateral symmetry that the page keeps almost-but-never-quite achieving, because every Deco motif on the left has a subtly *wrong* twin on the right. The governing feeling is **held breath between thesis and antithesis**. Where most Art-Deco work goes opulent-grand (4% of the corpus) and loud, mujun.ai goes *opulent-quiet*: the geometry of luxury, the volume of a library. Edges are crisp; surfaces are matte limestone with a faint paper tooth; light is the flat, shadowless glow of an overcast skylight. The `blur-focus` motion language reinforces it — ideas arrive defocused, like a thought not yet formed, and resolve to knife-sharpness only when the reader rests on them. ## Layout Motifs and Structure The page is a **single vertical promenade down the central axis of a mirrored Deco hall** — one HTML route, scrolled top to bottom, structured as **seven "bays"** (the architectural span between two columns). It is emphatically a `ma-negative-space` composition: vast pale margins, content pressed into a narrow central spine roughly 46–52% of viewport width, the rest left as breathing limestone. No card-grid, no bento, no dashboard, no stat strip. - **The Axis.** A single hairline (1px, dusty cerulean at 30% opacity) runs the full height of the page, dead center. Every bay is bilaterally composed around it. The axis is the "seam of the paradox" — text and motifs straddle it. - **The Mirror Fault.** Each bay places a Deco ornament on the left and its reflection on the right — but the reflection is *deliberately corrupted*: one chevron points the wrong way, one sunburst has thirteen rays instead of twelve, one fluted column is fluted on the inside. The reader's eye is meant to snag. This is the visual thesis of "矛盾": symmetry that contradicts itself. - **Seven bays, fixed rhythm:** 1. **Portal Bay** — the wordmark "mujun.ai" set inside a Deco fanlight arch, with the spear-and-shield parable rendered as two facing SVG silhouettes. 2. **Spear Bay** — the absolutist claim ("this pierces anything"), text leaning left, ornament a forward-thrusting chevron cascade. 3. **Shield Bay** — the absolutist counter-claim ("this stops everything"), text leaning right, ornament a concentric sunburst. 4. **Collision Bay** — the two columns overlap; the central axis briefly *doubles* into two lines that scissor; type from left and right interleaves line-by-line. 5. **Suspension Bay** — widest negative space of the page; a single floating sentence about holding two truths at once; almost empty limestone. 6. **Inlay Bay** — a long horizontal Deco marquetry band (chevron + step motif) that the page scrolls *behind*, like passing a frieze. 7. **Threshold Bay** — the promenade ends at a closed Deco door; the wordmark again, smaller; one quiet line of farewell. No CTA, no form, no links-wall. - **Scroll feel:** content blocks enter from the *opposite* side of the axis to where they settle, sliding inward and de-blurring as they cross center — the two halves of the hall perpetually trying to meet. ## Typography and Palette **Fonts — Google Fonts only:** - **Display / wordmark / bay numerals — `Poiret One`** (single weight 400). A geometric Deco display face with hairline strokes, perfect circles, and that unmistakable 1920s drafting-compass elegance. Used very large (clamp 3.2rem → 7rem), letter-spaced +0.16em, for "mujun.ai", the seven roman bay numerals (I–VII), and the parable's two epigraph words ("SPEAR" / "SHIELD"). - **Headings / pull-lines — `Jost`** (weights 300, 400, 500). Jost is the open-source revival of *Futura* — true `futura-geometric`: circular o's, single-storey a, sharp apexes. Used for bay titles and the floating Suspension sentence, weight 300, letter-spaced +0.04em, generous leading (1.5). - **Body / annotation — `Jost`** weight 400 at 1.0–1.05rem, line-height 1.8, measure capped at ~62ch but living inside the narrow spine. Footnote-style asides in Jost 300, 0.82rem, dusty cerulean. Sticking to the Jost/Futura geometric voice across body keeps the whole hall coherent — one ruler drew everything. **Palette (pastel, scholarly):** | Role | Hex | Use | |---|---|---| | Limestone (base) | `#F4F1EA` | page background, the marble floor | | Chalk White | `#FBFAF6` | inner spine panels, fanlight fill | | Faded Rose Quartz | `#E7C9C9` | the "Spear" half — left ornaments, left epigraph | | Dusty Cerulean | `#A7C0CC` | the "Shield" half — right ornaments, right epigraph, the central axis | | Graphite Ink | `#2E2C33` | all primary text | | Antique Pewter | `#8C8A86` | hairlines, bay numerals, captions | | Pale Gilt | `#C9B98C` | used *once only*, in the Collision Bay, as the single warm accent where the two halves grind together | High-key, low-saturation throughout; the only "loud" moment is the lone Pale Gilt seam in Bay 4. Rose and cerulean are near-equal in luminance so neither half "wins" — the contradiction stays unresolved. ## Imagery and Motifs **No photography, no 3D renders, no stock.** Everything is hand-built SVG line-work in the Deco drafting idiom — 0.75px strokes, compass-perfect arcs, no fills heavier than 12% tint. - **Spear & Shield silhouettes** — two facing emblems in the Portal Bay: a slender ray-like spear (rose quartz) and a fluted concentric shield (cerulean), drawn as if engraved on a coin. - **Chevron cascades** — stacked Deco chevrons that "thrust" leftward in the Spear Bay; the corrupted twin on the right has one chevron flipped. - **Sunburst fanlights** — semicircular ray-fans (the classic Deco theatre-marquee motif) crowning the wordmark and the Shield Bay; the right-side fan has an off-count of rays. - **Step / ziggurat fret** — the marquetry band in the Inlay Bay: alternating limestone and rose/cerulean steps, a continuous Deco frieze. - **The doubled axis** — in the Collision Bay the single center hairline splits into two crossing lines forming a narrow "X", the only diagonal geometry in the entire site. - **Fluted texture** — faint vertical column-fluting (1px lines, 4% opacity) bleeding in from both page edges, like standing between two pilasters. - **Cursor as plumb-line** — the cursor trails a faint vertical hairline segment, a tiny moving piece of the central axis the reader carries with them. Decorative restraint is the point: Deco vocabulary, lyceum volume. ## Prompts for Implementation Build mujun.ai as **one route, one long vertical scroll — a 70-second walk down the spine of a mirrored Art-Deco thinking-hall.** One HTML file, one CSS file, one small JS module. The narrative is the spear-shield paradox unfolding bay by bay; there is **no CTA, no pricing block, no stat grid, no testimonial row, no email signup, no nav bar** — only the seven bays and the central axis. **Structure & storytelling (seven bays, in order):** 1. **Portal Bay** — full viewport. Limestone field. Center: a Deco sunburst fanlight (SVG) cradling the "mujun.ai" wordmark in Poiret One. Below, the two facing emblems and the parable in two short lines: left, rose, "The spear that pierces any shield." / right, cerulean, "The shield no spear can pierce." The central axis hairline draws itself top-to-bottom on load. 2. **Spear Bay** — the absolutist claim; a single Jost-300 pull-line straddling the axis, leaning left; chevron cascade ornament on the left, its corrupted mirror on the right. Text slides in *from the right* and de-blurs as it crosses center. 3. **Shield Bay** — the counter-claim, mirror of Bay 2; concentric sunburst ornament; text slides in *from the left*. 4. **Collision Bay** — the axis splits into a scissoring "X"; left-leaning and right-leaning lines of type interleave (CSS columns alternating text-align); the lone Pale Gilt seam glows faintly where the lines cross; a one-word verdict — *"矛盾."* — sits exactly on the crossing point. 5. **Suspension Bay** — near-empty. One floating sentence, centered, Jost-300, very large leading: something like *"To hold the spear and the shield in the same hand is not failure — it is the only honest grip."* Maximum negative space; the axis hairline thins to near-invisible here. 6. **Inlay Bay** — a horizontal Deco marquetry frieze (chevron + ziggurat fret) that the viewport scrolls *past*, parallaxing slightly slower than the page so it reads as a wall you walk along. 7. **Threshold Bay** — a closed Deco double-door (SVG, fluted panels), the "mujun.ai" wordmark small above it in Poiret One, one farewell line in Antique Pewter: *"Walk back whenever the question returns."* The axis hairline meets the door's centerline and stops. **Motion language (`blur-focus` + `spring`):** - Everything enters at `filter: blur(8px)` and 0.6 opacity, resolving to `blur(0)` and 1.0 with a gentle spring as it nears vertical center — "a thought coming into focus." - The two page halves animate on opposing easings (left half a touch slower) so symmetry is always *almost* achieved. - Cursor carries a 60px vertical hairline segment (a fragment of the axis). - Bay numerals (I–VII) fade in at the top-left of each bay in Antique Pewter, never animated otherwise. - `prefers-reduced-motion`: drop the blur, keep static crisp layout; the mirror-fault corruptions remain (they're structural, not motion). **Tone for copy:** aphoristic, calm, a philosophy seminar — short declaratives, no marketing voice, no exclamation, no "we." Each bay carries at most two sentences. Bias hard toward the full-screen narrative walk; resist any temptation to add conventional landing-page furniture. ## Uniqueness Notes Differentiators from the corpus (per the frequency analysis): 1. **"Mirror-fault" symmetry as the core device.** The site is built on near-perfect bilateral Art-Deco symmetry that deliberately *corrupts itself* (off-count sunbursts, flipped chevrons, inside-out fluting) — a structural pun on 矛盾. No card-grid, no bento; the layout *is* the argument. Asymmetric layouts are everywhere in the corpus; intentionally-broken symmetry is not. 2. **Opulent-quiet Art-Deco.** Art-deco appears in the corpus but skews loud/gold/jazz-age; mujun.ai renders the full Deco vocabulary (chevrons, sunbursts, ziggurat fret, fanlights) at *library volume* in a pale pastel limestone palette — Deco geometry, scholarly hush. The single Pale Gilt seam is the only "luxury" gesture. 3. **`ma-negative-space` + `blur-focus` together** (13% and 8% respectively, rarely paired): a narrow central spine of content in a vast limestone field, with ideas literally arriving out of focus and resolving — "thinking" rendered as a motion primitive. 4. **The living central axis.** A single 1px hairline is the page's spine, the cursor's trail, the seam of the paradox, and the thing the closing door interrupts — one continuous line carrying the entire concept. 5. **Pure hand-built Deco SVG, zero photography** — against a corpus where photography sits at ~98% imagery usage. Chosen seed/style: **art-deco ornate luxury** — *aesthetic: art-deco, layout: ma-negative-space, typography: futura-geometric, palette: pastel, patterns: blur-focus, imagery: line-illustration, motifs: marble-classical, tone: scholarly-intellectual*. Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (77%), photography (98%), card-grid (89%), parallax-as-default, cursor-follow-magnetic theatrics, warm-gradient palettes (96%/98%), mono-as-body-type (94%), pastoral-romantic tone (34%).