# Design Language for miris.xyz ## Aesthetics and Tone miris.xyz is **a fog-room** — a single dim chamber where the visitor walks slowly past seven panes of grey glass, and behind each pane a different small astonishment is suspended in mist. The name comes from Latin *mirus* ("wonderful, astonishing") softened by *mist* — and the whole site is the act of *catching sight of something through fog*. The aesthetic is **wabi-sabi pressed against a Hokkaido-winter palette**: the imperfect, weathered, unfinished sensibility of wabi-sabi ceramics — kintsugi seams, raw clay edges, asymmetric hand-thrown rims, the dignity of a cracked glaze — but rendered entirely in **cool greys, slate, and fog-white**, never the usual warm terracotta-and-cream that wabi-sabi sites default to. Nothing here glows. Nothing is gold. The mood is **zen-contemplative**: hushed, slow, patient, like standing at a frosted window at 6am watching a mountain refuse to fully appear. Every element behaves as if seen through breath on cold glass — soft-edged, slightly out of focus until you lean in. The tone of the writing is quiet and a little reverent, the way you'd speak in a museum that's also a sauna's cold-plunge antechamber: short sentences, long pauses, no exclamation, no urgency. This is the opposite of a landing page. It is a place to stop. ## Layout Motifs and Structure The site is a **single vertical sequence of seven "panes"** — each pane is one full viewport tall — built on **ma (negative-space) discipline**: roughly 60% of every pane is intentional emptiness, grey fog with nothing in it. The composition rule is **off-center stillness**: the one object in each pane is placed on a hand-thrown asymmetric grid (a 9-column field where content snaps to columns 2, 5, or 7 — never centered, never edge-locked), and it is *small* — never more than 34% of the viewport width — so the emptiness around it does the talking. There is **no top navigation, no logo lockup, no hamburger, no footer, no breadcrumb**. The only wayfinding is a **vertical "breath gauge"** pinned to the right edge: seven short horizontal tick-marks stacked like the markings on a thermometer, the active one extending slightly longer and labeled with a small Roman numeral (i — vii). Section boundaries are never hard cuts — each pane **dissolves into the next** through a 140vh overlap zone where the outgoing object blurs out and the incoming one un-blurs in, so scrolling feels like wiping condensation off a long window. A faint **kintsugi seam** — a single irregular hairline crack rendered in slightly-warmer slate (#8a8d92, the only "almost-warm" tone allowed) — runs the full vertical length of the page along column 4, occasionally branching, threading all seven panes together like a repair holding a broken bowl. ## Typography and Palette **Fonts (Google Fonts only — two voices, never more):** - **Display & wordmark — `EB Garamond`** (weights 400, 500; italic 400). This is the *garamond-classic* voice: a faithful old-style serif with low stroke contrast, small x-height, gently bracketed serifs, and an italic that leans like steam. Used for the "miris" wordmark (set lowercase, 500, letter-spacing −0.01em, ~96–160px) and for every pane's one-line title (italic 400, ~34–52px). At large sizes it is rendered with a **2px gaussian blur that lifts as the pane enters focus** — the words literally come into focus like writing on a misted pane. Numerals (the Roman i–vii on the breath gauge) are EB Garamond small-caps, 400, 13px, letter-spacing 0.18em. - **Body & captions — `IBM Plex Mono`** (weights 300, 400). A quiet, slightly mechanical mono used for the few short prose lines and the corner micro-labels (column coordinates, the word "miris.xyz" repeated tiny in the lower-left of each pane). Set at 14–16px, line-height 1.85, letter-spacing 0.01em, color held at 70% opacity so it reads like pencil on grey paper. Mono here is chosen *against type* — not for "tech," but because a monospace face on a foggy field looks like a typewriter left out in the cold: deliberate, a little brittle, honest. **Palette — Hokkaido fog (cool greys only; minimum five, no warm hues except the kintsugi seam):** - `#0E0F11` — **ink-slate** (the darkest object outlines, the wordmark) - `#2B2E33` — **wet-stone** (primary text on light panes, object fills) - `#4A4F56` — **cold-iron** (secondary strokes, the breath-gauge ticks) - `#7C828B` — **river-pebble** (mid-tone fills, blurred object bodies) - `#A9AFB6` — **frost-grey** (the fog field on darker panes) - `#C9CDD2` — **breath-white** (the fog field on lighter panes, the dominant background) - `#E8EAEC` — **condensation** (highlight rims on the un-blurred object) - `#8A8D92` — **kintsugi-slate** — the *only* warmer-leaning grey, reserved exclusively for the repair-seam crack so it reads as the one human, mended thing in the room. Panes alternate ground tone between `#C9CDD2` (light fog) and `#A9AFB6` (heavy fog) so the scroll has a slow tidal breathing rhythm; objects are always rendered darker than their ground. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. Every visual is SVG or canvas, hand-built, grey, soft-edged.** The recurring vocabulary: - **The seven astonishments (one suspended object per pane), each a small SVG drawn in 2–4 greys with a faint condensation rim:** 1. **A single river stone** — an irregular wabi-sabi oval, hand-traced bezier (no symmetry), with one chipped flat face and a hairline kintsugi crack across it. 2. **A hand-thrown bowl, seen from a 3/4 tilt** — visibly lopsided rim, uneven wall thickness, a thumb-dent in the side, glazed in two greys with a kintsugi seam running up one wall. 3. **A mountain refusing to appear** — three overlapping ridge-line strokes (`mountain-landscape` motif), the farthest one at 12% opacity, the nearest at 40%, all dissolving into the fog at their bases; no sky, no sun, no detail — just the *idea* of a peak. 4. **A breath on glass** — a slowly-expanding then contracting soft white blob (canvas, gaussian-blurred), the literal fog the whole site is made of, drawn as a living thing. 5. **A frayed length of rope, coiled** — drawn as a single open bezier path with `path-draw-svg` self-tracing, ends deliberately unraveled into individual grey threads (the wabi-sabi unfinished edge). 6. **A cracked pane of grey glass** — a rectangle with a true irregular fracture network spreading from one corner, each shard at a slightly different grey, the crack-lines doubling as the kintsugi motif. 7. **A single ginkgo leaf, skeletonized** — only the vein structure remains, drawn in cold-iron hairlines on frost-grey, slowly rotating as if drifting down through still cold air. - **The kintsugi seam** — recurring hairline crack down column 4, the connective tissue motif, always in `#8A8D92`, occasionally branching into a pane to touch that pane's object. - **Noise-texture overlay** — a fixed full-screen SVG `feTurbulence` grain at ~4% opacity over everything, giving the whole site the tooth of cold rough paper or unglazed bisque clay; it is the wabi-sabi "imperfect surface" rendered literally. - **Edge vignette** — every pane's four corners fade ~6% darker, as if the fog pools in the corners of the room. ## Prompts for Implementation Build miris.xyz as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker. Treat it as a **90-second slow walk past seven panes of misted glass**, each holding one small astonishment. There is **no CTA, no pricing, no stat grid, no testimonials, no contact form, no email capture, no FAQ, no logo wall, no newsletter, no cookie banner, no nav bar**. There is only the pane sequence and the breath gauge. **Storytelling structure (seven panes, vertical scroll, blur-focus transitions):** 1. **Pane i — "miris."** The wordmark fades up from a 2px blur on a `#C9CDD2` field, off-center on column 5. One mono line beneath, very small: *"latin · mirus · the state of being astonished."* The kintsugi seam draws itself down column 4 as you begin to scroll. 2. **Pane ii — the river stone.** Title (EB Garamond italic): *"a stone someone kept."* The stone object un-blurs into focus as the pane centers; the noise grain is most visible here. 3. **Pane iii — the bowl.** Title: *"mended where it broke."* The bowl's kintsugi seam glows the tiniest amount lighter (never gold — just `#E8EAEC` along the crack edge) when the pane is fully in view. 4. **Pane iv — the mountain.** Title: *"it never fully arrives."* The three ridge strokes parallax against each other at different rates as you scroll, the fog at their bases swelling and receding (canvas breath). 5. **Pane v — the breath.** Title: *"this is what the page is made of."* The expanding/contracting white blob is full-size here; everything else recedes; the body text is a single mono line: *"lean closer. it clears for a moment, then comes back."* 6. **Pane vi — the rope.** Title: *"undone at both ends, on purpose."* The rope path self-traces (`path-draw-svg`) as the pane enters, then the end-threads fan out slightly with a slow `blur-focus` shimmer. 7. **Pane vii — the cracked glass / the ginkgo leaf.** Title: *"what's left when you let it go."* The cracked-pane fracture spreads on scroll, and through its largest shard the skeletonized ginkgo leaf is visible, slowly rotating, drifting. The kintsugi seam reaches its end here and simply stops — unfinished, like a brushstroke that ran out of ink. Below, in tiny mono: *"miris.xyz — a small room. you may stay."* **Motion & interaction notes:** - **Blur-focus is the signature pattern.** Every object and every title lives at a baseline 2–4px gaussian blur and only resolves to 0px when its pane occupies the viewport center; scroll back and it re-blurs. Use `filter: blur()` driven by an IntersectionObserver ratio, eased with a slow cubic-bezier (≈0.22, 1, 0.36, 1) over ~900ms. - **The breath.** A single requestAnimationFrame canvas loop drives the fog blob (and the base fog gradient drift): a sine-eased radial-gradient white blob that grows over ~6s, holds ~1s, shrinks over ~6s, forever — like the room itself breathing. Keep it subtle (max ~30% opacity white). - **Ma is enforced, not decorative.** Do not fill the empty 60%. No floating particles, no decorative dots, no parallax confetti. The emptiness is the content. - **Cursor.** No glowing custom cursor, no magnetic buttons. The only cursor reactivity: within ~120px of the *current* pane's object, the local fog grain thins by ~2% — as if your attention were warming a patch of glass. Nothing else. - **Reduced-motion:** drop the breath loop and all blur transitions; show every object at full focus immediately; keep the static noise grain and kintsugi seam. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Wabi-sabi in cold greys, not warm clay.** Every wabi-sabi / ceramic / earthy design in the corpus reaches for terracotta, oatmeal, sand, burnt-orange (`warm` palette is at 98%, `warm-earthy` recurs constantly). miris.xyz is wabi-sabi rendered in a Hokkaido-winter palette — slate, fog-white, river-pebble grey — with exactly *one* near-warm tone allowed, and only for the kintsugi seam. It claims the under-2% `mountain-landscape` motif and ~4% `cool-grays` palette. 2. **Blur-focus as the entire interaction model, not a micro-effect.** `blur-focus` sits at ~7% in the patterns analysis, almost always as a tiny detail. Here it *is* the site — every object and word literally comes into and out of focus like writing on a misted pane. There is no parallax-storytelling spine, no cursor-follow glow, no magnetic hover (the corpus's 93%/89%/79% defaults are all deliberately absent). 3. **Ma-negative-space taken literally — 60% of every screen is empty fog.** Against an 88% card-grid / 86% centered corpus, this site is seven full-bleed panes where the single small object is asymmetrically off-center and the surrounding emptiness is the designed content, not background. 4. **Mono typeface used *against* its convention.** IBM Plex Mono appears not to signal "tech/terminal" (the 94% mono use is almost all dev/code-flavored) but as "a typewriter left out in the cold" — brittle, honest, pencil-on-grey-paper — paired only with EB Garamond's steam-leaning italic. No grotesk, no handwritten script, no display-bold. 5. **Zero conversion surface.** No CTA, no pricing, no stats, no testimonials, no email capture, no nav — just a seven-pane fog-room you walk through and are invited to stay in. A museum antechamber, not a funnel. **Chosen seed/style:** *aesthetic: wabi-sabi, layout: ma-negative-space, typography: garamond-classic, palette: cool-grays, patterns: blur-focus, imagery: noise-texture, motifs: mountain-landscape, tone: zen-contemplative* (custom fallback seed, derived from `seeds.json` vocabulary — built from the underused end of every category in the frequency analysis). **Avoided patterns from frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (75%), photography imagery (98%), warm palette (98%), gradient palette (96%), parallax (93%), cursor-follow (89%), spring (86%), magnetic (79%), stagger (76%), card-grid (88%), centered (86%), full-bleed-as-busy, mono-as-tech, pastoral-romantic/warm-inviting tone.