# Design Language for matsurika.bid ## Aesthetics and Tone matsurika.bid is **a midnight sealed-bid auction of single-flower jasmine essences, staged on the black-lacquer roof terrace of a 1931 Shanghai perfume house, where every lot is a stoppered crystal vial of *matsurika* (茉莉花 — Arabian jasmine) distilled from blossoms that only open after dark, and every bid is whispered into a brass speaking-tube before the moon crosses its zenith.** The domain name carries the whole concept. *Matsurika* is the night-blooming jasmine of Chinese and Okinawan gardens — the flower of the *Mo Li Hua* folk song, the flower picked by lantern at 11pm because by noon it has spent its scent. *Bid* is the auction call. So this is not a marketplace and not a perfume shop: it is **a single nocturnal sale that begins when the page loads and closes at an hour the visitor never quite catches**. The tone is **opulent-grand** (5% of corpus) but pulled toward its *quiet, after-hours* register — not the casino-floor opulence of marble lobbies and gold leaf in daylight, but the opulence of a private terrace at 2am: black stone still warm from the day, gold only where lamplight strikes it, the air thick with one single flower. The aesthetic spine is **art-deco** (5% of corpus) — but the *Shanghai Deco* of the Bund, not the Miami or Paris variant: stepped ziggurat frames, sunburst fans, lacquered geometric inlay, and a streamlined sans that looks machined from brass. Deco here means **precision in service of a perfume**: the chrysler-spire chevron becomes the silhouette of a jasmine bud about to split; the deco sunburst becomes the petals fanning open; the deco fluted column becomes the glass flute of the vial. Everything geometric, everything in service of something soft. Emotional target on first scroll: *I have been admitted somewhere that closes soon, where the most precious thing in the room is invisible and I am being invited to name a price for it before the moon moves.* ## Layout Motifs and Structure The dominant structural commitment is **split-screen** (1% of corpus — the rarest layout token, claimed deliberately as the spine). Not the SaaS "image left, copy right" split, but a **persistent vertical division of the viewport into TERRACE (left, ~58vw) and LEDGER (right, ~42vw)** that holds for the entire scroll: - **TERRACE (left panel)** is the dark, slow, atmospheric column: black-lacquer ground, a single drifting jasmine vine SVG, the moon arc, the lot vials photographed (rendered, see Imagery) one at a time as you scroll, each occupying nearly the full panel height. The terrace scrolls at 1.0 speed. - **LEDGER (right panel)** is the brass-railed sale book: a narrow column of deco-ruled rows — lot number, distillation date, blossom count, provenance terrace, current whispered bid (a number that ticks up on a slow stagger), and the speaking-tube control. The ledger scrolls at 0.82 speed, so over a long page it visibly *drifts upward relative to the terrace*, the way a ledger page rides up as the auctioneer's hand moves down it. The seam between the two panels is a **3px brass rule with a repeating deco "stepped pyramid" fret motif** (a 24px-tall SVG tile, gold on black), and a 1px inner shadow on each side so the seam reads as an actual physical edge — the lip of the speaking-tube console between the terrace and the book. On viewports below 880px the split **does not stack into two scrolls** — instead the LEDGER collapses into a **bottom-anchored brass drawer** that slides up over the terrace when tapped (a deco handle pull at the base of the screen), so the split is preserved as foreground/background rather than top/bottom. The terrace is always the world; the ledger is always the instrument. Vertical rhythm: nine lots, each a full "movement" — a 100vh terrace stage on the left paired with a 5-row ledger block on the right. Between lots, a **6vh black band with a single centred gold deco "florette" glyph** (an eight-petal jasmine rendered as overlapping deco lozenges) — the only thing that ever spans the full width and breaks the split, like the auctioneer's gavel-tap between lots. No top navigation bar. The masthead is a **fixed deco "marquee" plate top-left of the terrace** — the words `MATSURIKA / 茉莉花 / SEALED MIDNIGHT SALE` stacked inside a stepped-frame cartouche, and a **fixed moon-clock top-right of the ledger** showing how far the moon has crossed (a thin gold arc filling slowly over the session). ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available on Google Fonts.** - **`Poiret One`** (400) — the principal **art-deco-display** face (art-deco-display ≈ 3% of corpus), used for the masthead cartouche, every lot number, and the section florette captions. Poiret One is a geometric deco display with extreme thin strokes, perfect circles, and elongated ascenders — it looks like brass wire bent into letters. Set ENORMOUS (lot numbers at 11–15vw on the terrace, letter-spaced +0.18em), always gold on black, never for body. - **`Forum`** (400) — the secondary deco face, a slightly Trajan-flavoured all-caps display with deco proportions, used for the running labels in the ledger (`LOT`, `DISTILLED`, `BLOSSOMS`, `PROVENANCE`, `WHISPERED BID`) and for the speaking-tube button. Tracked +0.24em, small (12–13px), gold-on-near-black. It is the engraving on the brass instrument. - **`Cormorant Garamond`** (300, 400, italic) — the entire narrative body: the lot descriptions, the provenance notes, the auctioneer's between-lot lines. A high-contrast Garamond revival; at 300 weight, italic, on warm ivory it reads like a 1930s perfumer's tasting note written in fountain pen. Generous leading (1.85), measure capped at 34rem. - **`IBM Plex Mono`** (400) — the **mono** seam (mono is at 94% of corpus, so it is held to a *single hairline use*): the current bid figures, distillation dates, and blossom counts in the ledger, set tabular so the ticking numbers don't jitter. Gold, 13px, never anywhere else. **Palette — gold-black-luxury (≈0–2% of corpus, deliberately claimed), eight values, minimum exceeded.** - `#0A0705` — *Lacquer Black* — the terrace ground, near-pure black with a faint warm undertone (it is black stone, not screen-black). - `#15100A` — *Terrace Stone* — the ledger ground, one step warmer/lighter so the two panels read as different surfaces under the same lamp. - `#1F1710` — *Bronze Shadow* — recessed deco frames, the inner shadow of the seam, drawer interior. - `#C9A24B` — *Lamp Gold* — the primary line/text gold; the colour brass turns under a single tungsten lamp. All deco rules, fret tiles, lot numbers. - `#E8C97A` — *Moon Gold* — the highlight gold; the moon arc, the rim-light on each vial, hover states. Lighter, cooler, the colour of moonlight on metal. - `#7C5E2A` — *Tarnish* — the dim gold; ledger rules at rest, the parts of a frame the lamp doesn't reach, disabled-feeling text. - `#F4ECDB` — *Tasting Ivory* — the body-text colour and the inside of the speaking-tube drawer; warm paper, never white. - `#9FB89C` — *Jasmine Leaf* — the single non-metal accent: the drifting vine SVG, the eight-petal florette's calyx, and the "bid accepted" pulse. A muted green-grey, the colour of jasmine foliage at night, used at most 6% of any screen. Gradients (gradient is at 96% — used *only* twice, both atmospheric): a 22%-opacity radial `Moon Gold → transparent` halo behind whichever vial is centred, and a top-to-bottom `Lacquer Black → Bronze Shadow` on the terrace so the floor reads as receding into dark. No gradient ever touches text, the ledger, or any deco rule. ## Imagery and Motifs **Zero photography (photography is at 98% of corpus — its total exclusion is the single largest deviation).** Every visual is SVG, CSS, or one of two small bound textures. The "perfume photographs" are *built*. **Imagery family 1 — the nine Lot Vials (rendered, not photographed).** Each lot is a hand-built SVG of a stoppered crystal vial, drawn in the **deco-fluted idiom**: a vertical body with 7 deco flutes (alternating `Lamp Gold` 1px strokes and `Tarnish` fills), a stepped-ziggurat shoulder, a faceted octagonal stopper, and — suspended inside the glass — a single jasmine bloom rendered as overlapping deco lozenge-petals in `Tasting Ivory` with a `Jasmine Leaf` calyx. The "essence" inside the lower body is a flat 18%-`Moon Gold` wash. Each vial gets a single `Moon Gold` rim-light on its left edge (the lamp) and a long `Lacquer Black` cast shadow stretching right across the terrace toward the seam. The nine vials differ in *flute count, stopper facet count, bloom petal arrangement, and fill height* — never in colour. **Imagery family 2 — the path-draw-svg deco architecture (the seed pattern: path-draw-svg, 31% of corpus, but here used at *monumental* scale, not as link underlines).** The terrace's back wall is a **single huge SVG line-drawing of a Shanghai-Deco perfume-house facade** — stepped spire, sunburst transom, fluted pilasters, a moon-gate doorway — drawn entirely in 1px `Tarnish` strokes, ~1400 path-length, that **draws itself once on load** over ~6 seconds via `stroke-dashoffset` (top of spire first, doorway last), then sits still forever. As you scroll between lots, a thin `Lamp Gold` "lamplight sweep" traces a *second* time along just the parts of the facade nearest the centred vial. The deco fan, the chevron, the ziggurat, the moon-gate — all of them are *line*, all of them draw. **Imagery family 3 — the marble-texture seam and console (imagery: marble-texture ≈ 3% of corpus).** The brass speaking-tube console along the seam, the drawer front, and the masthead cartouche all carry a **black-with-gold-veining marble** — one tileable 240×240px PNG (Portoro / black-and-gold marble), bound in the bundle, set at 14% opacity over `Bronze Shadow` and `multiply`-blended so the veins read as gold *in* the stone rather than on top of it. Marble appears *only* on the instrument surfaces — never on the terrace floor, never behind text. **Motif — star-celestial, executed as a deco constellation, not a sci-fi starfield (motifs: star-celestial ≈ 3% of corpus).** Above the terrace, a sparse scatter of ~40 `Moon Gold` four-pointed deco "compass-stars" (tiny stretched lozenges, not dots), arranged not randomly but along the **arc the moon will travel** — so the star-field is actually a *clock face*. The moon itself is a `Moon Gold` thin-stroke circle that slides along that arc over the session (tied to `scrollY` and a slow real-time drift), and as it passes each star, that star briefly brightens — the night is keeping time, and time is running out on the sale. **The between-lot Florette.** The only full-width element: an eight-petal jasmine built from eight overlapping `Lamp Gold` deco lozenges around a `Jasmine Leaf` octagon, centred in the 6vh black band, rotating 1/16th of a turn each time it enters view (so over nine lots it makes a slow half-revolution) — the gavel between movements. ## Prompts for Implementation Build matsurika.bid as **one HTML document, one CSS file, one ES module, two bound textures (the Portoro marble tile and a 4% film-grain PNG), and the nine lot-vial SVGs plus the one facade SVG emitted inline from the lot data at build time.** No framework, no bundler, no router, no service worker. Single long scroll. Target uncompressed bundle under 130KB including textures. Bias every decision toward **atmosphere-as-restraint and storytelling-as-instrument** — never toward conversion funnels, CTA stacks, pricing tiers, testimonial grids, or stat counters. - **The split is structural, not decorative.** Implement TERRACE and LEDGER as two `position: sticky`-coordinated columns inside a CSS Grid (`grid-template-columns: 58fr 42fr`), with the LEDGER given a slightly smaller scroll velocity via a single `transform: translateY()` driven by a rAF loop reading `scrollY * -0.18` (clamped). Do **not** use parallax libraries; one rAF loop drives the ledger drift, the moon position, and the lamplight facade sweep together. (parallax is at 95%, magnetic at 80%, cursor-follow at 89%, spring at 86% — this design uses **none of cursor-follow, magnetic, spring, tilt-3d**; its only motion vocabulary is *slow linear drift* and *one-time path draw*. State that constraint loudly in the CSS comments.) - **The path-draw is the entrance.** On load: the facade SVG draws over 5.5s, then the masthead cartouche fades in, then the first lot vial's rim-light "ignites" (a 0.6s opacity ramp on the `Moon Gold` left edge). Use `prefers-reduced-motion` to render everything already-drawn and the moon at its start position with no animation — but keep the *layout* identical. - **The ledger ticks, quietly.** Each lot's "whispered bid" figure increments by a small irregular amount every 6–11s (staggered per lot-id, so the page never has a global pulse), the new digits sliding up one line-height in `IBM Plex Mono` tabular. No flash, no colour change — just the number quietly being larger than it was. The moon-clock arc fills in lockstep with total scroll progress *and* a slow real-time creep, so a visitor who sits still still sees the night advancing. - **The speaking-tube control** (one per lot, in the ledger): a `Forum`-lettered brass plate reading `WHISPER A BID`. On click it does **not** open a form modal — it slides a thin `Tasting Ivory` reed out of the marble console with a single `` styled as an engraved line, the `Jasmine Leaf` pulse runs along the seam once on submit, and the plate re-letters to `WHISPER RECORDED · ##:##` (the moon-clock time). Purely diegetic. No checkout, no account, no email field beyond the single bid line. - **Type scale lives on the terrace.** Lot numbers in `Poiret One` at `clamp(7rem, 12vw, 15rem)`, `Lamp Gold`, `letter-spacing: 0.18em`, sitting *behind* the vial SVG at 30% opacity so the glass occludes part of the numeral — the lot number is the wall the vial stands against. Body in `Cormorant Garamond` 300 italic, `Tasting Ivory`, 1.85 leading, max 34rem, only ever in the ledger's wider rows. - **Grain and warmth.** The 4% film-grain PNG `mix-blend: overlay` over the whole viewport, fixed, so the black is never digitally flat. Everything warm: no pure white, no pure black, no cool gray, no blue anywhere except the faint undertone already in `Jasmine Leaf`. - **The closing.** At the very bottom: the moon completes its arc, the last star brightens and holds, the facade's moon-gate doorway gets one final `Lamp Gold` re-trace, and a single line in `Cormorant Garamond` italic: *"The flowers are spent. The sale is closed. Return tomorrow at dusk."* — then a deco rule, and nothing. No footer links, no social row, no newsletter, no copyright slab beyond a 10px `Tarnish` line. ## Uniqueness Notes Deliberate departures from the designs already in the registry and from the common reading of every seed token: 1. **split-screen claimed as a *persistent diegetic instrument*, not a hero treatment.** split-screen sits at 1% of the corpus — the single rarest layout token. Where it appears at all, it is the marketing "image | copy" hero. matsurika.bid makes it the **entire spine for the whole scroll**, with the two halves on *different scroll velocities* so they physically drift apart, and collapses it on mobile into foreground/background (a drawer) rather than the universal top/bottom stack. The split *is* the auction: world on the left, ledger on the right, brass seam between. 2. **Zero photography in a `.bid` auction context.** 98% of the corpus uses photography; auction/marketplace concepts lean on it hardest. Every "lot photograph" here is a built deco-fluted SVG vial whose variations are *structural* (flute count, facet count, petal arrangement, fill height), never colour swaps. The product being sold is *a scent* — invisible by definition — so showing it as architecture rather than a stock photo is the honest move. 3. **art-deco read as *Shanghai Deco at 2am*, not Paris/Miami in daylight, and bent entirely toward a single flower.** The corpus's deco (5%) and luxury (gold-black-luxury ≈0–2%) tend toward marble-lobby opulent-grand in full light. This design takes the *after-hours, lamp-only* half of that vocabulary: the chevron becomes a jasmine bud, the sunburst becomes opening petals, the fluted column becomes the vial flute — geometry in service of softness. 4. **path-draw-svg (31%) used at monumental architectural scale, not as link underlines.** The seed's draw-animation usually lives on hairline text underlines and tiny icons. Here it is a ~1400-unit SVG *building facade* that draws itself once on entry and is re-traced in lamplight as you scroll — the largest single drawn object, and the page's entrance ceremony. 5. **Motion vocabulary deliberately *minus* the corpus defaults.** cursor-follow (89%), magnetic (80%), spring (86%), tilt-3d (24%) are all **refused outright**. The only motion is *slow linear drift* (ledger, moon, lamplight sweep — one rAF loop) and *one-time stroke-dashoffset draw*. A `.bid` site that does not jitter, does not snap, does not chase the cursor — it just lets the night advance and the numbers quietly grow. 6. **star-celestial (3%) repurposed as a literal clock.** The ~40 deco compass-stars are arranged along the moon's path, not scattered — so the "starfield" is a dial, and the moving moon brightening each star as it passes is the visitor *watching the sale's time run out*. Celestial decoration made functional. Chosen seed/style: *aesthetic: art-deco, layout: split-screen, typography: art-deco-display, palette: gold-black-luxury, patterns: path-draw-svg, imagery: marble-texture, motifs: star-celestial, tone: opulent-grand.* Every one of these eight tokens sits at or below 5% of the corpus (split-screen 1%, gold-black-luxury ≈0–2%, marble-texture 3%, star-celestial 3%, art-deco-display 3%, art-deco 5%, opulent-grand 5%; path-draw-svg at 31% is the lone "common" token and is held to its *uncommon, monumental* interpretation rather than reverting to corpus mean). The seed is honoured fully and without substitution; the design also refuses the corpus-default patterns (cursor-follow, magnetic, spring, tilt-3d) and the corpus-default medium (photography) that the seed does not name.