Skip to content
DesignMunkDesignMunk Submit a site

Clay

clay.com
The go-to-market conference by Clay
AI Software Webflow Homepage Roobertvf
Share Visit site
clay.com DESKTOP · 1440
Clay

AI Breakdown

Design export

---
version: alpha
name: Clay
description: The go-to-market conference by Clay
colors:
  primary: "#000000"
  secondary: "#2bafd5"
  tertiary: "#395afa"
  neutral: "#ffffff"
  brand-reductant: "#e85c5d"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Roobertvf
    fontSize: 64px
    fontWeight: 575
    lineHeight: 1
    letterSpacing: -0.04em
  headline-md:
    fontFamily: Roobertvf
    fontSize: 56px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.03em
  headline-sm:
    fontFamily: Roobertvf
    fontSize: 36px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: -0.04em
  headline-xs:
    fontFamily: Roobertvf
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.22
  body-md:
    fontFamily: Roobertvf
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.5
rounded:
  sm: 12px
  md: 18px
spacing:
  xs: 4px
  sm: 12px
  md: 20px
  lg: 24px
  xl: 56px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.neutral}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 42px
  button-secondary:
    backgroundColor: "{colors.neutral}"
    textColor: "#001433"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    height: 42px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "#fefdfb"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 16px 20px
---

# Clay

## Overview

Clay is a go-to-market data and automation platform aimed at sales, marketing, and RevOps teams — an audience fluent in dashboards, integrations, and quota talk. The UI personality splits deliberately: a soft, tactile 3D-illustration hero (clay/pastel props, painted sky) signals approachability and cleverness around the brand name, while everything below the fold reverts to a dense, credibility-first B2B register — tabbed feature switchers, stat callouts, and a wall of named-customer quotes. An agent building in this system should default to the sober register (black text, white cards, restrained color) and reserve the illustrated/playful mode strictly for hero moments.

## Colors

