큐레이션 · 오픈 · 무료

Usedrop

대담한 타이포그래피, 고대비 다크 서피스, 독특한 퍼플 악센트를 특징으로 하는 소셜 CRM을 위한 모던 SaaS 플랫폼입니다.

SaaSProductivityApp UIBold TypographyClean
Usedrop 스크린샷
↓ 디자인 시스템 다운로드 (10 MB)OpenDesign 에서 열기

원본 사이트: https://www.usedrop.io

📦 팩 내용 보기 →

01

디자인 DNA

소셜 CRM고객 참여ROI모던

비즈니스 분석에 맞춰 조정된 매끄럽고 모던한 소셜 미디어 플랫폼과 같습니다.

02

컬러

#4A5AFFAccent
#101010Ink
#9B9B9BInk soft
#FFFFFFBG
#B8AFDABG soft
#FBF8F3BG quiet
rgba(16,16,16,0.1)Line

대담한 다크 및 퍼플 악센트를 사용한 깔끔한 고대비 팔레트입니다.

03

타이포그래피

transitional-serif · humanist-sans

헤드라인에는 고대비 트랜지셔널 세리프를 사용합니다. · 본문 텍스트에는 깔끔하고 중립적인 휴머니스트산스를 사용합니다. · 디스플레이 텍스트에는严格的한 네거티브 자간을 적용합니다.

04

여백

4px
8px
16px
24px
32px
48px
64px
96px

모든 간격과 크기에 일관된 4px 그리드를 적용합니다.

05

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

sm · 4px
md · 8px
lg · 16px
pill · 999px

1px solid rgba(16,16,16,0.1)

06

레이아웃

1280container
12columns
24pxgutter
768 / 1024breakpoints

대규모 비주얼 블록을 사용한 비대칭 2컬럼 레이아웃입니다.

07

모션과 인터랙션

200msmicro
400mssmall
800msmedium
cubic-bezier(0.25, 0.1, 0.25, 1)easing

UI 요소를 위한 부드러운 fade-in. · 버튼과 카드의 인터랙티브 hover 상태.

인터랙티브 요소에 대한 미묘한 스케일 또는 색상 변화. · 약간의 움직임을 통한 즉각적인 터치 피드백.

08

컴포넌트

09

보이스와 금지 목록

10

팩 안의 실제 스크린샷

Usedrop — 桌面首屏（hero）
桌面首屏（hero）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 桌面滚动分段（90% viewport 步进，作为视觉证据）
桌面滚动分段（90% viewport 步进，作为视觉证据）
Usedrop — 移动首屏
移动首屏

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

11

System Prompt

이것은 Drop이라는 소셜 CRM 도구를 위한 모던 SaaS 랜딩 페이지입니다. 거대한 트랜지셔널 세리프 헤드라인과 깔끔한 휴머니스트산스 본문을 특징으로 하는 고대비 디자인입니다. 팔레트는 순백(#FFFFFF)과 딥 블랙(#101010)을 기반으로 하며, 독특한 뮤트 퍼플(#B8AFDA)과 비비드 블루(#4A5AFF)를 악센트로 사용합니다. 레이아웃은 제품을 전시하기 위한 넉넉한 12컬럼 그리드와 크고 라운드 코너 다크 카드를 사용합니다. 핵심 디자인 원칙: 대담한 타이포그래피, 고대비, 넉넉한 간격. 중요한 주의사항: 저대비는 피하고, 본문에 섬세한 세리프를 절대 사용하지 않으며, 불필요한 요소로 UI를 지저분하게 만들지 마세요.

이 감각을 당신의 에이전트에

이 디자인의 기계 판독 가능한 사양——색상·타이포·모션까지——을 그대로 AI 에이전트에 전달하세요.

OpenDesign 스킬 ↗ · 이 팩 (에이전트용) ↗

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