name: clay-design
version: alpha
description: >
  A playful-but-confident GTM canvas: a warm off-white "oat" page (#fefdfb)
  with near-black ink, set in Roobert — a friendly geometric grotesque run
  BOLD and TIGHT at hero scale (80px / weight 600 / -0.04em). The brand voltage
  is electric "Blueberry" blue #3859f9 used for stat call-outs and inline
  highlight words, backed by a full candy palette (dragonfruit magenta, matcha
  green, lemon, tangerine, ube) that powers large saturated feature & quote
  cards. Actions are solid-black rounded buttons with a trailing arrow.
  Geometry is generously rounded; signature moves: 3D clay-stone illustrations
  and color-blocked rounded cards.
colors:
  # Brand
  primary: '#000000'          # primary action + ink ("Start building for free")
  on-primary: '#ffffff'
  accent: '#3859f9'           # Blueberry — electric blue voltage (stats, highlight words)
  accent-strong: '#0382f7'    # blueberry-500 link blue
  # Text / ink
  on-surface: '#000000'       # Clay uses true black ink
  on-surface-secondary: '#55534e'  # oat-800 muted copy
  on-surface-muted: '#85817a'      # oat-700
  # Surface
  surface: '#fefdfb'          # "oat-100" warm off-white page
  surface-card: '#ffffff'
  surface-subtle: '#f4f3f0'   # oat-200 panels
  surface-oat-300: '#eee9df'
  # Hairlines / borders
  hairline: '#e6e8ec'         # grey-200 / grey-border
  border-dark: '#302f2c'      # dark-gray rule
  # Candy palette (saturated feature / quote / illustration blocks)
  dragonfruit: '#cc089e'      # magenta feature card
  blueberry: '#3859f9'        # blue feature card / accent
  matcha: '#078a52'           # green feature card
  matcha-deep: '#03331d'      # dark-green stat chips
  lemon: '#fcbe11'
  tangerine: '#fa6900'        # orange quote card
  ube: '#7934f0'              # purple
  lime: '#cbd810'             # lime-green quote card
  slushie: '#3bd3fd'          # cyan quote card
  blueberry-900: '#002f67'    # deep navy (chips/screenshots)
  pomegranate: '#e94d68'      # red/pink
  # Inverse
  on-inverse: '#fefdfb'
typography:
  font-display: 'Roobertvf, Arial, sans-serif'      # variable Roobert — headings + body. OSS sub: "Plus Jakarta Sans" / "Hanken Grotesk"
  font-mono: '"Roobert mono", Arial, sans-serif'    # eyebrows. OSS sub: "Space Mono" / "IBM Plex Mono"
  font-serif: '"Canela Web", serif'                 # rare editorial accent. OSS sub: "Playfair Display"
  h0:
    fontSize: 80px
    fontWeight: 600
    lineHeight: 1            # 80px
    letterSpacing: -0.04em   # -3.2px
  h1:
    fontSize: 60px           # 3.75rem
    fontWeight: 575
    lineHeight: 1
    letterSpacing: -0.04em
  h2:
    fontSize: 44px           # 2.75rem
    fontWeight: 500
    lineHeight: 1.1          # 48.4px
    letterSpacing: -0.03em
  h3:
    fontSize: 32px           # 2rem
    fontWeight: 600
    lineHeight: 1.1          # 35.2px
    letterSpacing: -0.02em
  paragraph-large:
    fontSize: 20px           # 1.25rem
    fontWeight: 400
    lineHeight: 1.25
  paragraph:
    fontSize: 16px           # 1rem
    fontWeight: 400
    lineHeight: 1.4
  paragraph-small:
    fontSize: 14px           # 0.875rem
    fontWeight: 500
    lineHeight: 1.4
  eyebrow:                   # "AI FORMATTING", "DESTINATIONS"
    fontFamily: '{typography.font-mono}'
    fontSize: 13px           # clamp ~0.7–0.8rem
    fontWeight: 500
    lineHeight: 1.2
    textTransform: uppercase
rounded:
  xs: 8px                    # 0.5rem — buttons, inputs
  sm: 12px                   # 0.75rem
  md: 24px                   # 1.5rem
  lg: 32px                   # 2rem
  xl: 40px                   # 2.5rem — large color cards
  full: 9999px               # rounded pills/avatars
spacing:
  base: 16px
  scale: [4px, 8px, 12px, 16px, 20px, 24px, 32px, 40px, 48px, 64px, 80px, 128px]
  section-padding: 96px      # clamp(3rem, .., 6rem)
  container-max: 1440px      # 90rem
components:
  button-primary:            # "Start building for free →"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.paragraph}'
    fontWeight: 400
    rounded: '{rounded.xs}'  # ~10px, soft-cornered black
    padding: '0.7em 1em'
    trailingIcon: arrow-right
  button-secondary:          # "Get a demo →" / "Contact us →" / "Security at Clay →"
    backgroundColor: 'transparent'
    textColor: '{colors.primary}'
    borderWidth: 1px
    borderColor: '{colors.border-dark}'
    rounded: '{rounded.xs}'
    trailingIcon: arrow-right
  input:
    backgroundColor: '{colors.surface-card}'
    borderColor: '{colors.hairline}'
    rounded: '{rounded.xs}'
    font: '{typography.font-display}'
  card-feature:              # big saturated blocks (magenta/blue/green)
    backgroundColor: '{colors.dragonfruit}'   # or blueberry / matcha
    textColor: '{colors.on-inverse}'
    rounded: '{rounded.xl}'
    eyebrow: '{typography.eyebrow}'
  card-quote:                # testimonial cards (lime/orange/blue/cyan)
    backgroundColor: '{colors.lime}'           # cycles candy hues
    textColor: '{colors.on-surface}'           # black ink on bright fill
    rounded: '{rounded.lg}'
  chip:                      # "CRM enrichment and maintenance" pills
    backgroundColor: '{colors.surface-card}'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.sm}'
    shadow: sm
  stat-chip:                 # "4h/week", "100%" dark-green tiles
    backgroundColor: '{colors.matcha-deep}'
    textColor: '{colors.on-inverse}'
    rounded: '{rounded.xs}'