- **Primary (#000000):** Core text color and the button-link ink; carries nearly all body copy and headline weight.
- **Secondary (#2bafd5):** A cyan accent used sparingly for interactive or highlight moments distinct from the main CTA blue.
- **Tertiary (#395afa):** The primary action blue — background for button-primary and the system's main call-to-action color.
- **Neutral (#ffffff):** Base surface color and text-on-dark color (button text on primary/secondary buttons, card backgrounds default to white).
- **Brand-reductant (#e85c5d):** A warm coral reserved for occasional brand or illustrative accents, not for UI chrome.
- **Surface (#ffffff):** Page and section background, aliased to neutral.
- **On-surface (#000000):** Default text color on surface, aliased to primary.

## Typography

Every text level in this system uses a single family, Roobertvf, a variable-font build of Roobert. It is NOT available on Google Fonts or any open catalog — it is self-hosted via Clay's own CDN, so an agent cannot legally load it and must substitute. Closest obtainable matches are Inter, General Sans, or Aeonik-style geometric grotesks such as Satoshi — all share Roobert's flat-sided lowercase and tight numeral spacing. Headline-lg (64px/575/-0.04em) is the hero headline; headline-md (56px/500/-0.03em) covers major section titles like the customer-quote heading; headline-sm (36px/500/-0.04em) handles subsection headers such as feature-block titles; headline-xs (18px/500) labels smaller UI headers and card titles; body-md (14px/500, 1.5 line-height) is the workhorse for paragraph copy, nav items, and button labels.

## Layout

Spacing runs on a compact five-step scale (4/12/20/24/56px) that favors tight, information-dense grouping over generous air — appropriate for a product page trying to fit tabs, stat cards, and quote carousels above the fold. Use xs (4px) for icon-to-label gaps, sm/md (12–20px) for internal card and button padding, lg (24px) between related elements in a group, and reserve xl (56px) for separating major page sections. Content sits in a wide, full-bleed layout with rounded card modules breaking the grid rather than a strict fixed-column system.

## Elevation & Depth

No shadow tokens are in active use (sm/md/lg/xl all resolve to none) — hierarchy comes from surface contrast and borders instead. The one real depth cue is the inner ring (rgb(252,254,226) 0 0 0 2px inset), a pale yellow-green inset outline used to highlight an active or focused element, such as the active tab in the feature switcher. Elsewhere, card backgrounds (#fefdfb, a warm off-white) sit against the pure-white page surface to create separation without shadow.

## Shapes

Two radii cover the system: rounded-sm (12px) for buttons and compact interactive elements, rounded-md (18px) for cards and larger content containers. Both are soft but not pill-shaped, reinforcing a friendly-but-professional tone consistent with the clay-craft hero without tipping into a toy-like fully-rounded look.

## Components

**Button-primary**: tertiary blue (#395afa) background, white text, 12px radius, 42px height, 8px/16px padding — the default conversion action ('Start free trial'). **Button-secondary**: white background, dark navy (#001433) text, same shape and height — used for lower-emphasis actions like 'Get a demo' in most contexts. **Button-link**: black text, no radius, no fill — inline text links. **Card**: off-white (#fefdfb) background, black text, 18px radius, 16px/20px padding — used for testimonial tiles and stat callouts.

### Hero Illustration Panel
A full-width 3D scene of pastel clay-textured objects (funnel, mailbox, magnifying glass) on a painted hill-and-sky backdrop, sitting above a dark-green content band that holds the headline in white.

### Dual CTA Pairing
Hero and footer CTAs consistently pair a white/dark button ('Start free trial') with a yellow-green filled button ('Get a demo'), each with a trailing arrow glyph — a repeating two-action pattern rather than a single dominant CTA.

### Logo/Trust Bar
A rounded off-white panel below the hero holding a grid of customer logos (Figma, Vanta, Perplexity, Notion, Google, Cursor, UPS, HubSpot, Anthropic, Rippling) mixed with inline stat chips (80%+, 2x) inside the same card treatment.

### Feature Tab Switcher
A horizontal row of seven labeled tabs (TAM Sourcing, Automated Inbound, Lead Scoring, Automated Outbound, CRM Enrichment, Launch Ads, Rep Productivity) that swap a one-line description beneath — the densest interactive component on the page.

### Stat Callout Card
A card isolating a single large metric (+140%, 3x, +50% SQLs) with a two-line label underneath and a linked customer logo, repeated across the trust section as compact proof units.

### Prompt Input Bar
A text-input styled 'What do you want to build?' field with example query chips beneath it and a Submit button — a product-demo component simulating the natural-language query experience inside the marketing page.

### Alternating Proof Blocks
Four full-width sections (Data, Agents, Orchestration, Execution) each pairing a headline-sm title, two sentences of body copy, three bolded customer-result lines, and two CTAs — a rigid repeating template that structures the entire mid-page scroll.

## Do's and Don'ts

- Do keep button-primary blue (#395afa) reserved for the single highest-intent action per section; don't let the yellow-green accent compete with it as a second primary.
- Do use the 18px card radius consistently for any bordered content module; don't mix in sharper corners for cards, as no alternate radius token exists.
- Do lean on off-white (#fefdfb) versus pure white (#ffffff) to separate cards from page background since shadows are unused; don't add drop shadows to fake depth.
- Do keep headline tracking tight (-0.03em to -0.04em) at large sizes to match the compressed, confident hero voice; don't loosen letter-spacing on big headlines.
- Do pack stat callouts and testimonials densely per the tight spacing scale; don't introduce generous whitespace that fights the page's information-dense character.
- Do substitute Roobert with Inter, General Sans, or Satoshi in any environment without access to the self-hosted woff2; don't fall back to a serif or a rounded display font, which breaks the flat-grotesk feel.

## Agent Prompt Guide

Quick reference — Text: #000000 (primary), #001433 (secondary button text). Background: #ffffff (surface), #fefdfb (card). Accent: #395afa (tertiary/primary action), #2bafd5 (secondary accent), #e85c5d (brand-reductant), inset ring rgb(252,254,226).

1. Build a hero section with a dark-green background band, white headline text at 64px/575 weight with -0.04em tracking reading 'Build systems to grow revenue', and two buttons: a black 'Start free trial' pill and a yellow-green 'Get a demo' pill, both 42px tall with 12px radius.
2. Create a stat callout card using #fefdfb background, 18px radius, 16px/20px padding, with a large bold number (e.g. '+140%') and a two-line gray label underneath in 14px Roobert-substitute body text.
3. Build a horizontal tab switcher with 7 text labels in 14px/500 weight; the active tab gets a 2px inset ring in rgb(252,254,226) and the description below swaps per tab.
4. Design a testimonial card: #fefdfb background, 18px radius, a quote in 14px body copy, name and title beneath in black, and a small linked customer logo.
5. Build a two-CTA footer band on white background: 'Start free trial' as button-primary (#395afa fill, white text, 12px radius, 42px height) beside 'Get a demo' as button-secondary (white fill, #001433 text, same dimensions).

## Similar Brands

- **Linear:** shares the tight, low-weight display type and restrained color-on-white system, though Linear skips illustration entirely for pure UI screenshots.
- **Attio:** same GTM/CRM audience and stat-heavy proof sections, but leans more monochrome with less playful hero art.
- **Notion:** comparable use of soft 3D/illustrated hero scenes against an otherwise plain white product page.
- **Vercel:** shares the black-primary-button, tight-tracking-headline formula, though Vercel's palette stays almost entirely grayscale versus Clay's blue/yellow-green accents.

More like this

Browse AI →
pallyy.com
Pallyy Marketing
Pallyy
Plan, approve, schedule, and publish on one simple social calendar.
Homepage · 1 hour ago
pallyy.com
Pallyy Pricing Marketing
Pallyy Pricing
A tidy three-column layout makes comparison easy, with the “Agency” tier clearly emphasized through a blue card, primary button, and “Recommended” badge.…
Pricing · 1 hour ago
kagaz.app
Kagaz Developer Tools
Kagaz
Invoice generator and API that creates beautiful invoices fast.
Homepage · 12 hours ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 12 hours ago