# Clipdrop — Design System
> AI-powered image editing and generation platform.
- **Canonical:** https://uiuxskills.com/library/clipdrop
- **Source:** https://clipdrop.co
- **Category:** AI & LLM Platforms
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:14:50.394Z

---

---
version: alpha
name: Clipdrop
description: AI-powered image editing and generation platform.
tone: Direct, efficient, and professional with a focus on technical capability and ease of use.
color-scheme: light
colors:
  primary: "#3B82F6"
  surface: "#FFFFFF"
  surface-container: "#E5E7EB"
  on-surface: "#374151"
  on-surface-variant: "#4B5563"
  on-primary: "#F9FAFB"
  outline: "#D1D5DB"
  error: "#EF4444"
  success: "#10B981"
  surface-bright: "#F3F4F6"
typography:
  display-lg:
    fontFamily: sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: sans-serif
    fontSize: 1.5rem
  body-md:
    fontFamily: sans-serif
    fontSize: 1rem
  body-sm:
    fontFamily: sans-serif
    fontSize: 0.875rem
  label-sm:
    fontFamily: sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 64px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.primary}"
  button-secondary:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.primary}"
  badge:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.full}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
  badge-success:
    backgroundColor: "{colors.success}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-bright:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-on-surface-variant:
    backgroundColor: "{colors.on-surface-variant}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Clipdrop is built for utility and speed. The visual language is intentionally minimal and accessible, prioritizing the clarity of AI-driven tools over decorative flair. The tone is direct and professional, designed to guide users from the landing page to task completion with minimal friction.

## Colors

The color palette is functional and high-contrast, designed to guide the user's eye toward primary actions while maintaining a clean, professional interface.

