# Clay — Design System
> Access 150+ premium data sources and AI research agents in one platform, then automate growth workflows to turn insights into revenue.
- **Canonical:** https://uiuxskills.com/library/clay
- **Source:** https://clay.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:17:47.476Z

---

---
version: alpha
name: Clay
description: AI-powered go-to-market platform for data enrichment and workflow automation.
tone: >-
  Professional, analytical, and growth-oriented. The tone is direct, authoritative, and focused on
  tangible business outcomes.
color-scheme: light
colors:
  primary: "#000000"
  surface: "#F9F9F9"
  surface-container: "#DFDFDF"
  on-surface: "#1B1B1B"
  on-primary: "#FFFFFF"
  outline: "#D8DCE2"
  surface-bright: "#FFFFFF"
  error: "#E11D48"
  success: "#10B981"
  focus-ring: "#696969"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
  headline-sm:
    fontFamily: Inter, sans-serif
    fontSize: 1.25rem
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  button-secondary:
    backgroundColor: "{colors.surface-bright}"
    textColor: "{colors.on-surface}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.lg}"
  input-field:
    backgroundColor: "{colors.surface-bright}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "{colors.surface-container}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-sm}"
  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-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.06)
  md: 0 2px 4px rgba(0,0,0,0.08)
  lg: 0 4px 8px rgba(0,0,0,0.10)
---

## Overview

Clay is a high-performance GTM platform that blends sophisticated data orchestration with AI-driven research agents. Its visual identity is clean, professional, and highly functional, prioritizing clarity and data density to support complex B2B workflows.

## Colors

The color palette is strictly monochromatic with functional semantic accents, designed to maintain focus on data and workflow logic.

