Pitch Vibrant
화이트 캔버스와 딥 인디고 브랜드 블록을 오가며 일렉트릭 바이올렛·라임·라벤더로 대비를 터뜨리는, 자신감 넘치는 프레젠테이션 마케팅 스타일.
설명
프레젠테이션 툴 Pitch(pitch.com)에서 추출한 밝고 대담한 SaaS 마케팅 미학. 기본 캔버스는 순수 화이트지만, 히어로와 CTA는 딥 인디고(#280f62) 풀블리드 컬러 블록으로 대비를 만든다. 브랜드 액션은 일렉트릭 바이올렛(#5318eb), 강조 CTA는 형광 라임(#c4ee87), 소프트 서피스는 라벤더(#ebe3fe·#c6a5ff)로 구성된다. 위계는 여백과 초대형 지오메트릭 타이포(디스플레이 180px, tracking-tight)로 만들고, 라운드는 크고(카드 24px, 버튼은 완전 pill) 그림자는 라벤더 컬러 글로우로 부드럽다. 다크 세트는 사이트에 실재하지 않아 인디고 브랜드 블록을 기준으로 합성했다.
타입 스케일
지오메트릭 그로테스크 패밀리. 측정된 본문 UI는 Eina 03, 초대형 디스플레이는 Mark Pro Bold(둘 다 상용) — Google Fonts 대체는 각각 Manrope·Poppins. 시그니처는 히어로의 초대형 디스플레이(측정 180px/700/-7.2px ≈ -0.04em, line-height 0.9)로 화면을 압도하는 것. 웨이트는 측정값 400 본문 / 600 소제목·라벨 / 700 헤딩·디스플레이(사이트엔 900도 존재). 본문은 16–18px대(측정된 16/20px)로 읽기 편하게 — 측정된 12px는 버튼 라벨 크기이므로 body로 쓰지 않는다.
골든 예제 (exemplar)
The AI presentation workspace
Pitch
perfect.
From prompt to presentation, teams create and deliver winning slides together.
Generate a sales presentation for a digital marketplace
Do
- 화이트 섹션과 딥 인디고 컬러 블록을 교차시켜 대비를 만든다
- 브랜드 바이올렛을 주요 액션·초점에, 형광 라임은 핵심 전환 CTA에만 절제해서 쓴다
- 히어로는 초대형 지오메트릭 디스플레이 타이포로 화면을 압도한다
- 버튼은 완전 pill, 카드는 크게 라운드(16–24px)
- 그림자는 중립 회색이 아니라 브랜드 라벤더 컬러 글로우로
Don't
- 모든 색을 한 화면에 동시에 쏟지 말 것 — 대담함은 '큰 색 블록'에서 나온다
- 각진 모서리(작은 radius) 금지 — 라운드는 크게, 버튼은 pill
- 본문을 12px로 만들지 말 것(그건 버튼 라벨 크기) — 본문은 16–18px
- 라임을 배경 전반에 넓게 쓰지 말 것 — 강조 신호가 죽는다
- 차분한 회색 그림자·절제된 흑백 톤 금지 — 이 스타일의 본질은 컬러풀한 자신감이다
컴포넌트 노트
- button
- base: 완전 pill(radius 9999px). primary는 배경 var(--primary) 바이올렛 + 화이트 텍스트, 라임 CTA는 배경 var(--accent) + 딥 인디고 텍스트. 화이트 pill(배경 흰색 + 딥 인디고 텍스트)도 흔함. 폰트 14px/600, padding 12px 24px, 화살표 아이콘 동반.hover: 미세한 scale(1.02) + 배경 한 단 밝게, 150–280ms. 활기 있게.focus: 2px var(--ring) 바이올렛 링(오프셋 2px).disabled: opacity 0.5, cursor not-allowed.accent_variant: 라임(var(--accent)) 배경 + 딥 인디고 텍스트 — 전환 유도 핵심 CTA에만(예: Sign up).ghost_variant: 내비 링크형: 배경 투명, 텍스트 var(--foreground)/컬러 블록 위에선 화이트, hover 시 미세 배경.
- card
- 화이트 섹션에선 배경 var(--card) + 1px var(--border) 라벤더 보더, radius var(--radius)(24px), padding 24–40px. 히어로 입력/주요 카드는 라벤더 컬러 글로우 섀도우. 강조 카드는 딥 인디고 또는 라벤더 배경 채움 허용.
- input
- 배경 화이트, 1px 또는 dashed var(--border) 라벤더 보더, radius var(--radius-field)(16px), padding 14px 16px. placeholder는 var(--muted-foreground). 포커스 시 border→var(--ring) 바이올렛.
- nav
- 상단, 컬러 블록 히어로 위에선 투명 배경 + 화이트 로고/링크. 우측에 화이트 pill 'Log in' + 라임 pill 'Sign up'. 드롭다운 메뉴는 chevron 동반.