# Clay — Design Reference

Schema: Design Details DESIGN.md v3.2
Source: https://www.clay.com/
Captured: 2026-10-16
CSS measured: 2026-10-16T05:19:17.289Z at 1440×1000 — https://www.clay.com/
Values come from computed CSS; role labels are AI judgments. Live CSS may differ from an older screenshot.
Status: AI analysed; curator review pending
Rubric: 3.2
Observer: google/gemini-3.1-pro-preview
Judge: anthropic/claude-sonnet-5

## Design direction

Clay's website employs a highly distinctive, playful 3D illustrative style combined with a clean, slightly rounded geometric aesthetic. The color palette relies heavily on soft pastels mixed with high-contrast blacks and vibrant accents, creating a whimsical yet professional feel. The typography uses 'Roobert' extensively, contributing to the modern, approachable look. Layouts are structured but incorporate soft, rounded corners on containers and buttons, aligning with the playful tone set by the 3D imagery.

## Classification

- Industry: crm
- Site type: Landing, Blog
- Business model: Not identified
- Styles: illustrative, playful, soft, 3d-rendered
- Platform: Webflow
- Technology: GSAP

## Typography

- Display: Roobertvf — weight 575; size 88px; line-height 88px; tracking -3.5px; Regular (95% role confidence, computed values)
- Heading: Roobertvf — weight 500; size 72px; line-height 72px; tracking -2.2px; Regular (90% role confidence, computed values)
- Body: Roobertvf — weight 400; size 16px; line-height 22.4px; tracking normal; Regular (90% role confidence, computed values)

## Functional palette

- Text — text #000000: color-10: computed rgb(0, 0, 0); AI role: Black (#000000) is heavily used for primary text across the site. (95% role confidence, computed values)
- Canvas — canvas #FFFFFF: color-1: computed rgb(255, 255, 255); AI role: White (#FFFFFF) is used as the base page background and inside many card components. (95% role confidence, computed values)
- Surface — surface #F0F8FF: color-6: computed rgb(240, 248, 255); AI role: Light blue (#F0F8FF) used as the background surface for the 'Data' feature block. (85% role confidence, computed values)
- Surface — surface #FFF3ED: color-9: computed rgb(255, 243, 237); AI role: Light peach/pink (#FFF3ED) used as the background surface for the 'Agents' feature block. (85% role confidence, computed values)
- Primary Action — primary action #395AFA: color-24: computed rgb(57, 90, 250); AI role: Blue (#395AFA) used for the primary 'Start free trial' button within the 'Data' feature section. (85% role confidence, computed values)
- Muted Text — muted text #55534E: color-22: computed rgb(85, 83, 78); AI role: Dark gray (#55534E) used for secondary text, like the links in the footer. (80% role confidence, computed values)
- Accent — accent #CBD810: color-32: computed rgb(203, 216, 16); AI role: Lime green (#CBD810) used for the 'Get a demo' button in the hero section. (70% role confidence, computed values)

## Exact computed CSS inventory

The browser extracted these declarations from rendered DOM at capture time. They are facts, not visual guesses. Image and video pixels are outside this inventory.

### Font configurations

