Hermes Agent — Implementation Notes
The original site uses proprietary fonts. For self-contained HTML output, use these CDN substitutes: - Primary:
DM Sans| Mono:system monospace stack- Font stack (CSS):font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;- Mono stack (CSS):font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;html <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">Usewrite_fileto create HTML, serve viagenerative-widgetsskill (cloudflared tunnel). Verify visual accuracy withbrowser_visionafter generating.
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
#000000): Text, headings, pricing card text, --_theme--pricing-cards---text#ffffff): Card backgrounds, button backgrounds, inverse text#faf9f7): Page background — the warm, paper-like canvasMatcha (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
#9f9b93): Secondary/muted text, footer links#55534e): Tertiary text, dark muted links#333333): Link text on light backgrounds#dad4c8): Primary border — warm, cream-toned structural lines#eee9df): Secondary lighter border#e6e8ec): Cool-toned border for contrast sections#525a69): Border on dark sections#eff1f3): Subtle button background (at 0% opacity on hover)#f0f8ff): Blue-tinted badge surface#3859f9): Vivid blue badge textrgb(20, 110, 245) solid 2px): Accessibility focus indicatorrgba(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 signaturergb(0,0,0) -7px 7px): Hover state — playful hard shadowRoobert, fallback: ArialSpace Mono"ss01", "ss03", "ss10", "ss11", "ss12" on all Roobert text (display uses all 5; body/UI uses "ss03", "ss10", "ss11", "ss12")| 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 |
"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.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
#ffffff on cream canvas1px solid #dad4c8 (warm oat) or 1px dashed #dad4c8rgba(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#0000001px solid #717989rgb(20, 110, 245) solid 2px outline1px solid #dad4c8Swatch 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
| 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.
#faf9f7) as the page background — the warmth is the identity"ss01", "ss03", "ss10", "ss11", "ss12"rotateZ(-8deg), translateY(-80%), hard shadow -7px 7px#dad4c8) — not neutral gray#faf9f7) is non-negotiable#ccc, #ddd) — always use the warm oat tones| 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 |
#faf9f7)#000000)#9f9b93)#dad4c8)#078a52)#3bd3fd)#fbbd41)#43089f)#fc7981)