Design System
Analysis of Clay

A warm-paper canvas and crisp black ink anchor a confident, editorial product brand — punctuated by a signature acid-lime pop and a playful set of pastel accent fills.

01 — Foundations

Colour Palette

02 — Foundations

Typography

Set in Roobert (proprietary); shown here in Hanken Grotesk, the nearest Google substitute. Hierarchy leans on size and tight negative tracking, not heavy weight contrast.

03 — Components

Button Variants

button-primary
Near-black fill with warm off-white text — the default primary action across the site.
button-accent
The signature acid-lime, reserved as a brand pop on select calls to action.
button-secondary
Warm stone fill (#f3f2ed) for the lower-emphasis paired action.
button-pill
Fully-rounded utility chip used for tags and filters.
04 — Components

Cards & Surfaces

White cards on the paper canvas, rounded at 18px and structured by hairlines. Pastel accent washes do the visual lifting where Clay would otherwise use imagery.

05 — Components

Form Elements

text-input
textarea
06 — Foundations

Spacing Scale

Built on an 8px base — 8 / 16 padding pairs recur throughout — extending to a 4 / 8 / 12 / 16 / 24 / 32 / 48 scale.

07 — Foundations

Border Radius

Rounding is generous and pervasive; 18px is the most frequent value, with larger tiers for containers and inputs.

08 — Foundations

Elevation & Depth

Level 0 — 1px hairline only. The default; structure is carried by borders, not shadow.
Level 1 — a single soft drop (0 4px 8px / 15%) used on overlays and menus.
Level 2 — deeper modal/popover shadow (derived).
Signature — a 2px pastel inset ring (here in sky blue) Clay uses in place of conventional shadow.
09 — Responsive

Responsive Behavior

NameWidthKey changes
Mobile< 768pxGrids collapse to 1–2 columns; display type drops to ~48px so tracked headlines stay tidy.
Tablet768–1023pxFour-column tile grids become two columns; pricing and auth stack to a single column.
Laptop1024–1279pxFull multi-column grids return; 1200px content column with comfortable gutters.
Desktop≥ 1280pxMax 1200px centered column; extra width becomes paper margin on the warm canvas.

Note: sections are separated by tone and hairline rules rather than heavy cards, so the layout stays airy as it scales.

Pricing Tiers

Illustrative tiers rendered in Clay's system — dark featured card, lime accent on the highlighted CTA.

Starter
$0/mo
Explore the table and run your first enrichments.
  • 1,200 credits / mo
  • Core data providers
  • Community support
Pro● Most popular
$149/mo
For GTM engineers building real pipelines.
  • 10,000 credits / mo
  • 100+ integrations
  • AI research agents
  • Priority support
Enterprise
Custom
Scaled credits, security, and onboarding.
  • Unlimited workspaces
  • SSO & SAML
  • Dedicated success

Data Table

A spreadsheet-style table — Clay's native metaphor — using surface-alt headers and pill status chips.

IDCompanyEnrichmentStatusWhen
#4821Northwind LabsFind emailComplete2m ago
#4820Helio RoboticsCompany fundingComplete14m ago
#4819Tidewater Co.AI research agentRunning1h ago
#4818Cobalt SystemsFind emailQueued3h ago
#4817Marlow & FinchJob changesCompleteYesterday
1–5 of 412
123

Auth Forms

Soft, large-radius cards on the warm canvas — sign-in and sign-up rendered in the Clay system.

Sign in

Welcome back

OR
Create account

Start building

OR