```json
[
  {
    "id": "font-1",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "48px",
    "lineHeight": "48px",
    "letterSpacing": "-1.9px",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "h3",
        "text": "What do you want to build?",
        "top": 2464,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Get data from the most complete data marketplace",
        "top": 3031,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "complete data marketplace",
        "top": 3074,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-2",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "24px",
    "lineHeight": "31.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 8,
    "contexts": [
      {
        "tag": "p",
        "text": "Infrastructure to get any data, run agentic workflows, and launch GTM plays.",
        "top": 587,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "How Hex increased inbound win-rate 50% using Clay",
        "top": 7593,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "How Verkada GTM team expanded in 28 European countries using Clay",
        "top": 7593,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-3",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "13.2px",
    "letterSpacing": "1.4px",
    "traits": "uppercase",
    "count": 7,
    "contexts": [
      {
        "tag": "h3",
        "text": "Use cases",
        "top": 9553,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Product",
        "top": 9553,
        "property": "font"
      },
      {
        "tag": "h3",
        "text": "Blog",
        "top": 9553,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-4",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "575",
    "size": "88px",
    "lineHeight": "88px",
    "letterSpacing": "-3.5px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h1",
        "text": "Build systems to grow revenue",
        "top": 576,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-5",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "72px",
    "lineHeight": "72px",
    "letterSpacing": "-2.2px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "GTM engineers build on Clay",
        "top": 1396,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-6",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "44px",
    "lineHeight": "48.4px",
    "letterSpacing": "-0.9px",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "h2",
        "text": "Turn your growth ideas into reality today",
        "top": 8975,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-7",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "12px",
    "lineHeight": "15.6px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "p",
        "text": "“Clay has one of the most practical and exciting applications of AI, in a decades-old practice that ",
        "top": 1113,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Clay has become the orchestration layer for everything GTM. Salesforce for record-keeping, Snowflak",
        "top": 973,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "“Clay 3x'd our enrichment rate and unlocked AI-powered GTM workflows that were infeasible before”",
        "top": 1154,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-8",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "21px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 13,
    "contexts": [
      {
        "tag": "p",
        "text": "Product",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Product",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Solutions",
        "top": 18,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-9",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 7,
    "contexts": [
      {
        "tag": "p",
        "text": "One contract to buy data from 200+ data and AI vendors in Clay’s marketplace. Create intent signals ",
        "top": 3147,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Run GTM plays with agents that understand your business and accounts. Turn context into research, sc",
        "top": 3915,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Use clicks, code, or chat with Clay to build GTM plays you can easily see. Troubleshoot faster, coll",
        "top": 4683,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-10",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "or install directly with",
        "top": 771,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Anthropic 3x’d their enrichment rate with Clay’s data marketplace.",
        "top": 3510,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "OpenAI used Clay to fully automate pre-call prep by researching prospect bios, earning reports, and ",
        "top": 4278,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-11",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Trusted by more than 500,000 leading GTM teams of all sizes. Inspired by our customers. Built with l",
        "top": 872,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Personalize outreach with live intent signals to reach the right buyers at the right time.",
        "top": 1564,
        "property": "font"
      },
      {
        "tag": "p",
        "text": "Reps can self-serve the best prospecting data. Chat to get full account context in natural language.",
        "top": 6141,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-12",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 46,
    "contexts": [
      {
        "tag": "div",
        "text": "TAM Sourcing",
        "top": 1658,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Automated Inbound",
        "top": 1658,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Lead Scoring",
        "top": 1658,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-13",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 31,
    "contexts": [
      {
        "tag": "span",
        "text": "view open ai",
        "top": 1048,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "text",
        "top": 956,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "text",
        "top": 1140,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-14",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "23.2px",
    "lineHeight": "30.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 15,
    "contexts": [
      {
        "tag": "div",
        "text": "+140%",
        "top": 1165,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "80%+",
        "top": 1062,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "2x",
        "top": 1073,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-15",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "9.6px",
    "lineHeight": "11px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 12,
    "contexts": [
      {
        "tag": "div",
        "text": "outboundpipeline",
        "top": 1169,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "demos fromcold email",
        "top": 1077,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "replyrate",
        "top": 1077,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-16",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "16px",
    "lineHeight": "24px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 10,
    "contexts": [
      {
        "tag": "div",
        "text": "Start free trial",
        "top": 3606,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Explore data marketplace",
        "top": 3606,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Start free trial",
        "top": 4374,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-17",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "9.6px",
    "lineHeight": "9.6px",
    "letterSpacing": "normal",
    "traits": "uppercase",
    "count": 6,
    "contexts": [
      {
        "tag": "div",
        "text": "enrichmentcoverage",
        "top": 1092,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "qualified and scored with Clay",
        "top": 1134,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "enrichmentcoverage",
        "top": 1092,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-18",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "700",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 5,
    "contexts": [
      {
        "tag": "strong",
        "text": "Anthropic",
        "top": 3511,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "OpenAI",
        "top": 4279,
        "property": "font"
      },
      {
        "tag": "strong",
        "text": "ElevenLabs",
        "top": 5047,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-19",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "18px",
    "letterSpacing": "3px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Data",
        "top": 2990,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "agents",
        "top": 3758,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "orchestration",
        "top": 4526,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-20",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "600",
    "size": "12px",
    "lineHeight": "14.4px",
    "letterSpacing": "1.1px",
    "traits": "uppercase",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "Conference",
        "top": 8350,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Livestream",
        "top": 8354,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Community story",
        "top": 8600,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-21",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "All inbound",
        "top": 1105,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "All inbound",
        "top": 1105,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "All inbound",
        "top": 1105,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-22",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "14px",
    "lineHeight": "18.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Find people data",
        "top": 2718,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Find company data",
        "top": 2718,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Find jobs data",
        "top": 2718,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-23",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "600",
    "size": "20px",
    "lineHeight": "26px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "span",
        "text": "customers",
        "top": 899,
        "property": "font"
      },
      {
        "tag": "span",
        "text": "love",
        "top": 899,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-24",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "18px",
    "lineHeight": "27px",
    "letterSpacing": "-0.2px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Start free trial",
        "top": 715,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Get a demo",
        "top": 715,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-25",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "600",
    "size": "16px",
    "lineHeight": "22.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Born in Brooklyn • Art by Hudson",
        "top": 10345,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Hudson",
        "top": 10346,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-26",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "13.9px",
    "lineHeight": "20.9px",
    "letterSpacing": "-0.1px",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "Get a demo",
        "top": 18,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "Start free trial",
        "top": 18,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-27",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "12.8px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "⌘",
        "top": 17,
        "property": "font"
      },
      {
        "tag": "div",
        "text": "K",
        "top": 17,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-28",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "500",
    "size": "12.8px",
    "lineHeight": "19.2px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Log in",
        "top": 12,
        "property": "font"
      }
    ]
  },
  {
    "id": "font-29",
    "family": "Roobertvf",
    "fontStack": "Roobertvf, Arial, sans-serif",
    "weight": "400",
    "size": "14px",
    "lineHeight": "15.4px",
    "letterSpacing": "normal",
    "traits": "Regular",
    "count": 48,
    "contexts": [
      {
        "tag": "a",
        "text": "Automated inbound",
        "top": 9584,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "Account research",
        "top": 9611,
        "property": "font"
      },
      {
        "tag": "a",
        "text": "ABM",
        "top": 9639,
        "property": "font"
      }
    ]
  }
]
```

