Hub
BOLD SHAPES FAST RHYTHM

Pop art energy meets motion design. Thick ink lines, primary colors, and comic-book punch. Two to three high-saturation accents, used big and bold, drive the message home.

Design Principles

01 — Bold Type Oversized headings with thick outlines. Short punchy copy. Repeat the rhythm.
02 — Shape + Line Circles, triangles, squares — each in a pop color. Thick 4-5px ink borders on everything.
03 — CTA Contrast High-saturation accents for action. Yellow on black. Bold drop shadows. No subtlety.
Pro Tip Limit yourself to 2-3 saturated colors. Pop art is about contrast, not variety.
Key Move Every element should feel like it's in motion — rotation, scale, and offset shadows create kinetic energy.

Color Palette

Yellow #ffe85d
Pink #ff4f7b
Blue #196bff
Ink #141313
Paper #f6f3ea

AI Request Prompt

Design a landing page in Kinetic Pop style — dynamic launch campaign aesthetic with bold shapes and high-contrast pop-art rhythms.

COLOR TOKENS:
--yellow: #ffe85d
--pink: #ff4f7b
--blue: #196bff
--ink: #141313
--paper: #f6f3ea
--hero-bg: #fff
--band-blue: #b4cdfd
--band-pink: #ffd4dd
Background: radial-gradient(circle at 10% 8%, rgba(255, 79, 123, 0.28), transparent 24%),
  radial-gradient(circle at 90% 18%, rgba(25, 107, 255, 0.22), transparent 28%),
  linear-gradient(180deg, #fffdf2 0%, #f6f3ea 100%).
No other colors.

TYPOGRAPHY:
Heading: 'Do Hyeon' 400 (display font, single weight), tracking -0.02em
Body: 'Manrope' 400 / 600 / 700 / 800
Scale: clamp(2rem, 7vw, 5.2rem) for h1
Heading line-height: 0.95
Body line-height: 1.7
Hero paragraph max-width: 700px

UI:
Hero: 3px solid var(--ink), border-radius 36px, background #fff, inner clip border-radius 33px, overflow hidden
Blob decorations: position absolute, border-radius 999px, yellow blob 170px at top-right, pink blob 120px at bottom-left
Bands: 2px solid var(--ink), border-radius 14px, padding 12px, font-weight 700
  Band 1: background var(--yellow)
  Band 2: background #b4cdfd
  Band 3: background #ffd4dd
Buttons: 2px solid var(--ink), background var(--yellow), border-radius 999px, padding 8px 14px, font-weight 700

LAYOUT:
Content max-width: min(1120px, 92vw)
Container padding: 26px 0 78px
Band grid: auto-fit, minmax(210px, 1fr), gap 12px
Hero padding: clamp(22px, 5vw, 46px)

MOTION:
Entrance: translateY(15px) scale(0.96) → translateY(0) scale(1), opacity 0 → 1, 650ms ease, stagger 80ms
Hover: subtle scale lift on bands, transition 200ms ease
No scroll-triggered animations. Respect prefers-reduced-motion.

RESPONSIVE:
768px: Bands stack to 1 column, h1 clamps down to 2rem, hero padding reduces
1120px: Full grid layout, blobs visible, centered container

FORBIDDEN:
- Horizontal scroll at any viewport
- Long paragraph text — short copy repetition is the principle
- Desaturated or neutral tones as primary colors
- Thin or subtle borders — all borders must be 2-3px
- Gradient text or complex gradient overlays
- More than 3 accent colors

OUTPUT:
1) Color + typography tokens as CSS custom properties
2) Component structure: Hero with blobs, Benefit bands (3), CTA button
3) Semantic HTML + CSS with responsive support