# Design Language for chika.bid

## Aesthetics and Tone

chika.bid (v2) is an **Inflated-3D Auction-House Timeline** -- a professional inflated-3d rendering of a chronological auction-house archive for "Chika," a fictional curator of rare wines and burgundy-toned objets. The inflated-3d aesthetic is read as puffed-fabric: every UI element has the rounded, helium-balloon-meets-velvet-pillow quality of contemporary 3D-rendered Y2K-revival design. But the design holds professional discipline -- timeline structure, careful typography, precise dates and lot numbers.

The tone is **professional** -- this is a curator's archive, not a meme page. Inflated-3d is treated as the language of premium presentation: every lot card has the bulged, gradient-shaded volume of a perfectly-polished display object. Burgundy-cream palette anchors the whole into restrained warm sophistication.

## Layout Motifs and Structure

The composition is **timeline-vertical** -- a chronological spine running from top to bottom, with auction-lots and curator notes positioned at left/right of the spine. The spine itself is a tall inflated-3D burgundy-velvet ribbon (rendered with SVG gradients to simulate puffed volume) descending through the page. Lots cluster in years; years are anchored to the spine with small inflated-3D number-balloons.

**Macro structure:**
- **Welcome (Section 0, 100vh):** An empty cream-parchment ground. A single inflated-3d "chika.bid" logo at the center (each letter rendered as a puffed burgundy balloon-form with lens-flare highlights). A subtitle reads "an archive of unusual things // 2014 - present." Two small floating lens-flare elements drift across the upper corners.
- **Timeline Header (Section 1):** The top of the descending spine. A brief curator's statement (3-4 lines of professional body text) introduces the archive. Below: a year-anchor balloon "2014" attached to the spine.
- **Year Clusters (Sections 2-7):** Six year-clusters (2014, 2016, 2018, 2020, 2022, 2024-current). Each cluster has:
  - A large inflated-3D year-balloon attached to the spine
  - 3-5 lot cards alternating left and right of the spine
  - Each lot card has: lot number (e.g., "LOT 048"), name, year acquired, brief curator note, an inflated-3D rendering of the object
  - A small "details +" link expands the lot to a fuller description on hover
- **Floating Elements Aside (Section 8):** A brief sidebar-feeling section about the floating-elements motif itself -- "things that lift, things that drift, things that refuse to settle" -- a curator's poetic meditation
- **Submit a Lot (Section 9):** A simple inflated-3D form (three pillowy input fields, a single inflated-3D submit button) for visitors to propose a lot. Professional, minimal copy.
- **Colophon (Section 10):** Imprint info in restrained typography. The spine terminates here in a small inflated-3D tassel.

The scale-hover pattern is the dominant interaction: hovering any lot card causes the inflated-3D rendering of the object to scale up slightly while the card's puffed shadow deepens -- the object visually "lifts off" the page. The floating-elements motif gives the whole site a sense of mild buoyancy.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines & year-balloons:** "Fredoka" weight 600 -- the playful-rounded mandate. Used at clamp(56px, 8vw, 144px) for year-balloons (the puffed display works perfectly for the inflated-3D treatment). The logo "chika.bid" uses Fredoka weight 700 at clamp(80px, 10vw, 180px). Tracking -0.01em.
- **Lot card headings:** "Fredoka" weight 500 at clamp(20px, 2.4vw, 32px), used for lot names. Tracking -0.005em.
- **Sub-labels / lot numbers:** "Fredoka" weight 500 small-caps at 11-13px, tracking 0.16em, used for "LOT 048 // 2018 // PROVENANCE: ROMA."
- **Body text:** "Inter" weight 400 at clamp(15px, 1.1vw, 17px), line-height 1.7. Used for curator notes and body prose.
- **Pull-quote / curator statement:** "Inter" weight 400 italic at clamp(18px, 1.6vw, 24px), used sparingly.

**Palette (burgundy-cream mandate):**
- **#4D1429** Deep Burgundy (primary brand, type ink, year-balloon fill)
- **#7A2B41** Wine Plum (secondary burgundy, lot card depth gradient)
- **#A8556B** Rose Burgundy (highlight tone, lens-flare halo)
- **#F4E8D2** Cream Parchment (page ground, primary surface)
- **#EBDCBA** Aged Cream (lot card surface, secondary surface)
- **#D9BA85** Honey Tan (highlight, accent stitching)
- **#2A0F18** Cocoa Ink (deep text ink, lot detail micro-text)
- **#E8B17A** Sun-Lit Glow (lens-flare core, light highlights)

The inflated-3D objects are rendered with multi-stop gradients sweeping through these burgundies, with cream-parchment specular highlights to suggest the puffed volume.

## Imagery and Motifs

**Core visual motifs:**

- **Lens-flare (imagery mandate):** Soft lens-flare elements drift across the page as ambient atmosphere:
  - 2-3 small lens-flares in the hero section
  - 1 lens-flare attached to each year-balloon (suggesting the balloon catches studio light)
  - A subtle lens-flare passes diagonally across the page every 24s (a slow-drifting cinematic flare)
  Lens-flares are SVG with multiple overlapping radial gradients in sun-lit-glow and rose-burgundy, with a thin streak-line crossing the central glow.
