厳選・オープン・無料

Usedrop

Social CRMのためのモダンなSaaSプラットフォーム。大胆なタイポグラフィ、ハイコントラストなダークサーフェス、独自のアクセントカラーが特徴です。

SaaSProductivityApp UIBold TypographyClean
Usedrop のスクリーンショット
↓ デザインシステムをダウンロード (10 MB)OpenDesign で開く

オリジナル: https://www.usedrop.io

📦 パックの中身を見る →

01

デザイン DNA

Social CRMEngagementROIモダン

ビジネス分析に適応された、洗練されたモダンSNSプラットフォーム。

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要素の滑らかなフェードイン。 · ボタンやカードのインタラクティブな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というSocial CRMツールのためのモダンなSaaSランディングページです。巨大なトランジショナル・セリフの見出しとクリーンなヒューマニスト・サンセリフの本文を備えた、ハイコントラストデザインが特徴です。パレットは純白（#FFFFFF）と深い黒（#101010）を基調とし、独自の落ち着いた紫（#B8AFDA）と鮮やかなブルー（#4A5AFF）をアクセントとしています。レイアウトは12カラムグリッドを広く使用し、製品を紹介するために角丸の大きなダークカードを配置しています。主要なデザイン原則：boldなタイポグラフィ、ハイコントラスト、豊かな間隔。重要な禁止事項：低コントラストを避け、本文に繊細なセリフを決して使用せず、不要な要素でUIを雑然とさせないこと。

このセンスを AI エージェントへ

この設計の機械可読な仕様——カラー・タイポ・モーションまで——をそのまま AI エージェントに渡せます。

OpenDesign スキル ↗ · このパック（エージェント用） ↗

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