精選 · 開放 · 免費

Usedrop

一個現代化的 SaaS 平台，用於 Social CRM，特點是大膽的字體、高對比的深色介面，以及獨特的紫色強調色。

SaaSProductivityApp UIBold TypographyClean

Usedrop 網站截圖

↓ 下載設計系統包 (10 MB)在 OpenDesign 中開啟

原站: https://www.usedrop.io

📦 瀏覽包內檔案 →

01

設計氣質 DNA

Social CRMEngagementROIModern

一個改用於商業分析的、流暢現代的社群媒體平台。

02

色彩

#4A5AFFAccent

#101010Ink

#9B9B9BInk soft

#FFFFFFBG

#B8AFDABG soft

#FBF8F3BG quiet

rgba(16,16,16,0.1)Line

簡潔、高對比的調色板，搭配大膽的深色與紫色強調。

03

字型

transitional-serif · humanist-sans

display169px · 400
h148px · 400
body14px · 400

標題使用高對比的過渡襯線字體。 · 內文使用簡潔、中性的人文無襯線字體。 · 展示文字嚴格使用負值字距。

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 元素平順的淡入效果。 · 按鈕與卡片的互動懸停狀態。

互動元素在懸停時有細微的縮放或色彩變化。 · 提供即時的觸覺回饋，伴隨輕微的移動。

08

組件

button 高對比的膠囊狀按鈕（黑/白）與細微的描邊標籤。
card 深色、圓角卡片，搭配簡潔的字體排版。
chip 小型膠囊狀切換開關（例如：SOCIAL CRM / PAID ADS）。
input 極簡、乾淨的輸入欄位，帶有細微邊框。
hero 巨大的襯線字體標題，搭配輔助內文與高對比的深色插圖區塊。

09

文案語氣與禁用清單

語氣自信、現代且直接。
標題風格 強而有力、強調效益，並在視覺上占主導地位。
按鈕文案 清晰、以行動為導向（例如：「立即開始」）。

不要使用小巧精緻的襯線字體——截圖顯示的是巨大、高對比的展示用襯線字體。
不要只使用白色調色板——截圖顯示以深色介面（#101010）與紫色強調（#B8AFDA）為主。
不要使用複雜的多步驟表單——截圖顯示的是精簡化的類聊天互動流程。
不要使用剛性、密集的格線——截圖顯示充足的留白與不對稱佈局。
不要使用細微、次要的按鈕——截圖顯示的是大膽、高對比的主要行動呼籲。
不要使用通用的無襯線字體作為標題——截圖使用的是獨特的過渡襯線字體。
避免: 雜亂的佈局
避免: 低對比度
避免: 過時的美學

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 的 Social CRM 工具的現代化 SaaS 登陸頁面。其設計採用高對比風格，標題使用巨大的過渡襯線字體，內文則使用簡潔的人文無襯線字體。調色板建立在純白（#FFFFFF）與深黑（#101010）之上，並以獨特的柔和紫色（#B8AFDA）與鮮明的藍色（#4A5AFF）作為強調。佈局使用寬裕的 12 欄格線，搭配大型圓角深色卡片來展示產品。關鍵設計原則：大膽的字體、高對比度與寬裕的間距。重要禁忌：避免低對比度、切勿使用精緻的襯線字體作為內文，且不要用不必要的元素使介面變得雜亂。

把這份品味接進你的 Agent

把這套設計的機器可讀規格——色彩、字體、動效，整套 DNA——直接交給你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

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