Clay

version: alpha name: Clay-design-analysis description: A vibrant claymation-meets-data interface for Clay.com (GTM data-orchestration platform). Anchors on white canvas with dark-navy primary CTAs, custom rounded display type, and saturated single-color feature cards — hot pink, deep teal, lavender, peach, ochre — that punctuate long-scroll explainer pages. Brand voltage comes from 3D-rendered claymation illustrations (mountains, characters, mascots) used as full-bleed hero artifacts and the bright multi-color card surfaces showing product UI fragments.

colors: primary: "#0a0a0a" primary-active: "#1f1f1f" primary-disabled: "#e5e5e5" ink: "#0a0a0a" body: "#3a3a3a" body-strong: "#1a1a1a" muted: "#6a6a6a" muted-soft: "#9a9a9a" hairline: "#e5e5e5" hairline-soft: "#f0f0f0" canvas: "#fffaf0" surface-soft: "#faf5e8" surface-card: "#f5f0e0" surface-strong: "#ebe6d6" surface-dark: "#0a1a1a" surface-dark-elevated: "#1a2a2a" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#a0a0a0" brand-pink: "#ff4d8b" brand-teal: "#1a3a3a" brand-lavender: "#b8a4ed" brand-peach: "#ffb084" brand-ochre: "#e8b94a" brand-mint: "#a4d4c5" brand-coral: "#ff6b5a" success: "#22c55e" warning: "#f59e0b" error: "#ef4444"

typography: display-xl: fontFamily: "Plain Black, Inter, sans-serif" fontSize: 72px fontWeight: 500 lineHeight: 1 letterSpacing: -2.5px display-lg: fontFamily: "Plain Black, Inter, sans-serif" fontSize: 56px fontWeight: 500 lineHeight: 1.05 letterSpacing: -2px display-md: fontFamily: "Plain Black, Inter, sans-serif" fontSize: 40px fontWeight: 500 lineHeight: 1.1 letterSpacing: -1px display-sm: fontFamily: "Plain Black, Inter, sans-serif" fontSize: 32px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.5px title-lg: fontFamily: "Inter, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.3 letterSpacing: -0.3px title-md: fontFamily: "Inter, sans-serif" fontSize: 18px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "Inter, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.55 letterSpacing: 0 caption: fontFamily: "Inter, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0 caption-uppercase: fontFamily: "Inter, sans-serif" fontSize: 12px fontWeight: 600 lineHeight: 1.4 letterSpacing: 1.5px button: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1 letterSpacing: 0 nav-link: fontFamily: "Inter, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0

rounded: xs: 6px sm: 8px md: 12px lg: 16px xl: 24px pill: 9999px full: 9999px

spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 96px

components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 44px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.md}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.md}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 44px button-on-color: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.md}" padding: 12px 20px height: 44px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.button}" text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px hero-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-xl}" padding: 96px hero-illustration-card: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" rounded: "{rounded.xl}" feature-card-pink: backgroundColor: "{colors.brand-pink}" textColor: "{colors.on-primary}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px feature-card-teal: backgroundColor: "{colors.brand-teal}" textColor: "{colors.on-dark}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px feature-card-lavender: backgroundColor: "{colors.brand-lavender}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px feature-card-peach: backgroundColor: "{colors.brand-peach}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px feature-card-ochre: backgroundColor: "{colors.brand-ochre}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px feature-card-cream: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.xl}" padding: 32px product-mockup-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 24px testimonial-card: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 24px pricing-tier-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px pricing-tier-card-featured: backgroundColor: "{colors.brand-teal}" textColor: "{colors.on-dark}" typography: "{typography.title-lg}" rounded: "{rounded.lg}" padding: 32px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.md}" padding: 12px 16px height: 44px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.md}" category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.nav-link}" rounded: "{rounded.pill}" padding: 8px 16px category-tab-active: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.pill}" badge-pill: backgroundColor: "{colors.surface-card}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px expert-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.lg}" padding: 24px cta-band-illustrated: backgroundColor: "{colors.surface-soft}" textColor: "{colors.ink}" typography: "{typography.display-md}" rounded: "{rounded.xl}" padding: 80px footer: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 80px

