# Design Language for chika.trade

## Aesthetics and Tone

chika.trade (v2) is an **Edgy-Rebellious Cottagecore Black-Market Bazaar** -- an unlikely collision: cottagecore's pressed-flower-and-leather palette layered with the edgy-rebellious confidence of a 2090s underground sci-fi bazaar interface. Tech-mono typography, sci-fi HUD overlays, and ripple-pattern motion run across an aesthetic of dried herbs, deep-burgundy wax-sealed parcels, and leather-bound ledgers. The trade-site reads as a clandestine peer-to-peer barter market for unusual things, accessed through what appears to be a witchy cottage interface but operated by a future syndicate.

The mood is **edgy-rebellious** -- this is not a polite e-commerce site. The cottagecore is rough-hewn (dried herbs, leather, burnt-orange wax), and the sci-fi HUD overlays read as transgressive intrusion. Sci-fi-HUD motifs (status readouts, telemetry strips, faint matrix-feel scan-lines) overlay the leather-and-herb base.

## Layout Motifs and Structure

The composition is **layered-depth** -- a multi-z-layer stack where the cottagecore base layer (dried herbs, leather textures, parcels) is the bottom, sci-fi-HUD strips and readouts overlay in the middle layers, and an interactive ripple-motion top layer responds to cursor presence. Each "trade listing" is a card with its own z-stacked depth: a leather-feel base, a sci-fi-HUD overlay, a ripple-responsive cursor layer.

**Macro structure:**
- **Bazaar Entry (Section 0, 100vh):** A deep-burgundy ground with leather-texture overlay. At the center: a large cottagecore-feel parchment-and-leather header with the title "CHIKA // TRADE" in tech-mono caps. Above the title: a small sci-fi-HUD strip with a faux-system-status: `[BAZAAR // ONLINE // 47 ACTIVE TRADES // 03:14:22 UTC]`. Below: a subtitle in tech-mono: "peer-to-peer barter. no money. no ledgers. say hello to the broker." A small wax-seal SVG ornament closes the welcome.
- **Active Trades Grid (Sections 1-3):** A multi-screen layered-depth grid of trade listings. Each listing card has:
  - Bottom layer: a leather-texture rectangle (worn, slightly creased)
  - Mid layer: a sci-fi-HUD overlay strip with trade-meta (offer ID, posting timestamp, "asking" line)
  - Top layer: the trade description in tech-mono, with the offered item described in italic
  - Hover layer: a ripple effect from the cursor
  Example trades:
  - "01 // OFFERING: a hand-bound book of pressed orchids (1978) // SEEKING: any winter-blooming bulb species"
  - "02 // OFFERING: a brass compass that points northwest only // SEEKING: a story about how it broke"
  - "03 // OFFERING: 47 wax seals of a defunct apothecary // SEEKING: a glass jar of star anise"
- **The Broker (Section 4):** A single full-width section about the broker who mediates trades. A leather-feel portrait card with a sci-fi-HUD overlay (status: "AVAILABLE // 18:00-02:00 UTC"). Body text in tech-mono describes how to reach the broker.
- **Trade Protocol (Section 5):** A bulleted list of trade-rules in tech-mono, each rule with a small sci-fi-HUD bullet marker. Below: a sci-fi-feel "MUST ACCEPT TERMS" toggle (a stylized HUD switch).
- **Submit a Trade (Section 6):** A form for posting a new trade. The form is a leather-feel card with sci-fi-HUD input frames. Submit button is a wax-seal SVG (when clicked, the seal "stamps" with a brief ripple).
- **Closing (Section 7):** A small footer with sci-fi-HUD telemetry strip and a final wax-seal.

The ripple pattern is the dominant interaction motion: clicking anywhere on the bazaar interface causes a soft ripple (a single expanding circle, 800ms ease-out) at the click point. Hovering trade-cards causes a subtle continuous ripple emanating from the cursor at low opacity. The ripples have a slight chromatic shift (sci-fi-HUD cyan tint) as they expand, suggesting they are not natural water ripples but interface-disturbances.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines / system labels:** "Space Mono" weight 700 -- the tech-mono mandate. Used at clamp(40px, 6vw, 96px) for the bazaar title and at clamp(20px, 2.4vw, 36px) for trade-listing headers. Tracking 0.04em.
- **System readouts:** "Space Mono" weight 400 at 11-13px, tracking 0.12em uppercase, used for sci-fi-HUD telemetry strips, status labels, timestamps.
- **Body text:** "Space Mono" weight 400 at clamp(14px, 1vw, 16px), line-height 1.6. The tech-mono body reads as a terminal but with leather-and-herbs context. Italic Space Mono (which Google Fonts supports) for offered-item descriptions.
- **Wax-seal labels:** "Space Mono" weight 700 at 11px, embedded inside wax-seal SVG ornaments.