motion:
  # Smooth scroll-reveals + a hovering 3D clay-illustration personality.
  # Playful but not bouncy; brand warmth comes from the props, not easing tricks.
icons:
  style: outline
  stroke: ~1.75px
  sizes: { sm: 16px, md: 24px }
  color-rules: 'Monoline, inherit ink. Arrow-right "→" is the recurring affordance on every button.'

Clay

clay-design — version alpha

Surfaces studied via Playwright (clay.com home): computed styles + :root custom properties. Clay exposes an enormous Webflow/"loam" + "terra" token system — a full candy swatch ramp (blueberry, dragonfruit, matcha, lemon, tangerine, ube, slushie, lime, pomegranate), Roobert type tokens, and rounded radius scales — so values here are high-confidence extractions.

Overview

Clay's canvas is playful but confident. The page sits on a warm off-white "oat" {colors.surface} (#fefdfb) with true-black ink, and the type is Roobert (variable Roobertvf), a friendly geometric grotesque pushed bold and very tight at hero scale — the headline "Go to market with unique data…" runs 80px / weight 600 / -0.04em tracking, almost touching. Eyebrows switch to Roobert Mono, uppercase. The brand voltage is electric "Blueberry" blue {colors.accent} #3859f9, used for inline highlight words ("iterable workflows") and big stat call-outs (>2x, 3x, 3M+). Around that sits a full candy palette — dragonfruit magenta, matcha green, lemon, tangerine, ube purple, slushie cyan — that fills large saturated rounded cards (feature blocks and rotating testimonial cards), giving the page its energy. Actions are solid-black soft-cornered buttons with a trailing "→". Geometry is generously rounded (8px buttons up to 40px on big cards). The signature device is the 3D clay-stone illustrations (stacked balancing stones, a clay toolbox) that literalize the brand name.

Colors

• Ink & action black — {colors.primary} #000. Clay uses true black for text and for primary buttons (unlike BMW/Claude's warm near-blacks). Buttons are black with white labels and a trailing arrow.
• Blueberry — {colors.accent} #3859f9. The electric-blue voltage. Reserved for inline highlight words inside black headlines and for stat numbers in light call-out cards. Link blue leans slightly brighter ({colors.accent-strong} #0382f7).
• Oat surfaces. Page {colors.surface} #fefdfb, panels {colors.surface-subtle} #f4f3f0, deeper #eee9df. Muted copy uses oat-800 {colors.on-surface-secondary} #55534e and oat-700 #85817a.
• Candy palette (the personality). Saturated, used as full card fills: dragonfruit #cc089e (magenta "AI Formatting"), blueberry #3859f9 (blue "AI Conditional Logic"), matcha #078a52 (green "Destinations"); testimonial cards cycle lime #cbd810, tangerine #fa6900, blueberry, slushie #3bd3fd. Supporting hues: ube #7934f0, lemon #fcbe11, pomegranate #e94d68, deep navy #002f67. Discipline: these are block fills and illustrations, not text or button colors.
• Stat chips. Small dark-green {colors.matcha-deep} #03331d tiles ("4h/week", "100+", "100%") inside case-study panels.
• Hairlines. #e6e8ec for light rules; #302f2c for the dark outline-button border.

Typography

