Clay Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

24tokens

10type steps

5radius steps

4pxspacing base

Clay, in one page

Clay.com is the most playful B2B SaaS interface in the GTM-data category. The base atmosphere is cream-tinted white canvas ({colors.canvas} — #fffaf0) holding dark-navy ink type and 3D-rendered claymation illustrations (mountains, mascot characters, peach/ochre/lavender landscapes) as the dominant brand voltage. Where most data-platform brands play it cool with grids and gradients, Clay leans hard into hand-crafted-looking 3D illustrations and saturated single-color feature cards.

Type voice runs Plain Black (or substituted with Inter weight 500-600) — a custom rounded display face used at very large sizes (72px hero) with negative letter-spacing. Body type uses Inter at standard weights. The display weight stays at 500, never bolder — the rounded character of the typeface gives it warmth without needing weight.

Component voltage comes from saturated single-color feature cards in a 6-color palette: hot pink, deep teal, lavender, peach, ochre, and cream-card. Each card shows product UI fragments at small scale — Claygent agent runs, sequencer flows, CRM enrichment outputs. The colored card IS the primary visual element on every long-scroll page.

Key Characteristics:

Cream-tinted white canvas ({colors.canvas} — #fffaf0). The warmth differentiates Clay from cool-gray competitor sites.
Dark navy/black primary CTAs ({colors.primary} — #0a0a0a). Buttons rounded {rounded.md} (12px) — friendly modern but not pill.
6-color saturated feature card palette: {colors.brand-pink}, {colors.brand-teal}, {colors.brand-lavender}, {colors.brand-peach}, {colors.brand-ochre}, {colors.surface-card} (cream).
3D claymation illustrations (mountains, characters, abstract shapes) as full-bleed hero artifacts — the brand's most-recognized visual element.
Custom rounded Plain Black display typeface at 500 weight with -1 to -2.5px letter-spacing on display sizes.
Border radius is generous: {rounded.md} (12px) for buttons + inputs, {rounded.lg} (16px) for content cards, {rounded.xl} (24px) for feature cards. The bigger radius matches the rounded display type's character.
Product UI fragments embedded inside colored cards at small scale — agent run logs, sequencer flows, enrichment results.
Section rhythm {spacing.section} (96px) between major bands.
Footer is cream-tinted ({colors.surface-soft}) — Clay does NOT use a dark footer. Even the closing band stays warm-light.

Do's and don'ts

Do

Anchor every page on the cream canvas ({colors.canvas} — #fffaf0). The warm tint differentiates Clay from cool-gray data sites.
Use 3D claymation illustrations as hero artifacts. Hand-crafted 3D characters and mountains ARE the brand.
Cycle saturated feature cards across the page — pink → teal → lavender → peach → ochre → cream. Repeating the same color twice in a row reads as off-rhythm.
Use Plain Black at weight 500 with negative letter-spacing on every display headline.
Show product UI fragments inside saturated feature cards. The brand voltage is product-driven, not abstract.
Use cream footer (NOT dark). Clay deliberately closes pages with warm cream rather than the standard dark-footer SaaS template.
Anchor every band with {spacing.section} (96px) vertical rhythm.

Don't

Don't use cool grays for canvas. The cream tint is non-negotiable.
Don't use a 7th brand-color card. The 6-color palette is saturated enough.
Don't bold display weight beyond 500. Plain Black at 700 reads as bombastic.
Don't repeat the same brand-color card twice in a row.
Don't replace claymation illustrations with flat vector art. The hand-crafted 3D character IS the brand voice.
Don't use a dark footer. The cream footer is part of the system's warm-throughout pacing.
Don't add hover state styling beyond what the system already encodes.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Clay design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #0a0a0a
- primary-active: #1f1f1f
- primary-disabled: #e5e5e5
- ink: #0a0a0a
- body: #3a3a3a
- body-strong: #1a1a1a
- muted: #6a6a6a
- muted-soft: #9a9a9a
- hairline: #e5e5e5
- hairline-soft: #f0f0f0

Type:
- families: Plain Black, Inter, Söhne Breit, Recoleta
- scale: 12, 13, 14, 16, 18, 24, 32, 40, 56
- weights: 400, 500, 600

Shape:
- radius: 6, 8, 12, 16, 24

Spacing: 4, 8, 12, 16, 24, 32, 48, 80, 96

Rules:
- Anchor every page on the cream canvas (`{colors.canvas}` — #fffaf0). The warm tint differentiates Clay from cool-gray data sites.
- Use 3D claymation illustrations as hero artifacts. Hand-crafted 3D characters and mountains ARE the brand.
- Cycle saturated feature cards across the page — pink → teal → lavender → peach → ochre → cream. Repeating the same color twice in a row reads as off-rhythm.
- Use Plain Black at weight 500 with negative letter-spacing on every display headline.
- Show product UI fragments inside saturated feature cards. The brand voltage is product-driven, not abstract.
- Use cream footer (NOT dark). Clay deliberately closes pages with warm cream rather than the standard dark-footer SaaS template.

Avoid:
- Don't use cool grays for canvas. The cream tint is non-negotiable.
- Don't use a 7th brand-color card. The 6-color palette is saturated enough.
- Don't bold display weight beyond 500. Plain Black at 700 reads as bombastic.
- Don't repeat the same brand-color card twice in a row.
- Don't replace claymation illustrations with flat vector art. The hand-crafted 3D character IS the brand voice.
- Don't use a dark footer. The cream footer is part of the system's warm-throughout pacing.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Primary ({colors.primary} — #0a0a0a): All primary CTAs, h1/h2 ink type. Near-black with slight warmth.
Brand Pink ({colors.brand-pink} — #ff4d8b): Hot-pink feature card surface. Sequencer / outbound feature pages.
Brand Teal ({colors.brand-teal} — #1a3a3a): Deep teal-green feature card. Often the featured pricing tier.
Brand Lavender ({colors.brand-lavender} — #b8a4ed): Soft lavender feature card.
Brand Peach ({colors.brand-peach} — #ffb084): Warm peach feature card.
Brand Ochre ({colors.brand-ochre} — #e8b94a): Mustard / ochre feature card and illustration accents.
Brand Mint ({colors.brand-mint} — #a4d4c5): Mint accent on illustrations and small badges.
Brand Coral ({colors.brand-coral} — #ff6b5a): Coral accent for highlights.

Surface

Canvas ({colors.canvas} — #fffaf0): The default page floor. Cream-tinted white.
Surface Soft ({colors.surface-soft} — #faf5e8): Footer and CTA-band background.
Surface Card ({colors.surface-card} — #f5f0e0): Cream feature cards, testimonial cards.
Surface Strong ({colors.surface-strong} — #ebe6d6): Stronger cream for emphasized bands.
Surface Dark ({colors.surface-dark} — #0a1a1a): Dark teal-tinted near-black for occasional dark cards (rare).
Surface Dark Elevated ({colors.surface-dark-elevated} — #1a2a2a): Elevated dark cards.
Hairline ({colors.hairline} — #e5e5e5): 1px borders on cards and inputs.

Text

Ink ({colors.ink} — #0a0a0a): Headlines and primary text.
Body Strong ({colors.body-strong} — #1a1a1a): Emphasized body, lead paragraphs.
Body ({colors.body} — #3a3a3a): Default running-text.
Muted ({colors.muted} — #6a6a6a): Sub-headings, breadcrumbs, footer body.
Muted Soft ({colors.muted-soft} — #9a9a9a): Captions, fine-print.
On Primary / On Dark ({colors.on-primary} — #ffffff): Text on primary buttons + dark feature cards (teal).

Semantic

Success ({colors.success} — #22c55e): Success states.
Warning ({colors.warning} — #f59e0b): Warning callouts.
Error ({colors.error} — #ef4444): Validation errors.

Type scaleRead the full spec

Font Family

The system runs Plain Black (a custom rounded display face) for headlines and Inter for body, navigation, and UI. Plain Black at weight 500 with negative letter-spacing handles every display headline; Inter handles the rest. The fallback stack walks Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif for both.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display-xl}`	72px	500	1.0	-2.5px	Homepage h1 ("Go to market with unique data") — Plain Black
`{typography.display-lg}`	56px	500	1.05	-2px	Section heads — Plain Black
`{typography.display-md}`	40px	500	1.1	-1px	Sub-section heads, product names
`{typography.display-sm}`	32px	500	1.15	-0.5px	CTA-band heads, feature card titles
`{typography.title-lg}`	24px	600	1.3	-0.3px	Pricing plan names, larger feature titles
`{typography.title-md}`	18px	600	1.4	0	Card titles, intro paragraphs
`{typography.title-sm}`	16px	600	1.4	0	Small card titles, list labels
`{typography.body-md}`	16px	400	1.55	0	Default running-text
`{typography.body-sm}`	14px	400	1.55	0	Footer body, fine-print
`{typography.caption}`	13px	500	1.4	0	Badge labels, captions
`{typography.caption-uppercase}`	12px	600	1.4	1.5px	Section labels, "FEATURED" badges
`{typography.button}`	14px	600	1.0	0	Standard button labels
`{typography.nav-link}`	14px	500	1.4	0	Top-nav menu items

Principles

Plain Black at weight 500 + negative letter-spacing IS the brand voice. Going to weight 700 reads as bombastic; the rounded character of the typeface adds warmth that bolder weight would flatten.

The body-vs-display split is functional: Plain Black for Plain Black moments (headlines), Inter for everything else (running text, UI, buttons). Mixing them is a system violation.

Note on Font Substitutes

If Plain Black is unavailable, Inter at weight 500 with -0.05em letter-spacing is a usable approximation. Söhne Breit at weight Buch is an alternative if licensed. Recoleta at weight 500 carries similar rounded-display warmth.

Components and layoutRead the full spec

Top Navigation

top-nav — Cream nav bar pinned to top. 64px tall, {colors.canvas} background. Carries the Clay logo + wordmark at left, primary horizontal menu (Product, Solutions, Resources, Pricing, Customers) center, right-side cluster with "Sign in" + "Try free" {component.button-primary}. Menu items in {typography.nav-link} (Inter 14px / 500).

Buttons

button-primary — Background {colors.primary} (near-black), text {colors.on-primary} (white), type {typography.button} (Inter 14px / 600), padding 12px × 20px, height 44px, rounded {rounded.md} (12px).

button-secondary — Cream button with hairline outline. Background {colors.canvas}, text {colors.ink}, 1px hairline border.

button-on-color — White button used over saturated brand-color feature cards. Same shape as primary but inverted (white background, ink text).

button-text-link — Inline text button, no background. Used for "Sign in" and inline link CTAs.

text-link — Inline body links in {colors.ink} with underline.

Cards & Containers

hero-band — Cream-canvas hero with 7-5 grid: h1 + sub-headline + button row on the left, 3D claymation illustration on the right. Vertical padding {spacing.section} (96px).

hero-illustration-card — Right-side artifact holding 3D claymation illustration (mountains, mascot character, abstract shapes). Background {colors.surface-soft}, rounded {rounded.xl} (24px). The illustration IS the artifact.

feature-card-pink / feature-card-teal / feature-card-lavender / feature-card-peach / feature-card-ochre — Saturated single-color feature cards. Background varies per variant; rounded {rounded.xl} (24px); padding {spacing.xl} (32px). Each card carries an h3 in {typography.title-md}, a body description, and a product UI fragment or mascot illustration. Text color flips to {colors.on-dark} (white) on pink and teal cards, {colors.ink} (dark) on lavender/peach/ochre cards (the lighter saturations have enough contrast for dark text).

feature-card-cream — Lower-key feature card variant on {colors.surface-card}. Used for less-emphasized features that don't warrant a saturated color.

product-mockup-card — Card showing actual Clay product UI (Claygent agent runs, sequencer flows, CRM enrichment tables). Background {colors.canvas} with hairline border, rounded {rounded.lg}, padding {spacing.lg} (24px).

testimonial-card — Customer quote cards. Background {colors.surface-card} (cream), rounded {rounded.lg}, padding {spacing.lg} (24px). Top row has avatar + name + role; below sits the testimonial in {typography.body-md}.

pricing-tier-card — Standard tier card. Background {colors.canvas} with hairline, rounded {rounded.lg}, padding {spacing.xl} (32px).

pricing-tier-card-featured — The featured tier flips to {colors.brand-teal} (deep teal-green). The teal surface IS the featured signal.

expert-card — Used on /experts page. Background {colors.canvas} with hairline, rounded {rounded.lg}, padding {spacing.lg}. Carries an avatar at top, expert name, specialization, and a "Book session" link.

Inputs & Forms

text-input — Background {colors.canvas}, text {colors.ink}, type {typography.body-md}, rounded {rounded.md} (12px), padding 12px × 16px, height 44px. 1px hairline border.

text-input-focused — Border thickens to ink for emphasis.

Tabs / Badges

category-tab + category-tab-active — Pill-shaped tabs in sub-nav. Inactive: transparent + muted text. Active: cream-card background + ink text. Padding 8px × 16px.

badge-pill — Small cream-fill pill labels in {typography.caption} (13px / 500), rounded {rounded.pill}.

CTA / Footer

cta-band-illustrated — Pre-footer "Turn your growth ideas into reality today" band. Background {colors.surface-soft}, rounded {rounded.xl}, padding 80px. Carries an h2 in {typography.display-md}, a sub-line, and a {component.button-primary} — usually paired with a 3D illustration of a mascot or scene.

footer — Cream-tinted footer (NOT dark navy unlike most SaaS sites). Background {colors.surface-soft}, text {colors.body}. 4-column link list. Vertical padding 80px. Often features a horizon-style 3D mountain illustration at the very bottom — Clay's signature footer mountain.

Spacing System

Base unit: 4px.
Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px.
Section padding: {spacing.section} (96px) between major editorial bands.
Card internal padding: {spacing.xl} (32px) for feature cards and pricing tiers; {spacing.lg} (24px) for testimonial and product mockup cards.

Responsive behaviourRead the full spec

Breakpoints

Name	Width	Key Changes
Mobile	< 768px	Hamburger nav; hero h1 72→36px; hero-illustration-card 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

Touch Targets

{component.button-primary} at minimum 44 × 44px (matches WCAG AAA).
{component.text-input} height is 44px.

Collapsing Strategy

Top nav collapses to hamburger at < 768px.
Hero 7-5 grid → single-column on mobile.
Feature card grids reduce columns rather than scaling.
Saturated feature cards retain their colored fill at every breakpoint.
Pricing tier cards collapse 4 → 2 → 1.

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-clay {--page-bg: #fffaf0;
  --page-bg-gradient: none;
  --text-color: #0a0a0a;
  --heading-color: #0a0a0a;
  --link-color: #0a0a0a;
  --link-hover-color: #000000;
  --border-color: #d3cfc7;
  --card-bg: #fffaf0;
  --card-shadow: 0 1px 2px rgba(10,10,10,0.06);
  --card-hover-shadow: 0 6px 18px rgba(10,10,10,0.12);
  --header-bg: #0a0a0a;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #fffaf0;
  --footer-text-color: #605e5b;
  --button-bg: #0a0a0a;
  --button-text-color: #ffffff;
  --button-hover-bg: #000000;
  --button-border: none;
  --button-border-radius: 12px;
  --button-secondary-bg: #f0ece2;
  --button-secondary-text-color: #0a0a0a;
  --button-secondary-hover-bg: #e2ddd4;
  --button-secondary-border: 1px solid #d3cfc7;
  --prompt-bg: #f3eee5;
  --prompt-text-color: #0a0a0a;
  --base-font: var(--font-inter);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 12px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

claude 84.0%
intercom 81.4%
cal 81.3%
cursor 80.1%
mistral.ai 79.1%

Where this came from

Source document: volt/design-md/clay/DESIGN.md · 24.9 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.