*   **Primary (#3B82F6):** Used for primary CTAs and active interactive elements.
*   **Surface (inferred) (#FFFFFF):** Main background color for the application interface.
*   **Surface-container (#E5E7EB):** Background for secondary containers and cards.
*   **On-surface (#374151):** Primary text color for readability on light surfaces.
*   **On-surface-variant (#4B5563):** Secondary text color for descriptions and metadata.
*   **On-primary (#F9FAFB):** Text color for primary buttons.
*   **Outline (inferred) (#D1D5DB):** Border color for cards and input fields.
*   **Error (inferred) (#EF4444):** Semantic color for error states.
*   **Success (inferred) (#10B981):** Semantic color for success states.
*   **Surface-bright (inferred) (#F3F4F6):** Lighter surface variant for hover states.

## Typography

The typography system uses a clean, sans-serif stack to ensure maximum legibility across all screen sizes.

*   **Display-lg (inferred):** Used for main hero headlines.
*   **Display-md:** Used for secondary hero headlines.
*   **Headline-lg:** Used for section headers.
*   **Headline-md:** Used for sub-headers.
*   **Body-md:** Standard body text for paragraphs and primary content.
*   **Body-sm:** Secondary text for descriptions and metadata.
*   **Label-sm (inferred):** Small labels and UI hints.

## Layout

The layout relies on a responsive grid system with a max-width container. Spacing follows a 4px/8px base unit, ensuring consistent vertical and horizontal rhythm. The page structure follows a logical flow: Hero, Tools, API Integration, FAQ, and Footer. The hero section is centered for impact, while tool grids adjust column counts based on the viewport.

## Elevation & Depth

Depth is achieved through subtle, single-layer shadows. These values are inferred from standard modern SaaS design patterns.

*   **elevation.sm:** Subtle lift for small UI elements.
*   **elevation.md:** Standard card lift and interactive containers.
*   **elevation.lg:** Reserved for modals, drawers, or high-priority overlays.

## Shapes

The brand employs a consistent rounded corner philosophy to maintain an approachable feel. Cards utilize `{rounded.lg}` for a soft, modern container shape, while interactive elements like buttons and badges use `{rounded.full}` to emphasize their clickability and distinct status.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
The primary button uses `{colors.primary}` with `{typography.body-md}`. Use these for the main call-to-action on a page. Secondary buttons use `{colors.surface-container}` and are intended for lower-priority actions.

### Card
Cards act as the primary container for tools and features. They should always use `{rounded.lg}` and `{colors.surface}`. Use `{card-bright}` when you need to differentiate a section from the main white background.

### Input Field
Input fields use `{colors.surface}` with `{colors.outline}` borders and `{rounded.md}`. On focus, the border must switch to `{colors.primary}` to provide clear feedback to the user.

### Badge
Badges are used for status or labels. They must use `{rounded.full}`. Use `{badge-success}` for positive states and `{badge-error}` for destructive or error states.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary CTAs. | Use `{colors.error}` for non-destructive actions. |
| Apply `{rounded.lg}` to all card components. | Mix sharp corners with `{rounded.lg}` components. |
| Use `{typography.body-md}` for primary paragraph content. | Use `{typography.display-lg}` for body text. |
| Maintain `{spacing.md}` between grid items. | Use `{spacing.xs}` for main layout margins. |
| Use `{colors.on-surface-variant}` for secondary text. | Use `{colors.surface-container}` as a primary background. |
| Apply `{rounded.full}` to all badge components. | Use `{colors.primary}` for text on white without contrast. |
| Use `{input-field-focus}` for active input states. | Use standard borders for focus states. |
| Use `{card-bright}` for secondary content blocks. | Use `{card}` for high-density background areas. |

## Content Style

CTA labels should be imperative verbs in sentence case (e.g., "Explore the API docs"). Keep button text concise and action-oriented.

Headings should be benefit-oriented, direct, and concise. Avoid marketing fluff; focus on what the AI tool actually achieves for the user.

Copy density should be kept low. Use short, scannable paragraphs and frequent lists to break up information, especially in FAQ or feature-description sections.

## Imagery & Icons

The brand uses a mixed treatment, combining high-quality product screenshots with clean, minimal icons. Imagery should represent the AI capabilities directly—show the "before and after" or the result of the tool. Icons should be simple and avoid excessive detail to maintain the minimal design aesthetic.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Clipdrop, a minimal, accessibility-focused AI image platform. Match its direct, efficient, and professional tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}` — never hardcode a hex, pixel value, or font size.
2. Render only the component variants defined under `components:`. Do not invent new button styles, card types, or badge variants beyond those listed.
3. Follow the Layout section's grid and spacing rhythm (4px/8px base unit). For unspecified breakpoints, use mobile-first with one breakpoint at 768px.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before proceeding.
5. Tokens marked "(inferred)" are visual approximations. If an authoritative source (theme file, Storybook) is available, those values take precedence over the spec.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Implement hover, focus, and disabled states whenever the spec defines them (`button-primary-hover`, `input-field-focus`).
- Apply `{rounded.full}` to all badges, `{rounded.lg}` to all cards, `{rounded.md}` to all input fields.
- Use `{elevation.md}` for standard cards; reserve `{elevation.lg}` for modals and overlays.
- Write CTA labels as imperative verbs in sentence case, kept concise, per the Content Style section.

**Must NOT:**
- Invent colors, radii, font sizes, or spacing values absent from the spec.
- Use generic system defaults (e.g., `gray-500`, `rounded-md` as a literal string) when a named token covers the role.
- Use `{colors.primary}` for body text on `{colors.surface}` without confirming contrast.
- Add emoji, decorative flair, marketing copy, or filler text.
- Rewrite existing page copy, rename navigation items, or alter page section order.
- Use `{colors.error}` for any non-destructive or non-error action.

## When in doubt
- If the spec does not define a value, ask before inventing one.
- For background roles, prefer `{colors.surface-bright}` or `{colors.surface-container}` over creating new surfaces.
- For ambiguous text roles, default to `{colors.on-surface}` for primary and `{colors.on-surface-variant}` for secondary.
- Compose existing components rather than introducing new token names.
- Prefer `{card-bright}` over `{card}` when rendering sections against an already-white background.