# DESIGN REFERENCE: clay.com --- ## METADATA ```yaml version: 1.0.0 generated: 2026-07-10 source_url: https://clay.com analysis_timestamp: 2026-07-10T16:30:00Z design_epoch: 2025/2026 accessibility_level: WCAG 2.1 AA (inferred) mobile_first: true framework_detected: React (inferred) design_system_used: Clay Design System (custom) core_philosophy: playful‑premium GTM data platform, warm‑cream canvas with 3D claymation illustrations and saturated single‑color feature cards ``` --- ## BRAND IDENTITY ### Brand Essence ``` 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. ``` ### Visual Hierarchy Principles ``` - Primary weight: Display headlines (Plain Black 500) — large, rounded, editorial - Secondary weight: Saturated feature cards (6‑color palette) — visual anchors - Tertiary weight: Body text (Inter) and UI elements — clean, readable - 3D claymation illustrations provide emotional depth and brand character - The cream canvas provides warmth and differentiates from cool‑gray competitors ``` ### Emotional Tone ``` Primary emotion: Playful Secondary emotion: Trustworthy Overall mood: Warm, energetic, hand‑crafted, premium — communicates data sophistication without feeling cold or corporate ``` --- ## TYPOGRAPHY SYSTEM ### Primary Font Family (Display) ```yaml name: Plain Black (custom rounded display face) fallback: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 500 (display headlines) styles_used: normal usage: Display headlines (h1, h2, h3) — rounded character provides warmth ``` ### Secondary Font Family (Body + UI) ```yaml name: Inter fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif weights_used: 400, 500, 600 styles_used: normal usage: Body text, navigation, UI elements, buttons ``` ### Typographic Scale ```yaml display_xl: { size: 4.5rem, weight: 500, line-height: 1, tracking: -0.15625rem } # 72px, Plain Black display_lg: { size: 3.5rem, weight: 500, line-height: 1.05, tracking: -0.125rem } # 56px, Plain Black display_md: { size: 2.5rem, weight: 500, line-height: 1.1, tracking: -0.0625rem } # 40px, Plain Black display_sm: { size: 2rem, weight: 500, line-height: 1.15, tracking: -0.03125rem } # 32px, Plain Black title_lg: { size: 1.5rem, weight: 600, line-height: 1.3, tracking: -0.01875rem } # 24px, Inter title_md: { size: 1.125rem, weight: 600, line-height: 1.4, tracking: 0 } # 18px, Inter title_sm: { size: 1rem, weight: 600, line-height: 1.4, tracking: 0 } # 16px, Inter body_md: { size: 1rem, weight: 400, line-height: 1.55, tracking: 0 } # 16px, Inter body_sm: { size: 0.875rem, weight: 400, line-height: 1.55, tracking: 0 } # 14px, Inter caption: { size: 0.8125rem, weight: 500, line-height: 1.4, tracking: 0 } # 13px, Inter caption_uppercase: { size: 0.75rem, weight: 600, line-height: 1.4, tracking: 0.09375rem } # 12px, Inter button: { size: 0.875rem, weight: 600, line-height: 1, tracking: 0 } # 14px, Inter nav_link: { size: 0.875rem, weight: 500, line-height: 1.4, tracking: 0 } # 14px, Inter ``` ### Letter Spacing Classes ```yaml tight: -0.15625rem to -0.03125rem (scales with display sizes) normal: 0 wide: 0.09375rem (caption uppercase) ``` --- ## COLOR ARCHITECTURE ### Primary Palette (Cream Canvas Base) ```yaml primary: { hex: #0A0A0A, rgb: (10,10,10), usage: Primary CTAs, h1/h2 ink type, near‑black with slight warmth } primary_active: { hex: #1F1F1F, rgb: (31,31,31), usage: Active/pressed states } primary_disabled: { hex: #E5E5E5, rgb: (229,229,229), usage: Disabled states } ``` ### Canvas & Surfaces (Warm Cream) ```yaml canvas: { hex: #FFFAF0, rgb: (255,250,240), usage: Default page floor — cream‑tinted white } surface_soft: { hex: #FAF5E8, rgb: (250,245,232), usage: Footer, CTA bands, soft surfaces } surface_card: { hex: #F5F0E0, rgb: (245,240,224), usage: Cream feature cards, testimonial cards } surface_strong: { hex: #EBE6D6, rgb: (235,230,214), usage: Emphasized cream bands } surface_dark: { hex: #0A1A1A, rgb: (10,26,26), usage: Teal‑tinted near‑black (rare) } surface_dark_elevated: { hex: #1A2A2A, rgb: (26,42,42), usage: Elevated dark cards (rare) } ``` ### Brand Color Palette (6‑Color Feature Cards) ```yaml brand_pink: { hex: #FF4D8B, rgb: (255,77,139), usage: Feature cards — sequencer/outbound pages, hot pink surface } brand_teal: { hex: #1A3A3A, rgb: (26,58,58), usage: Feature cards — featured pricing tier, deep teal surface } brand_lavender: { hex: #B8A4ED, rgb: (184,164,237), usage: Feature cards — AI/agent products, soft lavender surface } brand_peach: { hex: #FFB084, rgb: (255,176,132), usage: Feature cards — general SaaS warmth, peach surface } brand_ochre: { hex: #E8B94A, rgb: (232,185,74), usage: Feature cards — community/experts, mustard surface } brand_mint: { hex: #A4D4C5, rgb: (164,212,197), usage: Illustration accents, small badges } brand_coral: { hex: #FF6B5A, rgb: (255,107,90), usage: Highlight accents } ``` ### Text Colors ```yaml ink: { hex: #0A0A0A, rgb: (10,10,10), usage: Headlines and primary text } body_strong: { hex: #1A1A1A, rgb: (26,26,26), usage: Emphasized body, lead paragraphs } body: { hex: #3A3A3A, rgb: (58,58,58), usage: Default running text } muted: { hex: #6A6A6A, rgb: (106,106,106), usage: Sub‑headings, breadcrumbs, footer body } muted_soft: { hex: #9A9A9A, rgb: (154,154,154), usage: Captions, fine print } on_primary: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on primary buttons } on_dark: { hex: #FFFFFF, rgb: (255,255,255), usage: Text on dark feature cards (teal, pink) } on_dark_soft: { hex: #A0A0A0, rgb: (160,160,160), usage: Soft text on dark cards } hairline: { hex: #E5E5E5, rgb: (229,229,229), usage: 1px borders on cards and inputs } hairline_soft: { hex: #F0F0F0, rgb: (240,240,240), usage: Soft borders } ``` ### Semantic Colors ```yaml success: { hex: #22C55E, rgb: (34,197,94), usage: Success states } warning: { hex: #F59E0B, rgb: (245,158,11), usage: Warning callouts } error: { hex: #EF4444, rgb: (239,68,68), usage: Validation errors } ``` ### Color Relationships ```yaml contrast_ratios: text_on_primary: 15.4:1 (white on #0A0A0A) text_on_canvas: 12.1:1 (#0A0A0A on #FFFAF0) text_on_pink: 4.6:1 (white on #FF4D8B) text_on_teal: 14.5:1 (white on #1A3A3A) text_on_lavender: 2.8:1 (#0A0A0A on #B8A4ED — inverted for dark text) text_on_peach: 4.8:1 (#0A0A0A on #FFB084) text_on_ochre: 4.2:1 (#0A0A0A on #E8B94A) color_harmony: warm analogous (cream base with vibrant accent colors) accessibility_compliance: fully_compliant ``` --- ## SPACING & LAYOUT SYSTEM ### Base Unit ```yaml base_unit: 4px scaling_factor: 1.5 ``` ### Spacing Scale ```yaml spacing_xxs: { value: 4px, usage: Tiny gaps } spacing_xs: { value: 8px, usage: Small paddings } spacing_sm: { value: 12px, usage: Element gaps } spacing_md: { value: 16px, usage: Standard spacing } spacing_lg: { value: 24px, usage: Medium spacing } spacing_xl: { value: 32px, usage: Large spacing (card padding) } spacing_xxl: { value: 48px, usage: XL spacing } spacing_section: { value: 96px, usage: Section spacing (between major bands) } ``` ### Breakpoints ```yaml mobile: { min: 0px, max: 768px, columns: 4, gutter: 16px } tablet: { min: 769px, max: 1024px, columns: 8, gutter: 24px } desktop: { min: 1025px, max: 1440px, columns: 12, gutter: 24px } wide: { min: 1441px, max: 1920px, columns: 12, gutter: 32px } ``` ### Container Widths ```yaml default: { max_width: 1280px, padding: 24px } # Primary content width full: { max_width: 100%, padding: 0 } # Full‑bleed sections ``` --- ## COMPONENT LIBRARY ### Navigation Components #### Top Navigation ```yaml type: horizontal (desktop) / hamburger (mobile) position: static or sticky (top) height: 64px background: #FFFAF0 (canvas) alignment: left (logo + wordmark) / center (menu) / right (actions) typography: nav_link (Inter 14px, 500) components: - logo: { size: 32px, link to home } - menu: [Product, Solutions, Resources, Pricing, Customers] - actions: [Sign in (text link), Try free (button-primary)] ``` ### Button System #### Primary Button ```yaml default: { bg: #0A0A0A, text: #FFFFFF, padding: 12px 20px, radius: 12px, height: 44px } hover: { bg: #1F1F1F, text: #FFFFFF } active: { bg: #1F1F1F, text: #FFFFFF } focus: { outline: 2px solid #0A0A0A, offset: 2px } disabled: { bg: #E5E5E5, text: #6A6A6A } ``` #### Secondary Button (Cream + Hairline) ```yaml default: { bg: #FFFAF0, text: #0A0A0A, border: 1px solid #E5E5E5, padding: 12px 20px, radius: 12px, height: 44px } hover: { bg: #FAF5E8, text: #0A0A0A } active: { bg: #F5F0E0, text: #0A0A0A } focus: { outline: 2px solid #0A0A0A, offset: 2px } disabled: { opacity: 0.5 } ``` #### On‑Color Button (White over Saturated Cards) ```yaml default: { bg: #FFFFFF, text: #0A0A0A, padding: 12px 20px, radius: 12px, height: 44px } hover: { bg: #FFFAF0, text: #0A0A0A } active: { bg: #FAF5E8, text: #0A0A0A } ``` #### Text Link Button ```yaml default: { bg: transparent, text: #0A0A0A, padding: 0 } hover: { bg: transparent, text: #0A0A0A, text-decoration: underline } ``` #### Inline Text Link ```yaml default: { bg: transparent, text: #0A0A0A, text-decoration: underline } hover: { bg: transparent, text: #0A0A0A } ``` ### Cards & Containers #### Hero Band ```yaml type: Full‑width band, 7‑5 grid split (h1 left, illustration right) background: #FFFAF0 (canvas) padding: 96px vertical typography: display_xl for h1 components: [h1, subheadline, button row, hero_illustration_card] ``` #### Hero Illustration Card ```yaml background: #FAF5E8 (surface_soft) rounded: 24px (xl) padding: 24px content: 3D claymation illustration (mountains, mascot, abstract shapes) ``` #### Feature Cards (Saturated 6‑Color Palette) ```yaml base: rounded: 24px (xl) padding: 32px (xl) typography: title: title_md body: body_md variants: - pink: { bg: #FF4D8B, text: #FFFFFF, usage: Sequencer/outbound features } - teal: { bg: #1A3A3A, text: #FFFFFF, usage: Featured tier, enterprise } - lavender: { bg: #B8A4ED, text: #0A0A0A, usage: AI/agent products } - peach: { bg: #FFB084, text: #0A0A0A, usage: General SaaS warmth } - ochre: { bg: #E8B94A, text: #0A0A0A, usage: Community/experts } - cream: { bg: #F5F0E0, text: #0A0A0A, usage: Less‑emphasized features } ``` #### Product Mockup Card ```yaml background: #FFFAF0 (canvas) border: 1px solid #E5E5E5 (hairline) rounded: 16px (lg) padding: 24px (lg) content: Product UI fragments (Claygent agent runs, sequencer flows, CRM enrichment tables) ``` #### Testimonial Card ```yaml background: #F5F0E0 (surface_card) rounded: 16px (lg) padding: 24px (lg) components: [avatar, name, role, testimonial text (body_md)] ``` #### Pricing Tier Cards ```yaml standard: background: #FFFAF0 (canvas) border: 1px solid #E5E5E5 rounded: 16px (lg) padding: 32px (xl) typography: title_lg for plan name featured: background: #1A3A3A (brand_teal) text: #FFFFFF border: none rounded: 16px (lg) padding: 32px (xl) typography: title_lg for plan name ``` #### Expert Card ```yaml background: #FFFAF0 (canvas) border: 1px solid #E5E5E5 rounded: 16px (lg) padding: 24px (lg) components: [avatar, expert name, specialization, "Book session" link] ``` ### Form Elements #### Text Input ```yaml background: #FFFAF0 (canvas) border: 1px solid #E5E5E5 (hairline) rounded: 12px (md) padding: 12px 16px height: 44px typography: body_md focused: { border: 2px solid #0A0A0A } disabled: { bg: #FAF5E8, opacity: 0.7 } ``` ### Tabs & Badges #### Category Tabs (Pill) ```yaml inactive: background: transparent text: #6A6A6A (muted) padding: 8px 16px rounded: 9999px (pill) typography: nav_link active: background: #F5F0E0 (surface_card) text: #0A0A0A (ink) padding: 8px 16px rounded: 9999px (pill) typography: nav_link ``` #### Badge Pill ```yaml background: #F5F0E0 (surface_card) text: #0A0A0A (ink) padding: 4px 12px rounded: 9999px (pill) typography: caption (13px, 500) ``` ### CTA & Footer #### CTA Band (Illustrated) ```yaml background: #FAF5E8 (surface_soft) rounded: 24px (xl) padding: 80px vertical typography: display_md for h2 components: [h2, subline, button-primary, 3D illustration (mascot/scene)] usage: Pre‑footer "Turn your growth ideas into reality today" ``` #### Footer ```yaml background: #FAF5E8 (surface_soft) — NOT dark text: #3A3A3A (body) padding: 80px vertical layout: 4‑column link list feature: Horizon‑style 3D mountain illustration at bottom — signature footer mountain ``` --- ## LAYOUT PATTERNS ### Page Structures ```yaml homepage: - hero_band: { 7‑5 split, h1 + illustration, padding: 96px } - feature_grid: { 3‑up (desktop), saturated cards, spacing: 32px } - product_showcase: { product mockup cards, 2‑up } - testimonial_grid: { 3‑up, testimonial cards } - pricing_grid: { 3‑up, featured tier in teal } - cta_band: { illustrated, centered, pre‑footer } - footer: { 4‑column, cream background } ``` ### Grid Systems ```yaml standard: { columns: 12, gap: 24px, alignment: center } feature_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 32px } pricing_grid: { columns: 3 (desktop) / 2 (tablet) / 1 (mobile), gap: 24px } ``` ### Section Patterns ```yaml hero: { height: auto (min 60vh), alignment: left, bg: #FFFAF0, padding: 96px } features: { columns: 3, alignment: center, card_palette: pink → teal → lavender → peach → ochre → cream } testimonials: { layout: grid, card_variant: testimonial, 3‑up } pricing: { cards: 3, featured: middle (teal) } cta: { layout: centered, bg: #FAF5E8, rounded: 24px } ``` ### Content Hierarchy ```yaml reading_pattern: F‑pattern (landing pages) content_weight_distribution: headline_to_body_ratio: 1:2 image_to_text_ratio: 1:1.5 (hero), 1:2 (feature cards) whitespace_density: generous (sections spaced by 96px) ``` --- ## MOTION & INTERACTION ### Transition Durations ```yaml instant: 50ms micro: 150ms fast: 200ms default: 300ms slow: 500ms macro: 750ms ``` ### Easing Curves ```yaml linear: cubic-bezier(0, 0, 1, 1) ease: cubic-bezier(0.25, 0.1, 0.25, 1) ease_out: cubic-bezier(0, 0, 0.58, 1) ease_in_out: cubic-bezier(0.42, 0, 0.58, 1) ``` ### Hover States ```yaml scale: { value: 1.02, duration: 150ms } # feature cards, buttons lift: { value: -4px, duration: 150ms } # cards color_shift: { speed: 150ms } # buttons, text links ``` ### Scroll Interactions ```yaml sticky_nav: { position: sticky, offset: 0 } parallax: { speed: 0.1, direction: vertical } # 3D illustrations (subtle) fade_in: { trigger: on_view, animation: fade + slide-up (200ms) } # feature cards ``` --- ## MEDIA & ICONOGRAPHY ### Icon System ```yaml library: [Inferred: Custom SVG icons / Lucide] style: outline (UI), custom (brand elements) size: small: 16px, medium: 20px, large: 24px color: inherit (uses currentColor or specific hex) ``` ### 3D Claymation Illustrations ```yaml description: Hand‑crafted 3D rendered illustrations — mountains, characters, mascots usage: Hero artifacts, feature card companions, CTA bands, footer accent style: Claymation aesthetic — warm, tactile, hand‑crafted format: Full‑bleed hero artifacts, embedded in cards signature_elements: - Mountains: Horizon‑style mountain illustrations - Mascot characters: Recurring named characters - Abstract shapes: Peach/ochre/lavender landscapes ``` ### Image Treatment ```yaml default_ratio: 16:9 (product screenshots), 4:3 (illustrations) rounded_corners: 24px (illustration cards), 16px (product mockups) object_fit: cover (most images), contain (product UI fragments) overlay: { gradient: none } shadow: { type: none } # 3D illustrations carry their own depth ``` --- ## RESPONSIVE BEHAVIORS ### Priority of Elements ```yaml mobile_priority: [hero headline, CTA, feature cards, testimonials, pricing, footer] tablet_priority: [hero 7‑5 split, feature grid 2‑up, testimonials 2‑up, pricing 2‑up] desktop_priority: [hero 7‑5 split, feature grid 3‑up, testimonials 3‑up, pricing 3‑up] ``` ### Collapse Points ```yaml navigation: 768px (hamburger appears) hero_layout: 768px (7‑5 grid → single column, illustration stacks below) feature_grid: 768px (3 cols → 2 cols), 480px (2 cols → 1 col) pricing_grid: 768px (3 cols → 2 cols), 480px (2 cols → 1 col) ``` ### Touch Targets ```yaml minimum_size: 44x44px (all interactive elements) spacing_between: 12px tap_feedback: scale (buttons), highlight (cards) ``` --- ## ACCESSIBILITY FEATURES ### Semantic HTML Structure ```yaml landmarks: [
,