# Iridescent Marketing Flow
밝은 화이트 캔버스 위로 파스텔 라임·코랄·스카이 곡면 컬러 블록이 흐르고, 굵은 산세리프와 알약 CTA로 발랄한 자신감을 내는 마케팅 웹 스타일.
- taxonomy: playful-maximalism · curved-color-blocks, marketing-landing, pastel-vivid, bold-sans, pill-cta, parallax-flow · complexity=medium
- page types: landing, marketing
- best for: 제품·SaaS 랜딩 페이지, 즐겁고 자신감 있는 브랜드 마케팅 사이트, 풀폭 일러스트 배너 중심 히어로
- avoid for: 데이터 밀도가 높은 대시보드, 엄숙한 기업·금융·법률 사이트, 어두운 다크 UI가 필요한 제품
- provenance: authored (design-diversity 팩 'web-iridescent-marketing-flow' (MIT) 각색) — confidence: colors=manual, typography=manual, spacing=manual, motion=manual, layout=manual
## Design rules
# 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.
## Tokens (theme.css — use these values verbatim, do not re-derive)
```css
/* Iridescent Marketing Flow — theme.css (generated, do not edit) */
:root {
--radius: 24px;
--radius-selector: 999px;
--radius-field: 16px;
--font-sans: 'Inter', 'Pretendard', system-ui, sans-serif;
--font-mono: 'Space Mono', 'JetBrains Mono', monospace;
--font-display: 'Space Grotesk', 'Inter', sans-serif;
--spacing: 8px;
--shadow: 0px 8px 20px 0px color-mix(in oklab, oklch(0.221 0.018 279.9) 10%, transparent);
--ks-display-weight: 700;
--ks-display-tracking: -0.03em;
--background: oklch(1 0 0);
--foreground: oklch(0.221 0.018 279.9);
--card: oklch(1 0 0);
--card-foreground: oklch(0.221 0.018 279.9);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.221 0.018 279.9);
--primary: oklch(0.221 0.018 279.9);
--primary-foreground: oklch(1 0 0);
--secondary: oklch(0.810 0.081 238.5);
--secondary-foreground: oklch(0.221 0.018 279.9);
--muted: oklch(0.970 0.003 264.5);
--muted-foreground: oklch(0.476 0.024 282.4);
--accent: oklch(0.757 0.149 36.8);
--accent-foreground: oklch(0.221 0.018 279.9);
--destructive: oklch(0.600 0.200 27);
--destructive-foreground: oklch(1 0 0);
--border: oklch(0.929 0.007 277.2);
--input: oklch(0.929 0.007 277.2);
--ring: oklch(0.221 0.018 279.9);
--chart-1: oklch(0.882 0.156 122.0);
--chart-2: oklch(0.757 0.149 36.8);
--chart-3: oklch(0.810 0.081 238.5);
--chart-4: oklch(0.221 0.018 279.9);
--chart-5: oklch(0.821 0.176 128.0);
}
.dark {
--background: oklch(0.198 0.014 278.6);
--foreground: oklch(0.842 0.017 282.2);
--card: oklch(0.243 0.019 280.4);
--card-foreground: oklch(0.842 0.017 282.2);
--popover: oklch(0.243 0.019 280.4);
--popover-foreground: oklch(0.842 0.017 282.2);
--primary: oklch(0.842 0.017 282.2);
--primary-foreground: oklch(0.198 0.014 278.6);
--secondary: oklch(0.288 0.022 277.5);
--secondary-foreground: oklch(0.842 0.017 282.2);
--muted: oklch(0.243 0.019 280.4);
--muted-foreground: oklch(0.641 0.021 282.5);
--accent: oklch(0.720 0.150 36.8);
--accent-foreground: oklch(0.198 0.014 278.6);
--destructive: oklch(0.620 0.200 27);
--destructive-foreground: oklch(0.198 0.014 278.6);
--border: oklch(0.288 0.022 277.5);
--input: oklch(0.288 0.022 277.5);
--ring: oklch(0.842 0.017 282.2);
--chart-1: oklch(0.882 0.156 122.0);
--chart-2: oklch(0.757 0.149 36.8);
--chart-3: oklch(0.810 0.081 238.5);
--chart-4: oklch(0.842 0.017 282.2);
--chart-5: oklch(0.821 0.176 128.0);
}
```
## Golden example (exemplar.html — match this structure and token usage)
```html
Ship joyfully
Marketing that
flows
with you.
A bright canvas, curved pastel blocks, and bouncy motion — build a confident launch page in an afternoon.
Cards float on the color block and tilt on hover; blocks drift in slow parallax as you scroll.
Bouncy by default
Overshoot easing gives every interaction a confident little spring.
```
## Apply
- shadcn project: `npx shadcn@latest add https://web.ggum.uk/styles/r/iridescent-marketing-flow.json` — installs the tokens above into globals.css, then use semantic classes (bg-background, text-primary, …) only.
- other stack: paste the theme.css block above into your global stylesheet and style everything via `var(--…)` references.
- single HTML/artifact: embed the theme.css block in a `