**Palette (deep-burgundy mandate):**
- **#2A0808** Bazaar Black (page ground)
- **#4A0F1A** Deep Burgundy (primary brand, leather base)
- **#6E1A24** Burgundy Wine (secondary leather, trade-card surface)
- **#8B3A4A** Faded Burgundy (accent, mid-tone)
- **#E8D7AE** Parchment Aged (text contrast, body type, parchment surfaces)
- **#C99572** Burnt Orange (wax-seal color, warmest accent)
- **#39E8FF** Sci-Fi Cyan (sci-fi-HUD overlay, ripple highlights, system text)
- **#C2A05E** Brass Patina (worn-brass accents, leather-stud highlights)

The deep-burgundy and leather-base anchor the cottagecore; the sci-fi-cyan is the only "future" color, used strictly for HUD overlays and ripple-effects. Burnt-orange wax and brass-patina warm the workshop feel.

## Imagery and Motifs

**Core visual motifs:**

- **Leather-texture (imagery mandate):** Every trade-card, every section-backing, every form-frame has a leather-texture overlay. The leather is rendered as procedural SVG noise + multi-stop burgundy gradient, with subtle "crease" lines and a faint stitched-edge (a 1px brass-patina dashed border). The leather feels worn -- not luxe-new, but well-handled. Some leather surfaces have small "scratches" or "ink-marks" (1px parchment-aged lines at 20% opacity).
- **Sci-fi-HUD (motif mandate):** Sci-fi-HUD elements overlay the leather-cottagecore base everywhere:
  - Telemetry strips (top and bottom of the page, persistent): `[BAZAAR // ONLINE // 47 ACTIVE // 03:14:22 UTC]`
  - Status badges on trade cards (sci-fi-cyan rectangular badges with status text: "OPEN // 4 DAYS LEFT")
  - Scan-line overlay: a faint horizontal scan-line drifts down the page on a 8s loop (1px cyan at 12% opacity)
  - Corner-frame HUD ornaments (small L-shaped brackets in cyan at section corners)
  - Sci-fi-cyan bullet-markers on the trade-protocol list
  - Faint matrix-feel character-flicker on hover (random characters briefly cycle in trade-meta labels)
- **Wax-seal ornaments:** Burnt-orange wax-seal SVGs appear at:
  - The welcome section's closing ornament
  - Each trade-listing's "submit your offer" action
  - The form submit button (the "stamp")
  - The closing footer
  Wax seals are circular SVGs with embedded text (e.g., "CHIKA TRADE EST.") and a wax-drip rendering style.
- **Dried-herb ornaments:** Small SVG dried-herb sprigs (rosemary, sage, lavender) hang in the margins -- a cottagecore detail that grounds the sci-fi overlays. Herbs are rendered in faded-burgundy + brass-patina, with subtle sway animation (1deg rotation oscillation on 6s loop).
- **Brass-stud anchors:** Small brass-patina stud-dots at the corners of leather cards -- a leather-bookbinding detail.
- **Ripple effects:** Click and hover generate soft expanding-circle ripples in sci-fi-cyan, fading from 40% opacity to 0% over 800ms.

## Prompts for Implementation

**Opening:** Page loads on bazaar black. The leather-texture welcome header fades in with a slight scale-from-0.98 (1.0s). The tech-mono title "CHIKA // TRADE" types in character-by-character at 50ms per character. The sci-fi-HUD telemetry strip at the top draws in via SVG stroke-dashoffset (1.2s) with the timestamp animating (a fake live-clock incrementing). The subtitle types in. The wax-seal closes the welcome with a 400ms scale-from-0 + a single ripple emanating from it.

**Persistent HUD telemetry:** Throughout the user's visit:
- The top telemetry strip live-updates the UTC timestamp every second (a Date-driven counter)
- The "47 ACTIVE TRADES" count occasionally increments/decrements with a brief character-flicker
- The scan-line drifts down the page on its 8s loop
- Dried-herb ornaments sway subtly in the margins

