skills/creative/popular-web-designs/templates/clay.md
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">Use
write_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:
#faf9f7) with oat-toned borders (#dad4c8) — artisanal, not clinical0px 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)
#84e7a5): --_swatches---color--matcha-300, light green accent#078a52): --_swatches---color--matcha-600, mid green#02492a): --_swatches---color--matcha-800, deep green for dark sectionsSlushie (Cyan)
#3bd3fd): --_swatches---color--slushie-500, bright cyan accent#0089ad): --_swatches---color--slushie-800, deep tealLemon (Gold)
#f8cc65): --_swatches---color--lemon-400, warm pale gold#fbbd41): --_swatches---color--lemon-500, primary gold#d08a11): --_swatches---color--lemon-700, deep amber#9d6a09): --_swatches---color--lemon-800, dark amberUbe (Purple)
#c1b0ff): --_swatches---color--ube-300, soft lavender#43089f): --_swatches---color--ube-800, deep purple#32037d): --_swatches---color--ube-900, darkest purplePomegranate (Pink/Red)
#fc7981): --_swatches---color--pomegranate-400, warm coral-pinkBlueberry (Navy Blue)
#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)
rgba(239, 241, 243, 0))#0000001px solid #717989 for outlined variant)#434346), text to white, rotateZ(-8deg), translateY(-80%), hard shadow rgb(0,0,0) -7px 7pxrgb(20, 110, 245) solid 2px outlineWhite Solid
#ffffff#000000Ghost Outlined
#0000001px solid #717989#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
Playful Hover Buttons
-7px 7px) instead of soft blurDashed Border Elements
1px dashed #dad4c8) alongside solid borders| 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)