### Color configurations

```json
[
  {
    "id": "color-1",
    "hex": "#FFFFFF",
    "alpha": 1,
    "cssValue": "rgb(255, 255, 255)",
    "count": 120,
    "contexts": [
      {
        "tag": "body",
        "text": "/* ===================================================================== 1. GRID CONTAINER --unit-h ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "/* ===================================================================== 1. GRID CONTAINER --unit-h ",
        "top": 0,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Start free trial",
        "top": 18,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-2",
    "hex": "#F4F3F0",
    "alpha": 1,
    "cssValue": "rgb(244, 243, 240)",
    "count": 54,
    "contexts": [
      {
        "tag": "div",
        "text": "⌘",
        "top": 17,
        "property": "border"
      },
      {
        "tag": "div",
        "text": "Trusted by more than 500,000 leading GTM teams of all sizes. Inspired by our customers. Built with l",
        "top": 824,
        "property": "background"
      },
      {
        "tag": "button",
        "text": "TAM Sourcing",
        "top": 1648,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-3",
    "hex": "#FEFDFB",
    "alpha": 1,
    "cssValue": "rgb(254, 253, 251)",
    "count": 110,
    "contexts": [
      {
        "tag": "h1",
        "text": "Build systems to grow revenue",
        "top": 576,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Infrastructure to get any data, run agentic workflows, and launch GTM plays.",
        "top": 587,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "or install directly with",
        "top": 771,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-4",
    "hex": "#035D44",
    "alpha": 1,
    "cssValue": "rgb(3, 93, 68)",
    "count": 1,
    "contexts": [
      {
        "tag": "section",
        "text": "Build systems to grow revenueInfrastructure to get any data, run agentic workflows, and launch GTM p",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-5",
    "hex": "#FFFDF9",
    "alpha": 1,
    "cssValue": "rgb(255, 253, 249)",
    "count": 1,
    "contexts": [
      {
        "tag": "footer",
        "text": "Turn your growth ideas into reality todayStart for free today. No credit card required.Start free tr",
        "top": 8895,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-6",
    "hex": "#F0F8FF",
    "alpha": 1,
    "cssValue": "rgb(240, 248, 255)",
    "count": 18,
    "contexts": [
      {
        "tag": "div",
        "text": "DataGet data from the most complete data marketplaceOne contract to buy data from 200+ data and AI v",
        "top": 2935,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "Data",
        "top": 2983,
        "property": "border"
      },
      {
        "tag": "a",
        "text": "Community storyWhere girls often choose between career or marriage, she carved her own pathRead stor",
        "top": 8256,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-7",
    "hex": "#FCFEE2",
    "alpha": 1,
    "cssValue": "rgb(252, 254, 226)",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "orchestrationBuild GTM plays on a visual canvasUse clicks, code, or chat with Clay to build GTM play",
        "top": 4471,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 4519,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-8",
    "hex": "#FFF0FA",
    "alpha": 1,
    "cssValue": "rgb(255, 240, 250)",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "ACTIVATIONLaunch new plays as fast as you have ideasTrigger emails, ads, and more with integrations ",
        "top": 5239,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 5287,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-9",
    "hex": "#FFF3ED",
    "alpha": 1,
    "cssValue": "rgb(255, 243, 237)",
    "count": 17,
    "contexts": [
      {
        "tag": "div",
        "text": "agentsPut agents that know your business to workRun GTM plays with agents that understand your busin",
        "top": 3703,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3751,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-10",
    "hex": "#000000",
    "alpha": 1,
    "cssValue": "rgb(0, 0, 0)",
    "count": 158,
    "contexts": [
      {
        "tag": "p",
        "text": "Product",
        "top": 18,
        "property": "text"
      },
      {
        "tag": "div",
        "text": "⌘",
        "top": 17,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start free trial",
        "top": 9,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-11",
    "hex": "#FF7714",
    "alpha": 1,
    "cssValue": "rgb(255, 119, 20)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 1875,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-12",
    "hex": "#000000",
    "alpha": 0.03137254901960784,
    "cssValue": "rgba(0, 0, 0, 0.03)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "How Hex increased inbound win-rate 50% using Clay",
        "top": 7196,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-13",
    "hex": "#F5F3FF",
    "alpha": 1,
    "cssValue": "rgb(245, 243, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "ConferenceSculpt: The go-to-market conference returns in 2026Get tickets",
        "top": 7993,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-14",
    "hex": "#1B1A18",
    "alpha": 1,
    "cssValue": "rgb(27, 26, 24)",
    "count": 55,
    "contexts": [
      {
        "tag": "div",
        "text": "TAM Sourcing",
        "top": 1658,
        "property": "text"
      },
      {
        "tag": "button",
        "text": "Submit",
        "top": 2707,
        "property": "control-background"
      },
      {
        "tag": "h3",
        "text": "Build systems that make reps more productive",
        "top": 6137,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-15",
    "hex": "#FCBABE",
    "alpha": 1,
    "cssValue": "rgb(252, 186, 190)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "LivestreamHow Clay Uses Clay: ABM campaigns to break into Tier 1 accountsWatch",
        "top": 8256,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-16",
    "hex": "#000000",
    "alpha": 0.25098039215686274,
    "cssValue": "rgba(0, 0, 0, 0.25)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "LivestreamHow Clay Uses Clay: ABM campaigns to break into Tier 1 accountsWatch",
        "top": 8256,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-17",
    "hex": "#001433",
    "alpha": 1,
    "cssValue": "rgb(0, 20, 51)",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Get data from the most complete data marketplace",
        "top": 3031,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "One contract to buy data from 200+ data and AI vendors in Clay’s marketplace. Create intent signals ",
        "top": 3147,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Anthropic",
        "top": 3511,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-18",
    "hex": "#46022F",
    "alpha": 1,
    "cssValue": "rgb(70, 2, 47)",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Launch new plays as fast as you have ideas",
        "top": 5335,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Trigger emails, ads, and more with integrations to your existing GTM tools. Write 1:1 messaging for ",
        "top": 5451,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "Rippling",
        "top": 5831,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-19",
    "hex": "#381005",
    "alpha": 1,
    "cssValue": "rgb(56, 16, 5)",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Put agents that know your business to work",
        "top": 3799,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Run GTM plays with agents that understand your business and accounts. Turn context into research, sc",
        "top": 3915,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "OpenAI",
        "top": 4279,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-20",
    "hex": "#102B03",
    "alpha": 1,
    "cssValue": "rgb(16, 43, 3)",
    "count": 5,
    "contexts": [
      {
        "tag": "h3",
        "text": "Build GTM plays on a visual canvas",
        "top": 4567,
        "property": "text"
      },
      {
        "tag": "p",
        "text": "Use clicks, code, or chat with Clay to build GTM plays you can easily see. Troubleshoot faster, coll",
        "top": 4683,
        "property": "text"
      },
      {
        "tag": "strong",
        "text": "ElevenLabs",
        "top": 5047,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-21",
    "hex": "#E0DEDC",
    "alpha": 1,
    "cssValue": "rgb(224, 222, 220)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 0,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-22",
    "hex": "#55534E",
    "alpha": 1,
    "cssValue": "rgb(85, 83, 78)",
    "count": 48,
    "contexts": [
      {
        "tag": "a",
        "text": "Automated inbound",
        "top": 9584,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-23",
    "hex": "#008BAD",
    "alpha": 1,
    "cssValue": "rgb(0, 139, 173)",
    "count": 2,
    "contexts": [
      {
        "tag": "div",
        "text": "GTM INFRASTRUCTURE",
        "top": 6103,
        "property": "text"
      },
      {
        "tag": "span",
        "text": "reps more productive",
        "top": 6180,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-24",
    "hex": "#395AFA",
    "alpha": 1,
    "cssValue": "rgb(57, 90, 250)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "Data",
        "top": 2983,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "complete data marketplace",
        "top": 3074,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start free trial",
        "top": 3597,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-25",
    "hex": "#B53D0A",
    "alpha": 1,
    "cssValue": "rgb(181, 61, 10)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "agents",
        "top": 3751,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "your business to work",
        "top": 3842,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start free trial",
        "top": 4365,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-26",
    "hex": "#CC089E",
    "alpha": 1,
    "cssValue": "rgb(204, 8, 158)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "ACTIVATION",
        "top": 5287,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "as you have ideas",
        "top": 5378,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start free trial",
        "top": 5917,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-27",
    "hex": "#808000",
    "alpha": 1,
    "cssValue": "rgb(128, 128, 0)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "orchestration",
        "top": 4519,
        "property": "background"
      },
      {
        "tag": "span",
        "text": "visual canvas",
        "top": 4610,
        "property": "text"
      },
      {
        "tag": "a",
        "text": "Start free trial",
        "top": 5133,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-28",
    "hex": "#CECECE",
    "alpha": 0.12156862745098039,
    "cssValue": "rgba(208, 208, 208, 0.12)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "0:00/3:30",
        "top": 7662,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-29",
    "hex": "#7B7974",
    "alpha": 1,
    "cssValue": "rgb(123, 121, 116)",
    "count": 123,
    "contexts": [
      {
        "tag": "svg",
        "text": "",
        "top": 1057,
        "property": "svg-stroke"
      },
      {
        "tag": "path",
        "text": "",
        "top": 1060,
        "property": "svg-stroke"
      },
      {
        "tag": "div",
        "text": "Find people data",
        "top": 2718,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-30",
    "hex": "#797972",
    "alpha": 0.14901960784313725,
    "cssValue": "rgba(123, 121, 116, 0.15)",
    "count": 72,
    "contexts": [
      {
        "tag": "div",
        "text": "Stevie CaseChief Revenue Officer",
        "top": 956,
        "property": "border"
      },
      {
        "tag": "button",
        "text": "Find people data",
        "top": 2707,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-31",
    "hex": "#FCC9AB",
    "alpha": 1,
    "cssValue": "rgb(252, 201, 171)",
    "count": 4,
    "contexts": [
      {
        "tag": "button",
        "text": "Automated Outbound",
        "top": 1648,
        "property": "control-background"
      },
      {
        "tag": "div",
        "text": "",
        "top": 3751,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-32",
    "hex": "#CBD810",
    "alpha": 1,
    "cssValue": "rgb(203, 216, 16)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Get a demo",
        "top": 705,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-33",
    "hex": "#D1CDC7",
    "alpha": 1,
    "cssValue": "rgb(209, 205, 199)",
    "count": 9,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 6272,
        "property": "background"
      },
      {
        "tag": "a",
        "text": "Visit Clay on LinkedIn",
        "top": 10324,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-34",
    "hex": "#BEDFFE",
    "alpha": 1,
    "cssValue": "rgb(190, 223, 254)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 2983,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-35",
    "hex": "#EEF773",
    "alpha": 1,
    "cssValue": "rgb(238, 247, 115)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 4519,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-36",
    "hex": "#F8B9E4",
    "alpha": 1,
    "cssValue": "rgb(248, 185, 228)",
    "count": 3,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 5287,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-37",
    "hex": "#F3F2ED",
    "alpha": 1,
    "cssValue": "rgb(243, 242, 237)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Get a demo",
        "top": 9,
        "property": "control-background"
      }
    ]
  },
  {
    "id": "color-38",
    "hex": "#BFBFBF",
    "alpha": 0.45098039215686275,
    "cssValue": "rgba(190, 190, 190, 0.45)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7442,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-39",
    "hex": "#FFFFFF",
    "alpha": 0.10196078431372549,
    "cssValue": "rgba(255, 255, 255, 0.1)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 767,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-40",
    "hex": "#D1CDC7",
    "alpha": 0.5019607843137255,
    "cssValue": "rgba(209, 205, 199, 0.5)",
    "count": 5,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7687,
        "property": "background"
      },
      {
        "tag": "div",
        "text": "©2026 Clay Labs Inc.Born in Brooklyn • Art by HudsonVisit Clay on LinkedInVisit Clay on YouTubeVisit",
        "top": 10272,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-41",
    "hex": "#429EFF",
    "alpha": 1,
    "cssValue": "rgb(66, 158, 255)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Community story",
        "top": 8613,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-42",
    "hex": "#FDAD15",
    "alpha": 1,
    "cssValue": "rgb(253, 173, 21)",
    "count": 1,
    "contexts": [
      {
        "tag": "a",
        "text": "Jobs",
        "top": 9666,
        "property": "::after-background"
      }
    ]
  },
  {
    "id": "color-43",
    "hex": "#000000",
    "alpha": 0.2,
    "cssValue": "rgba(0, 0, 0, 0.2)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7675,
        "property": "background"
      }
    ]
  },
  {
    "id": "color-44",
    "hex": "#A17BF9",
    "alpha": 1,
    "cssValue": "rgb(161, 123, 249)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "Conference",
        "top": 8350,
        "property": "text"
      }
    ]
  },
  {
    "id": "color-45",
    "hex": "#FFFFFF",
    "alpha": 0.2,
    "cssValue": "rgba(255, 255, 255, 0.2)",
    "count": 4,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 7442,
        "property": "border"
      }
    ]
  },
  {
    "id": "color-46",
    "hex": "#BFC4CD",
    "alpha": 1,
    "cssValue": "rgb(191, 196, 205)",
    "count": 1,
    "contexts": [
      {
        "tag": "div",
        "text": "",
        "top": 18,
        "property": "background"
      }
    ]
  }
]
```

