# Design Language for hinagiku.bid ## Aesthetics and Tone hinagiku.bid is a **blobitecture pastoral**: a chrome-plated meadow where molten architecture grows like wildflowers. Imagine Zaha Hadid's late curvilinear sketches printed onto enamel tin and left to weather in a quiet field of daisies. The tone is **pastoral-romantic** -- a soft love letter to a future where buildings melt into landscapes and landscapes drip into objects. The aesthetic borrows from chrome render trends of late-2000s motion graphics, Olafur Eliasson's reflective pavilions, and the gentle hand-lettering of Victorian seed catalogs. Everything pillows, swells, and curves; no edge is hard, no line is straight. The hero is dominated by a single immense glossy blob -- the petal of a daisy stretched into infinity -- that the user can almost smell as warm metal and pollen. The voice on the page reads like a country diary: short, lyrical, and slightly out of breath. The hinagiku (daisy) is reimagined as an inflatable mercury sculpture: still botanical, still tender, but rendered in liquid chrome and clicked into focus with a vintage typewriter. ## Layout Motifs and Structure A **hero-dominant** composition where the first viewport occupies 140vh and contains nearly the entire visual story. Everything below is a quiet codicil. - **Hero (140vh):** A full-bleed glossy chrome daisy blob fills the screen, set against a misted-meadow gradient (#e2dfd6 -> #cfc8b8). The blob morphs slowly via SVG path interpolation (16s loop, three keyframe paths). Floating in front: the title "hinagiku.bid" typed character-by-character in Playfair Display, each letter appearing with a tiny carriage-return click and red ribbon-strike, then the cursor blinking. A single Playfair-italic subtitle drops in below: "a slow auction for soft things." - **Bid scroll (90vh):** Beneath the hero, a single column 720px wide, centered, of Playfair-elegant body text -- a romantic prose-poem describing the lot of the week. To the right, a smaller chrome blob (40vw) follows the cursor with a 600ms ease-out lag, like a balloon on a string. - **Lot card (80vh):** One enormous chrome card, blob-shaped, holds the current lot description. Inside: typewriter-effect text that progressively reveals when the card scrolls into view. No "bid now" button -- instead, a hand-cursive instruction: "leave your number with the keeper." - **Field of petals (60vh):** A scattering of 12 smaller chrome blobs in varied sizes drift slowly upward, each labeled with a single sharp-angled glyph (a triangle, a chevron, a kite) that contrasts with the soft chrome surfaces -- the only sharp angles on the entire page. - **Footer (30vh):** A typewritten signature reading "the keeper of daisies" centered on the empty meadow background, followed by a single chrome bell-blob that rings on hover. Spatial logic: extreme generosity. No section uses more than 60% of horizontal width. Vertical breathing room is at least 200px between major elements. The page is mostly empty meadow. ## Typography and Palette **Fonts (Google Fonts only):** - **Display:** "Playfair Display" weight 700 italic at clamp(64px, 11vw, 168px). Letter-spacing -3%. The high-contrast brackets and stress angles of Playfair are the only "sharp angles" allowed in headlines, in deliberate tension with the chrome blobs. - **Subtitle:** "Playfair Display" weight 400 italic at clamp(20px, 2.6vw, 32px), letter-spacing 1%. - **Body:** "Playfair Display" weight 400 at 19px / 1.85. Long passages get a drop-cap in 5x line-height. - **Typewriter / monospace UI bits:** "Special Elite" (Google Fonts) at 15px / 1.6 for the reveal text and the keeper's notes. This is the only secondary face. - **Numerals (lot numbers, dates):** "Playfair Display" small caps weight 700. **Palette (chrome-metallic, warm-sky):** - `#e2dfd6` -- pale meadow mist (primary background) - `#cfc8b8` -- worn linen (secondary background, gradient stop) - `#a8a297` -- platinum smoke (mid-tone chrome surface) - `#7a7568` -- gunmetal olive (deep shadow on chrome) - `#3a3530` -- engraved ink (text on light) - `#d8c9a8` -- antique brass (small accents, ribbon-strike highlights) - `#f4f1e8` -- highlight gleam (specular bands on chrome blobs) All seven values sit in the chrome-metallic family with a warm pastoral tilt: no pure white, no pure black. The chrome reads as polished but slightly tarnished, never sterile. ## Imagery and Motifs - **Vector-art chrome blobs:** Every "image" on the site is an SVG path filled with a multi-stop linear gradient (highlight gleam to gunmetal olive) and a single white specular band on its upper-left lobe. Blobs morph between three or four paths via CSS transitions (or SVG SMIL for the hero). - **Sharp-angled glyphs:** Triangles, chevrons, kites, and slim zig-zags in antique brass, sized 32-64px, placed atop or beside chrome blobs as decorative counterpoint. They never round; they always cut. - **Typewritten ribbons:** Inline red ribbon-strike marks (`text-decoration: underline wavy #b04040`) appear briefly when each letter types in, then fade after 600ms. - **Pressed-flower silhouettes:** Daisy outlines as faint debossed shapes in the background, opacity 0.08, scattered like memory. - **Pastoral micro-illustrations:** A single line-drawn bee, a thin sprig of grass, and a tipped watering can, all in 1px engraved ink, appear once each across the page. - **Inflated drop-caps:** The first letter of each long paragraph balloons into its own miniature chrome blob in the margin. ## Prompts for Implementation The site is a long meadow with a single huge gleaming flower-blob at the entrance. The user walks past it, reads the keeper's letter, and leaves a number for a bid. The whole experience should feel like opening a romance novella printed on tinfoil. - The hero blob is a single `` with one `` whose `d` attribute is animated by `` between three handcrafted paths (16s cycle, 5.3s per keyframe). The gradient uses `` with offsets at 0%, 30%, 65%, 100% to simulate chrome. - The typewriter title is JS-driven with a per-character `setTimeout` (random 70-130ms between keys, deterministic seed by char index). Each character is wrapped in a `` and gets an inline `--ribbon-fade` custom property that animates the wavy underline opacity from 1 to 0 over 600ms. - The cursor-following blob uses `requestAnimationFrame` lerp toward `mouseX/mouseY` at 0.08 strength, never snapping. On mobile, it follows the device tilt via `DeviceOrientationEvent` if granted, else stays still. - Blob morphing across the page uses `clip-path: path()` transitions of 1200ms with `cubic-bezier(.7,0,.3,1)` to keep the motion creamy. - AVOID grids, cards, pricing tables, stat-counters, and CTA hierarchies. There is exactly one "interaction": the mailto for the keeper. - The narrative arc as the user scrolls: (1) the great chrome daisy; (2) a soft pastoral letter; (3) the lot, glowing; (4) the field of petals taking flight; (5) the keeper's signature; (6) the bell. - Honor `prefers-reduced-motion`: blob morphing stops on its center keyframe and the typewriter renders instantly. - All chrome gradients should drift their angle by ~6deg over 18s to give the illusion of soft daylight moving across the meadow. ## Uniqueness Notes **Differentiators from other designs:** 1. **Blobitecture x pastoral-romantic crossover:** No other design pairs liquid chrome blobs with a Victorian-seed-catalog voice. The contradiction (industrial reflection vs. country letter) is the central aesthetic argument. 2. **Sharp-angled glyphs as the only straight lines:** The motif of pairing chrome blobs with deliberately sharp triangles/chevrons -- one is never present without the other -- is a unique structural rule. 3. **Playfair as a structural motif:** Headlines use Playfair-italic at body-defying display sizes (up to 168px) so the bracketed serifs themselves become "sharp angles" inside the chrome composition. 4. **Hero-dominant 140vh that carries 80% of the story:** Most sites distribute meaning across many sections; here the first scroll alone is the entire poetic argument, with everything below acting as quiet annotation. 5. **No conventional bid mechanic:** Despite the .bid TLD, there is no input form, no price ladder, no countdown. The "bid" is a mailto link to a "keeper" -- a romantic anti-auction. **Chosen seed:** blobitecture hero-dominant Playfair chrome typewriter pastoral-romantic vector-art sharp-angles -- planned seed from assignment. **Frequency-aware choices:** Avoided overused `playful`/`corporate` aesthetics and `photography` imagery. Leans into underused `blobitecture` aesthetic, `vector-art` imagery, `typewriter-effect` pattern, and `chrome-metallic` palette -- all sub-2% in frequency analysis. Avoids common grid/sidebar/centered layouts in favor of a single dominant hero.