概述

Clay.com是GTM数据类别中最有趣的B2B SaaS接口。基础氛围是* 奶油色白色帆布 * （ {colors.canvas} — #fffaf0 ） ，以深海水墨类型和* * 3D渲染粘土插图* * （山脉、吉祥物人物、桃色/赭色/薰衣草色景观）作为主导品牌电压。大多数数据平台品牌在网格和渐变方面都很酷，而Clay则倾向于手工制作的3D插图和饱和单色功能卡。

TYPE VOICE RUN * * Plain Black * * （或用Inter weight 500-600代替） —一个自定义的圆形显示面，用于非常大的尺寸（ 72px英雄） ，具有负字母间距。体型在标准重量下使用Inter。显示重量保持在500 ，永远不会更大胆—字体的圆形字符使其无需重量即可获得温暖。

组件电压来自6色调色板中的* 饱和单色功能卡 * ：热粉色、深青色、薰衣草色、桃色、赭色和奶油色卡片。每张卡片都小规模地显示产品UI片段— Claygent代理运行、定序器流、CRM浓缩输出。彩色卡片是每个长滚动页面上的主要视觉元素。

关键特性

• 奶油色白色帆布（ {colors.canvas} — #fffaf0 ）。温暖将Clay与凉爽的灰色竞争对手网站区分开来。
• 深海军蓝/黑色主CTA （ {colors.primary} — #0a0a0a ）。按钮圆形{rounded.md} （ 12px ） —友好的现代但不是药丸。
• 6色饱和功能卡调色板： {colors.brand-pink}、{colors.brand-teal}、{colors.brand-lavender}、{colors.brand-peach}、{colors.brand-ochre}、{colors.surface-card} （奶油色）。
• 3D粘土插图（山脉、人物、抽象形状）是品牌最知名的视觉元素。
• 自定义圆形Plain Black显示字体，重量为500 ，显示尺寸的字母间距为-1至-2.5px。
• 边框半径很大： {rounded.md} （ 12px ）用于按钮+输入， {rounded.lg} （ 16px ）用于内容卡， {rounded.xl} （ 24px ）用于功能卡。较大的半径与圆形显示类型的字符匹配。
• 小规模嵌入在彩色卡片中的产品UI片段—代理运行日志、定序器流、丰富结果。
• 主要乐队之间的节奏{spacing.section} （ 96px ）。
• 底部为奶油色（ {colors.surface-soft} ） —粘土不使用深色底部。即使是封闭的带子也能保持温暖的光线。

配色

品牌与点缀色

