큐레이션 · 오픈 · 무료

Pika

깔끔하고 고대비 인터페이스를 갖춘 대담하고 장난스러운 AI 비디오 생성 플랫폼.

01

디자인 DNA

장난기 있으면서도 강력한 AI 크리에이티브 스튜디오.

02

컬러

따뜻한 오프화이트 배경에 날카로운 블랙 타이포그래피와 장난스러운 골든 액센트.

03

타이포그래피

grotesque-sans · humanist-sans

• display80px · 900
• h148px · 700
• h232px · 500
• body17px · 400
• caption14px · 300

헤드라인은 울트라 볼드이며 대문자로 설정하여 강하고 임팩트 있는 시각적 위계를 형성합니다. · 본문 텍스트는 대담한 헤드라인과 대비하여 가독성을 위해 더 가벼운 무게로 설정됩니다. · 타이포그래피는 컴팩트하고 현대적인 느낌을 위해 네거티브 자간으로 빡빡하게 설정됩니다.

04

여백

섹션에 넉넉한 padding (40px)을 둔 일관된 4px 기본 단위.

05

표면 (라운드 / 그림자 / 경계선)

1px solid rgba(207, 195, 255, 0.5)

0px 2px 0px 0px #111111 · 0px 4px 4px 0px rgba(0, 0, 0, 0.05)

06

레이아웃

하단에 넓은 콘텐츠 영역이 있는 단일 컬럼 중앙 히어로.

07

모션과 인터랙션

인터랙티브 요소들에서의 부드러운 컬러 및 background-color 전환. · 버튼과 카드에서의 미세한 transform 전환.

인터랙티브 요소들에서의 미세한 컬러 또는 background-color 변화. · 약간의 transform 또는 opacity 변화.

08

컴포넌트

• button 둥근 모서리의 고대비 버튼. 프라이머리는 흰색 텍스트의 다크 테마, 세컨더리는 어두운 텍스트의 라이트 테마.
• card 보라색, 다크그레이, 오렌지 등 뚜렷한 배경색과 대담한 타이포그래피를 가진 크고 둥근 카드.
• chip 다크 배경과 라이트 텍스트의 작고 둥근 태그 (예: 'PIKA AGENT').
• input 라이트 그레이 배경과 통합된 액션 버튼을 가진 크고 둥근 텍스트 입력 영역.
• hero 거대하고 대담한 헤드라인, 서브 헤드라인, 그리고 두드러진 입력 필드가 있는 중앙 히어로.

09

보이스와 금지 목록

• 톤 장난기 있고, 활기차며, 직접적입니다.
• 헤드라인 대담하고, 대문자이며, 매우 임팩트 있습니다.
• CTA 행동 중심적이고 명확합니다 (예: '생성', '웹에서 시도').

• 헤드라인에 얇거나 가벼운 타이포그래피를 사용하지 마세요 — 스크린샷에는 울트라 볼드, 하비 웨이트의 디스플레이 텍스트가 나타납니다.
• 순백 배경을 사용하지 마세요 — 스크린샷에는 따뜻한 오프화이트 (#FCFAF7)이 나타납니다.
• 쿨 블루나 그린을 주요 액센트로 사용하지 마세요 — 스크린샷에는 따뜻한 골든옐로우 (#FFD184)와 퍼플이 나타납니다.
• 날카롭고 사각형 모서리를 사용하지 마세요 — 스크린샷에는 카드와 입력에 큰 border-radius (18px)가 나타납니다.
• 작고 비좁은 spacing을 사용하지 마세요 — 스크린샷에는 섹션에 넉넉한 padding (40px)이 나타납니다.
• 다크 모드를 기본값으로 사용하지 마세요 — 스크린샷에는 어두운 텍스트가 주된 라이트 인터페이스가 나타납니다.
• 피하기: 지나치게 기술적인 전문 용어
• 피하기: 수동적인 언어
• 피하기: 얇거나 가벼운 타이포그래피
• 피하기: 지저분한 레이아웃

10

팩 안의 실제 스크린샷

실제 페이지에서 캡처 · 실 computed styles

11

System Prompt

en · zh-CN · zh-TW · ja · ko