큐레이션 · 오픈 · 무료

Getcoco

대담한 타이포그래피와 밝은 악센트를 활용하여 소셜 판매 앱을 마케팅하는, 장난기 있고 유틸리티 중심의 SaaS 랜딩 페이지입니다.

01

디자인 DNA

현대 소셜 기업가들을 위한 밝고 접근하기 쉬운 도구 키트입니다.

02

컬러

주요 작업을 위한 단 하나의 밝은 일렉트릭 블루 악센트가 포함된, 고대비 중립 베이스입니다.

03

타이포그래피

geometric-sans · monospace

• display64px · 700
• h232px · 700
• body14px · 500

모든 텍스트에 기하학적 산세리프(GT America)를 사용합니다. · 헤드라인에는 굵은 굵기(700), 본문에는 중간 굵기(500)를 사용합니다.

04

여백

콘텐츠 블록 간의 간격을 위해 24px, 40px, 48px의 일관된 padding을 사용합니다.

05

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

입력 필드와 같은 인터랙티브 요소에는 1px solid rgba(0,0,0,0.1) border를 사용합니다.

0px 1px 3px 0px rgba(0, 0, 0, 0.1) · 0px 0px 0px 1px rgba(0, 0, 0, 0.1)

06

레이아웃

여백을 넉넉히 둔 표준 중앙 정렬 컨테이너 레이아웃입니다.

07

모션과 인터랙션

버튼의 hover 시 부드러운 배경색 전환 효과입니다.

버튼과 인터랙티브 요소는 배경색을 부드럽게 변경합니다. · 인터랙티브 요소에 즉각적인 시각적 피드백과 커서 포인터를 제공합니다.

08

컴포넌트

• button 주요 CTA는 밝은 파란색 배경과 흰색 텍스트를 사용하는 타원형(pill-shaped) 버튼입니다. 보조 버튼은 일반 텍스트 링크입니다.
• card 카드는 매우 큰 border-radius(24px-32px)와 최소한의 border를 사용합니다.
• chip 앱 UI의 상태 표시기는 밝은 색상의 타원형 배경을 사용합니다.
• input 입력 필드는 미세한 inset shadow와 둥근 모서리가 특징입니다.
• hero 대담한 중앙 정렬 헤드라인 뒤에 큰 비디오/미디어 컨테이너와 설명 텍스트가 옵니다.

09

보이스와 금지 목록

• 톤 자신감 있고 주체적이며 약간의 장난기가 느껴지는 톤입니다.
• 헤드라인 크고 굵은 기하학적 서체를 사용하여 간결하고 강렬하며 혜택 중심적인 문구입니다.
• CTA 밝은 색상을 사용하여 시선을 끄는, 직접적이고 행동을 유도하는 문구입니다.

• 작고 빡빡한 폰트를 사용하지 마세요 — 스크린샷은 크고 굵은 기하학적 타입을 보여줍니다.
• 칙칙하고 자연색 팔레트를 사용하지 마세요 — 스크린샷은 밝은 고대비 팔레트와 밝은 악센트를 보여줍니다.
• 날카로운 모서리를 사용하지 마세요 — 스크린샷은 매우 둥근, 타원형 형태를 보여줍니다.
• 얇고 가벼운 굵기를 사용하지 마세요 — 스크린샷은 명확성을 위해 중간에서 굵은 굵기를 보여줍니다.
• 다크 모드를 사용하지 마세요 — 스크린샷은 어두운 텍스트가 있는 주로 흰색 배경을 보여줍니다.
• 복잡하고 붐비는 레이아웃을 사용하지 마세요 — 스크린샷은 깔끔하고 여백이 넓은 단일 컬럼 레이아웃을 보여줍니다.
• 피하기: 지나치게 공식적이거나 기업적인 전문 용어.
• 피하기: 수동적인 어조.
• 피하기: 복잡한 문장 구조.

10

팩 안의 실제 스크린샷

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

11

System Prompt

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