큐레이션 · 오픈 · 무료

Raindrop

크리에이티브를 위해 설계되고 코더를 위해 만들어진 올인원 북마크 매니저

01

디자인 DNA

현대 웹을 위한 디지털 서랍

02

컬러

깨끗한 흰색 표면에 프라이머리 블루 강조색과 은은한 짙은 텍스트

03

타이포그래피

system-ui · monospace

• display50px · 500
• h236px · 600
• body18px · 400
• small16px · 400

네이티브하고 깨끗한 느낌을 위해 system-ui 또는 Segoe UI를 사용합니다 · 헤드라인은 타이트하고 깨끗하며 약간 굵게 설정합니다 · 흰색 배경에서의 가독성을 위해 높은 대비를 유지합니다

04

여백

히어로 섹션에는 넉넉한 수직 패딩(50px), 일관된 30px 수평 패딩을 사용합니다

05

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

컨테이너와 입력 필드에는 1px solid rgba(0,0,0,0.1)를 사용합니다

0px 12px 24px rgba(0, 0, 0, 0.1) · 0px 2px 4px rgba(0, 0, 0, 0.1) · 0px 0px 0px 0.5px rgba(0, 0, 0, 0.15)

06

레이아웃

왼쪽에 카피, 오른쪽에 겹쳐진 제품 스크린샷을 배치한 분할 히어로 레이아웃으로, 시각적 흥미를 위해 유기적인 배경 블롭을 활용합니다

07

모션과 인터랙션

hover 상태를 위한 부드러운 불투명도와 transform 전환 · 인터랙티브 요소의 미묘한 배경색 변화

미묘한 배경색 변화 또는 불투명도 변화 · 최소한의 물리적 피드백, 상태 변화에 의존

08

컴포넌트

• button 프라이머리 버튼은 밝은 블루로 채워지며 작은 radius로 둥글게 설정됩니다; 세컨더리 버튼은 투명한 텍스트 링크입니다
• card 컨테이너와 기능 카드에는 부드러운 그림자와 가벼운 테두리를 사용합니다
• chip 부드러운 배경을 가진 둥근 알약 모양 태그(예: 'New: AI Assistant' 필)
• input 미묘한 테두리와 4px radius를 가진 깨끗하고 미니멀한 입력 필드
• hero 왼쪽에 크고 굵은 디스플레이 텍스트, 오른쪽에 다층화된 제품 스크린샷을 배치하며, 흰색 배경에 다채로운 추상적 유기적 형태를 사용합니다

09

보이스와 금지 목록

• 톤 전문적이고, 유용하며, 직관적인
• 헤드라인 짧고, 선언적이며, 혜택 중심적인
• CTA 직접적이고 행동 중심적인 (가입하기, 앱 다운로드)

• 어두운 모드를 기본 배경으로 사용하지 마세요 — 스크린샷은 주로 흰색 배경을 보여줍니다
• 강렬한 네온 강조색을 사용하지 마세요 — 스크린샷은 깨끗하고 밝은 블루(#0B7ED0)를 사용합니다
• 무거운 장식적 세리프 폰트를 사용하지 마세요 — 스크린샷은 깨끗한 네이티브 시스템 폰트를 사용합니다
• 레이아웃을 엄격한 박스 형태로 만들지 마세요 — 스크린샷은 유기적이고 부드러운 배경 블롭을 포함합니다
• 인터페이스를 과도한 테두리로 복잡하게 만들지 마세요 — 스크린샷은 여백과 미묘한 그림자를 사용합니다
• 어두운 프라이머리 텍스트 색상을 사용하지 마세요 — 스크린샷은 부드럽고 약간 덜 강렬한 짙은 회색(#1A1A1A)을 사용합니다
• 피하기: 지나치게 캐주얼한 은어
• 피하기: 공격적이거나 과장된 마케팅 언어
• 피하기: 맥락 없는 복잡한 기술 용어

10

팩 안의 실제 스크린샷

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

11

System Prompt

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