Warm putty canvas, huge Roobert display, black square-ish buttons, and candy-pastel cards (blue/peach/lime/pink) with deep same-hue text.
Browse Clay in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: clay.com (live DOM, computed styles + color census), 2026-07-06; motion/background/responsive capture 2026-07-07. Coverage: marketing site. Product (spreadsheet app): needs-dashboard (login required). Responsive: breakpoints only.
Warm, tactile, and playful-premium: a putty-colored off-white canvas carries huge, tightly-tracked Roobert display type and crisp black buttons. The signature is a set of soft candy-pastel cards, each pairing a soft tint with a deep same-hue tinted text — never black on pastel — echoing Clay's claymation branding; this tint/shade pairing is what makes Clay feel hand-made. Elevation stays mostly flat, with separation coming from color blocks and hairline borders rather than shadows, and playful claymation 3D illustrations appear throughout. The result is serious tooling wrapped in joyful color. Feels: craft, editorial, human.
| Token | Hex | Role / usage |
|---|---|---|
| canvas | #f4f3f0 | Page background (warm putty, most-used) |
| paper | #fefdfb | Cards, light-on-dark hero text |
| white | #ffffff | Pure white surfaces |
| tan | #dad4c8 | Borders, muted panels |
| ink | #000000 | Primary text, buttons |
| ink-warm | #1b1a18 | Warm near-black text |
| gray | #79756d | Secondary / muted text |
| Token | Hex | Paired dark text |
|---|---|---|
| blue | #bedffe | navy #001433 |
| peach | #fcc9ab | brown #381005 |
| lime | #eef773 | green #102b03 |
| pink | #f8b9e4 | magenta #46022f |
| coral | #fcbabe | brown #381005 |
Rule: chrome is warm-neutral + black; the pastels appear only as large rounded card fills, each pairing a soft tint with a deep same-hue tinted text (never black on pastel).
Font stack: Roobertvf (Roobert Variable), Arial, sans-serif. Roobert is a geometric-humanist grotesque; the variable axis is used for in-between weights (e.g. 575).
| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Hero (h1) | 88 / 88 | 575 | -3.52px (-4%) |
| Display (h2) | 72 | 500 | -3% |
| Section (h3) | 48 | 500 | -4% |
| Subhead | 20–24 | 400–500 | -1% |
| Body | 16 / 24 | 400 | 0 |
| UI / nav | 16 | 400 | 0 |
| Button | 14 | 500 | -0.14px |
| Meta / caption | 13 | 500 | 0 |
Patterns: enormous headings at variable weights ~500–575 with aggressive negative tracking; body stays a plain 16/24 weight 400, black. Never true bold 700.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.