Clay

Overview

Clay is a GTM infrastructure platform that transforms how revenue teams discover, enrich, and activate customer data at scale. The design system embodies a "Tech-Forward Precision" aesthetic—combining the clarity of engineering-grade interfaces with the creative energy of a brand built for growth teams. The visual language prioritizes information density, rapid interaction, and a sense of forward momentum: users should feel they're operating sophisticated machinery designed for speed and accuracy.

The brand voice is direct, confident, and action-oriented. Clay speaks to GTM professionals as peers—no hype, no jargon inflation, just clear explanations of what the platform does and why it matters. Tone examples: "Turn your growth ideas into reality today" (imperative, outcome-focused); "Infrastructure to get any data, run agentic workflows, and launch GTM plays" (technical but accessible). The vocabulary leans technical (workflows, agents, enrichment, signals) but remains grounded in business outcomes (revenue, campaigns, targeting). Personality: ambitious but not arrogant; precise but not cold.

Colors

The color system balances a warm, neutral foundation with vibrant accent colors that signal interactivity and brand energy. **Primary (#3859f9)** is a saturated, medium-blue used exclusively for call-to-action buttons, active states, links, and focus indicators—it commands attention without overwhelming the interface. **Secondary (#cc089e)**, a deep magenta, serves as a supporting accent for highlights, badges, and secondary interactive elements, adding visual richness and brand personality. **Tertiary (#fcbe11)**, a warm golden-yellow, is reserved for status indicators, success states, and attention-grabbing labels (e.g., "New" badges, hiring callouts). The surface stack uses warm, off-white tones (surface #f4f3f0, surface-container #eee9df, surface-dim #eee9df) that evoke paper and craft

Typography

The type system uses Roobert (a geometric, humanist sans-serif) across all scales, creating visual cohesion and a distinctly modern, approachable tone. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight, -0.02em) and headline-md (28px, 600 weight, -0.01em) structure content hierarchy and section titles. Title-lg (20px, 600 weight) marks subsections and card headers. Body-lg (18px, 400 weight) and body-md (16px, 400 weight) carry primary content, with generous 28px and 24px line-heights ensuring readability at all sizes. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.05em tracking) handle buttons, badges, and UI labels with crisp, compact presentation. Font feature

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on the viewport with symmetric gutters (24px on desktop, responsive down to 12px on mobile). The spacing scale (unit: 8px, with semantic steps xs/sm/md/lg/xl) creates predictable rhythm: section separation uses lg spacing (40px), component padding uses md (24px), and internal element gaps use sm (12px). The design favors generous white space—never cramming content—to emphasize the precision and clarity of the interface. Container max-width of 1280px ensures text remains readable (line lengths ~65–75 characters) while allowing full-width hero imagery. Responsive breakpoints follow a mobile-first approach: tablet layouts (≤990px) stack columns and reduce padding to sm (12px); mobile layouts (≤640px) use single

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. The elevation system uses three levels: **Level 1 (sm)**: 0 1px 3px rgba(0, 0, 0, 0.06) for cards, input fields, and subtle surface separation—barely perceptible but essential for defining interactive zones. **Level 2 (md)**: 0 4px 12px rgba(0, 0, 0, 0.08) for hovered cards, modals, and elevated containers—signals interactivity and focus. **Level 3 (lg)**: 0 16px 40px rgba(0, 0, 0, 0.12) for full-screen modals, dropdowns, and top-level overlays—creates clear visual hierarchy and focus. All shadows use a ne

Shapes

The shape philosophy is **Geometric Precision with Warmth**—rounded corners are used strategically to soften the technical aesthetic without sacrificing clarity. Buttons and primary interactive elements use lg radius (1rem / 16px) for a friendly, approachable feel. Cards and containers use xl radius (1.5rem / 24px) to create distinct, inviting zones. Input fields and secondary UI elements use DEFAULT radius (0.5rem / 8px) for compact, efficient appearance. Badges and chips use full radius (9999px) for a polished, badge-like presentation. The rationale: larger radii (lg, xl) on prominent, inter

Components

Action Elements Buttons are the primary call-to-action mechanism and use consistent sizing (48px height, 12px vertical / 24px horizontal padding) across all variants. **Button-primary** (#3859f9 background, white text, label-md typography, lg radius) is the dominant CTA for sign-ups, form submissions, and key interactions. On hover, the background shifts to #1f3ac7 (darker blue) with an enhanced shadow (0 4px 12px rgba(56, 89, 249, 0.2)) to signal engagement; transition duration is 120ms ease-out. On active/pressed state, the background darkens further to #0d1b5c with an inset shadow (inset 0 2px 4px rgba(0, 0, 0, 0.1)) to provide tactile feedback. **Button-secondary** uses a transparent background with a 1px outline-variant border and primary text color; on hover, the background fills