**Scroll narrative:** As the user scrolls into the trades grid:
- Each trade-card row enters with a stagger (100ms per card)
- Per card: leather-texture surface fades in, sci-fi-HUD meta-strip types in (character cycle for 200ms then settles to readable), trade description fades in line-by-line, brass-stud corner anchors fade in last
- Status badges (cyan) flicker briefly on settle

**Trade-card hover:** Hovering any trade-card:
- A subtle continuous ripple emanates from the cursor (sci-fi-cyan, 20% opacity, expanding 60px every 1.2s)
- The sci-fi-HUD overlay brightens (cyan intensity +30%)
- A character-cycle briefly runs through the trade-meta labels (each character cycles through 3-4 random characters before settling)
- The brass-stud anchors at the card corners brighten
- A small "SUBMIT YOUR OFFER" wax-seal action appears in the card's bottom-right

**Click ripple:** Anywhere the user clicks, a soft expanding-circle ripple emanates from the click point (sci-fi-cyan, 800ms ease-out, fading from 40% to 0%). This ripple is responsive across all interactive elements -- it gives the bazaar a "every-click-registers" feedback rhythm.

**Form interaction:** The submit-trade form's inputs have sci-fi-HUD frame styling (corner-brackets, cyan focus-glow). On focus, a subtle character-flicker runs through the field's label. On submit, the wax-seal button:
- Scale-presses (240ms)
- Emits a strong ripple (1.4s, ease-out)
- The seal text briefly flickers
- A confirmation HUD-message appears: "TRADE POSTED // BROKER NOTIFIED // 03:14:47 UTC"

**Broker section:** The broker portrait-card has a sci-fi-HUD status badge that periodically blinks between "AVAILABLE" and "BUSY." The portrait itself is a leather-feel placeholder (a hand-drawn silhouette in burnt-orange on leather).

**Trade Protocol toggle:** The "MUST ACCEPT TERMS" toggle is a stylized HUD switch -- clicking it triggers a strong character-flicker through all the protocol rules briefly, then a "TERMS ACCEPTED // 03:15:02 UTC" confirmation.

**Closing telemetry:** The closing footer has a final telemetry strip and a small wax-seal. The HUD continues its live-updating until the user leaves.

**Avoid:** No CTA-heavy layouts. No pricing (this is a barter site, deliberately). No newsletter modal. No stat-grid (the HUD telemetry is a deliberate inversion -- it reads as system-status, not as marketing metric).

## Uniqueness Notes

**Differentiators from other designs:**

1. **Cottagecore aesthetic collided with sci-fi-HUD motifs:** Pressed herbs and wax seals overlaid with cyan HUD telemetry and scan-lines -- a witchy cottage interface operated by a future syndicate. Cottagecore is 1% in the batch; sci-fi-HUD motif is 3%; their collision is original.

2. **Edgy-rebellious tone in a barter (non-commerce) frame:** The site has no money, no pricing, no checkout -- a deliberate rebellion against e-commerce conventions. The barter frame is the design's edgy-rebellious thesis. Edgy-rebellious tone is 4% in the batch.

3. **Layered-depth as functional z-stack (leather + HUD + ripple):** Each card has three distinct z-layers (leather base, HUD overlay, cursor-ripple top) that respond independently. Layered-depth motif is 9% but rarely with this functional separation.

4. **Tech-mono typography running across leather-cottagecore base:** Space Mono carries the entire typographic load -- a tech-mono mandate held literally across an aesthetic that would usually demand serif. Tech-mono is 4% in the batch.

5. **Live-updating UTC telemetry and character-flicker as ambient sci-fi motion:** The top HUD strip live-updates the clock and active-trades count, and trade-meta labels character-flicker on hover -- giving the bazaar continuous system-life. Ripple pattern is 6% in the batch and rarely with sci-fi-cyan chromatic treatment.

Chosen seed: aesthetic: cottagecore, layout: layered-depth, typography: tech-mono, palette: deep-burgundy, patterns: ripple, imagery: leather-texture, motifs: sci-fi-hud, tone: edgy-rebellious

**Avoided patterns from frequency analysis:** No parallax (96%), no centered/card-grid (96%/93%), no warm gradient (95%/78%), no mysterious-moody (71% -- the design's tone is edgy-rebellious, distinct), no photography-fill (91% -- 100% SVG illustrations and leather textures). Used: layered-depth layout (9% with distinctive z-stack functional separation), cottagecore (1%), tech-mono (4%), deep-burgundy (3%), ripple pattern (6%), leather-texture imagery (3%), sci-fi-hud motif (3%), edgy-rebellious tone (4%).