# Design Language for chika.racing

## Aesthetics and Tone

chika.racing (v2) is an **McBling Marble-Slipstream Showroom** -- a mysterious-moody, high-contrast tribute to the 2003-2008 "McBling" aesthetic (Paris-Hilton-era studded fashion, glitter overlays, chrome embossing, faux-Y2K), staged as a luxury racing-showroom for marble-sculpture racing trophies. The McBling aesthetic is read at full saturation: glossy black background, chrome embossed letters, animated glitter on hover, rhinestone-feel micro-jewels along edges, marble-veined surfaces everywhere.

The mood is **mysterious-moody** -- this is a velvet-rope showroom at midnight, lit by recessed spotlights, where each trophy is a marble sculpture under a faux-velvet drape. High-contrast palette enforces the late-2000s Paris-Hilton vibe: black, white, chrome, magenta-glitter.

The flowing-curves motif gives every UI element a soft McBling glossiness -- curved bevels, swooshing chrome accents, the kind of curve found on a Razr phone or a Juicy Couture velour tracksuit.

## Layout Motifs and Structure

The composition is **full-bleed** -- a single full-viewport showroom-space at any moment, with each "trophy room" filling the entire screen. The user navigates between trophies via scroll, but each trophy gets its own full-bleed dramatic space.

**Macro structure:**
- **Showroom Entry (Section 0, 100vh):** A glossy black ground with subtle vignette spotlights. At the center: an oversized chrome-embossed McBling-script title "CHIKA // RACING" with glitter sparkles. Two rhinestone-edge banner-ribbons frame the title. A subtitle in rounded-sans: "marble trophy showroom // by appointment only." Faint chrome flowing-curves swoop across the upper and lower thirds of the viewport.
- **Trophies 01-06 (Sections 1-6, 100vh each):** Six full-bleed trophy rooms. Each has:
  - A full-viewport spotlit space with a marble-veined trophy at the center
  - The trophy is a sculptural marble form (varying per trophy: a swirling helix, a checkered-flag-frozen-in-marble, a leaping figure, etc.)
  - Around the trophy: chrome-embossed engraved trophy-name in rounded-sans, with glitter sparkles flickering at the letter-corners
  - Subtle flowing-curves swoosh from the trophy outward
  - A small "DETAILS" rhinestone-edge button reveals more on click
  - Backdrop: marble-veined gradient walls suggesting a marble-floor showroom
- **The Marble Atelier (Section 7):** A behind-the-scenes section. A wider view of "the atelier" where the marble trophies are carved -- chisels, mallets, marble dust, all rendered in the McBling glossy-black-and-chrome treatment. Body text describes the craft.
- **Acquire (Section 8):** A discreet "to acquire" section. Three small rhinestone-edge cards listing inquiry methods (a mailto link, an Instagram handle, a phone number) -- never described as "buy now."
- **Closing (Section 9):** A final spotlit empty space. A single line in chrome-embossed script: "thank you for visiting." A velvet-rope SVG re-closes across the bottom of the viewport.

The micro-interactions pattern is the dominant motion: every interactive element (rhinestone button, trophy-name, chrome-curve) has its own micro-animation -- glitter sparkles, chrome reflections, rhinestone twinkles. These micro-interactions are not random; each element has its own choreographed micro-sequence.

## Typography and Palette

**Fonts (all Google Fonts):**
- **Display headlines & trophy names:** "Pacifico" weight 400 -- a rounded-sans (Pacifico is technically a script but its rounded weight reads as McBling glossy script). Used at clamp(48px, 7vw, 120px) for the showroom title and at clamp(28px, 3.5vw, 56px) for trophy names. The lettering is treated with chrome-embossing CSS (inset shadow + highlight stroke) to read as embossed metal.
- **Alternative rounded-sans:** "Quicksand" weight 600 for sub-labels and rhinestone-button text -- a cleaner rounded sans that pairs with Pacifico's flourish.
- **Sub-labels / engraved-meta:** "Quicksand" weight 700 small-caps at 11-13px, tracking 0.22em uppercase, used for "TROPHY 03 // 2008 // CARRARA MARBLE."
- **Body text:** "Quicksand" weight 400 at clamp(15px, 1.1vw, 17px), line-height 1.7. Used for trophy descriptions and atelier text.

