# Design Language for kaguya.bid ## Aesthetics and Tone kaguya.bid is an **editorial neon auction column** -- a high-contrast sidebar-driven page that looks like Vogue Italia laid out by a Tokyo neon-shop after midnight. The mood is **zen-contemplative** despite the visual heat: the typography is calm, the spacing is generous, neon glows pulse only at slow intervals. Inspirations: Fabien Baron's Vogue Italia masthead, the high-contrast black-and-white photography of Daido Moriyama, neon signs in Shinjuku's Golden Gai, the silent contemplative pacing of Aki Kaurismaki films, the Bauhaus principle that a single accent color can hold an entire page together. The editorial framing supplies serious headlines, a tight sidebar, ranged-left columns, and small caps captions. The art-deco display type adds a 1920s salon-poster cadence to those headlines. The high-contrast palette is mostly black-and-white with three precise neon-glow accents (magenta, jade, amber) that fire only on hover-lift events. The voice is composed and reflective: "lot 03. one porcelain plum. opening at 12,000." ## Layout Motifs and Structure A **sidebar** layout (left-fixed) carrying navigation and the running auction lot list; the main canvas hosts a long editorial scroll. - **Sidebar (left fixed, 320px):** A vertical column that runs the full page height. Top: the wordmark "KAGUYA.BID" in art-deco display, vertical orientation. Below: a numbered list of "lots" (10-12 items), each a small block with a lot number, title, and starting bid. The current lot has a neon-magenta glow on its left edge. - **Main canvas (variable, right of sidebar):** A long-scroll editorial spread divided into discrete lot articles. Each article occupies ~140vh. - **Lot title (large):** Art-deco headline at clamp(80px, 12vw, 200px), with a hover-lift behavior -- on hover, the headline lifts 8px and a neon-amber glow appears beneath it (320ms ease-out). - **Lot photograph (neon-glow treatment):** A high-contrast black-and-white photograph of the object, with a thin neon-glow outline drawn around its silhouette (SVG mask + glow filter). - **Editorial copy:** A single justified column of Cormorant body type, 19px / 1.85, sitting in the right 60% of the canvas. - **Provenance plaque:** A small black plaque with neon-jade text noting "PROVENANCE: KYOTO / 1912." - **Lot footer (small):** Beneath each lot, a single line: "open until midnight. write to the keeper to bid." in art-deco caps. - **Closing spread (90vh):** A single editorial close-out with the auction's title repeated in art-deco display, this time without any neon glow -- a quiet ending. The sidebar provides constant navigation; the main canvas provides slow editorial reading. The high-contrast palette keeps the page legible even with the neon accents. ## Typography and Palette **Fonts (Google Fonts only):** - **Display (art-deco):** "Limelight" weight 400 at clamp(80px, 12vw, 200px), tracking 4%. The geometric art-deco construction makes each lot title feel like a 1920s salon poster. - **Sub-display:** "Limelight" at clamp(28px, 4vw, 52px), tracking 6%, for sidebar lot titles. - **Body:** "Cormorant Garamond" weight 400 at 19px / 1.85, justified with hyphenation. Cormorant's elegant high-contrast serifs complement Limelight without competing. - **Italic:** Cormorant italic for pull quotes and provenance plaques. - **Numerals:** "Limelight" tabular figures at 24px in the sidebar lot list; old-style numerals via `font-feature-settings: 'onum'` in body text. - **Small caps:** Cormorant small caps at 11px tracking 14% for plaques and captions. **Palette (high-contrast -- mostly black-and-white, three neon accents):** - `#0a0a0c` -- absolute black (primary background) - `#1a1a1c` -- raven shadow (sidebar surface) - `#33333a` -- charcoal (mid-tone hairlines) - `#f4f4f0` -- bleached ivory (primary text) - `#ff3a8a` -- neon magenta (current lot accent, glow #1) - `#3aff90` -- neon jade (provenance plaque, glow #2) - `#ffaa3a` -- neon amber (hover-lift glow, glow #3) The contrast is extreme -- near-black background with bleached-ivory text -- with three neon accents reserved for specific structural moments. Neon never appears in body text. ## Imagery and Motifs - **Neon-glow object photography:** Each lot's photograph is a high-contrast B&W image with a thin SVG-mask glow outlining the object's silhouette. The glow uses `filter: drop-shadow(0 0 12px var(--neon)) drop-shadow(0 0 24px var(--neon));` set to the lot's assigned neon color. - **Abstract-tech motifs:** Sidebar lot list items have small 1px circuit-style trace marks beside their numbers -- the editorial-tech intersection. Pure linework, no fills. - **Hover-lift interactions:** Each lot title lifts 8px on hover (220ms cubic-bezier(.2,.8,.2,1)) and a neon-amber glow appears beneath it via `box-shadow`. Body text below shifts subtly to reveal the title's importance. - **Neon underline accents:** Hover on the sidebar's current lot reveals a 1px neon-magenta line growing from left to right (320ms). - **Editorial drop-caps:** First paragraph of each lot's body starts with a 4-line drop-cap in Limelight, rendered with a thin neon-jade outline. - **Vertical 1px rules:** Thin 1px charcoal vertical rules separate the sidebar from the canvas and demarcate each lot's right margin. ## Prompts for Implementation The site is a slow editorial auction column. Build it as a fixed sidebar + long-scroll main canvas with restrained neon accents. - The sidebar uses `position: fixed; left: 0; top: 0; bottom: 0; width: 320px; background: #1a1a1c; padding: 32px 24px;`. On viewports under 1024px, it collapses to a top-fixed slim header. - The main canvas has `margin-left: 320px;` and uses CSS Grid with `grid-template-columns: minmax(0, 1fr) 480px; column-gap: 64px; padding: 80px 80px;` -- the right column holds the editorial body text. - Lot title hover-lift: `.lot-title { transition: transform 220ms cubic-bezier(.2,.8,.2,1), filter 320ms ease; } .lot-title:hover { transform: translateY(-8px); filter: drop-shadow(0 8px 24px rgba(255, 170, 58, 0.5)); }`. - Neon-glow photography: each photograph is wrapped in `
` with `filter: drop-shadow(0 0 12px var(--neon)) drop-shadow(0 0 24px var(--neon-soft));` where `--neon` and `--neon-soft` are CSS variables set per lot via `--neon: #ff3a8a; --neon-soft: rgba(255, 58, 138, 0.4);`. - Reduced motion: hover-lift becomes a 200ms opacity glow with no translate; neon-glow filters keep their values but stop pulsing. - AVOID a "bid now" button, pricing tiers, signup forms, stat counters. There is exactly one mailto link per lot ("write to the keeper to bid") and one in the footer. - Storytelling: sidebar declares the lots; main canvas walks lot by lot; each lot is a small editorial story (object, provenance, philosophy); the closing spread quiets the page. - Zen-contemplative voice: "lot 03. one porcelain plum. opened at noon." "this object was made in 1912; we have known it for fourteen years." "to bid is to write a letter to the keeper. the keeper will answer." ## Uniqueness Notes **Differentiators from other designs:** 1. **Editorial + zen-contemplative + neon high-contrast:** Editorial is usually warm; neon high-contrast is usually loud; combining them with a zen-contemplative voice produces a slow neon column unlike any other site in the registry. 2. **Sidebar as auction lot list:** The fixed sidebar contains the entire auction catalog, allowing the reader to navigate without breaking the editorial reading flow. The sidebar is structural, not navigational chrome. 3. **Three neon accents reserved for three specific structural moments:** Magenta for the current sidebar lot; jade for provenance plaques; amber for hover-lift glow. The discipline of the palette is rare for "neon-glow" designs. 4. **Limelight + Cormorant pairing for editorial use:** This pairing produces a 1920s salon poster meeting a Garamond novel -- an unusual editorial type combination. 5. **Hover-lift as the only motion:** No carousels, scroll-snapping, parallax, or particles. The single motion vocabulary is hover-lift, making each interaction precious. **Chosen seed:** editorial sidebar art-deco-display high-contrast hover-lift neon-glow abstract-tech zen-contemplative -- planned seed from assignment. **Frequency-aware choices:** `editorial` (16%) is common but rarely paired with neon high-contrast and zen-contemplative tone. `sidebar` layout, `high-contrast` palette, `hover-lift` pattern, `neon-glow` imagery, and `abstract-tech` motifs are all under 5%. Avoids the overused `playful`, `photography`, and Inter/Space-Grotesk patterns.