### Extraction limits

- Font families are computed CSS declarations, not optical font identification.
- Colors are computed CSS converted by the browser to sRGB; image/video pixels and gradient stops are not sampled.
- Transparent colors are recorded with alpha but excluded from opaque palette role assignments.
- Only currently rendered DOM elements are sampled; closed shadow roots and iframe contents are excluded.

## Type, spacing, and shape language

- Spacing rhythm: Very generous, employing large margins and padding between major sections to allow the 3D artwork to breathe.
- Corner style: Highly rounded. Almost all containers, buttons, and form fields feature significant border-radius.
- Radius: Large radii on structural elements (cards, feature blocks) and fully pill-shaped (capsule) styling for many buttons and tags.
- Borders: Mostly borderless design relying on background colors to define spaces. When borders are used (e.g., search shortcut, secondary buttons), they are thin and subtle.
- Buttons: Solid fill with soft rounded or pill-shaped corners. Primary actions often use black or section-specific vibrant colors, while secondary actions use white or light gray.
- Content width: Centered, constrained max-width for textual content to maintain readability, while backgrounds and illustrative elements stretch wider.
- Density: Low density. The layout is spacious, prioritizing large imagery and typography over dense information packing.
- Evidence: Observation of large pastel blocks, heavily rounded corners on buttons and cards, absence of harsh borders, and generous white space around elements.

