skills.rest
guideops
guideopsCOMMUNITY
Explore all skills by this author →
GitHub

claymorphism

Provide claymorphism design system guidelines with color tokens and typography scales.

Updated Jun 23, 2026
Search Tags:#typography#design system#UI design#visual style#claymorphism
One-click install
npx skills add https://github.com/guideops/agentic-shared --skill claymorphism-guideops
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: claymorphism
Source: https://github.com/guideops/agentic-shared/tree/main/skills/awesome-design-skills/styles/claymorphism
Command: npx skills add https://github.com/guideops/agentic-shared --skill claymorphism-guideops

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill provides design guidelines for creating modern, playful interfaces with claymorphism style, addressing the need for a consistent and accessible visual language.

Core Features & Use Cases

  • Style Foundations: Offers detailed guidelines on visual style, typography, color palette, and spacing.
  • Typography Scale: Desktop-first expressive scale with specific font families and weights.
  • Color Palette: Comprehensive set of colors including primary, secondary, success, warning, danger, surface, text, and neutral.
  • Use Case: Designers and engineers can use this Skill to ensure their interfaces adhere to the claymorphism style, enhancing the user experience with playful, 3D-like shapes.

Quick Start

Use the claymorphism skill to implement the claymorphism style in your design system.

Frequently Asked Questions about claymorphism

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

FAQPage Schema
What is claymorphism UI design and how does it work?▼

Claymorphism is a visual style for UI design that uses modern, high-contrast, playful 3D-like shapes to create a consistent and accessible visual language. It defines specific color tokens, typography scales, and spacing guidelines for design systems.

How do I implement claymorphism style in my design system?▼

To implement claymorphism style, apply the provided design system guidelines focusing on expressive typography scales, comprehensive color palettes including primary, secondary, and surface colors, and specific spacing rules. Use these tokens to build UI components with a consistent visual language.

Does claymorphism design include specific color and typography tokens?▼

Yes, claymorphism design provides a comprehensive set of color tokens including primary, secondary, success, warning, danger, surface, text, and neutral, alongside a desktop-first expressive typography scale with specific font families and weights.

Can I use claymorphism guidelines for accessible UI components?▼

Yes, you can use claymorphism guidelines for accessible UI components. The style focuses on creating a consistent and accessible visual language using high-contrast elements and structured spacing guidelines suitable for design systems.

What design principles do I need to know for claymorphism?▼

You need an understanding of design principles and best practices for claymorphism. This foundational knowledge is required to effectively apply the provided style foundations, color palette, and typography scale to your UI components.

Related Skills

Explore More Design & Creative Skills→
guideopsguideops

refined

Provide web UI style foundations with color, typography, spacing, and responsive behaviors.

Community
Advanced
dev-mirzabicerdev-mirzabicer

frontend-ui-ux

Translate design briefs into production-ready frontend UI components.

Community
Advanced
Equat-ionEquat-ion

neobrutalism

Generate Neobrutalism design tokens for typography, color, and spacing.

Community
Intermediate
Sir-chawakornSir-chawakorn
33

design-mastery

Implement Glassmorphism and Neumorphism design patterns for modern UI.

Community
Intermediate