# Iridescent Marketing Flow

## Overview
A bright, confident marketing style. A pure white canvas is interrupted, section by section, by solid pastel color blocks — lime, coral, sky — that flow into one another through asymmetric curved borders rather than stacked rectangular bands. Bold 700 display sans, fully rounded pill CTAs, full-bleed illustration banners, and slow-parallax color blocks give it a joyful "dopamine design" energy. If a section feels flat, the fix is a curved color block and a bouncier entrance — not more chrome.

## Colors & Roles
White `background`, ink-charcoal `foreground` (hue ~280). The three signature color blocks are solid pastels used as full-bleed section surfaces: lime (`chart-1`), coral (`accent` / `chart-2`), and sky (`secondary` / `chart-3`). Text on color blocks stays the same charcoal for AA contrast. The primary CTA is charcoal-filled with white text; on top of a color block it flips to white fill with charcoal text. `muted`/`border` are faint cool neutrals (derived — the pack declares `border: none`, so borders are used sparingly). `destructive` (red) is derived; the pack has no error red. Color blocks are always solid — never gradient-filled.

## Typography Rules
Display and headings: Space Grotesk at weight 700, tracking-tight (`-0.03em` on display), line-height ~1.0. Body and labels: Inter (Pretendard fallback), 400 body at 1.6 line-height, 600 uppercase labels with 0.02em tracking. Headlines are big and confident; select words may be highlighted by painting a color-block background behind them. Never use a thin (≤400) display headline. Modular scale ratio ≈ 1.25.

## Layout Principles
Content max-width 1200px with 24px side padding; color blocks go full-bleed (100vw). Vertical section separation is zero — sections interlock at curved boundaries and flow directly into each other, with 96px inner top/bottom padding. Full-bleed banners place a large flat-color illustration on one side and headline + body + CTA on the other with generous margin. Responsive: 1 column under 768px, 2 columns 768–1024px, full multi-column above.

## Depth & Elevation
One soft, crisp shadow step (`0 8px 20px` at 10% charcoal) on pill buttons and floating cards; it deepens on hover. No noise, grain, blur, or gradients. Division comes from the color blocks themselves, not from borders or heavy elevation. Don't give every card the same uniform soft shadow.

## Shapes
Pill buttons are fully rounded (999px); cards 24px; image frames ~28px; inputs ~16px. Section boundaries are large asymmetric curves — `border-radius: 50% 50% 0 0 / 8% 8% 0 0`-style curvature or an SVG `path`. Right-angle section edges are banned; curves are reserved for section transitions, not scattered as random blobs.

## Component Stylings
- **Button**: fully rounded pill, weight 600, padding ~14px 32px. Primary = charcoal fill / white text; on a color block = white fill / charcoal text. Hover `scale(1.04)` + deeper shadow, 260ms bouncy. Focus = 2px offset ring.
- **Card**: borderless, radius 24px, floats on a color block with the one soft shadow. Hover lifts `translateY(-6px)` and rotates `-1deg`.
- **Input**: radius 16px, faint muted fill or thin input border; focus shows the ring.
- **Nav**: white bar, logo left, links + one pill CTA right; color blocks drift behind on scroll.
- **Section**: top/bottom cut into asymmetric curves so each surface flows into the next.

## Motion
Playful with a gentle overshoot: `cubic-bezier(0.34, 1.56, 0.64, 1)` at 260ms. Buttons scale on hover; cards lift and tilt. Color blocks parallax at ~0.85x scroll speed, illustrations at ~1.1x. Entrances fade `opacity 0→1` with `translateY(24px→0)`. Under `prefers-reduced-motion: reduce`, drop parallax, overshoot, and rotation — keep opacity only. Removing motion entirely breaks the identity.

## Do's and Don'ts
**Do:** flow sections through curved boundaries; keep the canvas white and the three color blocks solid pastel; set bold 700 headlines with word-level color highlights; use fully rounded pill CTAs and keep the parallax flow.
**Don't:** use right-angle section bands; put gradients inside blocks or reach for purple/indigo gradients; use dark backgrounds or emoji; use thin display headlines; add a fourth color; or remove motion.

## Responsive Behavior
Multi-column layouts collapse to a single column on mobile; display type scales via `clamp()`. Curved section boundaries flatten their curvature slightly on narrow viewports but never become sharp right angles. Illustration banners stack above the headline block.

## Agent Prompt Guide
> Build this in the 'Iridescent Marketing Flow' style: a bright white canvas with full-bleed solid pastel color blocks (lime, coral, sky) whose sections flow into each other via asymmetric curved borders — never right-angle bands. Ink-charcoal text, bold 700 Space Grotesk display headlines with select words highlighted on a color-block background, fully rounded pill CTAs, borderless cards with one soft shadow that lift and slightly rotate on hover, and bouncy overshoot motion with color blocks drifting in slow parallax.

## Known Gaps / Confidence
Adapted from the MIT-licensed design-diversity pack `web-iridescent-marketing-flow` (an authored spec, not a live-URL extraction), so all confidence is `manual`. The three color-block hexes and the charcoal/muted-text values trace to the pack's `tokens.json`; the neutral `muted`/`border` steps and the `destructive` red are derived (the pack declares `border: none` and no error color) and are noted in `style.json`. The dark palette has no source in the pack — it is authored to preserve the identity (pastel blocks retained over an inverted charcoal canvas). Display font Space Grotesk and body Inter are both open Google Fonts, so reproduction is faithful.