# Design Language for miris.works ## Aesthetics and Tone miris.works is a **soft-body architecture sketchbook** — a portfolio-essay for a (fictional, but treated as wholly real) studio that designs *things that haven't decided whether to be solid yet*: inflatable pavilions, poured-silicone furniture, breathing wall panels, software that flexes. The word *miris* is treated phonetically — *meer-iss*, near to "mirror" and to the Latin *mirari*, "to wonder at" — so the whole site is staged as a slow act of wonder at surfaces that won't sit still. The dominant aesthetic is **blobitecture**: the late-Greg-Lynn / Future Systems / Archigram-bubble lineage of buildings drawn as if extruded from a single skin of clay, with no straight lines anyone could lean a ruler against. But the tone is deliberately *not* the glossy chrome bubbliness of Frutiger-Aero or Y2K — it is **grounded-earthy and zen-contemplative**. Think wet plaster catching low afternoon light, a thumb-pressed pinch in unfired stoneware, the matte give of a yoga bolster, the pause before a soap film pops. The mood word on the studio's own wall is *tactile patience*. No urgency, no conversion funnel, no exclamation points — the site behaves like a hand turning a maquette over and over, watching the highlight travel across the bulge. Where most blobitecture renders go fully synthetic and candy-bright, miris.works keeps everything **muted, organic, slightly grainy**, as if the blobs were photographed on overcast film rather than ray-traced. The emotional throughline: *softness is a structural decision, not a weakness.* ## Layout Motifs and Structure The site is an **organic-flow, full-bleed, single-page scroll** — explicitly *not* a card-grid, *not* a dashboard, *not* a bento box. There is no rectangular content container anywhere on the page. Every region of content is masked into a **metaball field**: two or more soft circular masses that merge along a smooth gooey isthmus (achieved with SVG `feGaussianBlur` + `feColorMatrix` alpha-contrast "goo" filter, or equivalently with layered `border-radius` super-ellipse blobs and `clip-path`). Text and images live *inside* these blobs; the blobs overlap, nudge, and absorb each other as you scroll. The page is built as **seven "cells"** stacked vertically — each cell is one breath of the studio's story — with a total scroll length of roughly 620vh on desktop, 760vh on mobile (blobs need vertical room to merge and separate legibly at narrow widths): 1. **Cell 01 — Inhale.** Cold open: a single off-white blob, centered, very small, pulsing slowly (a 4s ease-in-out scale 0.96↔1.0 like a resting diaphragm). Inside it, hairline, the wordmark `miris.works`. As the user begins to scroll, the blob *inhales* — swells to fill ~70% of the viewport — and the tagline surfaces from inside it like ink spreading through wet paper: *"a studio for things that haven't finished becoming solid."* 2. **Cell 02 — The Argument.** The hero blob splits — mitosis — into three child blobs that drift to a loose triangle. Each holds one line of the studio manifesto. The blobs are *magnetic* to the cursor: move near one and it leans toward you and bulges on the near side (a localized vertex displacement, not a uniform scale), like pressing a finger into a water balloon without breaking the skin. 3. **Cell 03 — Maquettes.** The studio's "work" — six pieces, but never shown as a grid. They arrive as a **horizontal drift** inside a wide blob that you scrub through with vertical scroll (scroll-driven `translateX` on an inner track). Each maquette is a soft-shadowed organic form on a plinth-blob; hovering one makes the parent blob *swallow* it (the maquette blob and the frame blob merge their isthmus, the caption surfacing in the merged volume). 4. **Cell 04 — Section.** A full-bleed dark cell: the blobs go translucent and we "cut through" one — an animated cross-section reveal (a sweeping `clip-path` line) shows nested concentric blob-rings labeled like a geological core sample: *skin / pneumatic layer / ribbing / void*. This is the most diagrammatic moment; it earns the softness everywhere else by showing the engineering underneath. 5. **Cell 05 — Process.** A vertical isthmus — a single continuous gooey "spine" running down the center — with content blobs budding off it left and right, each a step in the studio method (*sketch in clay → scan → relax the mesh → cast → let it settle*). Steps reveal with a `fade-reveal` + slight upward `morph` as the spine reaches them. 6. **Cell 06 — Voices.** Two or three quotes from (fictional) collaborators, each held in a blob that gently rotates and re-rounds — never the same silhouette twice — to feel hand-thrown. No headshots, no logos: just the words and a soft thumbprint glyph. 7. **Cell 07 — Exhale.** All blobs from the whole page drift back to center, re-merge into one mass, which slowly *exhales* down to the small pulsing blob from Cell 01 — now containing a single quiet line: *"miris — to wonder at."* and one understated contact line (email, set as plain text, no button-shaped element). The site ends exactly where it began. A loop, a held breath released. Navigation is **minimal-navigation**: no nav bar. A single tiny blob in the corner acts as a progress dot — it morphs through seven silhouettes as you pass each cell. Click it and the page eases (spring physics) to the next cell. ## Typography and Palette **Type — Google Fonts only.** - **Fraunces** (variable, opsz 9–144, wght 100–900, SOFT axis high, WONK on) — the primary voice. Fraunces' optical-size axis and its "wonk" toggle give the serifs a slightly swollen, soft-cornered, almost-melting quality at display sizes that *is* blobitecture in type form. Used for the wordmark, all headings, the manifesto lines, pull-quotes, and the maquette titles. At display sizes we run it at opsz 144, wght 340, SOFT max — fat, tender, low-contrast. At body-quote size, opsz 28, wght 400. - **Newsreader** (variable, italic available) — secondary, for longer reading passages (the manifesto body in Cell 02, the process descriptions in Cell 05, the section labels in Cell 04). It's a humanist serif with enough warmth to sit beside Fraunces without competing; its italic carries the "annotation" voice. - **Spline Sans Mono** — used *only* for the technical labels in Cell 04's cross-section (*skin / pneumatic layer / ribbing / void*), the progress percentages, and the contact email. The single hard-edged, even-width element on the page — a deliberate small dissonance, the engineer's pencil note in the margin of a clay sketch. **Palette — muted, grounded-earthy, slightly grainy. Minimum 3 colors; full set:** - `#EFEAE1` — **Unfired Plaster** — the page ground; warm bone-white, the color of stoneware before the kiln. - `#E3D8C6` — **Slip** — the lighter inner fill of blobs catching light; a poured-clay highlight. - `#C9A98E` — **Thumbprint Ochre** — the mid-tone for pressed/recessed areas of blobs; the color of a fingertip dent in wet earth. - `#7A6A57` — **Damp Loam** — body text and hairline strokes; a soft brown-grey, never pure black. - `#2E2A26` — **Kiln Shadow** — the Cell 04 dark cell ground and the deepest blob crevices; charcoal with a brown undertone. - `#9FB7A6` — **Verdigris Breath** — the single cool accent: the translucent edge-glow on blobs in motion, the cross-section's "void" label, the contact link on hover. Used sparingly — under 5% of pixel area — like oxidation on a bronze maquette. - `#D98E73` — **Bisque Flush** — a warm terracotta used *only* for the pulse of the breathing blob in Cells 01 & 07 and the merged-isthmus glow when blobs swallow each other — the warmth of held breath. Gradients are always **soft radial**, low-stop-count (2–3 stops), high blur — `radial-gradient(ellipse at 38% 30%, #E3D8C6, #C9A98E 70%, #7A6A57)` is the canonical blob fill. A perpetual fine grain overlay (`feTurbulence` SVG noise at ~4% opacity, mix-blend `multiply`) sits over the entire page so nothing reads as flat digital color. ## Imagery and Motifs - **Metaballs / gooey merges** are the entire visual system — every container is a blob, blobs merge along smooth isthmuses, the SVG "goo" filter is the signature texture. - **Organic-blobs as figures, not background.** The maquettes in Cell 03 are rendered as soft 3D-ish forms — but achieved with layered radial gradients + multiple blurred box-shadows + a single inset highlight, *not* photographs and *not* heavy 3D renders. They should read as photographed clay maquettes on overcast film. - **Thumbprint glyph** — a custom whorled-oval mark (concentric not-quite-circles, like a fingerprint) — appears as the studio's emblem, the bullet for list items, and the marker beside quotes in Cell 06. - **Cross-section core-sample** — the Cell 04 nested-ring diagram — the one place the soft language is "cut" to reveal structure; drawn with concentric blob outlines, thin Spline Sans Mono labels, leader lines that themselves curve slightly. - **The breath cursor** — the cursor is replaced by a small soft blob that lags the pointer with spring physics and squashes/stretches in its direction of travel (elastic), leaving a faint Slip-colored trail that fades over ~600ms. - **Grain & low-light.** Persistent SVG-noise grain, a faint top-down vignette in light cells, a faint bottom-up glow (Kiln Shadow → warmer) in the dark cell. Everything looks lit by one north-facing window. - **No straight lines.** No borders, no rules, no rectangular cards, no underlines that aren't drawn as wobbling paths. Even the email link's hover "underline" is an SVG path with a hand-drawn waver, animated with `path-draw-svg`. ## Prompts for Implementation Build miris.works as **one long static HTML document** — no SPA, no router, no framework. Seven `
` elements stacked vertically. All animation in vanilla JS + CSS; scroll-driven effects via `IntersectionObserver` and a single rAF loop reading `scrollY`. Respect `prefers-reduced-motion` by freezing blobs at a pleasant resting silhouette and disabling the breathing pulse and cursor blob (but keep the layout — it must still be beautiful static). **The goo filter (do this first):** define one global SVG ``: `feGaussianBlur stdDeviation="12"` → `feColorMatrix` mode `matrix` with the classic alpha-sharpen values `1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9` → `feComposite in="SourceGraphic"`. Apply it to wrapper divs that contain 2+ overlapping `border-radius`-blob children. Tune `stdDeviation` per cell for thicker/thinner isthmuses. **Cell 01 — Inhale.** On load: Unfired Plaster ground, grain overlay fades in over 1.2s. One Slip-fill blob, ~14vmin, centered, running an infinite 4s `cubic-bezier(.37,0,.63,1)` scale 0.96↔1.0 with a synchronized Bisque Flush radial-gradient pulse. Wordmark `miris.works` in Fraunces inside it, opsz 144 / wght 320 / SOFT max, Damp Loam, letter-spacing slightly open. On first scroll input, the blob *inhales*: scale + `border-radius` morph to a relaxed organic ~70vmin form over 1.4s spring, tagline (Fraunces, opsz 60, wght 360) crossfades up from 0 opacity + 12px blur → 0 blur, staggered word by word. **Cell 02 — The Argument.** As Cell 01's blob exits, it visually *divides* into three child blobs (animate from one shared path to three, via scaling three sub-blobs out from center while the parent shrinks — let the goo filter sell the split). Loose triangle. Each child holds one manifesto line (Fraunces display) with the full paragraph (Newsreader, Damp Loam) revealing beneath on the first time the blob enters viewport. Cursor magnetism: for each blob, on `pointermove` within ~280px, translate the blob up to 18px toward the cursor and add a CSS variable that pushes one side's `border-radius` outward (bulge on the near side) — ease back with spring when the cursor leaves. Never break the blob skin; max bulge is gentle. **Cell 03 — Maquettes.** A wide parent blob spanning ~92vw. Inside, an inner `track` of six maquette blobs in a row; map this cell's scroll progress (0→1) to the track's `translateX` so vertical scroll scrubs horizontally. Each maquette: an organic form built from a base radial gradient (`Slip → Thumbprint Ochre → Damp Loam`), 3–4 stacked blurred `box-shadow`s for ambient occlusion, one `inset` highlight top-left, sitting on a flatter "plinth" blob. Title in Fraunces beneath, hidden until hover. On hover, the maquette blob drifts toward the parent's centerline and their isthmus thickens (raise the parent goo `stdDeviation` momentarily) so it looks *swallowed*; the title + a one-line Newsreader description surface inside the merged volume; a Bisque Flush glow blooms at the merge point. Keep all six visually distinct in silhouette. **Cell 04 — Section.** Background eases to Kiln Shadow over the scroll-in. All blobs in this cell go to ~0.35 opacity / `mix-blend-mode: screen`, edges glowing Verdigris Breath. Center stage: one large blob; as the user scrolls through, a `clip-path` "scalpel line" sweeps left→right revealing nested concentric blob-rings (4 rings), each labeled in Spline Sans Mono (`skin` / `pneumatic layer` / `ribbing` / `void` — `void` in Verdigris Breath) with gently curved leader lines drawn via `path-draw-svg` as they're uncovered. This is the calm climax — let it breathe, slow it down. **Cell 05 — Process.** Background eases back to Unfired Plaster. A single vertical gooey "spine" blob runs down the center. Five content blobs bud off alternating sides as you scroll; each contains a step title (Fraunces) + Newsreader description, revealing with opacity 0→1 + 16px-up `morph` + a brief border-radius wobble as the spine's animated "fill" (a Thumbprint Ochre gradient travelling downward, scroll-linked) passes that node. **Cell 06 — Voices.** Two or three quote blobs, each slowly rotating (±4deg, 18s loop) while its `border-radius` cross-fades between 3 hand-tuned organic presets so the silhouette is never static. Quote text in Fraunces italic-ish (use Newsreader italic for the attribution line), thumbprint glyph beside each. Blobs gently repel each other if they'd overlap (simple distance check, push apart with spring). **Cell 07 — Exhale.** Trigger: when this cell is mostly in view, every blob that has appeared on the page animates its position back toward viewport center and they merge (goo) into one mass; that mass then *exhales* — scale + radius morph down to the ~14vmin pulsing blob from Cell 01, Bisque Flush pulse resuming. Inside: `miris — to wonder at.` (Fraunces, opsz 90, wght 300) and below it, small, Spline Sans Mono, the contact email as plain text with an SVG hand-wavering underline that draws on hover (Verdigris Breath). Page ends in stillness. **Global:** custom blob cursor (spring-lagged, squash/stretch, fading Slip trail); persistent `feTurbulence` grain at ~4% multiply over everything; corner progress blob that morphs through 7 silhouettes and springs the page to the next cell on click. Everything timed slow — default transition 600–1400ms, easing always smooth ease-in-out or spring, never linear, never snappy. **AVOID:** any rectangular card or container; CTA buttons or button-shaped elements; pricing blocks; stat-grids / counter-animated number rows; navigation bars; hard borders, dividers, or straight underlines; glossy/chrome highlights; bright saturated candy color; hero-with-CTA patterns; testimonial carousels with headshots and company logos. ## Uniqueness Notes Distinct departures from the registry and from the "blobitecture fluid layout" seed's defaults: 1. **Blobitecture rendered *earthy and matte*, not glossy.** The web canon for blobs is Frutiger-Aero gloss, Y2K chrome, or candy-bright 3D renders. miris.works runs blobitecture in Unfired Plaster + Damp Loam + Thumbprint Ochre with a persistent grain overlay — wet clay, not lava lamp. No glass, no chrome, no neon. Grounded-earthy + zen-contemplative tone instead of playful/energetic. 2. **Zero rectangles.** Against the 88% card-grid / 89% full-bleed-rectangle / 86% centered-box norm, there is *no* rectangular content container anywhere — every region is a metaball mask. The layout is `organic-flow` (4% in registry) taken to a literal extreme: the page is one merging fluid the whole way down. 3. **Breath as the structuring metaphor.** The site opens and closes on the same small pulsing blob; the whole scroll is one inhale (Cell 01) → hold/argument/work/section/process/voices → exhale (Cell 07). A deliberate loop ending where it began — rare against the linear top-to-bottom-then-CTA structure of most designs. 4. **Fraunces with SOFT/WONK axes used *as* the blob language in type.** Most sites pick Fraunces for "warm editorial." Here its variable optical/soft/wonk axes are pushed to make the serifs visibly swollen and melting — typography that is itself blobitecture, not just a font that pairs nicely. 5. **The one hard-edged moment is load-bearing.** Cell 04's cross-section + Spline Sans Mono labels is the *only* straight-line, mono-type, diagrammatic element — and it exists to justify the softness everywhere else by showing the structure underneath. A single intentional dissonance rather than a uniformly soft (or uniformly busy) page. Avoided overused patterns from frequency analysis: glassmorphism (75%), hand-drawn (96%) as a primary aesthetic, photography imagery (98%), card-grid (88%) / centered-box (86%) layouts, cursor-follow done as a plain dot (89%) — replaced here with an elastic squash-stretch blob cursor. Documented chosen seed/style: **blobitecture fluid layout** (registry frequency ~2%, deliberately underused).