# Design System Inspiration of Clay

A vibrant claymation-meets-data interface. Cream canvas with dark-navy CTAs, custom rounded display type, and saturated single-color feature cards — pink, teal, lavender, peach, ochre — punctuating long-scroll explainer pages.

3D claymation hero
Mountains · Mascots · Landscape
01 — Color Palette

## Cream + 6 brand colors

Cream canvas with dark-navy ink, paired with a 6-color saturated feature-card palette. The cards cycle pink → teal → lavender → peach → ochre → cream across long-scroll pages.

### Brand Card Colors

brand-pink
#ff4d8b
Hot pink card. Outbound / sequencer features.
brand-teal
#1a3a3a
Deep teal card. Featured pricing tier.
brand-lavender
#b8a4ed
Soft lavender card. AI agent products.
brand-peach
#ffb084
Warm peach card. General SaaS warmth.
brand-ochre
#e8b94a
Mustard / ochre card. Community / experts.
brand-mint
#a4d4c5
Mint accent on illustrations.

### Surface

canvas (cream)
#fffaf0
Default page floor.
surface-soft
#faf5e8
Footer + CTA-band background.
surface-card
#f5f0e0
Cream feature cards, testimonials.
surface-dark
#0a1a1a
Rare dark surfaces.
hairline
#e5e5e5
1px borders.

### Text

primary / ink
#0a0a0a
Primary CTAs, headlines.
body
#3a3a3a
Default running-text.
muted
#6a6a6a
Sub-headings, breadcrumbs, footer.
muted-soft
#9a9a9a
Captions, fine-print.
02 — Typography

## Plain Black display + Inter body

Custom rounded display face at weight 500 with -1 to -2.5px letter-spacing. Inter handles body, buttons, navigation.

display-xl72px / 500 / 1.0 / -2.5px
Plain Black
Go to market with unique data
display-lg56px / 500 / 1.05 / -2px
Turn data into action
display-md40px / 500 / 1.1 / -1px
A flexible CRM data point
display-sm32px / 500 / 1.15 / -0.5px
Cut costs, access data faster
title-lg24px / 600 / 1.3
Pro · $349 / month
title-md18px / 600 / 1.4
Orchestrate workflows
title-sm16px / 600 / 1.4
CRM enrichment
body-md16px / 400 / 1.55
Clay turns scattered data sources into a single source of truth — enriched, refreshed, and actionable across your stack.
body-sm14px / 400 / 1.55
Footer body, fine-print legal text.
caption13px / 500 / 1.4
Trusted by 100,000+ growth teams
caption-uppercase12px / 600 / 1.5px
FEATURED · NEW
button14px / 600 / 1.0
Try Clay free
nav-link14px / 500 / 1.4
Product · Solutions · Resources · Pricing · Customers
03 — Button Variants
button-primary
primary near-black / white text / md radius
button-primary-active
primary-active background
button-primary-disabled
button-secondary
cream / ink / hairline outline
button-on-color
White button on saturated pink card
button-on-color
White button on deep-teal card
button-text-link
04 — Brand-Color Feature Cards

## Cycle through 6 saturated cards

Pink → teal → lavender → peach → ochre → cream. The order varies per page, but no two consecutive cards repeat the same color.

📤

#### Sequencer

Send personalized cold emails at scale. Multi-channel sequences with native fallback.

🤖

#### Claygent

AI agent that runs research, enrichment, and outreach autonomously.

🔌

#### Integrations

200+ data providers, native CRM sync, Salesforce + HubSpot two-way.

📊

#### CRM Enrichment

Find missing fields, dedupe records, refresh stale accounts automatically.

👥

#### Experts

Book a Clay-certified expert to design your GTM workflows in days, not months.

⚡

#### Workflows

Visual flow builder for outbound, lead scoring, account expansion.

05 — Product Mockup + Testimonial Cards
Live data · 12,408 leads
Acme Corp
Enriched · Score 92
2m ago
Globex Industries
In-progress · Score 78
5m ago
Initech
Enriched · Score 85
12m ago
RP
Rachel Park
Head of GTM · Notion

"Clay replaced 7 GTM tools overnight. The flexibility of the workflow builder + Claygent's research depth has us shipping 3× more outbound campaigns per week."

JM
Jamie Morrison
VP Sales · Linear

"Game-changer for personalized outbound at scale. The Claygent agent does what a junior SDR used to do — but in seconds, and across thousands of accounts."

06 — Pricing Tiers

#### Free

$0

- 100 credits / month
- Up to 1 user
- Community support

#### Starter

$149

- 2,000 credits / month
- Up to 3 users
- Workflow templates

#### Pro

$349

- 10,000 credits / month
- Unlimited users
- Claygent enabled

#### Enterprise

Custom

- Unlimited credits
- Dedicated success
- SOC 2 + custom integrations

07 — Form Elements
Email address
Email (focused)
Company name
Tell us about your GTM motion
08 — Spacing Scale
xxs · 4px
xs · 8px
sm · 12px
md · 16px
lg · 24px
xl · 32px
xxl · 48px
section · 96px
09 — Border Radius Scale
6 · xs
8 · sm
12 · md
16 · lg
24 · xl
pill
10 — Elevation & Depth

No heavy shadows. Depth comes from saturated card-vs-canvas contrast.

##### Flat / Canvas

Body sections, top nav.

##### Cream card

Testimonials, secondary content cards.

##### Pink card

Outbound / sequencer features.

##### Teal card

Featured pricing tier, enterprise.

##### Hairline border

Cream card with 1px hairline.

##### 3D illustration

Claymation art is the depth element.

11 — Responsive Behavior

Name | Width | Key Changes
--- | --- | ---
Mobile | < 768px | Hamburger nav; hero h1 72→36px; hero-art stacks below; feature grids 1-up; pricing 1-up.
Tablet | 768–1024px | Top nav tightens; feature cards 2-up; pricing 2-up.
Desktop | 1024–1440px | Full top-nav; 3-up feature cards; 3-up pricing tiers.
Wide | > 1440px | Same as desktop with more breathing room; max content 1280px.

375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

#### Touch Targets

- Primary CTA at min 44 × 44px — meets WCAG AAA.
- Text input height 44px.

#### Collapsing Strategy

- Top nav collapses to hamburger at < 768px.
- Hero 7-5 grid → single-column on mobile.
- Saturated feature cards retain colored fill at every breakpoint.
- Pricing tier cards collapse 4 → 2 → 1; featured stays distinct.