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

# Clipdrop · Design System

> Quiet editorial framing for vivid AI imagery.

**Theme:** light · **Industry:** ai · **Source:** https://clipdrop.co/ · **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._

Clipdrop pairs a restrained, editorial white canvas with expressive examples of AI image editing. A large serif headline and spacious media blocks lead into a compact tool grid, API promotion, and FAQ.

## North star

Keep the interface quiet and editorial so vivid, varied AI imagery—not interface decoration—commands attention.

## Overview

The page is anchored by a nearly uninterrupted white canvas, allowing the photographic and video examples to supply most of its colour. Charcoal display text creates a strong editorial contrast, while muted gray navigation and captions keep secondary information quiet. Blue is reserved for the primary tool action and red for the API call to action; neither competes with the image content. A refined serif headline establishes the opening mood, contrasted with compact sans-serif navigation, labels, and utility text. The layout centers the hero title and broad video, then transitions to a three-column grid of rounded image cards. Further down, a centered API feature and FAQ keep the same generous, uncluttered rhythm. Hairline gray dividers organize the FAQ and footer. Cards read as image surfaces rather than elevated panels: their rounded corners and soft neutral backgrounds do the work, with no measured shadow system.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Page canvas, open section backgrounds, and white contrast text on colored actions. |
| Soft Graphite | `#767676` | `--color-soft-graphite` | neutral | Muted supporting text and secondary link copy. |
| Tool Blue | `#1c60f6` | `--color-tool-blue` | accent | Primary blue tool action, including the repeated Universal Resizer buttons. |
| Rule Gray | `#dddddd` | `--color-rule-gray` | semantic | Thin separators and understated navigation and footer hairlines. |
| Mist Surface | `#ededed` | `--color-mist-surface` | surface | Pale neutral button fills and tool-card/link surfaces. |
| Slate Text | `#404040` | `--color-slate-text` | neutral | Secondary headings and navigation labels. |
| Stone Gray | `#b8b8b8` | `--color-stone-gray` | surface | Supporting inverse or neutral surfaces; subordinate to the white canvas. |
| Card Gray | `#8f8f8f` | `--color-card-gray` | surface | Measured card backing, chiefly beneath image-led tool previews. |
| Ink Charcoal | `#2d2d2d` | `--color-ink-charcoal` | brand | Primary headline, navigation, and dark text on pale buttons. |
| Footer Black | `#171717` | `--color-footer-black` | neutral | Small amount of dark footer text; not a dominant page field. |
| Action Coral | `#fa4028` | `--color-action-coral` | accent | API documentation call to action, distinct from the blue tool action. |
| Pure Black | `#000000` | `--color-pure-black` | neutral | Sparse measured text and image-card content; not the main text color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#ededed` (Mist Surface) · `--color-surface-2` → `#b8b8b8` (Stone Gray) · `--color-surface-3` → `#8f8f8f` (Card Gray) · `--color-text` → `#2d2d2d` (Ink Charcoal) · `--color-text-muted` → `#767676` (Soft Graphite) · `--color-text-subtle` → `#404040` (Slate Text) · `--color-border` → `#dddddd` (Rule Gray) · `--color-accent` → `#1c60f6` (Tool Blue) · `--color-accent-2` → `#fa4028` (Action Coral) · `--color-on-accent` → `#ffffff` (Gallery White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2d2d2d` | `#ffffff` | 13.77:1 | AAA |
| `#2d2d2d` | `#ededed` | 11.76:1 | AAA |
| `#2d2d2d` | `#b8b8b8` | 6.94:1 | AA |
| `#2d2d2d` | `#8f8f8f` | 4.26:1 | AA-large |
| `#767676` | `#ffffff` | 4.54:1 | AA |
| `#767676` | `#ededed` | 3.88:1 | AA-large |
| `#767676` | `#b8b8b8` | 2.29:1 | fail |
| `#767676` | `#8f8f8f` | 1.4:1 | fail |
| `#404040` | `#ffffff` | 10.37:1 | AAA |
| `#404040` | `#ededed` | 8.86:1 | AAA |

