# Design Language for lsware.bid ## Aesthetics and Tone lsware.bid is **a molten auction held inside a lava lamp** — picture a clandestine bidding hall where the lots are not paintings or jewels but globules of liquid metal suspended in warm dark fluid, each one slowly inflating, splitting, and re-merging while unseen bidders raise their numbers in the dark. The aesthetic is **blobitecture rendered in jewel-toned molten glass**, with a **mysterious-moody** tone: hushed, slow, gravid with anticipation. Nothing here is rectangular. Nothing here holds still. Walls bulge. Pedestals droop like candle wax. The bid increments arrive not as numbers ticking up a column but as a fresh blob bubbling up from the floor of the screen, swelling, and being absorbed into the lot it raises. The reference points are: a 1968 fiber-optic lamp seen through a glass of dark amber rum; the cooling skin on a poured bronze casting; the slow-motion footage of a single drop of ink dispersing in water; and the silent, breath-held hush of the moment before a hammer falls. The mood is **opulent but liquid** — wealth that has melted and is now circulating. This is the antithesis of the grid: it is the puddle. blobitecture sits at only 2% in the frequency corpus, and what little exists tends to be bright and bouncy and playful; lsware.bid claims the *dark, slow, molten* end of blobitecture that the corpus has left untouched. ## Layout Motifs and Structure The site is a **single vertical descent through seven molten chambers** — an **organic-flow** layout where there are no straight section dividers anywhere. Each chamber transition is a `border-radius`-warped meniscus: the bottom of one chamber sags into a heavy droplet that the next chamber catches as a rising bulge. Scroll feels like sinking through layers of immiscible fluid. - **No rectangles. Ever.** Every container — every "card," every panel, every button, every image mask — is an SVG blob path or a hyper-rounded `border-radius` quad (e.g. `42% 58% 63% 37% / 41% 44% 56% 59%`). The blob shapes are *animated*: their radii morph on a slow 14–22s loop so the page is perpetually, gently breathing. (morph sits at 12% — present but far from saturated; here it is the *structural primitive*, not a hover garnish.) - **The descent rail.** Down the left margin floats a single thread of seven viscous droplets, vertically strung like a slow lava-lamp column. The active droplet swells to ~1.6× and emits a faint inner glow; passing droplets stretch toward it, neck thinning, before snapping back. No labels, no numbers visible until hover, when a thin variable-weight numeral (I · II · III …) bleeds out 14px to the right and re-absorbs after 1.4s. - **Chamber composition.** Each chamber is a near-full-viewport vignette: one molten "lot" floating centred-but-off-axis (golden-ratio offset), one ribbon of caption text curving along the lot's lower meniscus, one faint ambient field of smaller satellite blobs drifting at parallax depths. Text never sits in a box; it follows `textPath` along invisible blob contours, so reading the page means reading *around* the lots. - **The bid-bubble mechanic.** As the visitor scrolls within a chamber, small jewel-toned bubbles periodically nucleate at the bottom edge, rise with a wobble, and are *absorbed* into the lot — each absorption nudges the lot's running "bid" caption upward. This is the only "interaction"; it is ambient, not transactional. There is no form, no checkout, no "place bid" button — the bidding is something you *witness*, not perform. - **No top nav, no footer, no logo cluster.** The wordmark "lsware.bid" appears once, in chamber I, as a blob that the first lot rises out of and is named by. ## Typography and Palette **Type system (Google Fonts only):** - **Display / lot-names / wordmark — `Fraunces` (variable, opsz 9–144, wght 300–900, SOFT 0–100):** Set at maximum optical size and high SOFT so the serifs swell into liquid bulbs that rhyme with the blobs. Used for the seven lot-names and the wordmark. Sizes 96px → 200px. Tracking `-0.02em`. Each lot-name *morphs* its `wght` and `SOFT` axes by a few units on the same slow breathing loop as the blob it labels — variable-fluid typography in the literal sense: the letterforms are themselves slightly molten. (variable-fluid type is at 4%; the breathing-axis treatment here is, per the corpus, unclaimed.) - **Captions / bid-ribbons / body — `Newsreader` (variable, opsz 6–72, italic + roman):** A reading serif with a warm, slightly old-auction-catalogue feel; used italic for the curving caption ribbons that follow each lot's meniscus, roman for the rare paragraph. 17–21px. Set along SVG `textPath` so it always curves. - **Micro-labels / descent-rail numerals / provenance lines — `Spline Sans Mono` (variable):** The single mono voice — used only for tiny uppercase tags ("LOT", "PROVENANCE: MOLTEN", the rail's I–VII numerals) at 11–12px, tracking `0.16em`. mono is at 93% in the corpus so it is *deliberately starved* here: it appears on perhaps 1% of the page's glyphs, as a cold counterpoint to all the warm liquid serif. **Palette — jewel-tones suspended in dark amber fluid (jewel-tones at 4%; the specific molten-suspension treatment is unique):** - `#1A0E14` — *spent obsidian* — the deepest background fluid, the bottom of the lamp. - `#2E1A22` — *bruised plum-black* — mid-depth fluid, used for chamber backgrounds that sit "lower" in the descent. - `#7B1E3B` — *garnet melt* — the primary lot color, a deep ruby-wine that glows from within. - `#C9462E` — *poured copper* — secondary lot color and the nucleating bid-bubbles; the orange of metal just below pouring temperature. - `#E4A23B` — *liquid amber* — the warm rim-light on every blob, the glow of the active descent droplet, the only "bright." - `#3E6E63` — *cooled patina* — a single cold-jewel accent (one lot, the mono labels' faint underlay), the green of bronze that has chilled. - `#F2E6D4` — *candle-wax cream* — the text color for serif captions and lot-names, never pure white; warm, like ivory paper under low light. - `#5B2E55` — *amethyst smoke* — the parallax satellite blobs in the deep field. Backgrounds are never flat: each chamber is a slow radial-gradient between two of the dark fluids with a barely-perceptible film-grain and a soft vignette, so it reads as *volume of liquid*, not surface. ## Imagery and Motifs **No photography. No 3D renders. No stock anything.** Every visual is hand-built SVG and CSS — the entire site is blobs, gradients, and curved text. **The seven lots (one per chamber):** 1. **Lot I — "The Wordmark Itself."** A garnet-melt blob ~480px that slowly inhales and exhales; the `Fraunces` wordmark "lsware.bid" rises out of its upper meniscus and is the lot's name. A copper bid-bubble nucleates immediately on first scroll. Provenance line in mono: `LOT I · ORIGIN: UNKNOWN`. 2. **Lot II — "A Drop of Ink in Water."** A poured-copper blob that, on the breathing loop, splits into three smaller blobs and re-merges; thin tendrils (animated SVG `path` strokes in amber) trail between them like ink dispersing. Caption ribbon curves underneath in italic Newsreader. 3. **Lot III — "The Cooling Casting."** An amber-rimmed garnet blob with a visible "skin": an inner offset blob path at 6% opacity that lags the outer by 1.2s, so it looks like a cooling surface forming over molten core. Cracks (hairline amber strokes) propagate slowly across it. 4. **Lot IV — "The Patina Specimen."** The single cold lot — a *cooled-patina* green blob, matte where the others glow, sitting lower and slower in the fluid. Around it, the satellite blobs slow down too, as if this chamber is colder. A reminder that everything molten eventually chills. 5. **Lot V — "The Chandelier of Bids."** Dozens of tiny copper bid-bubbles, frozen mid-rise, strung in a loose hanging cluster like a liquid chandelier; the "main lot" is the *constellation*, not any single bubble. The bid-ribbon counts them. 6. **Lot VI — "The Hammer (Liquid)."** A garnet blob shaped — barely, suggestively — like an auctioneer's gavel that has gone soft, its head sagging. On the breathing loop it "falls" a few pixels and rebounds with an elastic overshoot — the only hint of the hammer that never quite drops. 7. **Lot VII — "The Puddle of Everything."** All seven palette jewels pooled into one slow, wide, low blob that spans the chamber floor; the descent rail's seven droplets, on reaching this chamber, detach and sink into it one by one. The site ends not with a CTA but with everything melting together at the bottom of the lamp. **Recurring motifs:** - **Flowing-curves** as the only line vocabulary — no edges, no corners, no straight strokes anywhere except the 1% of mono micro-labels (flowing-curves at 5%; here it is exclusive). - **Nucleation** — small things bubbling up from the bottom edge and rising — as the universal "arrival" gesture for any new element. - **Absorption / merging** — the universal "exit" gesture: things don't slide off or fade, they get *eaten* by a larger blob. - **The meniscus** — every layer boundary on the page is a curved liquid surface, including section dividers, image masks, and the descent rail's connections. - **Lag-skin** — slow inner-offset shapes trailing their outer shells, giving everything a sense of viscous depth. ## Prompts for Implementation Build lsware.bid as **a single HTML page, one CSS file, one ES module** — no framework, no build step, no service worker, no analytics. The page is a ~90-second slow sinking through seven molten chambers of a darkened auction. There is **no CTA, no pricing block, no stat grid, no testimonials, no contact form, no email capture, no FAQ, no logo wall, no newsletter, no chatbot, no cookie banner, no "place bid" button.** Bidding is ambient and witnessed, never performed. **Storytelling structure (seven chambers, vertical scroll, morph-driven everything):** 1. **Chamber I — Naming.** The garnet blob breathes; the wordmark surfaces from it. A single copper bubble nucleates and is absorbed; the bid-ribbon writes its first figure. The descent rail's first droplet glows. 2. **Chamber II — Dispersion.** The copper lot splits into three and re-merges with trailing amber tendrils. Caption ribbon curves beneath. 3. **Chamber III — Cooling.** The lag-skin forms over the garnet core; hairline cracks crawl. The fluid background sits a shade darker. 4. **Chamber IV — The Cold Lot.** Everything decelerates; the patina-green matte blob; satellites slow. A held breath. 5. **Chamber V — The Chandelier.** Frozen bid-bubbles hung in a liquid cluster; the count rises as the visitor scrolls. 6. **Chamber VI — The Soft Hammer.** The sagging-gavel blob falls and rebounds elastically, again and again, never landing. 7. **Chamber VII — The Puddle.** All jewels pool low and wide; the seven rail droplets detach and sink in, one by one. The page ends as a single slow shimmer at the bottom of the lamp. **CSS / JS guidance:** - **Blob shapes:** Generate each blob as an SVG `` with 6–8 anchor points and smooth bezier handles; animate by interpolating between 3–4 path keyframes on a 14–22s loop with `requestAnimationFrame`, never CSS `@keyframes` on `d` (Safari support). Use slightly different loop durations per blob so they never sync — the page should feel like a real, chaotic fluid. - **Buttons / clickable regions:** There is essentially one — the descent rail droplets (scroll-to-chamber). Style as morphing `border-radius` quads with an amber rim-light on `:hover` and a magnetic pull toward the cursor (gentle, ~6px max). Everything else is non-interactive. - **Curved text:** All captions and lot-names use SVG `` along invisible blob contours; recompute the path on resize. Lot-names additionally tween their `font-variation-settings` (`wght`, `SOFT`) on the blob's breathing loop. - **Bid-bubbles:** Spawn on `scroll` velocity within a chamber; each is a tiny copper blob that rises with a sine wobble, reaches the lot, scales to 0 while the lot scales up ~1% — the "absorption." Throttle so it stays meditative, not busy. - **Backgrounds:** Per chamber, a 2-stop radial gradient between two dark-fluid hues, plus a CSS `filter`-driven film grain (or a tiny tiled SVG noise at ~4% opacity), plus an inset `box-shadow` vignette. Crossfade chamber backgrounds over the meniscus transition zone. - **Motion principles:** Everything *eases like a thick liquid* — long durations (1.2–2.4s), heavy ease-out, slight elastic overshoot on arrivals. `prefers-reduced-motion`: freeze all loops at their mid-keyframe, disable bid-bubbles, keep the layout (it still reads as a still-life of molten lots). - **Performance:** It's all vectors and gradients — keep it light; no images to load. Lazy-init each chamber's RAF loop via `IntersectionObserver`. Bias the whole build toward a **full-screen, slow, narrative immersion** — a thing you sink into and watch, not a thing you click through. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Blobitecture in its dark/molten register.** blobitecture is at 2% in the aesthetic corpus and reads, in what exists, as bright, bouncy, friendly. lsware.bid takes blobitecture into *dark amber, slow, opulent, mysterious-moody* territory — molten metal in dark fluid — a tonal recontextualization the corpus has not done. 2. **Morph as structure, not garnish.** morph sits at 12% and is almost always a hover micro-effect. Here, *every container on the page is a perpetually morphing blob* — morph is the layout primitive itself. There are zero rectangles, zero straight section dividers, and the only straight lines are ~1% of glyphs (the starved mono micro-labels). 3. **An auction with no transaction.** The `.bid` domain invites a marketplace / "place bid" / pricing-grid build; lsware.bid does the opposite — bidding is rendered as ambient nucleating bubbles you *witness*, with no form, no button, no price column, no checkout. CTA-heavy and stat-grid layouts are explicitly absent. 4. **Variable fonts that are literally molten.** The lot-names tween their `wght` and `SOFT` axes on the same breathing loop as their blobs — the letterforms themselves slowly soften and firm. variable-fluid type is at 4% and the breathing-axis treatment appears unclaimed. 5. **Avoided patterns from frequency analysis:** no hand-drawn (97%), no glassmorphism (72%), no photography (98%), no card-grid (89%), no centered/full-bleed *rectangular* layout (86%/92% — replaced by organic-flow chambers), no parallax-of-the-usual-kind (95% — there is depth-parallax of satellite blobs only), no cursor-follow trails (88% — only a gentle magnetic pull on the one set of clickable droplets), and the mono typeface (93%) is present but deliberately reduced to a vestigial 1% of glyphs. Chosen seed/style: *aesthetic: blobitecture, layout: organic-flow, typography: variable-fluid, palette: jewel-tones, patterns: morph, imagery: organic-blobs, motifs: flowing-curves, tone: mysterious-moody*