# Clay — Marketing Site Design Spec

> 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.

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Warm neutrals
| 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 |

### Candy pastels (card backgrounds — the Clay signature)
| 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).

## 3. Typography Rules

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.

## 4. Component Stylings

### Buttons
- **Primary**: bg `#000`, text white, radius 12, ~39px tall, 14px/500 (tracking -0.14px), padding `8px 16px`. Hover: slight lift / dark-gray.
- **Secondary**: bg `#fefdfb` or transparent, text black, 1px `#dad4c8` border, radius 12.
- **Ghost / nav**: transparent, black text, 16px; "Log in" 12.8px/500.
- **Text link**: black, underline on hover; occasionally set on a pastel block with the paired dark tint.

### Inputs
- bg white/paper, 1px `#dad4c8` border, radius 12, black text, gray `#79756d` placeholder. Focus: black border.

### Cards / panels
- Radius 24. Two flavors: (a) **neutral** — paper `#fefdfb` on canvas with a `#dad4c8` hairline; (b) **pastel** — a candy fill (blue/peach/lime/pink/coral) with same-hue deep tinted text, often holding a claymation illustration or a mini product screenshot.

### Spreadsheet / table (product motif)
- Clay's product is a spreadsheet. Marketing shows dense tables: header row, row numbers, enrichment columns with small colored status chips (green run / amber pending), avatar + company cells, monospace-ish data. Hairline `#dad4c8` grid, hover row tint.

### Nav
- Warm, transparent over canvas; wordmark left, center links (Product/Solutions/Resources/Pricing, 16px), right: "Log in" + black "Start free trial" button.

## 5. Layout Principles

- Nav: ~64px, warm, no heavy border.
- Hero: often on a darker/photographic panel with light `#fefdfb` 88px headline → subhead → black CTA, plus a floating claymation 3D object or product screenshot.
- Body: warm `#f4f3f0` canvas with alternating pastel card sections; large 24px-radius blocks; grayscale/colored logo wall; big playful illustrations throughout.
- Wide centered content; generous whitespace.
- Spacing: 4px grid; roomy, editorial section rhythm; big gaps between colorful blocks.

## 6. Depth & Elevation

- Radii: buttons `12px`, inputs `12px`, cards/panels `24px` (large, friendly), pills `999px`.
- Control heights: primary button ~`39px`. Button padding: `8px 16px`.
- Elevation: mostly flat; separation via color blocks and 1px `#dad4c8` borders. Soft shadows only under floating product mockups.

## 7. Motion

- **GSAP-driven** scroll/entrance choreography (window.gsap detected; 8 live WAAPI animations at rest); cards and 3D claymation objects get gentle entrance/parallax, product tables animate cell-by-cell to show enrichment running.
- Transition census: `transform 0.4s cubic-bezier(0.165,…)` (springy card lifts, 18 els), `background-color 0.3s cubic-bezier(0.075,…)` (17), `color 0.1s ease-out` (fast color hovers, 14), `transform 0.3s ease-out` (10), `opacity 0.3s ease` (8), occasional `box-shadow 0.3s`.
- Keyframes: `spin`, `load`, `fadein`, marquees in three directions (`marquee`, `marquee-up`, `marquee-down`), and a playful `bouncy`.
- Character: springy 300–400ms transforms and tri-directional marquees against instant 100ms color hovers — playful and tactile, never frantic.

## 8. Backgrounds, Effects & WebGL

- **Background video is the hero atmosphere**: a full-bleed 1512px autoplay loop in the hero plus three 592px autoplay demo loops. Motion (video + GSAP) carries the energy; color pops come from the candy-pastel cards.
- Gradients are functional putty-toned fades, not decoration: `rgb(244,243,240)` → `rgba(244,243,240,0)` edge scrims into the putty canvas, white fade `rgba(255,255,255,0)` → `#fff`, and a photo overlay scrim `rgba(0,0,0,0)` → `rgba(0,0,0,.45)`.
- No canvas/WebGL, no backdrop-filter — surfaces stay warm, flat putty.

## 9. Do's and Don'ts

### Do
- Keep chrome warm-neutral + black; use the candy pastels only as large rounded card fills.
- Pair every pastel fill with its deep same-hue tinted text (navy `#001433`, brown `#381005`, green `#102b03`, magenta `#46022f`) — this tint/shade pairing is the hand-made Clay signature.
- Set headings enormous at variable weights ~500–575 with aggressive negative tracking (-3% to -4%); keep body a plain 16/24 weight 400.
- Separate sections with color blocks and 1px `#dad4c8` hairline borders; keep elevation flat.
- Use generous 24px radii on cards and 12px on controls; keep spacing on a 4px grid with roomy, editorial section rhythm.
- Keep motion springy and tactile: 300–400ms cubic-bezier transforms, 100ms ease-out color hovers, GSAP entrance/parallax, tables animating cell-by-cell.
- Let autoplay video loops carry hero atmosphere; use putty-toned fade gradients only as functional edge scrims.

### Don't
- Don't set black text on pastel fills — always the paired deep same-hue tint.
- Don't use true bold 700 — heaviest display weight is ~575 on the variable axis.
- Don't add shadows for elevation; soft shadows appear only under floating product mockups.
- Don't make motion frantic — springy and smooth only.
- Don't reach for canvas/WebGL or backdrop-filter blurs — none exist on the site; atmosphere comes from video and flat putty color.

## 10. Responsive Behavior

Webflow-style breakpoints: `479px`, `767–768px`, `990–991px`, `1150px`. Adaptations at each breakpoint: not captured.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#f4f3f0` · Text `#000000` · Muted `#79756d` · Border `#dad4c8` · Accent pastels `#bedffe` / `#fcc9ab` / `#eef773` / `#f8b9e4` / `#fcbabe`
- Font: `Roobertvf (Roobert Variable), Arial, sans-serif` · Body: 16px · Radius: 12 (controls) / 24 (cards) · Control height: ~39px
- Focus: black border (inputs)

<clay_design_language>
Use the Clay design language: warm putty off-white canvas #f4f3f0 (cards paper #fefdfb), black ink text with warm gray #79756d secondary, 1px #dad4c8 borders. Type is Roobert (geometric grotesque): display is HUGE and tightly tracked — 88px at variable weight ~575, ~-4% letter-spacing, never true bold; body plain 16/24 weight 400. Primary button solid black, radius 12, 14px/500; secondary paper with a #dad4c8 border. Cards use a generous 24px radius. The signature move: large candy-pastel card fills — blue #bedffe, peach #fcc9ab, lime #eef773, pink #f8b9e4, coral #fcbabe — each paired with a DEEP same-hue tinted text (navy #001433, brown #381005, green #102b03, magenta #46022f), never black on pastel. Product motif is a dense spreadsheet with enrichment columns and colored status chips. Flat elevation, color-block separation, claymation 3D illustrations, autoplay video loops as hero atmosphere. Motion is springy and playful: GSAP scroll choreography, 300–400ms cubic-bezier transforms, marquees, 100ms color hovers. Feels: warm, craft, joyful-but-serious tooling. Avoid: black text on pastel fills, true bold 700, shadows anywhere except under floating mockups, WebGL/blur effects, frantic motion.
</clay_design_language>