- **Floating-elements (motif mandate):** Everything in the design has subtle vertical drift:
  - Year-balloons drift vertically by 4-6px on a 6s sine loop
  - Lot cards drift vertically by 2-3px on 8s sine loops (each card at a slightly different phase)
  - The logo letters in the hero drift by 2px individually
  - The lens-flare drifts diagonally
  The floating-elements motif gives the whole site a sense of being underwater, or in a slowly-warming bath -- mild buoyancy without distraction.
- **Inflated-3D objects:** Each lot has an SVG-illustrated rendering of the object (a wine bottle, a porcelain jar, an embroidered cloth, a brass bell) rendered with multi-stop burgundy-cream gradients to simulate puffed-velvet volume. Each object has 2-3 specular highlight ellipses.
- **Velvet-ribbon spine:** The timeline spine is a tall vertical SVG path with a multi-stop gradient (deep-burgundy core, wine-plum edges) and small subtle curves at the year-balloon attachment points. The ribbon has occasional faint "fold" lines suggesting velvet weight.
- **Honey-tan stitched accents:** Cards have a 1.5px honey-tan dashed border with `stroke-dasharray: 6 4` -- a stitched-leather feel for the velvet-ribbon-and-leather-objects archive aesthetic.

## Prompts for Implementation

**Opening:** Page loads on cream parchment. The "chika.bid" logo assembles letter-by-letter with each letter scale-from-0.7-with-spring (cubic-bezier overshoot 1.3, 600ms per letter, 80ms stagger). Each letter has a thin lens-flare attached that briefly brightens as the letter settles. The subtitle types in via gentle typewriter (90ms per character) after the logo settles. Two small lens-flares drift in from off-screen corners. After 2.4s the floating motion settles into its idle loop.

**Scroll narrative:** As the user scrolls into the timeline header, the curator's statement fades in line-by-line. The spine then begins drawing downward via SVG stroke-dashoffset as the user scrolls -- the spine grows as the user descends. Year-balloons "inflate" into place as their position is reached: each balloon scales-from-0.6-with-spring (800ms with overshoot to 1.08 then settling to 1.0), then begins its floating-drift loop.

**Lot card entry:** As each lot card enters view:
- The card's stitched-honey-tan border draws in via SVG stroke-dashoffset (400ms)
- The lot-number label fades in
- The lot name fades in (220ms after)
- The inflated-3D object rendering scales-in-with-spring (1.0s with overshoot)
- The curator note fades in line-by-line
- The card begins its floating-drift idle loop

**Scale-hover interaction:** Hovering any lot card:
- Scales the inflated-3D object to 1.08 (320ms ease-out)
- Deepens the card's shadow (the object visually "lifts" 8px off the card surface)
- Brightens the lens-flare near the object (if present)
- Reveals an extended description (fades in below the curator note)
- The card's floating-drift loop pauses while hovered

**Spine pulse on year-balloon hover:** Hovering a year-balloon causes:
- The balloon to scale 1.1 with spring
- A subtle pulse to travel down the spine (a brightness wave drifts from the balloon along the ribbon, 1.2s)
- Lot cards in that year cluster briefly brighten

**Submit form interaction:** The inflated-3D form fields have:
- Each input field is a puffed pillow shape
- Focus state: the field "presses in" slightly (a soft inset shadow appears)
- Submit button: a large puffed burgundy balloon that, on hover, scales to 1.04 with the lens-flare brightening

**Closing:** The spine terminates in a small inflated-3D tassel at the bottom. The tassel sways subtly on its idle loop.

**Avoid:** No CTA-heavy layouts. No pricing-grid (auction prices are embedded in lot cards as curator-tone notes, never tabulated). No newsletter modal. No stat grid.

## Uniqueness Notes

**Differentiators from other designs:**

1. **Inflated-3D used as professional curator aesthetic, not meme aesthetic:** Most inflated-3D designs lean into Y2K playfulness; this design enforces curator restraint -- precise dates, lot numbers, professional body prose. Inflated-3d aesthetic is 1% in the batch; combined with professional tone and timeline structure is original.

2. **Timeline-vertical with a velvet-ribbon spine:** The chronological spine is rendered as a tall puffed velvet ribbon with gradient volume -- a specific material metaphor. Timeline-vertical is 4% in the batch.

3. **Floating-elements motif as ambient mild buoyancy:** Year-balloons, lot cards, logo letters, and lens-flares all drift on subtle independent sine loops -- the page feels lightly bobbing. Floating-elements motif is 2% in the batch.

4. **Lens-flare imagery as ambient atmosphere:** Soft lens-flares drift across the page, attached to year-balloons and lots, suggesting studio-photography ambient light. Lens-flare imagery is 2% in the batch.

5. **Burgundy-cream palette rendered as inflated-velvet gradient volume:** Every inflated-3D object uses multi-stop burgundy-cream gradients with cream specular highlights, creating a distinctive material vocabulary.

Chosen seed: aesthetic: inflated-3d, layout: timeline-vertical, typography: playful-rounded, palette: burgundy-cream, patterns: scale-hover, imagery: lens-flare, motifs: floating-elements, tone: professional

**Avoided patterns from frequency analysis:** No parallax (96%), no centered/card-grid (96%/93%), no warm gradient flat (95%/78%), no mono (81%), no mysterious-moody (71%), no photography-fill (91% -- all SVG-illustrated objects). Used: timeline-vertical (4%), inflated-3d (1%), burgundy-cream (3%), playful-rounded (3%), lens-flare imagery (2%), floating-elements (2%), scale-hover (3%), professional tone (7%).