Design System: 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 (24px40px 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