What is Clay's primary brand color?

Clay's primary CTA color is a near-black ink at #0a0a0a, used on every primary button and headline. The brand voltage comes from a six-color saturated feature-card palette: hot pink #ff4d8b, deep teal #1a3a3a, lavender #b8a4ed, peach #ffb084, ochre #e8b94a, and a cream surface at #f5f0e0. The page floor is a cream-tinted white at #fffaf0, never cool gray — the warmth is non-negotiable and differentiates Clay from every competing GTM-data brand.

What typography does Clay use, and what should I use if Plain Black isn't available?

Clay uses Plain Black, a custom rounded display face, at weight 500 with negative letter-spacing for every headline — 72px / -2.5px on the hero, 56px / -2px on section heads. Inter handles body, navigation, and UI at weights 400–600. Plain Black is licensed to Clay and not available as a public web font; Inter at weight 500 with -0.05em letter-spacing is the closest open-source substitute. Söhne Breit (Buch weight) and Recoleta at weight 500 carry similar rounded-display warmth if licensed.

Why does Clay use six saturated feature-card colors?

The six-card palette is Clay's signature long-scroll device. Each card carries a saturated single fill — pink for outbound/sequencer, teal for enterprise or featured pricing, lavender for AI-agent products, peach for general SaaS warmth, ochre for community and experts, plus a cream surface for lower-key features. Cards rotate across the page in a deliberate rhythm; repeating the same color twice in a row reads as off-rhythm. Each card holds an h3, body, and a product UI fragment at small scale rather than abstract decoration.

Can I use this DESIGN.md to build my own React product page?

Yes — the file is structured for AI tools like Claude, Cursor, or GitHub Copilot to read directly. The agent will reproduce Clay's playful warmth (cream canvas, saturated cards, modest 500-weight display type) instead of a generic shadcn theme. You can also reference tokens directly: every color hex, type style, radius, and spacing value is a quoted value you can paste into Tailwind config, CSS variables, or a shadcn/ui component library. Border radii run 12px buttons, 16px content cards, 24px feature cards.

What makes Clay's design system different from other B2B SaaS sites?

Two things. First, the cream-tinted canvas at #fffaf0 — every competing GTM-data brand plays it cool with white or near-white gray, and Clay deliberately warms it. Second, the 3D-rendered claymation illustrations: hand-crafted mountains, mascot characters, and peach/ochre/lavender landscapes used as full-bleed hero artifacts and inline feature elements. The footer is also cream-tinted (#faf5e8), not dark navy — Clay extends the warm-throughout pacing right to the page's closing band, which is rare for B2B SaaS.

What's missing from this DESIGN.md spec?

A handful of things, documented in the Known Gaps section: Plain Black is licensed to Clay and not distributable; the 3D claymation illustrations and named mascot characters are commissioned assets rather than system tokens; animation timings for illustration parallax and feature-card entrances are out of scope; form validation states beyond the focused text-input border are not extracted; and the in-app Clay product surface (data tables, formula editor, agent builder) adds many product-specific components not captured in this marketing-focused spec.

Clay Design System

Clay.com's design system as a DESIGN.md file.

About Clay DESIGN.md

Curated by Dov AzencotUpdated May 12, 2026Source clay.com

AI & LLM Platforms
Marketing & CRM

Clay.com is the most playful B2B SaaS interface in the GTM-data category. The base atmosphere is a cream-tinted white canvas at #fffaf0, holding dark-navy ink type and 3D-rendered claymation illustrations as the dominant brand voltage. Where competing 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.

This page packages the full system into a single DESIGN.md file. Inside: 16 color tokens, 14 type styles, 6 corner radii, 8 spacing values, and 27 components — every piece you need to reproduce Clay's voice. The typography runs Plain Black for headlines at weight 500 with negative letter-spacing, and Inter for body, navigation, and UI. The shape language is generous: 12px buttons, 16px content cards, and 24px feature cards.

Download the file and feed it to Claude, Cursor, or GitHub Copilot. The AI writes React components and Tailwind classes that match Clay's playful warmth — cream canvas, saturated feature cards, modest display weight — rather than a generic dashboard theme. Or use it as a direct reference for your own Tailwind config and component library.

What makes it distinct

Cream-tinted canvas #fffaf0the warm tint differentiates Clay from every cool-gray competitor in the GTM data category
Six saturated feature cardshot pink #ff4d8b, deep teal #1a3a3a, lavender #b8a4ed, peach #ffb084, ochre #e8b94a, cream surface
Plain Black display at weight 500rounded custom face runs 72px hero with -2.5px letter-spacing, never bolder than 500
3D claymation illustrations carry hero voltagehand-crafted mountains and mascot characters replace the genre's standard abstract gradients
Cream footer #faf5e8 instead of dark navyClay deliberately closes pages warm-light to extend the playful pacing throughout

Live at clay.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

clay.com

Explore Clay

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Clay design system FAQ

Common questions about Clay's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

React blocks for shadcn/ui

Production-ready hero, pricing, CTA, and dashboard sections built with the same Tailwind + shadcn primitives.

Use Clay in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→