# Design Language for mosun.xyz ## Aesthetics and Tone mosun.xyz is **a risograph-printed Memphis Group pattern book that has been left out in a summer rainstorm and then ironed flat by someone who really loves geometry**. The word "mosun" reads like a half-invented season — mostly-sun, monsoon, a warm front with squiggles in it — and the whole site leans into that contradiction: brash 1980s Milan-design confetti (Ettore Sottsass terrazzo, Nathalie du Pasquier textiles, the squiggle, the bean, the zig-zag) rendered with the soft ink-bleed and limited-spot-color discipline of a Japanese risograph print. The mood is **loud but matte**: nothing glossy, nothing chrome, no drop shadows that pretend to be real — just flat fields of fluorescent ink that look like they were squeegeed by hand, slightly out of registration, joyfully imperfect. Tone is **whimsical-creative crossed with bold-confident** — a designer's playground that takes its own silliness completely seriously. It should feel like flipping through a Xerox'd zine made by an architecture student who only owns three highlighters: it is playful, a little punk, generous with white space between the chaos, and never once tries to sell you anything. No corporate gradient mesh, no soft-UI pillows. The page is a *poster you can scroll*. ## Layout Motifs and Structure The skeleton is a **deliberately broken 9-column grid printed on visible graph paper**. A faint 8mm cyan grid (like an architect's pad) underlies everything; content blocks are dropped onto it slightly off-cell, rotated 1–3 degrees, so the whole composition feels pinned-up rather than laid-out. Sections are **stacked full-bleed "plates"**, each one a self-contained Memphis tableau: 1. **Marquee plate** — the word "mosun" set enormous, letters individually colored and individually tilted, with a terrazzo speckle field bursting out from behind the descenders. A hand-drawn squiggle (the signature motif) underlines it like a kid's marker stroke. 2. **The Index plate** — a "contents of this issue" list typeset like a zine masthead: ragged left margin, dingbat bullets (bean, triangle, dot, zig), each line a different ink color, generous leading. 3. **Three "swatch" plates** — alternating asymmetric splits where a giant flat-color shape (a wobbling blob, a stack of stripes, a checkerboard sheared into a parallelogram) occupies 5 columns and a column of mono body text occupies 3, with the 9th column always left as breathing graph-paper. 4. **The Pattern Bath plate** — a full-viewport tile of repeating du-Pasquier-style motifs that the cursor "wipes" between two colorways. 5. **Colophon plate** — small print, registration-mark corner crops, "printed in n colors" joke metadata. Navigation is a **single pinned tab in the top-left corner shaped like a folded paper corner** — minimal, no menu bar. Scrolling is the only real interaction; the page is meant to be *read top to bottom like a printed object*, not browsed. ## Typography and Palette **Typography** (all Google Fonts): - **Display / "mosun" wordmark**: **Bricolage Grotesque** (variable, weights 200–800, optical size axis). Wide, slightly wonky grotesque with personality — used at clamp(4rem, 18vw, 16rem) for the marquee, each glyph wrapped in its own span for per-letter color and rotation. This is the chosen-seed typeface: it carries Memphis attitude without resorting to a novelty face. - **Section headers / dingbat list**: **Fraunces** (variable, "soft" + "wonk" axes cranked up, italic). Its quirky soft-serif terminals read like hand-lettered zine headlines at 200 optical size. - **Body / captions / colophon**: **Space Mono** (regular + italic, 15–16px, line-height 1.7). Typewritten zine-text feel; numbers and metadata sit in it comfortably. - **Accent labels / registration marks**: **Bricolage Grotesque** at 600 weight, all-caps, tracking +0.18em, 11px. **Palette** — a 5-spot-ink risograph set on warm paper, used as flat fields only: - Paper base: `#F4EFE3` (warm oat newsprint) - Riso Fluorescent Pink: `#FF5277` - Riso Yellow: `#F5C200` - Riso Aqua / Mint: `#3FBFB0` - Riso Cornflower (the grid line + body ink): `#3A4FCF` - Near-black ink (text on light, sparingly): `#1B1A22` Overprint blends are simulated where shapes overlap (pink × aqua → muddy plum `#7A4F84`; yellow × aqua → olive `#8FB23A`) using `mix-blend-mode: multiply` so overlaps look like real ink-on-ink. ## Imagery and Motifs **No photography. No 3D renders. No stock anything.** The entire image vocabulary is **flat vector + generative SVG with a grain overlay**: - **The squiggle**: a single hand-drawn-feeling bezier wiggle, redrawn each load with slight random control-point jitter (SVG path), used as underlines, dividers, and pointer trail. - **Terrazzo speckle fields**: procedurally scattered confetti chips (triangles, beans, dots, zig-zags) in the 5 spot inks, generated on load with a seeded RNG so every visit is a slightly different print run. - **Memphis primitives**: the bean, the half-circle, the wobble-grid, the sheared checkerboard, the stack-of-stripes column, the lone wavy line — these are the only "icons." - **Dingbats** instead of bullet points: tiny solid triangles, beans, dots in rotating ink colors. - **Registration marks & crop marks**: real printer's-mark glyphs in the corners and around the colophon, slightly misaligned for the out-of-register joke. - **Riso grain**: a fine monochrome noise texture (SVG `feTurbulence` or a tiled PNG) at ~6% opacity over flat fields, plus a 1px channel-misregistration offset on key shapes (pink shape's red channel nudged 1.5px) to mimic riso color shift. ## Prompts for Implementation Build this as **one long printed poster, not an app**. Static HTML, vanilla CSS (custom properties for the 6 ink tokens, container queries for the swatch-plate splits, `mix-blend-mode: multiply` for overprints), and a few small vanilla-JS modules — no framework, no router, no UI kit. Whole site under ~220KB; the generative SVG confetti is the heaviest payload and that's the point. **Animation philosophy** — every motion should feel like *paper and printing*, not screen physics. Avoid the overused spring/magnetic/cursor-follow-everything tropes; instead: - **Ink-bleed reveals**: as each plate scrolls into view, its flat color fields don't fade — they *bloom* outward from a seed point with a slightly irregular `clip-path` mask, like ink soaking into paper (300–500ms, ease-out). - **Mis-registration settle**: shapes arrive 2–3px and ~2deg off, then *click* into near-alignment with a single tiny stepped jump — never a smooth glide. Honors `prefers-reduced-motion` by skipping the offset entirely. - **The squiggle draws itself**: `path-draw-svg` on the marquee underline once, on load. - **Pattern Bath wipe**: pointer X position drives a hard-edged `clip-path` line that swaps the tile colorway — the *only* cursor-reactive element on the site, and it's a deliberate toy. - **Per-letter wordmark idle**: each "mosun" glyph very slowly drifts ±1deg rotation on a long sine loop (8–14s, staggered), so the headline is gently, perpetually breathing. - **Stagger** the dingbat-list lines in on scroll, each in its own ink color, 60ms apart. Lean into storytelling: the page literally narrates itself as "an issue" — masthead, contents, swatches, colophon — so a reader who scrolls to the bottom feels like they finished a small zine. **AVOID:** CTA buttons, pricing tables, stat counters, testimonial carousels, hero-with-signup, glassmorphism cards, gradient meshes, glossy 3D blobs, dark mode. ## Uniqueness Notes This design targets vacant territory in the 384-design registry: 1. **Memphis aesthetic (4%) executed through a risograph-print lens** — the registry's playful/maximalist sites lean digital-candy-bright or dopamine-neon; none commit to *matte spot-ink risograph* with simulated overprint and channel mis-registration as the core visual system. Flat fields only, zero gloss, zero realistic shadow. 2. **"Printed object" structure over "web app" structure** — no menu bar, no CTAs, no card-grid (89%), no dashboard. A single folded-corner tab for nav and a top-to-bottom "read it like a zine" flow with masthead/contents/swatches/colophon plates. 3. **Print-physics animation instead of spring/magnetic/cursor-follow** — ink-bleed `clip-path` blooms and a single *stepped* mis-registration "click" replace the registry's ubiquitous smooth spring/elastic motion (85%/17%) and cursor-follow-everything (89%); the only pointer-reactive element is one deliberate colorway-wipe toy. 4. **Seeded generative print runs** — terrazzo confetti and the signature squiggle regenerate with a seeded RNG each visit, so the "poster" is a slightly different impression every time, distinct from the registry's static vector-art and the over-represented photography (98%). Chosen seed/style: **memphis bold shapes portfolio** (vocabulary anchors: aesthetic `memphis` + `playful`, layout `broken-grid` + `full-bleed`, typography `display-bold` + `mono`, palette `high-contrast` + `triadic`, imagery `vector-art` + `grain-overlay`, motifs `geometric-shapes` + `flowing-curves`, tone `whimsical-creative` + `bold-confident`). Avoided overused patterns flagged by frequency analysis: hand-drawn (96%), glassmorphism (77%), photography (98%), card-grid (89%), centered (85%), parallax (92%), cursor-follow (89%), spring (85%), magnetic (80%), stagger-as-default, warm-gradient palettes (96%/98%), pastoral-romantic tone (34%).