**Palette (high-contrast mandate, McBling-styled):**
- **#0A0A0A** Showroom Black (page ground, deep gloss)
- **#FFFFFF** Marble White (highlight, marble base color, type contrast)
- **#C9C5BE** Chrome Polished (chrome accents, embossed type highlights)
- **#5F5C56** Chrome Shadow (chrome inset shadows)
- **#FF2BB8** McBling Magenta (rhinestone-jewel, glitter sparkles, accent)
- **#FFD23F** McBling Gold (highlight, brass-edge accents)
- **#3F3F40** Velvet Black (mid-tone, gradient anchors)
- **#A88FA8** Veined Mauve (marble veining color, secondary)

The strict high-contrast of showroom-black against marble-white is the chromatic structure; McBling-magenta and McBling-gold are the rhinestone-accent colors used for sparkle and highlight; chrome-polished/chrome-shadow are the metallic textures.

## Imagery and Motifs

**Core visual motifs:**

- **Marble-texture (imagery mandate):** Every trophy is rendered as a marble-veined SVG sculpture. The marble texture is procedural -- elliptical gradients with noise-displacement filters create veining that doesn't repeat. Marble appears in:
  - Each trophy's surface (the trophy is a marble sculpture)
  - Backdrop walls of each trophy room (subtle marble veining at 12% opacity)
  - The atelier floor (heavy marble veining)
  - The closing velvet-rope's marble-pedestal anchors
- **Flowing-curves (motif mandate):** Chrome flowing-curves swoosh across each viewport at varying angles:
  - In the showroom entry: two diagonal chrome curves frame the title
  - In each trophy room: chrome curves emanate from the trophy outward (like reflected light)
  - Between sections: chrome curves bridge the section transitions
  - The McBling-script title's lettering itself has integrated flowing-curve flourishes
  Curves are SVG paths with multi-stop chrome gradients (chrome-polished → marble-white → chrome-polished).
- **Rhinestone-jewel edges:** Banner-ribbons, button-edges, and select trophy-frame edges have small rhinestone-jewel SVG ornaments (faceted gems in McBling-magenta, gold, white) placed at regular intervals along the edge. Each rhinestone has a tiny twinkle micro-animation (a 200ms scale-pulse on a randomized 4-8s loop).
- **Chrome-embossing on typography:** All chrome-embossed titles use CSS:
  - Inset shadow (dark, 1px offset down-right) for depth
  - Drop shadow (light, 1px offset up-left) for highlight
  - Subtle chrome-gradient text-fill
  - Optional outer glow on hover
- **Glitter sparkles:** Small star-shape SVG sparkles (4-6px) flicker at random positions across the page on slow loops. Each sparkle has a 200ms scale-from-0-to-1.4-to-0 animation on a 4-10s random loop.
- **Spotlight vignettes:** Each trophy room has a soft radial gradient spotlight effect (the center of the viewport is brighter; the edges fade to deeper showroom-black). The spotlight subtly shifts position as the cursor moves (cursor-follow at a damped 0.2x speed).

## Prompts for Implementation

**Opening:** Page loads black with a slow vignette spotlight emerging at the center (1.4s). The chrome-embossed title "CHIKA // RACING" reveals with a chrome-set transition: each letter starts as a flat marble-white silhouette and the chrome-embossing CSS animates in over 600ms (inset shadow appearing, highlight stroke appearing). Once the embossing is complete, glitter sparkles begin flickering at the letter-corners. The two rhinestone-edge banner-ribbons descend from above with a slight swing. Two chrome flowing-curves swoosh in from the upper-left and lower-right corners (SVG stroke-dashoffset, 1.6s). The subtitle types in via gentle typewriter.

