---
title: "Drop design system"
variant: extended
source: https://www.usedrop.io/
captured_at: 2026-10-12
theme: dark
industry: saas
generator: Design DNA (https://four.wiralomi.com/style/usedrop-io)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Drop · Design System

> Editorial scale meets social commerce

**Theme:** dark · **Industry:** saas · **Source:** https://www.usedrop.io/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Drop’s homepage pairs a clean white introduction with a long dark narrative built around oversized editorial typography. Lavender and soft green feature bands, customer imagery, and restrained interface mockups make the social commerce product feel both expressive and practical.

## North star

Let oversized editorial typography lead each story, then use restrained colour bands and authentic product imagery to clarify the social-commerce value.

## Overview

The visual strategy alternates a bright, spacious opening with a predominantly near-black editorial canvas. White and warm off-white provide clear breaks, while lavender and pale sage identify major feature stories; vivid yellow is a sparse signal in badges and product-related details, not a general UI accent. Oversized uppercase headlines create a magazine-like rhythm, supported by compact, lightly weighted sans-serif body copy. The hero uses an asymmetrical two-column composition with a large headline, short supporting copy, a pill CTA, and paired rounded media panels. Further down, wide feature bands pair concise copy with product or messaging imagery, and a pale case-study section shifts the mood before the dark closing CTA. Layout stays spacious and flat: borders and muted labels do more work than shadows. Much of the saturated colour belongs to photographs and interface mockups, so keep the surrounding product UI restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Drop Ink | `#101010` | `--color-drop-ink` | brand | Primary dark canvas for most long-form feature, comparison, and closing sections; also appears in dark text. |
| Signal Lemon | `#f6f361` | `--color-signal-lemon` | accent | High-visibility outline badge colour, notably on Detroit Pistons labels; keep it sparse. |
| Story Ivory | `#fbf8f3` | `--color-story-ivory` | surface | Warm light background for the customer success-story section, contrasting with the dark narrative. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Hero canvas and light section surface; also used for reverse text and selected controls. |
| Quiet Gray | `#9b9b9b` | `--color-quiet-gray` | neutral | Muted supporting text and fine outlined category badges on dark backgrounds. |
| Soft Charcoal | `#1a1a1a` | `--color-soft-charcoal` | neutral | Subtle dark gradient and supporting visual tone; not a prominent independent section colour. |
| Social Lavender | `#b8afda` | `--color-social-lavender` | brand | Signature feature-section background and oversized editorial emphasis; also appears in diagrams and product imagery. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Measured button border detail; visually subordinate to the near-black page canvas. |
| Sage Green | `#c7d8c5` | `--color-sage-green` | semantic | Full-width background for the revenue-maximization feature band. |

### Semantic aliases

`--color-canvas` → `#101010` (Drop Ink) · `--color-surface` → `#fbf8f3` (Story Ivory) · `--color-surface-2` → `#b8afda` (Social Lavender) · `--color-surface-3` → `#1a1a1a` (Soft Charcoal) · `--color-surface-4` → `#ffffff` (Gallery White) · `--color-text` → `#ffffff` (Gallery White) · `--color-text-muted` → `#101010` (Drop Ink) · `--color-text-subtle` → `#9b9b9b` (Quiet Gray) · `--color-border` → `#9b9b9b` (Quiet Gray) · `--color-accent` → `#b8afda` (Social Lavender)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#101010` | 19.03:1 | AAA |
| `#ffffff` | `#fbf8f3` | 1.06:1 | fail |
| `#ffffff` | `#b8afda` | 2.06:1 | fail |
| `#ffffff` | `#1a1a1a` | 17.4:1 | AAA |
| `#101010` | `#fbf8f3` | 17.96:1 | AAA |
| `#101010` | `#b8afda` | 9.23:1 | AAA |
| `#101010` | `#1a1a1a` | 1.09:1 | fail |
| `#9b9b9b` | `#101010` | 6.85:1 | AA |
| `#9b9b9b` | `#fbf8f3` | 2.62:1 | fail |
| `#9b9b9b` | `#b8afda` | 1.35:1 | fail |

### Gradients

- `linear-gradient(rgba(78, 78, 78, 0.16), rgba(81, 81, 81, 0))`
- `linear-gradient(to right, rgba(16, 16, 16, 0), rgb(16, 16, 16) 75%)`
- `linear-gradient(270deg, rgba(16, 16, 16, 0), rgb(16, 16, 16) 75%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABC Normal | `--font-body` | webfont | 300, 400, 500 | Primary sans-serif for navigation, body copy, captions, and most oversized display and heading text. | DM Sans |
| Ivar Display | `--font-display` | webfont | 400 | Editorial serif accent for selected oversized headline treatments. | Bodoni Moda |

- **ABC Normal:** Use light-to-medium weights; display treatments are often uppercase with tight negative tracking, while body copy stays compact and lightly weighted.
- **Ivar Display:** Use sparingly at large scale, usually uppercase; contrast its refined serif shapes with the clean sans-serif system.

### Type scale — Golden Ratio (ratio ≈ 1.638, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 177px | 400 | 0.9 | -0.041em | uppercase | ABC Normal | Oversized uppercase editorial display headlines and scrolling text. |
| h1 | 169px | 400 | 0.95 | -0.043em | uppercase | Ivar Display | Primary hero headline with tight uppercase editorial styling. |
| h2 | 160px | 300 | 0.86 | -0.036em | uppercase | ABC Normal | Large uppercase section titles and feature-story headings. |
| h3 | 155.5px | 400 | 0.78 | 0 | uppercase | Ivar Display | Serif-led display statements within editorial feature moments. |
| h4 | 75px | 400 | 0.95 | -0.029em | uppercase | ABC Normal | Secondary feature headings and prominent story labels. |
| body | 15px | 300 | 1.35 | -0.014em | — | ABC Normal | Compact explanatory copy beside imagery and product visuals. |
| caption | 11px | 400 | 1 | 0 | uppercase | ABC Normal | Small uppercase eyebrow labels, metrics, and category tags. |
| nav | 16px | 500 | 1.2 | 0 | — | ABC Normal | Header navigation links and utility items. |

## Spacing & layout

- Base unit **1px**, density **spacious**.
- Scale (most used values): 1, 4, 5, 7, 8, 12, 14, 16, 17, 18, 29, 65, 72, 86, 115 px.
- Section rhythm 115px · element gap 14px · card padding — · max content width 1310px.

The measured page max width is 1310px, with a spacious composition and a 115px section-gap rhythm. The hero is a two-column layout: a broad left headline and paired media panels beneath, with supporting copy and CTA aligned to the right. Dark editorial sections rely on sweeping type and open space; feature stories alternate two-column copy/media layouts and full-width colour bands. The ivory success-story block introduces a horizontal card rail. Alignment is mostly left-led, with a centered closing CTA.

## Shape & elevation

- Radius: button `50%` · media `24px` · badge `4px` · nav `50%` · xs `4px` · sm `6px` · md `8px` · lg `16px` · xl `23px` · 2xl `24px` · pill `9999px`
- No box shadows measured: the page is flat.

The page is mostly flat, using contrasting section backgrounds rather than cards with shadows. Fine gray borders define small category badges and subtle controls; black borders appear on measured button details. Rounded media frames and pill-shaped CTAs provide the main dimensional cues. Gradient fades are used as quiet dark-surface transitions, not as prominent decorative effects.

## Imagery

Photography and interface mockups carry the product story: fashion and customer campaign imagery in the hero, messaging screens and analytics dashboards in feature bands, and customer photos in the case-study rail. Media sits in rounded rectangular frames, often on lavender or other coloured backdrops. Keep surrounding UI neutral so embedded imagery remains the strongest source of visual texture.

## Components

### Editorial hero

Large left-aligned headline with compact right-side supporting copy and a dark pill CTA; paired rounded media panels sit below.

### Pill CTA

Rounded, capsule-like action treatment with dark fill and light text in the screenshot; measured button styles show a thin black border and ABC Normal label.

### Feature split

Two-column story block pairing a concise heading and paragraph with a product or messaging visual; selected stories sit on lavender or sage bands.

### Category badge

Small uppercase outlined label with a 4px radius; gray is common, while a bright yellow outline marks selected customer labels.

### Case-study rail

Warm ivory section with image-led customer cards, short labels, category badges, and small navigation controls.

### Dark closing CTA

Centered uppercase statement, demo-request action, and prominent product imagery on the near-black canvas.

### Measured component styles

- **Primary button** (“SOCIAL CRM”): background #ffffff · text #101010 · radius 1440px · padding 13.5px 18.4px 11.9px 18.4px · 400 10.8px ABC Normal · uppercase
- **Secondary button** (“REQUEST A DEMO REQUEST A DEMO”): transparent background · text #101010 · border 1px solid #000000 · radius 7.92px · padding 14.4px 18px 14.4px 14.4px · 400 14.4px ABC Normal
- **Link** (“DETROIT PISTONS FAN ENGAGEMENT Detroit P”): transparent background · text #101010 · radius 0px · padding 0px · 400 14.4px ABC Normal
- **Badge** (“FAN ENGAGEMENT”): transparent background · text #9b9b9b · border 1px solid #9b9b9b · radius 4.32px · padding 3.8px 5.4px 1.4px 5.4px · 400 10.8px ABC Normal · uppercase
- **Navigation item** (“Use Cases Resources Company”): transparent background · text #101010 · radius 0px · padding 0px · 400 14.4px ABC Normal

## Do

- Use #101010 for the main dark narrative canvas.
- Reserve #b8afda and #c7d8c5 for distinct feature bands.
- Keep large headlines uppercase, editorial, and tightly tracked.
- Pair short copy with real customer or product imagery.
- Use spacious section transitions and generous negative space.
- Keep badges small, outlined, and uppercase.
- Use the warm ivory surface to distinguish customer stories.

## Don't

- Do not make every section dark; preserve the white and light-colour breaks.
- Do not use bright yellow as a large background or broad UI accent.
- Do not add heavy shadows to cards or media frames.
- Do not crowd the oversized headlines with dense supporting copy.
- Do not treat colours inside mockups as global interface colours.
- Do not replace the editorial type contrast with a uniform font treatment.

## Agent prompt

Build a new Drop-style SaaS page with an editorial, spacious composition. Use #101010 as the primary dark canvas and #ffffff for a clean opening or contrast surface. Introduce #b8afda and #c7d8c5 as distinct full-width feature bands, and use #fbf8f3 for a warm customer-story section. Keep #f6f361 to sparse outlined badges; use #9b9b9b for muted labels and borders. Set oversized uppercase headings in a tight sans-serif, with occasional refined serif display accents, and keep body copy compact and readable. Organize content in broad two-column layouts with copy opposite rounded product or customer imagery. Prefer flat surfaces, fine outlines, pill CTAs, and generous whitespace; avoid heavy shadows and avoid promoting mockup colours into the site-wide palette.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | White two-column hero with large left headline, right-side copy and CTA, then paired rounded media panels and a logo row. | primary demo action, brand credibility | oversized headline, pill CTA, paired media cards, customer logo strip |
| 2 | comparison | Dark, wide editorial comparison with oversized scrolling typography and a simple audience-to-customer diagram. | old-versus-new framing, visualized conversion | oversized type, lavender diagram shapes, muted labels |
| 3 | other | Near-black canvas with oversized horizontal editorial phrases spanning the section. | brand narrative | large type, lavender word emphasis, dark gradient fades |
| 4 | feature-split | Dark two-column feature block, copy on the left and a rounded product dashboard image on the right. | feature explanation, product proof | short heading, compact paragraph, lavender media frame |
| 5 | feature-split | Full-width lavender band with left-aligned copy and a messaging interface visual on the right. | benefit explanation, messaging example | lavender section surface, rounded dark media, two-column alignment |
| 6 | feature-split | Full-width pale green band with copy on the left and an analytics-style product visual on the right. | revenue benefit, product proof | sage background, rounded dashboard image, clean split layout |
| 7 | other | A short near-black full-width interstitial between feature bands and customer proof. | visual pacing | dark canvas, open negative space |
| 8 | stats | Dark two-column section combining a large typographic brand list with customer performance figures and imagery. | social proof, performance metrics | oversized customer names, metric labels, dark media collage |
| 9 | testimonials | Warm ivory section with a heading and horizontally arranged image-led customer story cards. | browse success stories, customer proof | light canvas, image cards, outlined category badges, carousel controls |
| 10 | cta | Near-black closing block with centered editorial heading, demo CTA, and a large product-media showcase. | request a demo, product exploration | centered uppercase heading, pill action, large media, carousel arrows |

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/usedrop-io