# Usedrop · Design system migration spec

> Source: https://www.usedrop.io  ·  Curated by OpenDesign  ·  en

> Worth including for its bold use of typography and high-contrast, modern SaaS aesthetic.

## 1. Identity DNA

The Drop system treats a SaaS interface as a piece of social architecture, applying the familiar grammar of social media to a business context. Its identity DNA is built on **bold typography** and high-contrast surfaces, creating a direct, modern presence for social CRM.

**One-liner:** A modern SaaS platform for social CRM, featuring bold typography, high-contrast dark surfaces, and a distinctive purple accent.
**Keywords:** Social CRM · Engagement · ROI · Modern
**Analogy:** A sleek, modern social media platform adapted for business analytics.

## 2. Color

The palette is a study in stark, functional contrast, pairing pure white with a dominant deep black surface to create immediate visual hierarchy. A muted purple and a single vibrant blue serve as distinctive, purposeful accents.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFFFFF` | main background |
| `--bg-soft` | `#B8AFDA` | card background |
| `--bg-quiet` | `#FBF8F3` | quiet area |
| `--ink` | `#101010` | body text |
| `--ink-soft` | `#9B9B9B` | secondary text |
| `--muted` | `#9B9B9B` | placeholder |
| `--muted-soft` | `#FBF8F3` | weak hint |
| `--accent` | `#4A5AFF` | single accent |
| `--line` | `rgba(16,16,16,0.1)` | divider |

**Color principle:** Clean, high-contrast palette with bold dark and purple accents.

Every color choice serves the principle of clarity and confident contrast over decorative nuance.

## 3. Typography

The typographic voice is split between a high-contrast transitional-serif for commanding display and a neutral humanist-sans for readable body text. This pairing establishes a clear hierarchy, with massive, tightly-set headlines making a declarative statement.

- **Display:** transitional-serif
- **Body:** humanist-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 169px | 1.0 | 400 | -7.2px | Hero headlines |
| h1 | 48px | 1.0 | 400 | -2.16px | Section headlines |
| body | 14px | 1.0 | 400 | -0.288px | Body text |

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

## 4. Spacing

A consistent **4px grid** underpins the entire system, creating a predictable and harmonious spatial rhythm.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Consistent 4px grid for all spacing and sizing.

## 5. Surfaces

Depth is communicated through flat, dark surfaces and generous white space rather than shadows or gradients. Borders are minimal, defined by a single pixel of semi-transparent dark tone to separate elements with subtle precision.

- **Radius:** sm 4px · md 8px · lg 16px · pill 999px
- **Borders:** 1px solid rgba(16,16,16,0.1)

## 6. Layout

The layout employs an asymmetric two-column structure, breaking from rigid uniformity to guide the eye. Large, rounded-corner visual blocks and **generous white space** define the skeleton, prioritizing impact and focus over dense information packing.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** Asymmetric 2-column layout with large visual blocks.

## 7. Motion & Interaction

Motion is restrained and functional, with smooth fades and transitions reinforcing the interface's calm confidence. Interactive feedback—subtle scaling and color shifts on hover or click—provides immediate, tactile acknowledgment without excess animation.

- **Durations:** micro 200ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth fade-in for UI elements.
  - Interactive hover states on buttons and cards.

- **Hover:** Subtle scale or color shift on interactive elements.
- **Click:** Immediate tactile feedback with slight movement.
- **Transition:** Smooth CSS transitions on all interactive states.
- **Keyboard:** Standard focus management for accessibility.

## 8. Voice & Don'ts

The editorial voice is **confident, modern, and direct**, matching the visual boldness with benefit-driven headlines and clear calls to action. Language is stripped of ambiguity, mirroring the system's clean interface.

- **Tone:** Confident, modern, and direct.
- **Headline style:** Punchy, benefit-driven, and visually dominant.
- **CTA style:** Clear, action-oriented (e.g., 'Get Started Now').
- **Avoid:** Cluttered layouts / Low contrast / Dated aesthetics

### Don'ts
- ❌ 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.

It deliberately avoids cluttered layouts, low contrast, and any hint of dated aesthetics, reinforcing a commitment to focused utility.

## System Prompt (paste into AI tool)

```
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.
```