### Gradients

- `linear-gradient(to top, rgb(255, 255, 255), rgba(255, 255, 255, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __primary_e9c525 | `--font-body` | webfont | 500, 600, 700, 400 | Navigation, body copy, tool labels, FAQ text, and buttons. | Inter |
| SecondaryFont | `--font-display` | webfont | 400 | Large editorial display headline and prominent headings. | DM Serif Display |

- **SecondaryFont:** Serif display with regular weight, tight negative tracking, and sentence case.
- **__primary_e9c525:** Compact sans-serif; measured weights span regular to bold, with semibold utility labels and no uppercase treatment.

### Type scale — Custom (ratio ≈ 1.817, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 96px | 400 | 1.1 | -0.02em | — | SecondaryFont | Oversized opening headline, split across centered lines. |
| h1 | 60px | 400 | 1.1 | -0.02em | — | SecondaryFont | Prominent page or section headline styling. |
| h2 | 20px | 700 | 1 | 0 | — | __primary_e9c525 | Bold compact headings, including tool and utility titles. |
| body | 16px | 500 | 1.4 | 0 | — | __primary_e9c525 | Supporting paragraph copy beneath section headings. |
| caption | 14px | 600 | 1 | 0 | — | __primary_e9c525 | Small card descriptions and secondary labels. |
| button | 14px | 600 | 1 | 0 | — | __primary_e9c525 | Compact action labels in navigation and CTA buttons. |
| nav | 14px | 600 | 1 | 0 | — | __primary_e9c525 | Header navigation and tool-menu labels. |
| link | 16px | 500 | 1.4 | 0 | — | __primary_e9c525 | Inline links and supporting action text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 12, 16, 20, 24, 32, 64 px.
- Section rhythm 60px · element gap 6px · card padding — · max content width 1248px.

A centered content frame uses a measured page maximum width of 1248px. The opening title and video sit in a single centered column; the tools section switches to three columns, followed by a centered API feature and a two-column FAQ layout. Sections retain a spacious, comfortable rhythm, with a measured 60px section gap and 4px-based spacing scale. The compact header balances brand identity on the left with navigation and account actions on the right. The footer resolves into four narrow link groups.

## Shape & elevation

- Radius: button `50%` · card `16px` · media `16px` · nav `8px` · link `16px` · xs `8px` · sm `12px` · md `16px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is largely flat: no measured shadow system defines its hierarchy. Pale gray fills distinguish compact controls and card areas from the white canvas, while rounded corners soften media and tools. Thin gray rules structure FAQ rows and footer content. Layered imagery appears inside the API montage, not as a general interface elevation effect.

## Imagery

A large rounded video preview leads, with a central play control and vivid real-world mural footage. Nine image-led tool cards show varied edits and generated results, so color comes primarily from photography and demonstrations rather than interface chrome. The API section uses a layered, colorful product montage. Keep source imagery prominent, naturally varied, and cropped within clean rounded frames.

## Components

### Header navigation

A compact horizontal header pairs the Clipdrop by Jasper mark with tool, API, trial, pricing, and sign-in links; pale gray rounded controls distinguish selected actions.

### Editorial hero

A large centered regular-weight serif headline sits above a wide rounded video preview with a centered white circular play control.

### Tool card grid

Nine image-led tools form a three-column grid; each card combines a preview, compact title, and short explanation on a soft neutral surface.

### Primary tool action

Blue pill-shaped buttons with white semibold text repeat for Universal Resizer actions.

### API feature

A centered API promotion pairs concise copy and a coral documentation CTA with a colorful layered product image.

### FAQ list

Centered heading above concise question rows, subtle gray dividers, small leading chevrons, and a compact show-more control.

### Footer

A quiet multi-column link area groups company, support, legal, and social destinations with small copyright text.

### Measured component styles

