zugzbot 1.0.21 → 1.0.22

package/.opencode/oh-my-design/web/references/clay/.verification.md

@@ -1,129 +0,0 @@
-# Clay — Verification Notes (2026-05-08)
-
-Pipeline: `spec/verification-pipeline.md` · Skill: `omd:migrate`
-
-## Tier 1 — live DOM (playwright getComputedStyle)
-
-### Surfaces inspected (G3 ≥2)
-- `clay.com/` (marketing home — GTM data platform positioning)
-- `clay.com/customers` (customer stories page — same chrome confirmed across surfaces)
-
-### Raw observations
-
-**Header — Get a demo (Cream Pill)**
-- bg `rgb(243, 242, 237)` = **`#f3f2ed`** (warm cream, signature secondary)
-- color `#000000`
-- border-radius **12px**
-- padding 8×16
-- 39px height
-- 13.92px / weight **500** / Romie (Clay's display) or system fallback
-
-**Header — Sign up (Black Pill)**
-- bg `#000000`
-- color `#ffffff`
-- radius 12px
-- padding 8×16
-- 39px / 13.92px·500
-- Use: header Primary CTA paired with Cream Secondary
-
-**Hero/Section CTAs — "Start building for free" / "Schedule a demo" / "Read more about Clay Enterprise"**
-- bg `#000000`
-- color `#ffffff`
-- radius 12px
-- padding 8×16
-- 42px height (slightly taller than header)
-- **16px** / 500 (slightly larger font than header 13.92px)
-- Use: hero / mid-section primary CTAs
-
-**Inverse Variant — "Get a demo" white-on-dark sections**
-- bg `#ffffff`
-- color `#000000`
-- radius 12px
-- padding 8×16
-- 42px / 16px·500
-- Use: when on dark/colored hero sections
-
-### Single-system observation
-
-Clay uses a **consistent 12px Black + Cream pair** across all marketing surfaces:
-- Header (compact 39px / 13.92px·500)
-- Hero/Section (taller 42px / 16px·500)
-- Inverse (white bg on dark sections)
-
-No surface split. Just contextual sizing within one system. Strong consistency.
-
----
-
-## Tier 2a — getdesign.md
-- `getdesign.md/clay` — directory only / no record
-
-## Tier 2b — styles.refero.design
-- `?q=Clay` — no record
-
-**Tier 2 status: unavailable.** Tier 1 (clay.com home + customers) treated as authoritative.
-
----
-
-## Conflict Matrix
-
-| Field | Tier 1 home | Tier 1 customers | refero/getdesign | Resolution |
-|---|---|---|---|---|
-| Primary bg | `#000` | `#000` | n/a | ✓ canonical Black |
-| Primary radius | 12px | 12px | n/a | ✓ |
-| Cream secondary bg | `#f3f2ed` | `#f3f2ed` | n/a | ✓ canonical |
-| Header height | 39px / 13.92px·500 | 39px | n/a | ✓ |
-| Hero height | 42px / 16px·500 | 42px | n/a | ✓ |
-
-### Unresolved
-- **None.** Single-system consistency across surfaces.
-
----
-
-## Components in §4
-
-§4 already documents Buttons (Primary 12px Black + Cream Secondary), Cards (16px), three weights (600/500/400) — all confirmed in this audit. Single-system clean documentation.
-
-Audit needed:
-1. Confirm both **Header (39px/13.92px)** and **Hero (42px/16px)** size variants documented
-2. Verify cream `#f3f2ed` documented as secondary (not just generic gray)
-
----
-
-## Philosophy sources (G6)
-
-### Founder/founding facts
-- Founded **2017** by **Kareem Amin** (CEO) — original founder
-  - Source: [Kareem Amin — LinkedIn](https://www.linkedin.com/in/kareemamin), [Sequoia Capital — Partnering with Clay](https://sequoiacap.com/article/partnering-with-clay-on-a-mission-to-grow/)
-- **Varun Anand** (Co-founder, Head of Operations) — joined as co-founder in **2021**
-  - Source: [Inside Clay's unconventional path to $1.25B (First Round Review podcast)](https://review.firstround.com/podcast/inside-clays-unconventional-path-to-1-25b/)
-- **Pivot history:** originally Clay positioned as no-code platform → pivoted to **GTM data platform** around 2021 when sales/RevOps teams emerged as the actual customers
-- **Headquarters:** New York
-- **Customer base:** **10,000+ customers** as of 2025
-  - Source: [BusinessWire — $100M Series C](https://www.businesswire.com/news/home/20250805719448/en/AI-GTM-Leader-Clay-Raises-$100M-Series-C-to-Fuel-GTM-Engineering-Roles-Industrywide)
-- **150+ data sources integrated**
-- **Funding rounds:**
-  - **Series B expansion: $40M at $1.25B valuation**
-  - **Series C: $100M led by CapitalG (Alphabet's independent growth fund)** — 2025-08-05
-  - Source: BusinessWire, [Finsmes](https://www.finsmes.com/2025/08/clay-raises-100m-in-series-c-funding.html), [CapitalG portfolio](https://www.capitalg.com/portfolio/clay)
-- **"GTM Engineering"** is Clay's marketing term — they coined the role category and now publish for it
-  - Source: BusinessWire 2025
-
-### Voice samples (live-verified)
-- *"Get a demo"* — header secondary <!-- verified: clay.com 2026-05 -->
-- *"Sign up"* — header primary <!-- verified: clay.com -->
-- *"Start building for free"* — hero CTA <!-- verified: clay.com -->
-- *"Schedule a demo"* / *"Read more about Clay Enterprise"* — section CTAs <!-- verified: clay.com -->
-- *"Go to market with unique data—and the ability to act on it"* — homepage tagline <!-- verified: page title 2026-05 -->
-
-### Existing §10-15 retained from prior augmentation (B1 batch)
-- Voice & Tone — playfully irreverent + sales-team-fluent
-- Brand narrative — 2017 founding, GTM pivot 2021, customer-quote-heavy positioning
-- Hover rotation as signature motion
-- Three weights (600/500/400) strict roles
-
----
-
-**Verified-against:**
-- Tier 1: clay.com/, clay.com/customers (live DOM via playwright)
-- Tier 2: refero/getdesign — no record
-- Founders/funding: Sequoia Capital, BusinessWire (Series C 2025-08), Finsmes, CapitalG portfolio, First Round Review podcast, Contrary Research

package/.opencode/oh-my-design/web/references/clay/DESIGN.md

@@ -1,454 +0,0 @@
----
-id: clay
-name: Clay
-country: US
-category: design-tools
-homepage: "https://www.clay.com"
-primary_color: "#ffd23f"
-logo:
-  type: github
-  slug: clay-run
-verified: "2026-05-15"
-omd: "0.1"
-ds:
-  name: Clay Newsroom
-  url: "https://www.clay.com/press"
-  type: brand
-  description: Clay's official press kit and co-branding guidelines.
-tokens:
-  source: prose-derived
-  extracted: "2026-06-08"
-  note: "primary = live interactive/text Clay Black (#000000, Tier 1); brand = Lemon-gold marketing swatch (#fbbd41). primary_color field #ffd23f is the press-kit gold, not present verbatim in prose."
-  colors:
-    primary: "#000000"
-    brand: "#fbbd41"
-    canvas: "#faf9f7"
-    foreground: "#000000"
-    muted: "#9f9b93"
-    on-primary: "#ffffff"
-    surface: "#ffffff"
-    hairline: "#dad4c8"
-    body: "#55534e"
-    link: "#333333"
-    accent-matcha: "#078a52"
-    accent-slushie: "#3bd3fd"
-    accent-lemon: "#fbbd41"
-    accent-ube: "#43089f"
-    accent-pomegranate: "#fc7981"
-    accent-blueberry: "#01418d"
-    error: "#ef4444"
-    badge-bg: "#f0f8ff"
-    badge-text: "#3859f9"
-  typography:
-    family: { sans: "Roobert", mono: "Space Mono" }
-    display-hero:      { size: 80, weight: 600, lineHeight: 1.00, tracking: -3.2, use: "Hero headlines, all 5 stylistic sets" }
-    display-secondary: { size: 60, weight: 600, lineHeight: 1.00, tracking: -2.4, use: "Secondary hero headlines" }
-    section:           { size: 44, weight: 600, lineHeight: 1.10, tracking: -1.32, use: "Section headings" }
-    card-heading:      { size: 32, weight: 600, lineHeight: 1.10, tracking: -0.64, use: "Card headings" }
-    feature-title:     { size: 20, weight: 600, lineHeight: 1.40, tracking: -0.4, use: "Feature titles" }
-    subheading:        { size: 20, weight: 500, lineHeight: 1.50, tracking: -0.16, use: "Sub-headings, no ss01" }
-    body-large:        { size: 20, weight: 400, lineHeight: 1.40, use: "Large body text" }
-    body:              { size: 18, weight: 400, lineHeight: 1.60, tracking: -0.36, use: "Relaxed body text" }
-    body-standard:     { size: 16, weight: 400, lineHeight: 1.50, use: "Standard reading text" }
-    button:            { size: 16, weight: 500, lineHeight: 1.50, tracking: -0.16, use: "Button label" }
-    button-large:      { size: 24, weight: 400, lineHeight: 1.50, use: "Large button label" }
-    nav-link:          { size: 15, weight: 500, lineHeight: 1.60, use: "Navigation links" }
-    caption:           { size: 14, weight: 400, lineHeight: 1.50, tracking: -0.14, use: "Captions" }
-    small:             { size: 12, weight: 400, lineHeight: 1.50, use: "Small text" }
-    uppercase-label:   { size: 12, weight: 600, lineHeight: 1.20, tracking: 1.08, use: "Uppercase wayfinding labels" }
-    badge:             { size: 9.6, weight: 600, use: "Pill badges" }
-  spacing: { xs: 4, sm: 8, md: 16, base: 16, lg: 24, xl: 32, xxl: 48, section: 64 }
-  rounded: { sm: 4, md: 8, badge: 11, card: 12, feature: 24, section: 40, full: 1584 }
-  shadow:
-    clay: "rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px"
-    hard-offset: "rgb(0,0,0) -7px 7px"
-  components_harvested: true
-  components:
-    button-primary: { type: button, fg: "#000000", use: "Transparent fill, black text, hover rotateZ(-8deg) + hard offset shadow" }
-    button-white-solid: { type: button, bg: "#ffffff", fg: "#000000", radius: 12, use: "White fill, animated rotation hover — CTA on colored sections" }
-    button-ghost: { type: button, fg: "#000000", radius: 4, use: "Transparent fill, 1px border, dragonfruit hover" }
-    card: { type: card, bg: "#ffffff", radius: 12, use: "White surface on cream, 1px solid #dad4c8 oat border, multi-layer clay shadow with inset highlight" }
-    swatch-section: { type: card, use: "Full-width swatch-colored background (matcha/slushie/ube/lemon), white or black text by contrast" }
-    dashed-border: { type: card, use: "1px dashed #dad4c8 for secondary/decorative containers — hand-drawn craft quality" }
-    uppercase-label: { type: badge, fg: "#000000", font: "12/600", use: "Uppercase, 1.08px tracking — wayfinding system" }
----
-
-# Design System Inspiration of Clay
-
-## 1. Visual Theme & Atmosphere
-
-Clay's website is a warm, playful celebration of color that treats B2B data enrichment like a craft rather than an enterprise chore. The design language is built on a foundation of warm cream backgrounds (`#faf9f7`) and oat-toned borders (`#dad4c8`, `#eee9df`) that give every surface the tactile quality of handmade paper. Against this artisanal canvas, a vivid swatch palette explodes with personality — Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, Blueberry navy, and Dragonfruit magenta — each named like flavors at a juice bar, not colors in an enterprise UI kit.
-
-The typography is anchored by Roobert, a geometric sans-serif with character, loaded with an extensive set of OpenType stylistic sets (`"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`) that give the text a distinctive, slightly quirky personality. At display scale (80px, weight 600), Roobert uses aggressive negative letter-spacing (-3.2px) that compresses headlines into punchy, billboard-like statements. Space Mono serves as the monospace companion for code and technical labels, completing the craft-meets-tech duality.
-
-What makes Clay truly distinctive is its hover micro-animations: buttons on hover rotate slightly (`rotateZ(-8deg)`), translate upward (`translateY(-80%)`), change background to a contrasting swatch color, and cast a hard offset shadow (`rgb(0,0,0) -7px 7px`). This playful hover behavior — where a button literally tilts and jumps on interaction — creates a sense of physical delight that's rare in B2B software. Combined with generously rounded containers (24px–40px radius), dashed borders alongside solid ones, and a multi-layer shadow system that includes inset highlights, Clay feels like a design system that was made by people who genuinely enjoy making things.
-
-**Key Characteristics:**
-- Warm cream canvas (`#faf9f7`) with oat-toned borders (`#dad4c8`) — artisanal, not clinical
-- Named swatch palette: Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry, Dragonfruit
-- Roobert font with 5 OpenType stylistic sets — quirky geometric character
-- Playful hover animations: rotateZ(-8deg) + translateY(-80%) + hard offset shadow
-- Space Mono for code and technical labels
-- Generous border radius: 24px cards, 40px sections, 1584px pills
-- Mixed border styles: solid + dashed in the same interface
-- Multi-layer shadow with inset highlight: `0px 1px 1px` + `-1px inset` + `-0.5px`
-
-## 2. Color Palette & Roles
-
-### Primary
-- **Clay Black** (`#000000`): Text, headings, pricing card text, `--_theme--pricing-cards---text`
-- **Pure White** (`#ffffff`): Card backgrounds, button backgrounds, inverse text
-- **Warm Cream** (`#faf9f7`): Page background — the warm, paper-like canvas
-
-### Swatch Palette — Named Colors
-
-**Matcha (Green)**
-- **Matcha 300** (`#84e7a5`): `--_swatches---color--matcha-300`, light green accent
-- **Matcha 600** (`#078a52`): `--_swatches---color--matcha-600`, mid green
-- **Matcha 800** (`#02492a`): `--_swatches---color--matcha-800`, deep green for dark sections
-
-**Slushie (Cyan)**
-- **Slushie 500** (`#3bd3fd`): `--_swatches---color--slushie-500`, bright cyan accent
-- **Slushie 800** (`#0089ad`): `--_swatches---color--slushie-800`, deep teal
-
-**Lemon (Gold)**
-- **Lemon 400** (`#f8cc65`): `--_swatches---color--lemon-400`, warm pale gold
-- **Lemon 500** (`#fbbd41`): `--_swatches---color--lemon-500`, primary gold
-- **Lemon 700** (`#d08a11`): `--_swatches---color--lemon-700`, deep amber
-- **Lemon 800** (`#9d6a09`): `--_swatches---color--lemon-800`, dark amber
-
-**Ube (Purple)**
-- **Ube 300** (`#c1b0ff`): `--_swatches---color--ube-300`, soft lavender
-- **Ube 800** (`#43089f`): `--_swatches---color--ube-800`, deep purple
-- **Ube 900** (`#32037d`): `--_swatches---color--ube-900`, darkest purple
-
-**Pomegranate (Pink/Red)**
-- **Pomegranate 400** (`#fc7981`): `--_swatches---color--pomegranate-400`, warm coral-pink
-
-**Blueberry (Navy Blue)**
-- **Blueberry 800** (`#01418d`): `--_swatches---color--blueberry-800`, deep navy
-
-### Neutral Scale (Warm)
-- **Warm Silver** (`#9f9b93`): Secondary/muted text, footer links
-- **Warm Charcoal** (`#55534e`): Tertiary text, dark muted links
-- **Dark Charcoal** (`#333333`): Link text on light backgrounds
-
-### Surface & Border
-- **Oat Border** (`#dad4c8`): Primary border — warm, cream-toned structural lines
-- **Oat Light** (`#eee9df`): Secondary lighter border
-- **Cool Border** (`#e6e8ec`): Cool-toned border for contrast sections
-- **Dark Border** (`#525a69`): Border on dark sections
-- **Light Frost** (`#eff1f3`): Subtle button background (at 0% opacity on hover)
-
-### Badges
-- **Badge Blue Bg** (`#f0f8ff`): Blue-tinted badge surface
-- **Badge Blue Text** (`#3859f9`): Vivid blue badge text
-- **Focus Ring** (`rgb(20, 110, 245) solid 2px`): Accessibility focus indicator
-
-### Shadows
-- **Clay Shadow** (`rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`): Multi-layer with inset highlight — the signature
-- **Hard Offset** (`rgb(0,0,0) -7px 7px`): Hover state — playful hard shadow
-
-## 3. Typography Rules
-
-### Font Families
-- **Primary**: `Roobert`, fallback: `Arial`
-- **Monospace**: `Space Mono`
-- **OpenType Features**: `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on all Roobert text (display uses all 5; body/UI uses `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"`)
-
-### Hierarchy
-
-| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
-|------|------|------|--------|-------------|----------------|-------|
-| Display Hero | Roobert | 80px (5.00rem) | 600 | 1.00 (tight) | -3.2px | All 5 stylistic sets |
-| Display Secondary | Roobert | 60px (3.75rem) | 600 | 1.00 (tight) | -2.4px | All 5 stylistic sets |
-| Section Heading | Roobert | 44px (2.75rem) | 600 | 1.10 (tight) | -0.88px to -1.32px | All 5 stylistic sets |
-| Card Heading | Roobert | 32px (2.00rem) | 600 | 1.10 (tight) | -0.64px | All 5 stylistic sets |
-| Feature Title | Roobert | 20px (1.25rem) | 600 | 1.40 | -0.4px | All 5 stylistic sets |
-| Sub-heading | Roobert | 20px (1.25rem) | 500 | 1.50 | -0.16px | 4 stylistic sets (no ss01) |
-| Body Large | Roobert | 20px (1.25rem) | 400 | 1.40 | normal | 4 stylistic sets |
-| Body | Roobert | 18px (1.13rem) | 400 | 1.60 (relaxed) | -0.36px | 4 stylistic sets |
-| Body Standard | Roobert | 16px (1.00rem) | 400 | 1.50 | normal | 4 stylistic sets |
-| Body Medium | Roobert | 16px (1.00rem) | 500 | 1.20–1.40 | -0.16px to -0.32px | 4–5 stylistic sets |
-| Button | Roobert | 16px (1.00rem) | 500 | 1.50 | -0.16px | 4 stylistic sets |
-| Button Large | Roobert | 24px (1.50rem) | 400 | 1.50 | normal | 4 stylistic sets |
-| Button Small | Roobert | 12.8px (0.80rem) | 500 | 1.50 | -0.128px | 4 stylistic sets |
-| Nav Link | Roobert | 15px (0.94rem) | 500 | 1.60 (relaxed) | normal | 4 stylistic sets |
-| Caption | Roobert | 14px (0.88rem) | 400 | 1.50–1.60 | -0.14px | 4 stylistic sets |
-| Small | Roobert | 12px (0.75rem) | 400 | 1.50 | normal | 4 stylistic sets |
-| Uppercase Label | Roobert | 12px (0.75rem) | 600 | 1.20 (tight) | 1.08px | `text-transform: uppercase`, 4 sets |
-| Badge | Roobert | 9.6px | 600 | — | — | Pill badges |
-
-### Principles
-- **Five stylistic sets as identity**: The combination of `"ss01"`, `"ss03"`, `"ss10"`, `"ss11"`, `"ss12"` on Roobert creates a distinctive typographic personality. `ss01` is reserved for headings and emphasis — body text omits it, creating a subtle hierarchy through glyph variation.
-- **Aggressive display compression**: -3.2px at 80px, -2.4px at 60px — the most compressed display tracking alongside the most generous body spacing (1.60 line-height), creating dramatic contrast.
-- **Weight 600 for headings, 500 for UI, 400 for body**: Clean three-tier system where each weight has a strict role.
-- **Uppercase labels with positive tracking**: 12px uppercase at 1.08px letter-spacing creates the systematic wayfinding pattern.
-
-## 4. Component Stylings
-
-### Buttons
-
-**Primary (Transparent with Hover Animation)**
-- Background: transparent (`rgba(239, 241, 243, 0)`)
-- Text: `#000000`
-- Padding: 6.4px 12.8px
-- Border: none (or `1px solid #717989` for outlined variant)
-- Hover: background shifts to swatch color (e.g., `#434346`), text to white, `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `rgb(0,0,0) -7px 7px`
-- Focus: `rgb(20, 110, 245) solid 2px` outline
-
-**White Solid**
-- Background: `#ffffff`
-- Text: `#000000`
-- Padding: 6.4px
-- Hover: oat-200 swatch color, animated rotation + shadow
-- Use: Primary CTA on colored sections
-
-**Ghost Outlined**
-- Background: transparent
-- Text: `#000000`
-- Padding: 8px
-- Border: `1px solid #717989`
-- Radius: 4px
-- Hover: dragonfruit swatch color, white text, animated rotation
-
-### Cards & Containers
-- Background: `#ffffff` on cream canvas
-- Border: `1px solid #dad4c8` (warm oat) or `1px dashed #dad4c8`
-- Radius: 12px (standard cards), 24px (feature cards/images), 40px (section containers/footer)
-- Shadow: `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset, rgba(0,0,0,0.05) 0px -0.5px 1px`
-- Colorful section backgrounds using swatch palette (matcha, slushie, ube, lemon)
-
-### Inputs & Forms
-- Text: `#000000`
-- Border: `1px solid #717989`
-- Radius: 4px
-- Focus: `rgb(20, 110, 245) solid 2px` outline
-
-### Navigation
-- Sticky top nav on cream background
-- Roobert 15px weight 500 for nav links
-- Clay logo left-aligned
-- CTA buttons right-aligned with pill radius
-- Border bottom: `1px solid #dad4c8`
-- Mobile: hamburger collapse at 767px
-
-### Image Treatment
-- Product screenshots in white cards with oat borders
-- Colorful illustrated sections with swatch background colors
-- 8px–24px radius on images
-- Full-width colorful section backgrounds
-
-### Distinctive Components
-
-**Swatch Color Sections**
-- Full-width sections with swatch-colored backgrounds (matcha green, slushie cyan, ube purple, lemon gold)
-- White text on dark swatches, black text on light swatches
-- Each section tells a distinct product story through its color
-
-**Playful Hover Buttons**
-- Rotate -8deg + translate upward on hover
-- Hard offset shadow (`-7px 7px`) instead of soft blur
-- Background transitions to contrasting swatch color
-- Creates a physical, toy-like interaction quality
-
-**Dashed Border Elements**
-- Dashed borders (`1px dashed #dad4c8`) alongside solid borders
-- Used for secondary containers and decorative elements
-- Adds a hand-drawn, craft-like quality
-
-## 5. Layout Principles
-
-### Spacing System
-- Base unit: 8px
-- Scale: 1px, 2px, 4px, 6.4px, 8px, 12px, 12.8px, 16px, 18px, 20px, 24px
-
-### Grid & Container
-- Max content width centered
-- Feature sections alternate between white cards and colorful swatch backgrounds
-- Card grids: 2–3 columns on desktop
-- Full-width colorful sections break the grid
-- Footer with generous 40px radius container
-
-### Whitespace Philosophy
-- **Warm, generous breathing**: The cream background provides a warm rest between content blocks. Spacing is generous but not austere — it feels inviting, like a well-set table.
-- **Color as spatial rhythm**: The alternating swatch-colored sections create visual rhythm through hue rather than just whitespace. Each color section is its own "room."
-- **Craft-like density inside cards**: Within cards, content is compact and well-organized, contrasting with the generous outer spacing.
-
-### Border Radius Scale
-- Sharp (4px): Ghost buttons, inputs
-- Standard (8px): Small cards, images, links
-- Badge (11px): Tag badges
-- Card (12px): Standard cards, buttons
-- Feature (24px): Feature cards, images, panels
-- Section (40px): Large sections, footer, containers
-- Pill (1584px): CTAs, pill-shaped buttons
-
-## 6. Depth & Elevation
-
-| Level | Treatment | Use |
-|-------|-----------|-----|
-| Flat (Level 0) | No shadow, cream canvas | Page background |
-| Clay Shadow (Level 1) | `rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px inset, rgba(0,0,0,0.05) 0px -0.5px` | Cards, buttons — multi-layer with inset highlight |
-| Hover Hard (Level 2) | `rgb(0,0,0) -7px 7px` | Hover state — playful hard offset shadow |
-| Focus (Level 3) | `rgb(20, 110, 245) solid 2px` | Keyboard focus ring |
-
-**Shadow Philosophy**: Clay's shadow system is uniquely three-layered: a downward cast (`0px 1px 1px`), an upward inset highlight (`0px -1px 1px inset`), and a subtle edge (`0px -0.5px 1px`). This creates a "pressed into clay" quality where elements feel both raised AND embedded — like a clay tablet where content is stamped into the surface. The hover hard shadow (`-7px 7px`) is deliberately retro-graphic, referencing print-era drop shadows and adding physical playfulness.
-
-### Decorative Depth
-- Full-width swatch-colored sections create dramatic depth through color contrast
-- Dashed borders add visual texture alongside solid borders
-- Product illustrations with warm, organic art style
-
-## 7. Do's and Don'ts
-
-### Do
-- Use warm cream (`#faf9f7`) as the page background — the warmth is the identity
-- Apply all 5 OpenType stylistic sets on Roobert headings: `"ss01", "ss03", "ss10", "ss11", "ss12"`
-- Use the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry) for section backgrounds
-- Apply the playful hover animation: `rotateZ(-8deg)`, `translateY(-80%)`, hard shadow `-7px 7px`
-- Use warm oat borders (`#dad4c8`) — not neutral gray
-- Mix solid and dashed borders for visual variety
-- Use generous radius: 24px for cards, 40px for sections
-- Use weight 600 exclusively for headings, 500 for UI, 400 for body
-
-### Don't
-- Don't use cool gray backgrounds — the warm cream (`#faf9f7`) is non-negotiable
-- Don't use neutral gray borders (`#ccc`, `#ddd`) — always use the warm oat tones
-- Don't mix more than 2 swatch colors in the same section
-- Don't skip the OpenType stylistic sets — they define Roobert's character
-- Don't use subtle hover effects — the rotation + hard shadow is the signature interaction
-- Don't use small border radius (<12px) on feature cards — the generous rounding is structural
-- Don't use standard shadows (blur-based) — Clay uses hard offset and multi-layer inset
-- Don't forget the uppercase labels with 1.08px tracking — they're the wayfinding system
-
-## 8. Responsive Behavior
-
-### Breakpoints
-| Name | Width | Key Changes |
-|------|-------|-------------|
-| Mobile Small | <479px | Single column, tight padding |
-| Mobile | 479–767px | Standard mobile, stacked layout |
-| Tablet | 768–991px | 2-column grids, condensed nav |
-| Desktop | 992px+ | Full layout, 3-column grids, expanded sections |
-
-### Touch Targets
-- Buttons: minimum 6.4px + 12.8px padding for adequate touch area
-- Nav links: 15px font with generous spacing
-- Mobile: full-width buttons for easy tapping
-
-### Collapsing Strategy
-- Hero: 80px → 60px → smaller display text
-- Navigation: horizontal → hamburger at 767px
-- Feature sections: multi-column → stacked
-- Colorful sections: maintain full-width but compress padding
-- Card grids: 3-column → 2-column → single column
-
-### Image Behavior
-- Product screenshots scale proportionally
-- Colorful section illustrations adapt to viewport width
-- Rounded corners maintained across breakpoints
-
-## 9. Agent Prompt Guide
-
-### Quick Color Reference
-- Background: Warm Cream (`#faf9f7`)
-- Text: Clay Black (`#000000`)
-- Secondary text: Warm Silver (`#9f9b93`)
-- Border: Oat Border (`#dad4c8`)
-- Green accent: Matcha 600 (`#078a52`)
-- Cyan accent: Slushie 500 (`#3bd3fd`)
-- Gold accent: Lemon 500 (`#fbbd41`)
-- Purple accent: Ube 800 (`#43089f`)
-- Pink accent: Pomegranate 400 (`#fc7981`)
-
-### Example Component Prompts
-- "Create a hero on warm cream (#faf9f7) background. Headline at 80px Roobert weight 600, line-height 1.00, letter-spacing -3.2px, OpenType 'ss01 ss03 ss10 ss11 ss12', black text. Subtitle at 20px weight 400, line-height 1.40, #9f9b93 text. Two buttons: white solid pill (12px radius) and ghost outlined (4px radius, 1px solid #717989)."
-- "Design a colorful section with Matcha 800 (#02492a) background. Heading at 44px Roobert weight 600, letter-spacing -1.32px, white text. Body at 18px weight 400, line-height 1.60, #84e7a5 text. White card inset with oat border (#dad4c8), 24px radius."
-- "Build a button with playful hover: default transparent background, black text, 16px Roobert weight 500. On hover: background #434346, text white, transform rotateZ(-8deg) translateY(-80%), hard shadow rgb(0,0,0) -7px 7px."
-- "Create a card: white background, 1px solid #dad4c8 border, 24px radius. Shadow: rgba(0,0,0,0.1) 0px 1px 1px, rgba(0,0,0,0.04) 0px -1px 1px inset. Title at 32px Roobert weight 600, letter-spacing -0.64px."
-- "Design an uppercase label: 12px Roobert weight 600, text-transform uppercase, letter-spacing 1.08px, OpenType 'ss03 ss10 ss11 ss12'."
-
-### Iteration Guide
-1. Start with warm cream (#faf9f7) — never cool white
-2. Swatch colors are for full sections, not small accents — go bold with matcha, slushie, ube
-3. Oat borders (#dad4c8) everywhere — dashed variants for decoration
-4. OpenType stylistic sets are mandatory — they make Roobert look like Roobert
-5. Hover animations are the signature — rotation + hard shadow, not subtle fades
-6. Generous radius: 24px cards, 40px sections — nothing looks sharp or corporate
-7. Three weights: 600 (headings), 500 (UI), 400 (body) — strict roles
-
-## 10. Voice & Tone
-
-Clay's voice is **playfully irreverent + sales-team-fluent.** Marketing mixes GTM jargon ("outbound-sourced pipeline", "CRM enrichment") with disarming humor and motion (cards rotate on hover). The combination: "we know GTM is dry, we made the tool fun."
-
-| Context | Tone |
-|---|---|
-| CTA | Direct verb. "Get started", "Book a demo", "Start building for free" |
-| Marketing | Customer-quote-driven. "How Clay uses Clay" |
-| Error | Specific. "LinkedIn rate limit hit. Resume in 4 hours or upgrade plan." |
-| Documentation | Recipe-style, copy-paste examples |
-
-**Voice samples**
-- *"Start building for free"* <!-- verified: clay.com homepage 2026-05 -->
-- *"How Clay uses Clay"* <!-- verified: clay.com case studies -->
-
-**Forbidden phrases.** "AI-powered" without explanation. "10× your outbound" superlative. Aggressive sales pressure.
-
-## 11. Brand Narrative
-
-Clay was founded in **2017** by **Kareem Amin** (CEO) in New York ([Sequoia — Partnering with Clay](https://sequoiacap.com/article/partnering-with-clay-on-a-mission-to-grow/), [Kareem Amin LinkedIn](https://www.linkedin.com/in/kareemamin)). **Varun Anand** joined as **co-founder + Head of Operations in 2021** ([Inside Clay's unconventional path to $1.25B — First Round Review podcast](https://review.firstround.com/podcast/inside-clays-unconventional-path-to-1-25b/)). Pivot from no-code-platform to **GTM-data-platform** around 2021 when sales/RevOps teams emerged as the actual customers — "Spreadsheet for outbound" → GTM-specific Airtable. Now: **10,000+ customers**, **150+ integrated data sources**. Funding: **Series B expansion $40M at $1.25B valuation**, then **Series C $100M led by CapitalG** (Alphabet's independent growth fund) on 2025-08-05 ([BusinessWire](https://www.businesswire.com/news/home/20250805719448/en/AI-GTM-Leader-Clay-Raises-$100M-Series-C-to-Fuel-GTM-Engineering-Roles-Industrywide)). Clay coined the **"GTM Engineering"** role category — published for it as a signature marketing position.
-
-## 12. Principles
-
-1. **Cells are the unit.** *UI implication:* table-first canvas, no tabs above data plane.
-2. **Recipe-style, not magic.** Workflows show every step + provider. *UI implication:* every step editable, never opaque.
-3. **Hover is the play.** Cards rotate, shadows pop. *UI implication:* generous hover transitions on cards (rotate ~3deg + hard shadow `4px 4px 0 #000`).
-4. **Customer voice over marketing voice.** *UI implication:* case studies first-class nav.
-5. **Three weights, strict roles.** *UI implication:* never introduce 700 or 300.
-
-## 13. Personas
-
-*Personas are fictional archetypes informed by Clay user segments (RevOps, BDR managers, founders), not individual people.*
-
-**Yusuf Khan, 32, NYC.** RevOps lead at B2B SaaS. 15 nightly enrichment workflows.
-
-**Sarah Yoon, 27, San Francisco.** Founding BDR at Series A startup. Clay for list building + AI personalization.
-
-**Olivia Bennett, 45, London.** Agency founder running outbound for 12 clients. Workflow templates across clients.
-
-## 14. States
-
-| State | Treatment |
-|---|---|
-| **Empty (no workflows)** | Centered illustration + "Create your first workflow" CTA |
-| **Empty (no data in table)** | Inline "+ Add a column" / "+ Add a row" with playful arrows |
-| **Loading (enrichment)** | Per-cell spinner with elapsed time, cancellable |
-| **Loading (workflow run)** | Top-bar progress with step count |
-| **Error (provider failed)** | Cell shows red `#ef4444` border + tooltip with provider name |
-| **Error (rate limit)** | Banner with countdown to next-allowed time + upgrade CTA |
-| **Success (enrichment)** | Subtle green border pulse on cells, no toast |
-| **Success (workflow ran)** | Notification chip top-right, dismissible |
-| **Skeleton (table loading)** | Rotating skeleton cards (signature motion) |
-| **Disabled (preview-only)** | 0.6 opacity + lock icon overlay |
-| **Loading (AI generation)** | Per-row "AI is writing..." with cancel link |
-
-## 15. Motion & Easing
-
-| Token | Value | Use |
-|---|---|---|
-| `motion-instant` | 0ms | Cell commit |
-| `motion-fast` | 200ms | Hover (slower for rotation effect) |
-| `motion-rotate` | 300ms | Card rotation on hover |
-| `motion-shadow-snap` | 100ms | Hard shadow pop-in |
-| `motion-standard` | 300ms | Modal, panel |
-
-Easings: `ease-rotate cubic-bezier(0.4, 0, 0.2, 1)`, slight overshoot. **Hover rotation is the signature** — never disable except under `prefers-reduced-motion: reduce`.
-
----
-
-**Verified:** 2026-05-08 (B1 loop)
-**Tier 1 sources:** clay.com (live DOM via playwright — Black `#000000` Primary 12px / 8×16 / 42px / 16px·500; content cards 16px radius)
-**Tier 2 sources:** styles.refero.design / getdesign.md — no record.
-**Tier 1 (Philosophy):** clay.com homepage; founder LinkedIn / podcast appearances.
-**Style ref:** `stripe`. **Conflicts unresolved:** none.

package/.opencode/oh-my-design/web/references/clay/README.md

@@ -1,23 +0,0 @@
-# Clay Inspired Design System
-
-[DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) extracted from the public [Clay](https://clay.com/) website. This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. But it's a good starting point for building something similar.
-
-## Files
-
-| File | Description |
-|------|-------------|
-| `DESIGN.md` | Complete design system documentation (9 sections) |
-| `preview.html` | Interactive design token catalog (light) |
-| `preview-dark.html` | Interactive design token catalog (dark) |
-
-Use [DESIGN.md](https://github.com/VoltAgent/awesome-design-md/blob/main/design-md/clay/DESIGN.md) to use as a reference for AI agents (Claude, Cursor, Stitch) to generate UI that looks like the Clay design language.
-
-## Preview
-
-A sample landing page built with DESIGN.md. It shows the actual colors, typography, buttons, cards, spacing, and elevation, all in one page.
-
-### Dark Mode
-![Clay Design System — Dark Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-dark-screenshot.png)
-
-### Light Mode
-![Clay Design System — Light Mode](https://pub-2e4ecbcbc9b24e7b93f1a6ab5b2bc71f.r2.dev/designs/clay/preview-screenshot.png)