## Sections

Gallery section count: 9. Each entry corresponds to one gallery capture.

1. **Hero — Build systems to grow revenue** (Home)
   AI suggestion (98% confidence): Complete, substantial opening hero with distinctive 3D artwork, primary value proposition, dual CTAs, and an integrated customer proof panel.
   Capture: 1440×821px; page bounds 0–821px of 10415px; source section ID: `a42a2d01-63f5-4eb9-b61e-2f230e1fea22`; image: https://media.designdetails.io/library/4890af193a4f9300cf6b3dd74210d42f637bf984a1fa2e96509b4d336d3716eb/section-manual-a42a2d01-63f5-4eb9-b61e-2f230e1fea22-1792129872605.webp
   SECTION.md v3.2: `a42a2d01-63f5-4eb9-b61e-2f230e1fea22` (deterministic evidence; editorial review pending)
2. **Features — Clay Features** (Home)
   Reusable feature composition from Home, organized around “Clay Features”.
   Capture: 1440×535px; page bounds 797–1332px of 10415px; source section ID: `e3720a7d-8661-4af2-b4d2-c1a80b6c0d6b`; image: https://media.designdetails.io/library/de671ab360c008e4c4ae045d8b82ece7a013a469c11caaffef0c7c0ca66f976a/section-manual-e3720a7d-8661-4af2-b4d2-c1a80b6c0d6b-1792129880753.webp
   SECTION.md v3.2: `e3720a7d-8661-4af2-b4d2-c1a80b6c0d6b` (deterministic evidence; editorial review pending)
