skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-clay

Apply Clay's design system tokens, typography, and components when generating UI code.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#design tokens#clay#ui generation#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-clay-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-clay
Source: https://github.com/deepparser/skills/tree/main/design-clay
Command: npx skills add https://github.com/deepparser/skills --skill design-clay-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Recreating Clay's distinctive visual identity in UI work requires exact design tokens — colors, typography scales, shadows, and hover animations — that are tedious to reverse-engineer by hand. This Skill provides the complete token catalog so generated interfaces match Clay's brand accurately. ## Core Features & Use Cases - Complete Design Tokens: Exact hex values for the named swatch palette (Matcha, Slushie, Lemon, Ube, Pomegranate, Blueberry), warm cream backgrounds, and oat-toned borders. - Typography Specification: Roobert font hierarchy with five OpenType stylistic sets, precise sizes, weights, and letter-spacing values, plus Space Mono for code. - Signature Interactions: Playful hover animations (rotateZ(-8deg), translateY(-80%), hard offset shadow) and the multi-layer inset shadow system. - Use Case: When asked to build a landing page or dashboard styled like Clay, the Skill supplies every CSS value needed — from the 24px card radius to the dashed border variants — plus light and dark HTML previews for visual verification. ## Quick Start Build a landing page hero section styled like Clay with the warm cream background, Roobert display typography, and playful hover buttons.

Frequently Asked Questions about design-clay

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like Clay's design?▼

Use warm cream (#faf9f7) as the page background, Roobert font at weight 600 for headings with negative letter-spacing, and the named swatch palette (Matcha, Slushie, Lemon, Ube) for section backgrounds. Add the signature hover animation with rotateZ(-8deg) and a hard offset shadow.

What colors does the Clay design system use?▼

Clay uses a warm cream background (#faf9f7), black text, oat borders (#dad4c8), and a named swatch palette: Matcha green, Slushie cyan, Lemon gold, Ube purple, Pomegranate pink, and Blueberry navy, each in multiple shades.

What font does Clay use and how do I replicate it?▼

Clay uses Roobert, a geometric sans-serif, with five OpenType stylistic sets (ss01, ss03, ss10, ss11, ss12) that define its character. Space Mono serves as the monospace companion. Display headings use aggressive negative tracking down to -3.2px at 80px.

Does the Clay design system support dark mode?▼

Yes, the Skill includes a dark theme preview (preview-dark.html) that inverts the cream canvas to a dark warm tone while preserving the swatch palette, shadow system, and component structure for verification.

What makes Clay's button hover effect unique?▼

Clay buttons rotate -8 degrees, translate upward, switch to a contrasting swatch background, and cast a hard offset shadow (rgb(0,0,0) -7px 7px) on hover. This retro print-style shadow replaces typical soft blur shadows.

Related Skills

Explore More Design & Creative Skills→
samuelgabrielsikorjak-syssamuelgabrielsikorjak-sys

frontend-design

Guides distinctive visual design decisions for building new UI or reshaping existing interfaces.

Community
Intermediate
ScarletFishScarletFish

icon-design

Generate SVG and PNG icons with React or Vue component code.

Community
Advanced
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
oakossoakoss
14

brand-designer

Generate cohesive brand identities with SVG logos, Tailwind color tokens, and typography systems.

Official
Advanced