CURATED · OPEN · FREE

Usedrop

A modern SaaS platform for social CRM, featuring bold typography, high-contrast dark surfaces, and a distinctive purple accent.

SaaSProductivityApp UIBold TypographyClean

Usedrop screenshot

↓ Download design system (10 MB)Open in OpenDesign

Visit: https://www.usedrop.io

📦 Browse pack contents →

01

Identity DNA

Social CRMEngagementROIModern

A sleek, modern social media platform adapted for business analytics.

02

Color

#4A5AFFAccent

#101010Ink

#9B9B9BInk soft

#FFFFFFBG

#B8AFDABG soft

#FBF8F3BG quiet

rgba(16,16,16,0.1)Line

Clean, high-contrast palette with bold dark and purple accents.

03

Typography

transitional-serif · humanist-sans

display169px · 400
h148px · 400
body14px · 400

Headlines use a high-contrast transitional-serif. · Body text uses a clean, neutral humanist-sans. · Strict negative letter-spacing for display text.

04

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Consistent 4px grid for all spacing and sizing.

05

Surfaces

sm · 4px

md · 8px

lg · 16px

pill · 999px

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

06

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

Asymmetric 2-column layout with large visual blocks.

07

Motion & Interaction

200msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1)easing

Smooth fade-in for UI elements. · Interactive hover states on buttons and cards.

Subtle scale or color shift on interactive elements. · Immediate tactile feedback with slight movement.

08

Components

button High-contrast pill-shaped buttons (black/white) and subtle outlined chips.
card Dark, rounded-corner cards with clean typography.
chip Small, pill-shaped toggles (e.g., SOCIAL CRM / PAID ADS).
input Minimalist, clean input fields with subtle borders.
hero Massive serif headline with supporting body text and a high-contrast dark illustration block.

09

Voice & Don'ts

Tone Confident, modern, and direct.
Headlines Punchy, benefit-driven, and visually dominant.
CTAs Clear, action-oriented (e.g., 'Get Started Now').

Don't use small, delicate serif fonts — screenshot shows massive, high-contrast display serif.
Don't use a white-only palette — screenshot shows dominant dark surfaces (#101010) and purple accents (#B8AFDA).
Don't use complex, multi-step forms — screenshot shows streamlined, chat-like interaction flows.
Don't use a rigid, dense grid — screenshot shows generous white space and asymmetric layout.
Don't use subtle, secondary buttons — screenshot shows bold, high-contrast primary CTAs.
Don't use generic sans-serif for headlines — screenshot uses a distinctive transitional-serif.
Avoid: Cluttered layouts
Avoid: Low contrast
Avoid: Dated aesthetics

10

Inside the pack — real screenshots

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 — 移动首屏 — 移动首屏

Captured from the live site · real computed styles

11

System prompt

This is a modern SaaS landing page for a social CRM tool called Drop. It features a high-contrast design with a massive transitional-serif headline and a clean humanist-sans body. The palette is built on pure white (#FFFFFF) and deep black (#101010), with a distinctive muted purple (#B8AFDA) and vibrant blue (#4A5AFF) for accents. The layout uses a generous 12-column grid with large, rounded-corner dark cards to showcase the product. Key design principles: bold typography, high contrast, and generous spacing. Critical donts: avoid low contrast, never use delicate serifs for body text, and don't clutter the UI with unnecessary elements.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

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