---
name: Usedrop
description: "Worth including for its bold use of typography and high-contrast, modern SaaS aesthetic."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#101010"
  secondary: "#9B9B9B"
  tertiary: "#4A5AFF"
  neutral: "#9B9B9B"
  bg-soft: "#B8AFDA"
  bg-quiet: "#FBF8F3"
  muted-soft: "#FBF8F3"
  line: "rgba(16,16,16,0.1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 169px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-7.2px"
  h1:
    fontFamily: humanist-sans
    fontSize: 48px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-2.16px"
  body:
    fontFamily: humanist-sans
    fontSize: 14px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.288px"

rounded:
  sm: 4px
  md: 8px
  lg: 16px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

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

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#101010`)** — uses `ink` token
- **Secondary text (`#9B9B9B`)** — uses `ink-soft` token
- **Accent (`#4A5AFF`)** — uses `accent` token
- **Muted (`#9B9B9B`)** — uses `muted` token
- **Borders (`rgba(16,16,16,0.1)`)** — uses `line` token

## Typography

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

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

## Layout

Asymmetric 2-column layout with large visual blocks.

*Rhythm:* Consistent 4px grid for all spacing and sizing.

## Elevation & Depth

- Borders: 1px solid rgba(16,16,16,0.1)

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 16px
- `pill`: 999px

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

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

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