3. **Features — What do you want to build?** (Home)
   Reusable feature composition from Home, organized around “What do you want to build?”.
   Capture: 1440×519px; page bounds 2352–2871px of 10415px; source section ID: `1cccce6f-b4c9-4a12-bbdd-dc4d075cc411`; image: https://media.designdetails.io/library/9270a66d27bb6323cebc1c12a683b9d2edadf8a0d098c6b9375d1bf4efde4c36/section_crop-1cccce6f-2026-10-16T05-19-28-718Z.webp
   SECTION.md v3.2: `1cccce6f-b4c9-4a12-bbdd-dc4d075cc411` (deterministic evidence; editorial review pending)
4. **Features — Build, test, and scale any GTM play you can imagine.** (Home)
   Reusable feature composition from Home, organized around “Build, test, and scale any GTM play you can imagine.”.
   Capture: 1440×3184px; page bounds 2871–6055px of 10415px; source section ID: `b7218611-45ca-4c48-bd4d-6740c103412a`; image: https://media.designdetails.io/library/bb19b491d4a7c07f830561f96152b6cd1d08c0383ed9e5568b0b0870dcbae28a/section_crop-b7218611-2026-10-16T05-19-29-665Z.webp
   SECTION.md v3.2: `b7218611-45ca-4c48-bd4d-6740c103412a` (deterministic evidence; editorial review pending)