*   Primary (#000000): The core brand color, used for primary actions and high-impact UI elements.
*   Surface (#F9F9F9): The primary background color for the application and marketing site.
*   Surface-container (#DFDFDF): Used for secondary containers and subtle UI separators.
*   On-surface (#1B1B1B): Primary text color for high readability against light surfaces.
*   On-primary (#FFFFFF): Text color for elements on top of primary-colored backgrounds.
*   Outline (#D8DCE2): Border color for cards and input fields.
*   Surface-bright (inferred) (#FFFFFF): Used for elevated cards or active states.
*   Error (inferred) (#E11D48): Standard semantic color for errors and destructive actions.
*   Success (inferred) (#10B981): Standard semantic color for success states.
*   Focus-ring (#696969): Focus ring color for interactive elements.

## Typography

The brand utilizes the Inter typeface exclusively to ensure legibility and a neutral, professional aesthetic across all data-heavy interfaces.

*   Display-lg: Used for hero headlines.
*   Display-md: Used for section headers.
*   Headline-lg: Used for sub-headers.
*   Headline-md: Used for card titles.
*   Headline-sm: Used for smaller section titles.
*   Body-md: Standard body text.
*   Label-sm: Used for metadata and small labels.

## Layout

The site follows a clean, grid-based layout with generous whitespace and a mobile-first approach. Content is centered with a max-width constraint to ensure readability on large screens.
*   Section order: nav, hero, features, use-cases, customers, footer.
*   Hero pattern: Centered headline and subhead with a clear primary CTA and supporting visual asset.
*   Responsive behaviour: Navigation collapses into a drawer on smaller viewports.
*   Spacing: Uses a consistent scale starting from an 8px base unit, with {spacing.md} (16px) as the standard gutter.

## Elevation & Depth

Elevation is used sparingly, primarily to differentiate interactive cards from the background using subtle single-layer shadows. The values are inferred to support a minimalist, flat aesthetic.
*   elevation.sm: Subtle lift for hover states or small UI elements.
*   elevation.md: Standard card lift.
*   elevation.lg: Modal or drawer overlay depth.

## Shapes

The brand employs a intentional mix of corner radii to distinguish between functional inputs and content containers. Smaller elements like buttons and inputs use {rounded.sm} (4px) or {rounded.md} (8px) for a crisp, technical feel.

Larger containers and cards utilize {rounded.lg} (12px) to {rounded.xl} (24px), which softens the UI and creates a clear visual hierarchy between the data-dense content and the surrounding layout.

## 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
Buttons use {colors.primary} for primary actions and {colors.surface-bright} with {colors.outline} for secondary actions. They are designed for high-contrast, imperative interaction.

### Card
Cards are the primary container for features and use cases. They feature {rounded.md} or {rounded.lg} corners and a subtle {colors.outline} border to maintain a clean, organized interface.

### Input Field
Input fields use {rounded.sm} and {colors.outline} borders. Upon interaction, they must trigger the {colors.focus-ring} to ensure accessibility and clear state indication.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use {colors.primary} for all primary CTAs. | Do not use {colors.error} for non-destructive actions. |
| Apply {typography.body-md} for all standard paragraph text. | Avoid using {typography.display-lg} for body text. |
| Use {rounded.md} for all card components. | Do not mix {rounded.full} with standard card components. |
| Maintain consistent {spacing.md} between grid items. | Avoid excessive use of shadows; keep elevation minimal. |
| Use {colors.outline} for all subtle dividers. | Do not use low-contrast text on {colors.surface} backgrounds. |
| Ensure all interactive elements have a {colors.focus-ring} state. | Never use {spacing.xs} for primary layout gutters. |
| Use {typography.label-sm} for badges and metadata. | Do not use {colors.surface-container} for primary text. |
| Apply {elevation.md} for card depth. | Do not use {rounded.sm} on large marketing cards. |

## Content Style

CTA labels are imperative and action-oriented, typically using short, punchy verbs like "Start" or "Build" to drive growth-focused user behavior.

Headings are benefit-led and direct, avoiding marketing fluff in favor of clear, authoritative statements about product utility.

Copy density is optimized for scannability, utilizing short paragraphs and frequent lists to break down complex GTM workflows into digestible points.

## Imagery & Icons

The brand uses a mixed treatment of 3D icons and high-quality product screenshots to illustrate complex concepts. Icons are rounded and stylized, while product imagery is kept clean and focused on UI clarity. Avoid decorative imagery that does not directly contribute to the understanding of the platform's data orchestration capabilities.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Clay, a minimal enterprise GTM platform. Match its direct, analytical, and data-forward tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{spacing.md}`, `{rounded.md}` — never hardcode hex values, pixel sizes, or raw CSS.
2. Respect the components block exactly. Apply `{rounded.sm}` to inputs and buttons, `{rounded.md}` to standard cards, and `{rounded.lg}` to elevated cards. Do not invent variants outside these definitions.
3. Follow the Layout section for page structure: section order (nav → hero → features → use-cases → customers → footer), centered max-width container, `{spacing.md}` as the standard gutter.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict explicitly before proceeding.
5. Elevation is used sparingly: `{elevation.md}` for standard cards, `{elevation.sm}` for hover states, `{elevation.lg}` for modals or drawers only.

## Output contract

**Must:**
- Use tokens by name for all colors, typography, spacing, radius, and elevation.
- Cover hover, focus, and disabled states for every interactive component where the spec defines them (e.g., `button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` to all interactive elements' focus states.
- Use `{typography.label-sm}` for badges and metadata; `{typography.body-md}` for all standard paragraph text.
- Keep CTA copy imperative and short per the Content Style section.

**Must NOT:**
- Invent colors, fonts, radii, or elevation values outside the spec.
- Use generic system defaults when a brand token exists.
- Add emoji, filler text, or decorative marketing copy.
- Reference any framework, library, or toolchain by name.
- Rewrite page copy, heading labels, button text, or navigation items.
- Alter information architecture as a side effect of applying tokens.

## When in doubt
- If the spec doesn't define a value, ask the user before inventing one.
- Prefer composing existing components over introducing new tokens.
- For ambiguous backgrounds use `{colors.surface}`; for text on those backgrounds use `{colors.on-surface}`; for primary actions use `{colors.primary}`.
- Tokens marked "(inferred)" in the spec are visual approximations. If an authoritative source (theme file, Storybook, component metadata) exists, it takes precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, collapsing navigation into a drawer as noted in Layout.