- **Primary button** (“Universal Resizer”): background #1c60f6 · text #ffffff · radius 9999px · padding 12px 20px · 600 14px __primary_e9c525
- **Secondary button** (“Explore the API docs”): background #fa4028 · text #ffffff · radius 12px · padding 12px 20px · 600 14px __primary_e9c525
- **Link** (“Universal Resizer Universal Resizer Resi”): background #ededed · text #000000 · radius 16px · padding 0px · 400 16px __primary_e9c525
- **Card**: background #8f8f8f · text #000000 · radius 16px · padding 0px · 400 16px __primary_e9c525
- **Navigation item** (“Tools All tools Cleanup Image upscaler R”): transparent background · text #2d2d2d · radius 0px · padding 0px · 400 16px __primary_e9c525

## Do

- Use white space as the dominant page surface.
- Set the main headline in a high-contrast editorial serif.
- Let saturated example imagery provide most of the color.
- Use blue for primary tool actions and coral for the API CTA.
- Keep navigation and card labels compact and sans-serif.
- Separate FAQ rows with fine, light-gray rules.

## Don't

- Do not add gradients as a general page background.
- Do not make every control brightly colored.
- Do not use heavy shadows to lift cards.
- Do not crowd the headline or media with surrounding UI.
- Do not treat illustration colors as interface palette colors.
- Do not make utility copy compete with the display type.

## Agent prompt

Build a new Clipdrop-style page with a white Gallery White (#ffffff) canvas and a quiet editorial hierarchy. Use a large regular-weight serif headline with tight tracking, then a broad, rounded media feature that carries the page’s vivid photographic color. Keep navigation, body copy, and card labels in a clean compact sans-serif using Ink Charcoal (#2d2d2d) and Soft Graphite (#767676). Lay out image-led tools in a three-column grid inside a centered frame, with pale Mist Surface (#ededed) support surfaces and restrained corners. Reserve Tool Blue (#1c60f6) for primary tool actions and Action Coral (#fa4028) for a distinct API-style CTA. Use Rule Gray (#dddddd) for subtle separators. Favor generous section spacing, centered feature copy, flat surfaces, and no decorative shadow system.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-grid | Three-column image-card grid with a centered section heading and compact titles and descriptions. | Browse tools, Open tool from card | Rounded image cards, Soft gray surfaces, Compact captions |
| 2 | integrations | Centered headline and supporting copy above a coral CTA and a wide product montage. | Explore API docs | Centered content, Coral action button, Layered product imagery |
| 3 | faq | Centered heading above a two-column FAQ region with horizontal question rows. | Expand questions, Show more | Chevron indicators, Fine dividers, Compact show-more button |
| 4 | footer | Four-column footer links with small copyright text below. | Navigate by category, Open social channels | Grouped text links, Light hairline separators, Compact legal copy |

## Source CSS custom properties (selected)

```css
--color-inherit: inherit;
--color-current: currentColor;
--color-transparent: transparent;
--color-black: #000;
--color-white: #fff;
--color-slate-50: #f8fafc;
--color-slate-100: #f1f5f9;
--color-slate-200: #e2e8f0;
--color-slate-300: #cbd5e1;
--color-slate-400: #94a3b8;
--color-slate-500: #64748b;
--color-slate-600: #475569;
--color-slate-700: #334155;
--color-slate-800: #1e293b;
--color-slate-900: #0f172a;
--color-slate-950: #020617;
--color-gray-50: #f7f7f7;
--color-gray-100: #fff;
--color-gray-200: #ededed;
--color-gray-300: #ddd;
--color-gray-400: #bababa;
--color-gray-500: #8f8f8f;
--color-gray-600: #767676;
--color-gray-700: #404040;
--color-gray-800: #2d2d2d;
--color-gray-900: #171717;
--color-gray-950: #030712;
--color-zinc-50: #fafafa;
--color-zinc-100: #f4f4f5;
--color-zinc-200: #e4e4e7;
--color-zinc-300: #d4d4d8;
--color-zinc-400: #a1a1aa;
--color-zinc-500: #71717a;
--color-zinc-600: #52525b;
--color-zinc-700: #3f3f46;
--color-zinc-800: #27272a;
--color-zinc-900: #18181b;
--color-zinc-950: #09090b;
--color-neutral-50: #fafafa;
--color-neutral-100: #f5f5f5;
```

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