# Design Language for hinagiku.bid ## Aesthetics and Tone hinagiku.bid is **a sunken auction house — a flooded Belle Époque salesroom where the lots have drifted off their plinths and now hang suspended in two hundred metres of cold, clear ocean, lit from above by a single shaft of green-gold daylight, while a chorus of tiny chrysanthemum-bubbles rises past the chandeliers.** The domain word *hinagiku* (雛菊 — the daisy, literally "little chrysanthemum") is read here not as a meadow flower but as **a marine bloom**: a cluster of pale, many-petalled discs the size of dinner plates, fanning open and shut in the current like a slow heartbeat. The `.bid` suffix is taken at face value — there *is* a sale, and it is **opulent, hushed, and very deep**: the visitor descends through the saleroom not to buy anything, but to witness each lot present itself, one at a time, as the sunbeam swings across the room and picks it out of the gloom. The mood sits exactly between **grand and playful**: the architecture is operatic — gilt cornices, deep-buttoned velvet, an auctioneer's rostrum the size of a pulpit — but everything is *waterlogged*, gently buoyant, and surrounded by an irrepressible fizz of bubbles that refuses to take the grandeur entirely seriously. Tone words from the seed: **opulent-grand**, with bubble-playful undercutting the pomp. Think *the Salon Carré of the Louvre, submerged*; think *a Sotheby's catalogue printed on wet silk*; think *a Jules Verne salvage expedition that found a ballroom instead of a wreck*. Nothing is for sale. Everything is on display, lit like treasure, swaying. This is **glassmorphism done as actual underwater glass** — frosted vitrines, fogged display cases, panes of water-cooled crystal between the viewer and the lot — not the flat blurred-rectangle UI cliché. Every translucent surface here has *depth*, *caustic light bending through it*, *condensation*, and *a faint green cast from the water column*. ## Layout Motifs and Structure The page is **one continuous diagonal descent**, built on the seed's `layout: diagonal-sections` taken at full strength: **there is not one horizontal section boundary on the page.** Every band of content is sheared — its top and bottom edges run at a consistent **−7° rake**, as though the whole flooded saleroom has settled slightly off-level on the seabed. Sections slot into one another like collapsed playing cards. The eye is pulled diagonally down-left, then down-right, then down-left again — a slow zig-zag sink, never a straight drop. Structural spine, top to bottom: 1. **THE SURFACE (hero).** The sunbeam enters here — a single broad shaft of green-gold light raked across the viewport at the section angle. The domain wordmark *hinagiku.bid* floats dead-centre in retro-display capitals, slightly buoyant (a 6-second `translateY` bob), with a wreath of marine-daisy petals fanning slowly around it. Behind it: the dim suggestion of a vaulted ceiling, gilt cornices catching the light. Bubbles already rising through the type. 2. **THE DESCENT MANIFEST.** A sheared band of running text — the "auction announcement" — set as a single justified column shaped to a parallelogram via `shape-outside`. This is the only long-form text block; everything below is lot-by-lot. 3. **THE LOTS (×5).** Five stacked sheared bands, alternating shear direction (−7°, +7°, −7°, +7°, −7°). Each is **a single lot, full-bleed, alone in the dark**, lit by the swinging sunbeam. Each lot is presented inside a **frosted vitrine** — a glassmorphic pane with caustic light playing across it — and as the visitor scrolls it into view, the pane *clears* (blur drops from 18px to 2px), the lot rotates 4° to face the viewer, and a brass lot-card slides up from below with its "provenance" (poetic, never a price). This is the seed's `patterns: zoom-focus` — each lot, in turn, becomes the only sharp thing on screen while everything around it stays softened and dim. 4. **THE ROSTRUM.** The auctioneer's pulpit, drawn in CSS as a buttoned-velvet hexagonal mass with a gilt rail, holding a single closing inscription. The gavel is a small barnacled hammer that, on hover, falls once with an `elastic` ease and releases a burst of bubbles instead of a *bang*. 5. **THE FLOOR (footer).** The seabed: a soft sediment gradient, a scatter of settled petals, the wordmark again at one-third size, slowly sinking. Navigation is **minimal and submerged**: a thin vertical "depth gauge" pinned to the right edge — a column of tick marks reading −10m, −40m, −90m, −150m, −210m — that fills downward as you scroll, the current depth glowing. Clicking a tick glides you to that lot. No card-grid. No bento. No stat-grid. No pricing table. No CTA buttons anywhere — the only interactive affordances are the gavel and the depth gauge. ## Typography and Palette **Type stack — Google Fonts only, three families, with `typography: retro-display` as the governing law.** - **Monoton** (Google Fonts) — the *display voice* and the soul of the page. Its single-weight, hollow, neon-tube outline letterforms read as **the gilt lettering of a 1930s auction-house frontispiece seen through water** — each letter a thin gold pipe full of trapped air. Used **only** for: the hero wordmark *hinagiku.bid*, the five enormous lot numbers ("LOT I" … "LOT V"), and the footer mark. Set huge — hero at `clamp(3.5rem, 12vw, 11rem)`, lot numbers at `clamp(4rem, 18vw, 16rem)` — with letter-spacing `0.04em` and a faint outer glow in pale gold so the "tubes" seem to be lit from inside. - **Yeseva One** (Google Fonts) — the *headline and lot-title voice*. A high-contrast display serif with swelling, ball-terminal strokes — reads as **engraved catalogue copperplate**, opulent without being fussy. Used for lot titles, the rostrum inscription, the depth-gauge labels. Weight 400 (its only weight), sizes `clamp(1.6rem, 4vw, 3.2rem)`, tight tracking `-0.01em`. - **Spectral** (Google Fonts, variable) — the *body and provenance voice*. A screen-tuned serif with a calm, slightly old-fashioned warmth — reads as **the small print of a luxury catalogue**. Used for the descent manifest, lot provenance cards, depth-gauge tick numbers, all running text. Weights 300 (large quotes), 400 (body), 500 (lot-card headings), 600 (the rare emphasis). Generous `line-height: 1.7`, measure capped at 62ch. **Palette — `palette: ocean-deep`, eight colours, gold and sediment warming the cold blues.** - `#04141F` — **abyss ink.** The page ground; the water past the reach of the sunbeam. Very nearly black, with a blue undertone. - `#0A2E3D` — **deep column.** The mid-water; the inside of the vaulted hall. Section grounds sit here. - `#11556B` — **lit water.** Where the sunbeam thins out — caustic edges, vitrine tints, the depth gauge's filled portion. - `#2C8AA0` — **shallow glow.** The brightest the water gets; rim-light on lots, the depth gauge's active tick, link hover. - `#7FD7DC` — **bubble glass.** Bubble highlights, frosted-pane edges, the cool top-light on the marine daisies. - `#E9C97D` — **drowned gold.** The gilt — cornices, the auctioneer's rail, the Monoton glow, lot-card brass. Used sparingly; it is the only warm note and it must read as *treasure*. - `#C04A3D` — **velvet rust.** Deep-buttoned upholstery on the rostrum, a single accent thread. A muted oxblood — opulent, slightly decayed underwater. - `#F2EBDD` — **catalogue cream.** Body text on dark; lot-card paper; the marine-daisy petals' core colour. Caustic light is rendered as moving gradients in `#2C8AA0` → `#7FD7DC` at 8–14% opacity; the sunbeam is a `conic`/`linear` blend from `#E9C97D` through `#2C8AA0` to transparent. ## Imagery and Motifs **No stock photography. No 3D render. No Lottie. No icon font. No illustration-library clip-art.** Every visual is one of these hand-authored, CSS/SVG-only asset types: 1. **The marine daisy (SVG).** A single reusable ``: 24–32 long, narrow petals radiating from a domed centre, drawn as bezier paths. Petals individually `transform-origin: center` so the whole bloom can "breathe" — a 5s scale-and-fan loop, each petal phase-offset so the flower ripples open and shut like a slow pulse. Instances appear at five scales: a wreath around the hero wordmark, one drifting through each lot vitrine, a scatter settled on the seabed footer. Colour `#F2EBDD` core fading to `#7FD7DC` tips. 2. **Bubbles (CSS, the page's signature).** Pure-CSS spheres — `radial-gradient` for the body, a small offset white blur for the specular highlight, a faint `#7FD7DC` rim. Three drifting layers (`patterns: parallax`): coarse foreground bubbles rising fast, mid bubbles slower, a fine champagne haze barely moving. They rise *the full height of the page*, wobbling on a `translateX` sine. Density spikes around the hero type and around the gavel-strike. This is `imagery: water-bubbles` and `motif: bubble-playful` carried literally. 3. **The frosted vitrines (CSS glassmorphism, done right).** Each lot's display case: `backdrop-filter: blur()` *plus* a `box-shadow` inset for "thick glass", *plus* a moving caustic gradient overlay, *plus* a 1px `#7FD7DC` top edge for "water meniscus", *plus* a faint vertical condensation streak. On scroll-into-view the blur animates 18px → 2px (`patterns: zoom-focus` / `blur-focus`). 4. **The flooded saleroom architecture (CSS).** Drawn entirely with gradients and `clip-path`: gilt cornices as thin `#E9C97D` strips with a 1px highlight; the vaulted ceiling as a stack of stretched ellipses fading into `#0A2E3D`; the auctioneer's rostrum as a buttoned-velvet hexagon (`radial-gradient` button-tufts in `#C04A3D`) with a brass rail. 5. **The sunbeam (CSS, the lighting engine).** One absolutely-positioned, sheared, blurred wedge of `#E9C97D`→transparent gradient that, on scroll, slowly *sweeps* across the room (a `translateX` + slight `rotate` driven by scroll position) so that each lot in turn is the one it's pointing at. Caustic ripples (`background: repeating-radial-gradient` with `mix-blend-mode: screen`, animated) crawl over whatever the beam touches. 6. **The lots themselves (CSS/SVG).** Five "treasures", each an abstract opulent object built from primitives — a tilted gilt picture frame around a dark void; a chandelier of bubble-droplets on gold wire; a velvet jewel-casket, lid ajar, light leaking out; a marble bust whose features have softened to a smooth blank under the water; a stopped ormolu clock with one drifting daisy where the pendulum should be. Each rendered at large scale, rim-lit, alone. 7. **The depth gauge (SVG).** A thin vertical rail with engraved tick marks and Spectral numerals; a glowing `#2C8AA0` fill that rises from the bottom as you scroll; the active tick haloed in `#7FD7DC`. ## Prompts for Implementation Build hinagiku.bid as **one HTML file, one CSS file, two ES modules (`descent.js` for the scroll-driven sunbeam + vitrine clearing + depth gauge, `fizz.js` for spawning and recycling the bubble layers), and one inline SVG `` block** holding: the caustic turbulence/displacement filter, the marine-daisy ``, the five lot shapes, the bubble gradient, and the gavel. **No framework, no router, no build step, no GSAP, no Three.js, no canvas, no WebGL.** Motion budget: CSS `@keyframes` for every ambient loop (bubbles rising, daisies breathing, caustics crawling, the hero wordmark bobbing, the velvet button-sheen), plus **one `IntersectionObserver`** that fires the per-lot sequence (vitrine blur-clear → lot 4° rotate-to-face → brass provenance card slide-up, all on `cubic-bezier(0.34, 1.56, 0.64, 1)` for the `elastic`/`spring` feel), plus **one `requestAnimationFrame` scroll loop** that drives the sunbeam sweep and the depth-gauge fill (throttled, transform-only, `will-change: transform`). Respect `prefers-reduced-motion`: freeze the sunbeam at lot-1 position, stop bubbles, keep only the blur-clear and the daisy breathing at half speed. **Tell the descent as a story, full-screen, top to bottom.** The hero is *arrival at the surface above a flooded palace*. The descent manifest is *the diver reading the announcement on the way down*. Each lot is *a held breath* — the room goes dim, the beam swings, one treasure lights up, presents its provenance (write these as four or five lines of evocative Spectral prose — "Recovered from the east transept. Believed to have hung above the rostrum. The gilding survives. The painting does not." — never a number, never a price, never a "Buy"), then dims again as the beam moves on. The rostrum is *the auctioneer's closing words* — one inscription, the gavel falls once into bubbles. The footer is *settling onto the seabed*: everything sinks half a screen, the wordmark drifts down, the daisies come to rest. Each of the five sheared section bands is a **full-viewport-height stage** — `min-height: 100vh`, content vertically centred, the −7°/+7° shear applied to a wrapper via `transform: skewY()` with the *inner* content counter-skewed so text stays level inside a slanted frame. Backgrounds bleed past the shear so no triangular gaps show. The diagonal is the through-line: even the bubble columns drift along the rake, even the sunbeam enters at the section angle. **AVOID:** CTA-heavy layouts, "Sign up" / "Get started" / "Buy now" buttons, pricing blocks, plan-comparison tables, stat-grids ("10k+ customers"), testimonial carousels, logo walls, feature-icon trios, hamburger-menu chrome, cookie-banner clutter, card-grid catalogues. There is exactly one form of CTA energy permitted and it is the falling gavel — and it sells nothing. ## Uniqueness Notes This design is built to fill a **vacant cell** in the 240-design registry frequency map. Concrete differentiators: 1. **`diagonal-sections` (4%) at full strength — zero horizontal section edges.** 94% of the corpus is full-bleed rectangular bands; this page is an unbroken skewed descent where the −7°/+7° rake *is* the navigation metaphor (a palace settled off-level on the seabed). No other design uses the shear as the structural spine. 2. **`zoom-focus` (2%, the rarest pattern in the corpus) as an auction-lot reveal.** Instead of a generic "blur the background" effect, each lot in turn becomes the single sharp, lit object while the flooded saleroom around it stays soft and dim — the sunbeam literally points the focus. This pattern is essentially unattempted at this scale anywhere in the registry. 3. **Glassmorphism (66% — common) re-grounded as *physical underwater glass*.** Where the corpus uses glassmorphism as flat blurred UI rectangles, here every translucent pane is a fogged museum vitrine with caustics bending through it, a water-meniscus top edge, condensation streaks, and a green cast — glassmorphism with *depth and weather*, not as a card style. 4. **`ocean-deep` (3%) + `retro-display` (5%) + `opulent-grand` (5%) + `bubble-playful` (4%) is an unused intersection.** The corpus has no flooded-Belle-Époque-auction-house; combining hollow-neon-tube retro display type (Monoton) with drowned gilt, deep velvet, and a relentless champagne fizz of bubbles is a tonal register no other site occupies. 5. **No photography in a corpus that is 99% photography; no CTA/pricing/stat-grid in a corpus saturated with them.** Every visual is hand-authored CSS/SVG (marine daisies, bubbles, vitrines, sunbeam, lots, depth gauge); the only interactive elements are a gavel that releases bubbles and a depth gauge — the page sells nothing and asks for nothing. Chosen seed: **aesthetic: glassmorphism, layout: diagonal-sections, typography: retro-display, palette: ocean-deep, patterns: zoom-focus, imagery: water-bubbles, motifs: bubble-playful, tone: opulent-grand.** Avoided per frequency analysis: hand-drawn (96%) and editorial (35%) aesthetics; card-grid / centered / full-bleed rectangular layouts (86–94%); photography imagery (99%); warm + gradient palettes (97%); parallax-as-only-trick / cursor-follow / magnetic over-reliance (80–96%) — parallax is used here only for the three bubble depth layers; mono typography (95%) — none on the page.