• Roobert (Roobertvf, variable) — headings and body. Closest open-source substitute: Plus Jakarta Sans or Hanken Grotesk (geometric, friendly, slightly rounded terminals). The signature is tight negative tracking (-0.02 to -0.04em) and heavy weights at display sizes.
• Roobert Mono — uppercase eyebrows/section kickers. OSS sub: Space Mono / IBM Plex Mono.
• Canela Web (serif) — rare editorial accent. OSS sub: Playfair Display.

Token	Size	Weight	Line-height	Tracking	Usage
h0	80px	600	1.0	-0.04em	Hero headline
h1	60px	575	1.0	-0.04em	Big section heads
h2	44px	500	1.1	-0.03em	Section heads ("Cut costs…")
h3	32px	600	1.1	-0.02em	Card titles (on color blocks)
paragraph-large	20px	400	1.25	0	Lead paragraphs
paragraph	16px	400	1.4	0	Base body
paragraph-small	14px	500	1.4	0	Dense copy, captions
eyebrow (mono)	13px	500	1.2	UPPER	"AI FORMATTING", "DESTINATIONS"

Layout

Base unit 16px; container max ~1440px (90rem) with a clamped section padding of 3–6rem. The dominant primitive is the two-column feature row (big saturated card on one side, eyebrow + heading + bulleted copy + a call-out stat card on the other), repeated down the page. Other primitives: a 2×2 grid of color-blocked cards, a horizontally-scrolling testimonial carousel of bright cards with avatar + name + role, and a trust-logo wall flanked by 3D clay props. Whitespace is ample and the rhythm is lively rather than minimal.

Elevation & Depth

Mostly flat color-blocking — depth comes from saturated card fills and the 3D rendered clay illustrations, not shadows. Light chips ("CRM enrichment…") carry a faint resting shadow; large cards have an inner darker rounded panel (a tonal inset) rather than a drop shadow. No gradients on text.

Shapes

Generously rounded. Radius vocabulary: {rounded.xs} 8px (buttons, inputs, chips inner), {rounded.sm} 12px, {rounded.md} 24px, {rounded.lg} 32px, {rounded.xl} 40px for the big color cards, and {rounded.full} for avatars/round props. The soft corners pair with Roobert's rounded terminals and the clay-stone motif for a tactile, approachable feel.

Components

• Primary button {components.button-primary} — solid black, white label, ~8px radius, trailing → arrow, padding 0.7em×1em ("Start building for free").
• Secondary button {components.button-secondary} — transparent with a 1px dark (#302f2c) border, black label, trailing arrow ("Get a demo", "Contact us", "Security at Clay").
• Feature card {components.card-feature} — full-bleed saturated fill (magenta/blue/green), white text, ~40px radius, mono eyebrow + h3 title + body, with an inner tonal panel for media.
• Quote card {components.card-quote} — bright candy fill (lime/orange/blue/cyan), black ink, ~32px radius, big quote + dashed divider + avatar/name/role.
• Use-case chip {components.chip} — white rounded pill with soft shadow, listed in a column ("TAM sourcing & territory planning").
• Stat chip {components.stat-chip} — small dark-green tile with white metric ("4h/week", "100%").
• Input {components.input} — white, light hairline border, 8px radius, Roobert.

Motion

Smooth scroll-reveals and a hovering/parallaxing 3D clay-illustration personality (balancing stones, toolbox). Carousels advance via prev/next arrow buttons. The playfulness comes from the props and color, not from bouncy easing — transitions stay smooth and quick.

Iconography

Thin outline monoline icons; the arrow-right "→" is the recurring affordance attached to virtually every button and link. Brand/partner logos appear full-color in the trust wall. Stroke ~1.75px, 16/24px.

Do's and Don'ts

• Do set hero headlines in Roobert bold and tight (weight ≥575, ~-0.04em), nearly kissing letters.
• Do use true black {colors.primary} for ink and primary buttons, always with a trailing "→".
• Do reserve Blueberry #3859f9 for highlight words and stat numbers, not body text.
• Do color-block whole feature/quote cards with the candy palette and keep their corners large (32–40px).
• Do lean on the 3D clay-stone illustrations for warmth and brand recall.
• Do use Roobert Mono uppercase for eyebrows/kickers.
• Don't tint long-form body copy with candy colors — saturated hues are card fills.
• Don't square off the corners; Clay is soft and rounded throughout.
• Don't make buttons blue or colored — action is black.
• Don't let multiple candy hues fight in one card; one saturated fill per block.

Known Gaps

• Clay ships dozens of overlapping loam/terra swatch tokens; this spec consolidates the in-use brand hues seen on the home page (some archived/legacy swatches were omitted).
• Exact weight axis values for Roobertvf beyond the observed 500/575/600 are not enumerated.