5. **Features — GTM engineers build on Clay** (Home)
   AI suggestion (96% confidence): Self-contained product feature showcase with a clear heading, explanatory copy, workflow tabs, and layered lead-scoring interface visuals.
   Capture: 1440×1032px; page bounds 1347–2379px of 10415px; source section ID: `7bd1ab95-c34a-48d7-8436-455585575211`; image: https://media.designdetails.io/library/4914e540652b91242de80ddc4cffd11c4bd4ae6f5578c97b77a028b9dd243bec/7bd1ab95-c34a-48d7-8436-455585575211.webp
   SECTION.md v3.2: `7bd1ab95-c34a-48d7-8436-455585575211` (deterministic evidence; editorial review pending)
6. **Features — GTM Infrastructure Productivity Feature** (Home)
   AI suggestion (96% confidence): Complete feature section with category label, benefit-led headline, supporting copy, customer proof, CTA, and a large cohesive product illustration.
   Capture: 1440×885px; page bounds 6055–6940px of 10415px; source section ID: `af119cda-6b3e-45fe-b8ad-632069be42f6`; image: https://media.designdetails.io/library/4c0eb5849bd884f6a0d5135d531431a94fe14a4d39da3e4193d3c35c62001906/af119cda-6b3e-45fe-b8ad-632069be42f6.webp
   SECTION.md v3.2: `af119cda-6b3e-45fe-b8ad-632069be42f6` (deterministic evidence; editorial review pending)
7. **Testimonials — Teams That Grow With Clay** (Home)
   AI suggestion (90% confidence): Self-contained customer-story section with a clear testimonial heading and prominent framed video, ending before the next learning-resources section begins.
   Capture: 1440×810px; page bounds 7000–7810px of 10415px; source section ID: `c5c103a9-667d-415d-bfa2-6c0537649ad9`; image: https://media.designdetails.io/library/b5320f2c2e081c8002fa6dc58c802d85ecbd0c8cc7a6d8ae3547f8e3e7753703/c5c103a9-667d-415d-bfa2-6c0537649ad9.webp
   SECTION.md v3.2: `c5c103a9-667d-415d-bfa2-6c0537649ad9` (deterministic evidence; editorial review pending)
8. **Editorial — GTM Engineering Resource Grid** (Home)
   AI suggestion (97% confidence): Complete editorial discovery section with a clear heading and a varied but cohesive grid of conference, university, livestream, community, and career-story content cards.
   Capture: 1440×944px; page bounds 7865–8809px of 10415px; source section ID: `ee0d0d2f-27ce-4606-8e5e-2d663979bc2b`; image: https://media.designdetails.io/library/c97e35543fc6d159590bcc971e136d66024a61811fead17611d0eea8813a5a0f/ee0d0d2f-27ce-4606-8e5e-2d663979bc2b.webp
   SECTION.md v3.2: `ee0d0d2f-27ce-4606-8e5e-2d663979bc2b` (deterministic evidence; editorial review pending)
9. **Footer — Playground CTA and Sitemap Footer** (Home)
   AI suggestion (94% confidence): Complete, distinctive page-ending system combining a centered trial/demo CTA, immersive illustrated landscape, comprehensive sitemap panel, legal links, branding, and social controls.
   Capture: 1440×1446px; page bounds 8969–10415px of 10415px; source section ID: `aaedd49c-4020-42b7-b919-33828d8c5976`; image: https://media.designdetails.io/library/7d9ef36662064e928c45f5c87599519e065f3ceb2682e054f7ee743f6ddf71cd/aaedd49c-4020-42b7-b919-33828d8c5976.webp
   SECTION.md v3.2: `aaedd49c-4020-42b7-b919-33828d8c5976` (deterministic evidence; editorial review pending)

## Capture and motion evidence

- Desktop screenshot: https://media.designdetails.io/library/d61b6d271f7c566b0a08908b200bfb95fe74579a0fd0ed4108785836a222a99f/desktop_full-d5216013-2026-10-16T05-19-17-314Z.webp
- Mobile screenshot: https://media.designdetails.io/library/1e1a8dc66d2c8a702bfa7d103aafa4a12657710b15ba9afa8a4722328e056a87/mobile_full-d5216013-2026-10-16T05-20-14-173Z.webp
- Open Graph image: https://media.designdetails.io/library/6d79af5a3541d479cb199928f0cb7f4d1d43aa1c045f0114d20ee2ffd6e54cc3/og_image-d5216013-2026-10-16T05-19-25-114Z.webp
- Full-page video: https://media.designdetails.io/library/9f759bd1e1d0bf523b462ed8af3b54b078b6bba0e7acc4d9ff2f52141a08ef4b/motion-1792129020299.mp4
- Video poster: https://media.designdetails.io/library/280df377372bae25fed2110c41b3dff6c932be5a56172ca91f55e9bfeb289fb3/motion-poster-1792129020299.webp
- Motion status: Recording attached. Consult the motion score and section motion records; do not infer exact easing from frames alone.