**Scroll narrative:** As the user scrolls into each trophy room:
- The previous trophy fades to silhouette and slides up out of view
- The new trophy room's spotlight expands from a central point (a "lights coming up" effect, 1.0s)
- The marble trophy assembles: marble-base appears first, then the sculpture itself "grows" upward via a vertical clip-path animation (1.4s)
- Chrome flowing-curves swoosh in from the trophy outward
- The chrome-embossed trophy-name reveals with the chrome-set transition
- The engraved-meta sub-labels fade in
- Rhinestone-jewel edges along the frame illuminate one-by-one (60ms per rhinestone)
- The "DETAILS" rhinestone-button fades in last

**Micro-interactions:** Each interactive element has its own micro-sequence:
- **Rhinestone-edge button hover:** All rhinestones along the button edge twinkle in unison; a glitter sparkle burst emerges from the button center (5-7 sparkles); the button's chrome-embossing brightens (highlight stroke increases)
- **Trophy hover:** The trophy gently rotates ±2deg on cursor proximity (a slight cursor-follow); the marble veining catches a subtle "wet" highlight shift; glitter sparkles emerge from the trophy's marble surface
- **Chrome flowing-curve hover:** The curve's chrome-gradient animates a "shine" wave traveling along its length
- **Trophy-name hover:** The chrome-embossing intensifies; glitter sparkles flicker at the letter-corners

**Cursor effect:** The cursor itself triggers a subtle glitter trail -- 1-2 small sparkles fade in behind the cursor every 200ms, lasting 400ms before fading. Sparkles only appear on dark backgrounds (where they read).

**Atelier section:** The atelier section breaks the trophy-room rhythm with a wider view. Chrome flowing-curves bracket the space at multiple angles. Body text reveals line-by-line. A small marble-dust particle effect drifts across the lower third of the viewport.

**Closing:** The final empty showroom dwells empty for a moment before the chrome-embossed "thank you for visiting" reveals. Then a velvet-rope SVG (with marble pedestals at each end) draws in across the bottom of the viewport via stroke-dashoffset (1.4s), sealing the showroom.

**Avoid:** No CTA-heavy layouts. No pricing (trophies are inquired-about, never priced). No newsletter modal. No stat-grid. The "acquire" section is intentionally discreet -- McBling's mysterious-moody luxury is undermined by overt sales language.

## Uniqueness Notes

**Differentiators from other designs:**

1. **McBling aesthetic at full saturation:** Chrome embossing, rhinestone edges, glitter sparkles, marble veining, flowing-curve chrome swooshes -- a complete McBling design language. McBling is 1% in the batch.

2. **Marble-texture as sculptural medium (not surface texture):** The trophies *are* marble sculptures, not surfaces with marble textures. Marble-texture imagery is 4% in the batch.

3. **Flowing-curves as McBling chrome-swoosh signature:** Chrome flowing-curves emanate from trophies and bracket section transitions -- a specific Y2K-era automotive-and-Razr-phone signature curve. Flowing-curves motif is 3% in the batch.

4. **Mysterious-moody applied to McBling glamour:** McBling is usually loud and bright; this design makes it mysterious -- midnight showroom, velvet-rope discretion, by-appointment-only luxury. Mysterious-moody tone is 71% in the batch but rarely with McBling aesthetic.

5. **Chrome-embossed typography with CSS-engraved depth:** All headline typography uses CSS inset-shadow + highlight-stroke to simulate chrome embossing -- a distinctive material treatment of rounded-sans display. Rounded-sans is 2% in the batch.

Chosen seed: aesthetic: mcbling, layout: full-bleed, typography: rounded-sans, palette: high-contrast, patterns: micro-interactions, imagery: marble-texture, motifs: flowing-curves, tone: mysterious-moody

**Avoided patterns from frequency analysis:** No parallax-only (96%), no centered/card-grid (96%/93%), no warm gradient (95%/78%), no mono (81%), no photography-fill (91% -- 100% SVG marble sculptures). Used: full-bleed (12% with distinctive McBling showroom treatment), mcbling (1%), rounded-sans (2%), high-contrast (19%), marble-texture (4%), flowing-curves (3%), micro-interactions (4%), mysterious-moody (71% but with rare McBling pairing).