• • 主要 * ({colors.primary} — #0a0a0a) ：所有主要CTA ， h1/h2墨水类型。近黑色，略带温暖。
• • 品牌粉红色 * （ {colors.brand-pink} — #ff4d8b ） ：热粉色特征卡表面。Sequencer/Outbound功能页面。
• • 品牌蓝绿色 * ({colors.brand-teal} — #1a3a3a) ：深蓝绿色特征卡。通常是特色定价等级。
• • 品牌薰衣草 * （ {colors.brand-lavender} - #b8a4ed ） ：柔和的薰衣草特色卡。
• • • Brand Peach * * ({colors.brand-peach} — #ffb084) ：温暖的桃子特色卡。
• • 品牌赭石 * （ {colors.brand-ochre} — #e8b94a ） ：芥末/赭石特色卡片和插图口音。
• • 品牌薄荷 * （ {colors.brand-mint} - #a4d4c5 ） ：插图和小徽章上的薄荷口音。
• • 品牌珊瑚色 * ({colors.brand-coral} — #ff6b5a) ：珊瑚色突出显示。

外观

• • 帆布 * （ {colors.canvas} — #fffaf0 ） ：默认页面地板。奶油色白色。
• • 表面柔软 * ({colors.surface-soft} - #faf5e8) ：页脚和CTA频段背景。
• • 表面卡 * ({colors.surface-card} - #f5f0e0) ：奶油功能卡、推荐卡。
• • 表面强度 * （ {colors.surface-strong} — #ebe6d6 ） ：更强的奶油，适用于强调的乐队。
• • 表面深色 * ({colors.surface-dark} - #0a1a1a) ：偶尔使用深蓝绿色近黑色暗卡（罕见）。
• • 表面暗色高架 * （ {colors.surface-dark-elevated} — #1a2a2a ） ：高架暗牌。
• • 发际线 * ({colors.hairline} — #e5e5e5) ：卡片和输入上有1px边框。

文本

• • 墨迹 * ({colors.ink} — #0a0a0a) ：标题和主文本。
• • • Body Strong * * ({colors.body-strong} - #1a1a1a) ：强调正文，前导段落。
• • 正文 * ({colors.body} — #3a3a3a) ：默认运行文本。
• • 静音 * ({colors.muted} - #6a6a6a) ：子标题、面包屑、页脚正文。
• • 静音软 * （ {colors.muted-soft} - #9a9a9a ） ：标题，精细打印。
• • • On Primary/On Dark * * ({colors.on-primary} - #ffffff) ：主按钮上的文本+深色功能卡（青色）。

语义色色

• • 成功 * ({colors.success} — #22c55e) ：成功状态。
• • 警告 * ({colors.warning} — #f59e0b) ：警告标注。
• • 错误 * （ {colors.error} — #ef4444 ） ：验证错误。

字体排版

字体

系统为标题运行* * Plain Black * * （自定义圆角显示面） ，为正文、导航和UI运行* * Inter * *。Plain Black的重量为500 ，负字母间距处理每个显示标题； Inter处理其余部分。回退堆栈对两者都运行Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。

分层结构

原理

Plain Black重量500 +负字母间距是品牌声音。重量700读作夸夸其谈；字体的圆形字符增加了温暖，更大胆的重量会变平。

Body-vs-display拆分功能： Plain Black用于Plain Black时刻（标题） ， Inter用于其他所有内容（运行文本、UI、按钮）。将它们混合是一种系统违规行为。

关于字体替换的说明

如果Plain Black不可用，重量为500且字母间距为-0.05 em的* * Inter * 是可用的近似值。 * Söhne Breit * * （重量为Buch ）是获得许可的替代品。重量为500的* * Recoleta * *具有类似的圆形显示保暖性。

布局

间距系统

• • *基本单位： * * 4像素。
• • *代币： * * {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 96px。
• • *部分填充： * *主要编辑带之间的{spacing.section} （ 96px ）。
• • *卡片内部填充： * * {spacing.xl} （ 32px ）用于功能卡和定价层； {spacing.lg} （ 24px ）用于推荐卡和产品模型卡。

网格与容器

• • *最大内容宽度： * * ~ 1280px居中。
• • *编辑正文： * *单个12列网格； hero通常使用7/5分割（ h1左，插图右）。
• • *功能卡网格： * *桌面为3向上，平板电脑为2向上，手机为1向上。
• • *定价网格： * *桌面端为3-4 ，移动端为1-。

空白理念

Clay在大型圆形显示标题和饱和功能卡片周围使用宽大的空格。奶油画布+彩色卡片+ 3D插图营造出竞争数据平台网站所缺乏的俏皮温暖。

海拔高度和深度

该系统不使用沉重的阴影。深度来自奶油帆布和明亮的功能卡片之间的饱和颜色对比。

装饰深度

• • • 3D粘土插图* * —山脉、人物、吉祥物以手工制作的3D风格呈现。品牌最知名的深度元素。不是令牌—这些是图示资产。
• • 吉祥物人物 *在功能卡和CTA中显示为内联人物。

形状

边框半径缩放

组成部分

顶部菜单

• • top-nav * * —奶油导航栏固定在顶部。64px高， {colors.canvas}背景。左侧带有Clay标志+文字标记，主水平菜单（产品，解决方案，资源，定价，客户）中心，右侧集群带有“登录” + “免费试用” {component.button-primary}。{typography.nav-link} （ Inter 14px/500 ）中的菜单项。

纽扣

• • button-primary * * —背景{colors.primary} （近黑色） ，文本{colors.on-primary} （白色） ，类型{typography.button} （ Inter 14px/600 ） ，填充12px × 20px ，高度44px ，圆角{rounded.md} （ 12px ）。
• • button-secondary * * —带发纹轮廓的奶油色按钮。背景{colors.canvas} ，文本{colors.ink} ， 1px发际线边框。
• • button-on-color * * —白色按钮用于饱和品牌色功能卡。形状与原色相同，但倒置（白色背景，墨迹文本）。
• • button-text-link * * —内联文本按钮，无背景。用于“登录”和内联链接CTA。
• • text-link * * —带下划线的{colors.ink}中的内联正文链接。

卡牌和容器

• • hero-band * * — 7-5网格的奶油画布英雄：左侧为h1 +副标题+按钮行，右侧为3D粘土插图。垂直填充{spacing.section} （ 96px ）。
• • hero-illustration-card * * —持有3D粘土插图（山脉、吉祥物人物、抽象形状）的右侧文物。背景{colors.surface-soft} ，圆角{rounded.xl} （ 24px ）。插图是神器。
• • feature-card-pink * / * feature-card-teal * / * feature-card-lavender * / * feature-card-peach * / * feature-card-ochre * * —饱和单色特征卡。背景因变体而异；圆角{rounded.xl} （ 24px ） ；填充{spacing.xl} （ 32px ）。每张卡片都带有{typography.title-md}中的h3、主体描述和产品UI片段或吉祥物插图。文本颜色在粉色和蓝绿色卡片上翻转为{colors.on-dark} （白色） ，在薰衣草/桃色/赭色卡片上翻转为{colors.ink} （深色） （较浅的饱和度对深色文本有足够的对比度）。
• • feature-card-cream * * — {colors.surface-card}上的小键功能卡变体。用于不保证饱和颜色的较少强调的功能。
• • product-mockup-card * * —显示实际Clay产品UI的卡片（ Claygent agent run、sequencer flow、CRM enrichment tables ）。背景{colors.canvas} ，发际线边框，圆形{rounded.lg} ，填充{spacing.lg} （ 24px ）。
• • testimonial-card * * —客户报价卡。背景{colors.surface-card} （奶油色） ，圆角{rounded.lg} ，填充{spacing.lg} （ 24px ）。顶行具有头像+名称+角色；下面是{typography.body-md}中的推荐。
• • pricing-tier-card * * —标准等级卡。背景{colors.canvas}带发际线，圆形{rounded.lg} ，填充{spacing.xl} （ 32px ）。
• • pricing-tier-card-featured * * —特色会员等级转换为{colors.brand-teal} （深蓝绿色）。青色表面是特色信号。
• • expert-card * * —用于/experts页面。背景{colors.canvas}带发际线，圆形{rounded.lg} ，填充{spacing.lg}。顶部带有头像、专家名称、专业化和“预订会话”链接。

输入框与表单

• • text-input * * —背景{colors.canvas} ，文本{colors.ink} ，类型{typography.body-md} ，圆角{rounded.md} （ 12px ） ，填充12px × 16px ，高度44px。1px发际线边框。
• • text-input-focused * * —边框变厚为墨迹以突出显示。

标签/徽标

• • category-tab * * + * * category-tab-active * * —子导航中的药丸形标签。非活动：透明+静音文本。活动：奶油卡片背景+墨水文本。内边距8px × 16px。
• • badge-pill * * — {typography.caption} （ 13px/500 ）小奶油填充丸标签，圆角{rounded.pill}。

CTA/Footer

• • cta-band-illustrated * * —前脚“将您的成长理念变为现实”乐队。背景{colors.surface-soft} ，圆角{rounded.xl} ，内边距80px。带有{typography.display-md}中的h2、子线和{component.button-primary} —通常与吉祥物或场景的3D插图配对。
• • footer * * —奶油色页脚（与大多数SaaS网站不同，不是深海军蓝）。背景{colors.surface-soft} ，文本{colors.body}。4列链接列表。垂直填充80px。通常在最底部有一个水平风格的3D山地插图— Clay的标志性页脚山。

注意事项

做

• 将每一页锚定在奶油画布（ {colors.canvas} — #fffaf0 ）上。温暖的色调将粘土与冷灰色数据站点区分开来。
• 使用3D粘土插图作为英雄文物。手工制作的3D人物和山脉是品牌。
• 在整个页面上循环播放饱和功能卡片—粉→蓝绿色→薰衣草→桃红→色→奶油。连续两次重复相同的颜色将被视为心律失常。
• 使用重量为500的Plain Black ，在每个显示标题上使用负字母间距。
• 在饱和功能卡中显示产品UI片段。品牌电压由产品驱动，而不是抽象的。
• 使用奶油色页脚（非深色）。Clay故意用温暖的奶油而不是标准的黑脚SaaS模板关闭页面。
• 使用{spacing.section} （ 96px ）垂直节奏锚定每个乐队。

不该做的事

• 请勿将凉爽的灰色用于画布。奶油色是不容商榷的。
• 请勿使用第7张品牌色卡。6色调色板足够饱和。
• 请勿加粗显示重量超过500。Plain Black在700读作夸大其词。
• 请勿连续两次重复同一品牌颜色的卡片。
• 不要用平面矢量艺术来代替粘土插图。手工制作的3D角色是品牌声音。
• 请勿使用深色页脚。奶油页脚是系统热通式起搏的一部分。
• 不要在系统已经编码的内容之外添加悬停状态样式。

自适应条件

断点

触控目标

• {component.button-primary}至少44 × 44px （与WCAG AAA匹配）。
• {component.text-input}高度为44px。

折叠策略

• 顶部导航在< 768px时折叠到汉堡包。
• 手机上的Hero 7-5网格→单列。
• 特征卡网格减少列而不是缩放。
• 饱和功能卡在每个断点都保留彩色填充。
• 定价会员等级卡折叠4 → 2 → 1。

迭代指南

1. 一次只关注一个组件。引用其YAML键({component.feature-card-pink}, {component.pricing-tier-card-featured})。
2. 为该功能选择合适的品牌颜色卡：粉红色用于出站/定序器，蓝绿色用于企业/特色，薰衣草色用于AI代理产品，桃红色用于一般SaaS保暖，赭色用于社区/专家。
3. 现有组件的变体（ -active、-disabled ）作为单独的条目存在。
4. 在任何地方使用{token.refs} —切勿使用内联十六进制。
5. 切勿将鼠标悬停在文档
6. 显示标题保持Plain Black 500为负字母间距。车身支架Inter 400。
7. 奶油色调色板是一个系统合同—不要添加深色页脚。

已知缺口

• Plain Black授权给Clay ，不可作为公共网络字体使用； Inter权重500 ，负字母间距是最接近的替代品。
• 3D粘土插图是委托资产，而不是系统令牌—它们是按页面呈现的。
• 吉祥物人物（在整个网站上重复出现的命名人物）是插图资产；他们的确切血统和命名没有在代币中正式化。
• 动画和过渡时间（滚动上的3D插图视差、特征卡入口动画）不在范围内。
• 未提取超出{component.text-input-focused}的表单验证状态。
• 实际的Clay产品表面（应用内数据表、公式编辑器、代理生成器）与营销网站共享一些令牌，但添加了许多超出范围的产品特定组件。