## Implementation contract

- Treat computed CSS values, screenshot dimensions, and section bounds as measured evidence.
- Treat typography roles, palette roles, style labels, quality scores, and prose analysis as model or curator judgments.
- Rebuild the page in the listed section order. Request SECTION.md v3.2 using the listed ID. Promoted IDs include editorial observation and judgment; raw gallery IDs still return deterministic geometry, site design facts, media treatment, and explicit evidence gaps.
- Do not invent exact responsive behavior, motion curves, or hidden interaction states when they were not captured.

## Reusable components

- Navigation Bar
- Hero With Background Imagery
- Logo Strip
- Product UI
- Input Field
- Feature Collection
- Video Frame
- Editorial Card
- Primary Button
- Outline Button
- Footer
- Tag
- Interactive Command Menu Trigger
- Pastel Feature Blocks

## Quality rubric

Overall: 62.63/100 (Good)
Evidence coverage: 80%
Judge tier: Good
Verdict: Clay pairs a genuinely distinctive, consistently maintained bespoke 3D illustration system with disciplined per-section color coordination and content-integrated proof points, producing a cohesive playful brand identity that rises above a typical flat SaaS page. But the underlying page architecture, card patterns, and resource grid remain conventional marketing-template moves, and motion craft cannot be verified beyond the presence of looping animation, keeping the overall execution in the 'good' range rather than 'strong' or higher.

- Typography (15%): 60 — A single custom variable font (Roobertvf) is used with disciplined, wide-ranging scale (88px display down to 9.6px uppercase labels) and tight negative tracking on large sizes, giving a clear, competent hierarchy. However the pairing and scale choices (large bold display, mid-weight subheads, 16px body) are conventional SaaS practice rather than a distinctive typographic idea, and no secondary/contrast typeface or unusual pairing is evident.
- Color (10%): 64 — Each feature block carries its own coordinated micro-palette (pastel surface + matching dark text color + matching accent/button/tag color), e.g. blue surface #F0F8FF with #001433 text and #395AFA button for Data, pink #FFF0FA with #46022F text and #CC089E accents for Activation. This is a genuine systemic color design decision repeated consistently across four sections, not a one-off accent.
- Layout (20%): 59 — Spacious, legible grid with alternating full-bleed pastel blocks and a constrained text column is executed cleanly, but the overall sequence (hero → trust-logo strip → feature blocks → testimonial video → resource card grid → footer) is a highly familiar SaaS marketing template structure with no structural surprise or unconventional grid logic.
- Motion (20%): Inconclusive — Observation confirms recurring looping 3D animations (hero scene, feature-card loops, footer ball-pit physics) and an entrance animation for a product UI mockup, indicating motion is used as a consistent brand device across multiple sections. However, no evidence establishes easing quality, frame smoothness, scroll-trigger precision, or interaction responsiveness, so craft-level motion claims cannot be scored.
- Originality (25%): 66 — The bespoke 3D toy/physics-illustration system (funnels, seesaws, a robot, a marble-run cube, a ball pit) built as a recurring visual metaphor tied to specific product concepts (data funneling, agent 'thinking', orchestration paths, activation triggers) is a genuinely distinct, hard-to-template idea sustained across the whole page, including the footer. This is more substantive than a single hero graphic. However, playful claymation-style 3D illustration is now a well-established SaaS/B2B trend (seen across many competitors), and the surrounding page architecture, buttons, and card patterns are otherwise conventional, capping how far originality can go.
- Content (10%): 64 — Customer proof (named brands with specific quantified outcomes) is woven directly into each visual block rather than siloed in a generic testimonial carousel — each feature pairs a mini case-stat ('Mistral AI cut TAM time from 2 months to 10 days', 'Vanta cut post-call follow-up from 3 days to <1') with its matching color-coded block, and the trust-logo strip surfaces metrics (+140%, 2x, 3x) directly over customer logos.

Coverage: 80% of the current weighted rubric. Compare overall scores only at similar evidence coverage.

Formula: weighted mean of scored axes — Typography 15%, Color 10%, Layout 20%, Motion 20%, Originality 25%, Content 10%. Inconclusive and not-assessed axes are excluded and coverage is shown explicitly.

## Verification checklist

- [x] Score evidence
- [x] Design tokens
- [x] Functional palette
- [x] Normalized sections
- [x] Reusable components
- [x] Typography roles

## Curator notes

A playful 3D toy landscape of chutes, funnels and little characters sits above bold black headlines, softening a technical data product into something approachable. Pastel colour-blocked sections and a repeating rail-and-ball motif pace the long scroll, while dense dashboard screenshots give proof the system is real and trustworthy.

## Usage guidance

Use this record as design evidence. Combine it with other references and create an original implementation; do not reproduce the source website or its proprietary copy and assets.