# Design Language for miris.quest ## Aesthetics and Tone miris.quest is **a pool of warm milk being poured in zero gravity, photographed from inside the splash** — a blobitecture interior where nothing has a corner, nothing has a hard edge, and every surface is a meniscus. The name "miris" reads, depending on the visitor, as a half-remembered project codename, a mirage, an iris, a moiré — and the site leans into that liminal, *almost-a-word* quality. The mood is **soft, buoyant, slightly weightless, and intimate** — the opposite of the angular SaaS landing page. Think of the inflatable Italian furniture of the late 1960s (Quasar Khanh's pneumatic chairs), the molten interiors of Verner Panton's Visiona installations, and the way light passes through a frosted lava lamp at the moment the wax pinches. The blobitecture aesthetic (2% of corpus) is treated *architecturally*: this is a building you walk through, not a UI you click. Every "section" is a chamber — a rounded grotto budding off the previous one — and you flow between them the way a droplet flows down a steamed window: slowly, then suddenly, then pooling. The tone is **dreamy-ethereal** but never cold: warmth comes from the palette (honeyed neutrals, soft coral, a single deep ink) and from the soft-body physics of everything that moves. No urgency. No funnels. No "Get Started." The site behaves like a slow exhale. The overarching narrative: miris is *a thing that has not yet decided what shape it is.* The page is the record of that indecision — blobs that merge and split, type that settles like sediment, colors that bleed at their boundaries. By the bottom of the experience the blobs have not resolved into a logo or a product shot; they have simply come to rest, the way a lava lamp does when you turn it off. That is the whole story, and it is enough. ## Layout Motifs and Structure The page abandons the card-grid (88% of corpus), the centered column (86%), and the dashboard entirely. Instead it uses an **organic-flow layout (4% of corpus)** built on a "metaball stack": a vertical sequence of 5–6 rounded chambers, each one a large SVG/CSS blob (border-radius with 8 wildly asymmetric values, e.g. `42% 58% 63% 37% / 41% 44% 56% 59%`, animated). Chambers overlap their neighbors by ~12vh so the seams *gum together* — when you scroll, the lower blob's top edge swallows the upper blob's bottom edge like two mercury droplets touching. There is no rigid 12-column grid; content inside each chamber is positioned on a **loose radial logic** — text and imagery orbit the chamber's visual centroid at irregular radii, never snapped to a baseline. Spatial relationships: - **Chamber 1 (the meniscus)** — full-bleed, a single enormous slow-pulsing blob occupying ~120vh; the word "miris" sits *inside* the blob, its letterforms slightly bowed as if seen through the curved surface (subtle CSS `transform: perspective()` + a faint chromatic-aberration filter). - **Chamber 2 (the budding)** — the big blob has spawned 3 smaller satellite blobs; a paragraph of prose flows around them like text wrapping a river-stone, using CSS `shape-outside` on the blob shapes. - **Chamber 3 (the merge)** — two medium blobs slide toward each other on scroll and fuse; the fused blob holds a wide, slow horizontal-scroll strip (7% of corpus) of soft gradient-mesh imagery — but it's optional drift, not a gallery. - **Chamber 4 (the sediment)** — type "falls" and settles: lines of text drop with soft-body easing and pile loosely at the bottom of the blob like sand in an hourglass that's been tipped on its side. - **Chamber 5 (the rest)** — everything decelerates; one final pale blob, barely moving, holds a single small mailto link near its lower-left lobe. No CTA styling — it's just underlined text the color of weak tea. Negative space is generous (ma-negative-space, 11% of corpus): the chambers float on a near-white field with lots of breathing room at the page margins, so each blob reads as an object suspended in milk rather than a banner. ## Typography and Palette **Fonts (Google Fonts only — confirmed available):** - **Fraunces** — the primary display face, used for "miris" and chamber headings, set in its "Soft" optical variation at light-to-medium weights (300–500), with the `SOFT` and `WONK` variable axes pushed toward their softer/wonkier extremes so the serifs look slightly *melted*. Display size `clamp(3.2rem, 11vw, 9rem)`, letter-spacing `-0.02em`, line-height `0.95`. Used sparingly — maybe four times on the whole page. - **Hanken Grotesk** — the body / interface face: a soft humanist grotesque with gently rounded terminals. Body copy at `1.0625rem / 1.7`, weight 400, with generous `max-width: 34ch` so paragraphs read like captions floating in fluid. Letter-spacing `+0.005em`. - **Spline Sans Mono** — used only for tiny atmospheric annotations (a coordinate, a timestamp, a "no. 3 of 6" chamber marker) tucked into blob lobes; `0.75rem`, `letter-spacing: +0.06em`, color held to the faintest ink. This is the only nod to the mono trend (94% of corpus) — deliberately minimized. **Palette (warm, soft, low-contrast — minimum 3 colors, here 7):** - `#F7F2EA` — *milk*, the page ground; warm off-white, never pure white. - `#FBEFE2` — *cream froth*, used for the lightest blob fills and overlap blends. - `#F2C9B4` — *soft coral clay*, the primary blob tint; the color of a peach held up to a lamp. - `#E89B7E` — *warm terracotta*, deeper blob cores and the bleed-edge of merging shapes. - `#C9A8C4` — *dusty iris*, a quiet mauve used only in gradient-mesh transitions (a wink at "miris" → "iris"). - `#7C8B7E` — *eucalyptus shadow*, the muted sage used for the rare hairline and for `shape-outside` shadow hints. - `#2B2620` — *weak-tea ink*, the only "dark" — warm near-black for body text and the lone link; never `#000`. Gradients are **mesh, not linear** (gradient-mesh imagery, 18% of corpus): each blob is filled with a 3–4 stop conic/radial mesh that drifts ~8s, so the coral seems to *churn* slowly inside the shape. Contrast is intentionally gentle — this site whispers. ## Imagery and Motifs The visual vocabulary layers a few uncommon categories: - **Organic-blobs imagery (7% of corpus)** — but pushed to an extreme: not decorative accent blobs, but the *entire structural skeleton* of the page. Each is a hand-tuned SVG path animated via CSS or a tiny `requestAnimationFrame` loop that lerps between 3–4 keyframe path shapes, so blobs are perpetually, almost imperceptibly, breathing. - **Gradient-mesh + a faint grain-overlay (7% of corpus)** — a 4% opacity film grain over the whole viewport so the milky field has the texture of analog photography of liquid, not flat CSS. - **Bubble-playful motif (4% of corpus)**, reinterpreted as *physics, not cuteness* — when the cursor hovers a blob, a small daughter-bubble nucleates at the contact point, swells, detaches, drifts up a few centimeters, and pops with a soft scale-and-blur. No cartoon faces, no sparkles. - **Flowing-curves motif (5% of corpus)** — the only "lines" on the page are the seams where two blobs gum together: a single soft curved highlight (1px, `#7C8B7E` at low alpha) tracing the union boundary, redrawn on scroll. - **Inflated-3d aesthetic touch (2% of corpus)** — blobs carry a single soft inner glow and a wide, very diffuse drop shadow (`filter: blur(60px)` on a pseudo-element), so they read as *pneumatic*, slightly over-inflated, like the site is holding its breath. No photography of people. No iconography. No logos. The closest thing to an "image" is Chamber 3's horizontal drift strip — and that's just more mesh gradient, panned slowly. ## Prompts for Implementation Build this as **a single uninterrupted descent through a soft, liquid interior** — one continuous scroll, no nav bar, no footer columns, no pricing, no testimonials, no stat-grid, no "Sign Up" button anywhere. If the visitor wants to reach the project, there is exactly one quiet `mailto:` link the color of weak tea, sitting in the lower-left lobe of the final blob. Treat conversion as something that would *break the spell* — so don't. HTML/CSS/JS guidance: - **Structure** = a `
` containing 5–6 `
` elements, each absolutely positioning a large blob (SVG `` or a `
` with extreme asymmetric `border-radius`) plus loosely-orbiting text. Chambers overlap via negative margins (~ -12vh) and `mix-blend-mode: multiply` on the cream-tinted overlap zone so seams *blend* rather than stack. - **Blob animation**: precompute 3–4 path shapes per blob; lerp between them with a small JS loop (or pure CSS `@keyframes` on `d` / `clip-path` where supported). Periods 6–14s, eased with a soft `cubic-bezier(0.34, 0.6, 0.36, 1)` so motion feels like buoyancy, never like a spinner. - **Scroll choreography (scroll-triggered, 21% of corpus)**: as the user scrolls, the *fusion* events fire — IntersectionObserver triggers the two-blob-merge in Chamber 3, the type-sediment fall in Chamber 4, the final deceleration in Chamber 5. Use spring-like easing (spring, 86% of corpus — fine to use, but tuned soft and overdamped, never bouncy). - **Cursor reactivity (cursor-follow, 89% of corpus — reinterpret it)**: don't move a custom cursor dot. Instead, the *nearest blob's mesh gradient* shifts its focal point a few percent toward the pointer, so the liquid seems to lean toward you. On hover-press, nucleate a daughter bubble (see Imagery). - **Type behavior**: Chamber 4's "sediment" — split a short paragraph into lines, give each line `transform: translateY(-30vh)` initially, then on enter let them fall with staggered delays and overdamped spring easing, coming to rest at slightly random `x` offsets and rotations (±2deg) so they pile loosely like settled silt. - **The word "miris"**: render it once, huge, *inside* Chamber 1's blob, with `transform: perspective(800px) rotateX(4deg)` and a 0.5px chromatic-aberration via stacked text-shadows in coral and iris — as if read through the curved meniscus. - **Storytelling**: the page tells the story of an undecided shape coming to rest. Open with maximum motion (the pour), end with near-stillness (lava lamp switched off). Do not resolve the blobs into anything. Let the last thing on screen be a pale, barely-breathing blob and a tiny mailto link, and a lot of milk-colored space below it. - **Performance/accessibility**: out of scope per instructions — optimize purely for the visual poetry of fluid motion. ## Uniqueness Notes **Chosen seed (from assignment / fallback selection):** `blobitecture fluid layout` — mapped to aesthetic: blobitecture; layout: organic-flow; typography: serif-revival (Fraunces) + humanist (Hanken Grotesk); palette: honeyed-neutral; patterns: scroll-triggered + spring (soft-tuned); imagery: organic-blobs + gradient-mesh + grain-overlay; motifs: bubble-playful + flowing-curves; tone: dreamy-ethereal. (No Planned Seed was supplied in the assignment, so this seed was chosen from `seeds.json` as one essentially unused elsewhere in the corpus.) **Differentiators from other designs in the corpus:** 1. **Blobitecture as load-bearing architecture, not decoration.** Per the frequency analysis, blobitecture aesthetic and blobitecture layout each appear in only ~2% of sites, and organic-flow layout in 4%. Here the blobs *are* the page skeleton — the chambers, the scroll seams, the text-wrap shapes — rather than the usual scattering of background blob accents over a card-grid. Nothing else in the corpus commits this fully to a cornerless structure. 2. **Avoids the corpus's three biggest crutches at once.** I deliberately reject hand-drawn aesthetic (96%), glassmorphism (75%), and the centered/card-grid/full-bleed layout triad (86/88/89%). There is no card grid, no frosted glass, no centered hero column, no photography of people (98%), and the mono trend (94%) is reduced to a few microscopic annotations. 3. **A "milk in zero gravity" warm-neutral palette with mesh-only gradients.** The honeyed-neutral / soft-coral / dusty-iris scheme with no pure white and no pure black, churned via animated mesh gradients inside every shape, is distinct from the corpus's dominant warm-gradient-on-card look — and the name-play (miris → iris → mirage → moiré) is woven into both the palette (dusty iris) and the type treatment (chromatic-aberrated meniscus lettering). 4. **Anti-conversion by design.** Where most sites push CTAs, pricing, and stat-grids, this one ends in deliberate stillness with a single tea-colored mailto link — the page's whole arc is motion decaying to rest, like a lava lamp switched off. **Avoided patterns referenced from frequency analysis:** hand-drawn (96%), photography (98%), card-grid (88%), centered (86%), full-bleed hero column convention, glassmorphism (75%), mono-as-primary-typeface (94%), bouncy spring (kept overdamped instead), cursor-dot follower (89% — reinterpreted as gradient-lean), CTA/pricing/stat-grid layouts (excluded entirely).