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
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
NameWidthKey Changes
Mobile< 768pxHamburger nav; hero h1 72→36px; hero-art stacks below; feature grids 1-up; pricing 1-up.
Tablet768–1024pxTop nav tightens; feature cards 2-up; pricing 2-up.
Desktop1024–1440pxFull top-nav; 3-up feature cards; 3-up pricing tiers.
Wide> 1440pxSame as desktop with more breathing room; max content 1280px.
375
mobile
600
small phone
768
tablet
1024
laptop
1280
desktop
1440
wide

Touch Targets

Collapsing Strategy