Iridescent Marketing Flow
밝은 화이트 캔버스 위로 파스텔 라임·코랄·스카이 곡면 컬러 블록이 흐르고, 굵은 산세리프와 알약 CTA로 발랄한 자신감을 내는 마케팅 웹 스타일.
설명
직사각 색 띠 대신 비대칭 곡면 경계로 잘린 솔리드 파스텔 블록(라임·코랄·스카이)이 섹션을 흐르듯 잇는다. 캔버스는 언제나 밝은 화이트, 텍스트는 잉크 차콜. 헤드라인은 굵은 700 디스플레이 산세리프로 일부 단어를 컬러 블록으로 하이라이트하고, CTA는 완전히 둥근 알약이다. 스크롤 시 컬러 블록이 살짝 느린 패럴랙스로 흐르고 카드는 바운시하게 들려 즐겁고 자신감 있는 도파민 마케팅 톤을 만든다.
타입 스케일
display Ag 스타일 견본 Style Specimen
h1 Ag 스타일 견본 Style Specimen
h2 Ag 스타일 견본 Style Specimen
h3 Ag 스타일 견본 Style Specimen
body Ag 스타일 견본 Style Specimen
label Ag 스타일 견본 Style Specimen
디스플레이/헤딩은 Space Grotesk 굵은 700으로 자신감 있게, 본문/라벨은 Inter. 헤드라인 일부 단어를 컬러 블록 색으로 배경 하이라이트할 수 있다. 가는(≤400) 디스플레이 금지.
골든 예제 (exemplar)
Do
- 섹션 전환은 곡면 곡선으로 흐르게 한다 — 직각 색 띠 금지
- 캔버스는 항상 밝은 화이트, 컬러 블록은 솔리드 파스텔 3색(라임·코랄·스카이)
- 헤드라인은 굵은 700, 일부 단어는 컬러 블록 색으로 배경 하이라이트
- CTA는 완전 둥근 알약, 패럴랙스 흐름을 정체성으로 유지
Don't
- 직각 섹션 경계 금지 — 곡면 전환으로 흐른다
- 보라/인디고 그라디언트 및 컬러 블록 안 그라디언트 금지 — 블록은 솔리드 단색
- 어두운 다크 배경(라이트 캔버스에서) 금지, 이모지 금지 — 즐거움은 컬러 블록과 면 일러스트로
- 가는(≤400) 디스플레이 헤드라인 금지, 컬러 3색 초과 금지, 모션 완전 제거 금지
컴포넌트 노트
- button
- base: 완전 둥근 알약(radius 999px). 1차 = 차콜 primary 배경 + 흰 텍스트. 컬러 블록 위에서는 흰 배경 + 차콜 텍스트. padding 14px 32px, weight 600.hover: scale(1.04) + 그림자 깊어짐, 260ms 바운시focus: 2px offset outline (ring)disabled: opacity 0.5
- card
- 보더 없음, radius 24px. 흰 카드가 컬러 블록 위에 뜬다. 부드러운 그림자(0 8px 20px/10%). hover 시 translateY(-6px) + 살짝 rotate(-1deg).
- input
- radius 16px, 옅은 배경(muted) 채움 또는 얇은 input 보더. 포커스 시 ring.
- nav
- 상단 로고 + 우측 링크 + 알약 CTA 한 개. 배경은 화이트, 스크롤 시 곡면 블록이 뒤로 흐른다.
- section
- 상/하단을 border-radius 50% 50% 0 0 / 8% 8% 0 0 류 비대칭 곡률 또는 SVG path로 잘라 다음 섹션으로 흐르게 한다. 직각 섹션 경계 금지.